:root{--bg-primary:#0a0a0f;--bg-secondary:#13131a;--bg-card:rgba(20,20,30,0.85);--bg-glass:rgba(255,255,255,0.04);--bg-sidebar:#0d0d12;--text-primary:#fff;--text-secondary:#a1a1aa;--text-muted:#71717a;--accent-primary:#3b82f6;--accent-secondary:#14b8a6;--accent-tertiary:#0ea5e9;--accent-pink:#1d4ed8;--accent-gradient:linear-gradient(135deg,#3b82f6 0,#14b8a6 100%);--accent-gradient-cyan:linear-gradient(135deg,#14b8a6 0,#3b82f6 100%);--accent-gradient-subtle:linear-gradient(135deg,rgba(59,130,246,0.18) 0,rgba(20,184,166,0.16) 100%);--success:#10b981;--warning:#f59e0b;--error:#ef4444;--border-color:rgba(59,130,246,0.14);--border-glow:rgba(59,130,246,0.22);--shadow:0 8px 32px rgba(0,0,0,0.4);--shadow-glow:0 0 40px rgba(59,130,246,0.12);--shadow-glow-pink:0 0 30px rgba(20,184,166,0.1);--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--sidebar-width:280px;--font-main:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--transition:all .25s cubic-bezier(0.4,0,0.2,1);--transition-slow:all .4s cubic-bezier(0.4,0,0.2,1);--transition-bounce:all .5s cubic-bezier(0.34,1.56,0.64,1)}[data-theme="light"]{--bg-primary:#fafafc;--bg-secondary:#f0f0f5;--bg-card:rgba(255,255,255,0.98);--bg-glass:rgba(59,130,246,0.05);--bg-sidebar:#fff;--bg-input:rgba(245,245,250,1);--text-primary:#0f0f10;--text-secondary:#3f3f46;--text-muted:#52525b;--border-color:rgba(59,130,246,0.18);--shadow:0 8px 32px rgba(59,130,246,0.1)}[data-theme="light"] body{background-image:radial-gradient(ellipse at top left,rgba(59,130,246,0.07) 0,transparent 55%),radial-gradient(ellipse at bottom right,rgba(20,184,166,0.05) 0,transparent 55%)}.theme-toggle{margin-right:8px}[data-theme="light"] .icon-sun{display:none}[data-theme="light"] .icon-moon{display:block !important}[data-theme="light"] .sidebar{background:linear-gradient(180deg,#fff 0,#fafafc 100%);border-right-color:rgba(59,130,246,0.15)}[data-theme="light"] .nav-item{color:#3f3f46}[data-theme="light"] .nav-item:hover{color:#18181b;background:rgba(59,130,246,0.08)}[data-theme="light"] .nav-item.active{color:var(--accent-primary);background:rgba(59,130,246,0.12)}[data-theme="light"] .setting-item span{color:#3f3f46}[data-theme="light"] .input-container textarea{background:#fff;border-color:rgba(59,130,246,0.22);color:#0f0f10}[data-theme="light"] .input-container textarea::placeholder{color:#71717a}[data-theme="light"] .message-item{background:rgba(59,130,246,0.04)}[data-theme="light"] .message-item:hover{background:rgba(59,130,246,0.08)}[data-theme="light"] .message-content{color:#18181b}[data-theme="light"] .sidebar-section h3{color:#52525b}[data-theme="light"] .stat-value{color:var(--accent-primary)}[data-theme="light"] .room-id{background:linear-gradient(135deg,#2563eb 0,#14b8a6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-main);background:var(--bg-primary);background-image:radial-gradient(ellipse at 20% 0,rgba(59,130,246,0.12) 0,transparent 55%),radial-gradient(ellipse at 80% 40%,rgba(20,184,166,0.1) 0,transparent 55%);color:var(--text-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 30%,rgba(59,130,246,0.05) 0,transparent 25%),radial-gradient(circle at 70% 60%,rgba(20,184,166,0.04) 0,transparent 25%),radial-gradient(circle at 50% 80%,rgba(14,165,233,0.03) 0,transparent 25%);animation:floatingOrbs 40s ease-in-out infinite;z-index:-1;pointer-events:none;will-change:transform;transform:translateZ(0)}@keyframes floatingOrbs{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(1%,2%,0) rotate(1deg)}}.sidebar{position:fixed;left:0;top:0;width:var(--sidebar-width);height:100vh;background:linear-gradient(180deg,var(--bg-sidebar) 0,rgba(13,13,18,0.98) 100%);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:1000;transform:translateX(-100%) !important;visibility:hidden;transition:var(--transition-slow);box-shadow:4px 0 30px rgba(0,0,0,0.5)}.sidebar::after{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-pink) 100%);opacity:.5}.sidebar.open{transform:translateX(0) !important;visibility:visible}.sidebar-header{display:flex;align-items:center;gap:14px;padding:24px 20px;border-bottom:1px solid var(--border-color)}.sidebar-logo{width:44px;height:44px;border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(59,130,246,0.22)}.sidebar-header h2{flex:1;font-size:1.3rem;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 18px rgba(59,130,246,0.18)}.sidebar-close{color:var(--text-muted)}.sidebar-nav{padding:18px 14px;display:flex;flex-direction:column;gap:6px}.nav-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;transition:var(--transition);font-weight:500;position:relative;overflow:hidden}.nav-item:hover{background:rgba(59,130,246,0.08);color:var(--text-primary);transform:translateX(4px)}.nav-item.active{background:linear-gradient(135deg,rgba(59,130,246,0.18) 0,rgba(20,184,166,0.14) 100%);color:var(--accent-primary);box-shadow:none}.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--accent-gradient);border-radius:0 2px 2px 0}.nav-item svg{flex-shrink:0;transition:var(--transition)}.nav-item:hover svg,.nav-item.active svg{filter:drop-shadow(0 0 6px currentColor)}.sidebar-section{flex:1;padding:16px;overflow-y:auto;border-top:1px solid var(--border-color)}.sidebar-section h3{font-size:.875rem;color:var(--text-muted);margin-bottom:12px}.history-list{display:flex;flex-direction:column;gap:8px}.history-item{padding:10px 12px;background:var(--bg-glass);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.history-item:hover{background:rgba(255,255,255,0.06)}.history-item .preview{font-size:.8rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item .time{font-size:.7rem;color:var(--text-muted);margin-top:4px}.history-empty{text-align:center;color:var(--text-muted);font-size:.875rem;padding:20px}.sidebar-footer{padding:16px;border-top:1px solid var(--border-color)}.stats{display:flex;gap:20px;margin-bottom:12px}.stat-item{text-align:center}.stat-value{display:block;font-size:1.25rem;font-weight:600;color:var(--accent-secondary)}.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase}.sidebar-footer .version{font-size:.7rem;color:var(--text-muted);text-align:center}.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999;opacity:0;visibility:hidden;transition:var(--transition)}.sidebar-overlay.active{opacity:1;visibility:visible}.app-container{max-width:900px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin-bottom:24px}.header-left{display:flex;align-items:center;gap:16px}.menu-btn{display:flex;color:var(--text-secondary)}.menu-btn:hover{color:var(--accent-primary)}.logo{display:flex;align-items:center;gap:16px}.logo-img{width:48px;height:48px;border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(59,130,246,0.22),0 0 30px rgba(20,184,166,0.12);transition:var(--transition)}.logo-img:hover{transform:scale(1.05) rotate(3deg);box-shadow:0 8px 30px rgba(59,130,246,0.28),0 0 45px rgba(20,184,166,0.16)}.logo-text h1{font-size:1.6rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.logo-text .tagline{font-size:.8rem;color:var(--text-muted);display:block;margin-top:2px}.connection-status{display:flex;align-items:center;gap:10px;padding:10px 18px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.22);border-radius:100px;font-size:.875rem;font-weight:500;backdrop-filter:blur(10px);transition:var(--transition)}.connection-status:hover{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.3)}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--warning);animation:statusPulse 2s ease-in-out infinite;box-shadow:0 0 10px var(--warning)}.connection-status.connected .status-dot{background:var(--success);box-shadow:0 0 12px var(--success),0 0 24px rgba(16,185,129,0.5);animation:connectedGlow 2s ease-in-out infinite}.connection-status.disconnected .status-dot{background:var(--error);box-shadow:0 0 12px var(--error);animation:none}@keyframes statusPulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 10px var(--warning)}50%{opacity:.6;transform:scale(0.85);box-shadow:0 0 20px var(--warning)}}@keyframes connectedGlow{0%,100%{box-shadow:0 0 12px var(--success),0 0 24px rgba(16,185,129,0.5)}50%{box-shadow:0 0 16px var(--success),0 0 32px rgba(16,185,129,0.7)}}.glass{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);box-shadow:0 8px 32px rgba(0,0,0,0.2);position:relative}.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:linear-gradient(135deg,rgba(59,130,246,0.16) 0,transparent 50%,rgba(20,184,166,0.12) 100%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5;transition:opacity .3s ease}.glass:hover::before{opacity:1}.room-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-radius:var(--radius-lg);margin-bottom:24px}.room-info label{display:block;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.room-id-container{display:flex;align-items:center;gap:8px}.room-id{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;letter-spacing:3px;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.room-actions{display:flex;gap:8px}.device-count{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--text-secondary)}.device-count svg{color:var(--accent-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:.875rem;font-weight:600;border:0;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);white-space:nowrap;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent,rgba(255,255,255,0.1),transparent);transform:translateX(-100%);transition:transform .5s}.btn:hover::before{transform:translateX(100%)}.btn-primary{background:var(--accent-gradient);color:white;box-shadow:0 8px 22px rgba(59,130,246,0.22);text-shadow:0 1px 2px rgba(0,0,0,0.2)}.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 30px rgba(59,130,246,0.28)}.btn-primary:active{transform:translateY(-1px) scale(0.98)}.btn-secondary{background:rgba(59,130,246,0.08);color:var(--text-primary);border:1px solid rgba(59,130,246,0.22);backdrop-filter:blur(8px)}.btn-secondary:hover{background:rgba(59,130,246,0.12);border-color:var(--accent-primary);box-shadow:none;transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:0;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.btn-icon:hover{background:rgba(59,130,246,0.1);color:var(--accent-primary);transform:scale(1.1)}.btn-icon:active{transform:scale(0.95)}.btn svg,.btn-icon svg{transition:var(--transition)}.btn:hover svg,.btn-icon:hover svg{filter:drop-shadow(0 0 5px currentColor)}.card{border-radius:var(--radius-lg);padding:28px;margin-bottom:24px;transition:var(--transition)}.card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.4),0 0 50px rgba(59,130,246,0.08)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.card-header h2{display:flex;align-items:center;gap:12px;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.card-header h2 svg{color:var(--accent-primary);filter:drop-shadow(0 0 6px rgba(59,130,246,0.22))}.char-count{font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono);padding:4px 10px;background:rgba(59,130,246,0.08);border-radius:var(--radius-sm)}.input-container textarea{width:100%;min-height:150px;padding:18px;background:rgba(0,0,0,0.3);border:1px solid rgba(59,130,246,0.18);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-main);font-size:1rem;line-height:1.7;resize:vertical;transition:var(--transition)}.input-container textarea:focus{outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(59,130,246,0.16),0 0 24px rgba(59,130,246,0.06);background:rgba(0,0,0,0.4)}.input-container textarea::placeholder{color:var(--text-muted);opacity:.7}.input-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}.output-container{min-height:180px;max-height:400px;overflow-y:auto;padding:4px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 20px;text-align:center}.empty-state .empty-icon{font-size:4rem;margin-bottom:20px;transition:transform .3s ease}.empty-state:hover .empty-icon{transform:translateY(-6px)}.empty-state p{color:var(--text-secondary);font-weight:600;font-size:1.1rem;margin-bottom:6px}.empty-state span{color:var(--text-muted);font-size:.9rem}.message-item{padding:16px 18px;background:rgba(0,0,0,0.25);border-radius:var(--radius-md);margin-bottom:12px;border-left:3px solid;border-image:linear-gradient(180deg,var(--accent-secondary) 0,var(--accent-primary) 100%) 1;animation:slideIn .4s cubic-bezier(0.34,1.56,0.64,1);transition:var(--transition);position:relative}.message-item:hover{background:rgba(0,0,0,0.35);transform:translateX(4px);box-shadow:0 4px 20px rgba(0,0,0,0.2)}.message-item.own{border-image:linear-gradient(180deg,var(--accent-primary) 0,var(--accent-pink) 100%) 1;background:rgba(59,130,246,0.06)}.message-item.own:hover{background:rgba(59,130,246,0.09)}@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.8rem;color:var(--text-muted)}.message-from{color:var(--accent-secondary);font-weight:600;display:flex;align-items:center;gap:6px}.message-from::before{content:'';width:6px;height:6px;background:var(--accent-secondary);border-radius:50%;box-shadow:0 0 8px var(--accent-secondary)}.message-content{font-size:.95rem;word-break:break-word;white-space:pre-wrap;color:var(--text-primary);line-height:1.6}.message-actions{display:flex;gap:6px;margin-top:12px;opacity:0;transition:var(--transition)}.message-item:hover .message-actions{opacity:1}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);display:flex;align-items:flex-start;justify-content:center;padding:20px;padding-top:60px;padding-bottom:100px;z-index:1100;opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility .2s ease-out;overflow-y:auto}.modal.active{opacity:1;visibility:visible}.modal-content{width:100%;max-width:420px;padding:28px;border-radius:var(--radius-xl);transform:translateY(10px);opacity:0;transition:transform .2s ease-out,opacity .15s ease-out;flex-shrink:0}.modal.active .modal-content{transform:translateY(0);opacity:1}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h2{font-size:1.25rem;font-weight:600}.modal-close{color:var(--text-secondary)}.qr-container{display:flex;justify-content:center;padding:24px;background:white;border-radius:var(--radius-md);margin-bottom:20px}.qr-container canvas{max-width:220px;height:auto}.qr-hint{text-align:center;font-size:.875rem;color:var(--text-secondary);margin-bottom:20px}.room-url-container{display:flex;gap:8px}.room-url-container input{flex:1;padding:12px 14px;background:rgba(0,0,0,0.3);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.8rem;font-family:var(--font-mono)}.join-form,.pin-form{text-align:center}.join-form p,.pin-form p{color:var(--text-secondary);margin-bottom:24px;font-size:.9rem}.join-form input,.pin-form input{width:100%;padding:16px;background:rgba(0,0,0,0.3);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1.5rem;font-family:var(--font-mono);text-align:center;text-transform:uppercase;letter-spacing:6px;margin-bottom:24px}.join-form input:focus,.pin-form input:focus{outline:0;border-color:var(--accent-primary)}.join-actions,.pin-actions{display:flex;flex-direction:column;gap:12px}.divider{color:var(--text-muted);font-size:.8rem;padding:8px 0}.toast-container{position:fixed;bottom:28px;right:28px;z-index:1001;display:flex;flex-direction:column;gap:12px}.toast{padding:16px 22px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,0.18);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(0,0,0,0.4);animation:toastIn .4s cubic-bezier(0.34,1.56,0.64,1);display:flex;align-items:center;gap:14px;font-size:.9rem;font-weight:500;max-width:360px}.toast.success{border-left:4px solid var(--success);box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 30px rgba(16,185,129,0.15)}.toast.error{border-left:4px solid var(--error);box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 30px rgba(239,68,68,0.15)}.toast.info{border-left:4px solid var(--accent-primary);box-shadow:0 8px 32px rgba(0,0,0,0.4)}@keyframes toastIn{from{opacity:0;transform:translateX(100%) scale(0.8)}to{opacity:1;transform:translateX(0) scale(1)}}.footer{margin-top:auto;padding:24px 0;text-align:center;font-size:.8rem;color:var(--text-muted)}.footer strong{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:rgba(59,130,246,0.04);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(59,130,246,0.35) 0,rgba(20,184,166,0.35) 100%);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(59,130,246,0.5) 0,rgba(20,184,166,0.5) 100%)}@media(max-width:768px){.app-container{padding:12px}.header{gap:12px}.logo-text .tagline{display:none}.room-bar{flex-direction:column;text-align:center;padding:16px}.room-actions{width:100%;justify-content:center}.btn-text{display:none}.input-actions{flex-direction:column}.btn{width:100%;justify-content:center}.toast-container{left:12px;right:12px}.toast{max-width:none}}@media(min-width:1024px){.sidebar{transform:translateX(0)}.app-container{margin-left:var(--sidebar-width);max-width:calc(900px + var(--sidebar-width))}.menu-btn{display:none}.sidebar-close{display:none}.sidebar-overlay{display:none}}.loading{display:inline-block;width:24px;height:24px;border:2px solid rgba(59,130,246,0.22);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 12px rgba(59,130,246,0.16)}@keyframes spin{to{transform:rotate(360deg)}}::selection{background:rgba(59,130,246,0.22);color:var(--text-primary)}.settings-list{display:flex;flex-direction:column;gap:12px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-glass);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}.setting-item:hover{background:rgba(255,255,255,0.06)}.setting-item span{color:var(--text-secondary);font-size:.875rem}.toggle{position:relative;width:48px;height:26px;appearance:none;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.18);border-radius:13px;cursor:pointer;transition:var(--transition)}.toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--text-muted);border-radius:50%;transition:var(--transition-bounce);box-shadow:0 2px 6px rgba(0,0,0,0.2)}.toggle:checked{background:var(--accent-gradient);border-color:transparent;box-shadow:0 0 18px rgba(59,130,246,0.18)}.toggle:checked::after{left:25px;background:white;box-shadow:0 2px 8px rgba(0,0,0,0.3)}.btn-full{width:100%}.qr-scanner-container{margin:16px 0;border-radius:var(--radius-md);overflow:hidden;background:#000}.qr-scanner-container video{width:100%;max-height:250px;object-fit:cover;border-radius:var(--radius-md)}.scanner-hint{text-align:center;padding:8px;font-size:.8rem;color:var(--text-muted);background:var(--bg-secondary)}.message-item.highlight{animation:highlight 2s ease}@keyframes highlight{0%{background:rgba(59,130,246,0.22);box-shadow:0 0 26px rgba(59,130,246,0.12)}100%{background:rgba(0,0,0,0.25);box-shadow:none}}#qrPlaceholder{display:flex;justify-content:center;align-items:center;min-height:200px}#qrPlaceholder img{border-radius:8px}.shortcut-hint{display:inline-block;padding:2px 6px;background:var(--bg-secondary);border-radius:4px;font-size:.7rem;font-family:var(--font-mono);color:var(--text-muted);margin-left:8px}@media(max-width:480px){.room-actions{flex-wrap:wrap;gap:8px}.room-actions .btn{flex:1;min-width:calc(50% - 4px)}}.connection-status.connecting .status-dot{animation:pulse 1s infinite}.modal-large{max-width:700px;max-height:80vh;display:flex;flex-direction:column}.history-modal-content{flex:1;overflow-y:auto;max-height:50vh;padding:16px 0}.history-list-full{display:flex;flex-direction:column;gap:12px}.history-item-full{padding:16px;background:rgba(0,0,0,0.2);border-radius:var(--radius-md);border-left:3px solid var(--accent-secondary);cursor:pointer;transition:var(--transition)}.history-item-full:hover{background:rgba(0,0,0,0.3);border-left-color:var(--accent-primary)}.history-item-full .history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.75rem;color:var(--text-muted)}.history-item-full .history-content{font-family:var(--font-mono);font-size:.85rem;color:var(--text-primary);white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:rgba(0,0,0,0.2);padding:12px;border-radius:var(--radius-sm)}.history-item-full .history-actions{display:flex;gap:8px;margin-top:12px}.btn-link{background:0;border:0;color:var(--accent-primary);font-size:.8rem;cursor:pointer;padding:4px 0;margin-top:4px}.btn-link:hover{text-decoration:underline}.load-more-btn{width:100%;padding:14px;margin-top:16px;text-align:center}.modal-footer{padding-top:16px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:12px}.history-hint{font-size:.8rem;color:var(--text-muted);margin-bottom:12px}#scanCanvas{display:none}.btn-sm{padding:6px 12px;font-size:.75rem}.room-info-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(59,130,246,0.08);border-radius:var(--radius-md);margin-bottom:16px;border:1px solid rgba(59,130,246,0.18)}.room-id-display{display:flex;align-items:center;gap:8px}.room-id-display .label{font-size:.75rem;color:var(--text-muted)}.room-id-display .room-id-value{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--accent-primary);letter-spacing:2px}.device-count-mini{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-secondary)}.messages-modal-content{max-height:50vh;overflow-y:auto;margin-bottom:16px;-webkit-overflow-scrolling:touch}.messages-list-full{display:flex;flex-direction:column;gap:12px}.messages-empty{text-align:center;color:var(--text-muted);padding:40px 20px}.message-send-bar{display:flex;gap:12px;padding-top:12px;border-top:1px solid var(--border-color)}.message-send-bar input{flex:1;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:.9rem}.message-send-bar input:focus{outline:0;border-color:var(--accent-primary)}.message-send-bar .btn{flex-shrink:0;padding:12px 16px}.message-item-full{padding:12px 16px;background:rgba(0,0,0,0.2);border-radius:var(--radius-md);border-left:3px solid var(--accent-primary)}.message-item-full.own{border-left-color:var(--accent-secondary)}.message-item-full .msg-header{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-bottom:8px}.message-item-full .msg-content{font-family:var(--font-mono);font-size:.85rem;white-space:pre-wrap;word-break:break-all;max-height:150px;overflow-y:auto}.message-item-full .msg-actions{display:flex;gap:8px;margin-top:8px}.seo-content{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:60px 24px}.seo-content-inner{max-width:900px;margin:0 auto}.section-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:40px 0 16px}.section-title:first-child{margin-top:0}.seo-content p{color:var(--text-secondary);line-height:1.8;font-size:1rem;margin-bottom:16px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:28px}.feature-item{background:linear-gradient(135deg,rgba(20,20,30,0.9) 0,rgba(13,13,18,0.95) 100%);border:1px solid rgba(59,130,246,0.18);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;transition:var(--transition);position:relative;overflow:hidden}.feature-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,0.08) 0,rgba(20,184,166,0.05) 100%);opacity:0;transition:var(--transition)}.feature-item:hover{transform:translateY(-6px);border-color:rgba(59,130,246,0.26);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 0 40px rgba(59,130,246,0.08)}.feature-item:hover::before{opacity:1}.feature-icon{font-size:3rem;display:block;margin-bottom:16px;position:relative;z-index:1;animation:iconFloat 3s ease-in-out infinite;animation-delay:calc(var(--icon-delay, 0) * 0.2s)}.feature-item:nth-child(1){--icon-delay:0}.feature-item:nth-child(2){--icon-delay:1}.feature-item:nth-child(3){--icon-delay:2}.feature-item:nth-child(4){--icon-delay:3}.feature-item:nth-child(5){--icon-delay:4}.feature-item:nth-child(6){--icon-delay:5}@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.feature-item h3{font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:10px;position:relative;z-index:1}.feature-item p{font-size:.9rem;color:var(--text-muted);margin:0;position:relative;z-index:1;line-height:1.5}.main-footer{background:var(--bg-primary);border-top:1px solid var(--border-color);padding:40px 24px}.footer-inner{max-width:1200px;margin:0 auto;text-align:center}.main-footer .footer-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}.main-footer .footer-logo{width:32px;height:32px;border-radius:6px}.footer-name{font-size:1.25rem;font-weight:600;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-footer .footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-bottom:20px}.main-footer .footer-nav a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;transition:var(--transition)}.main-footer .footer-nav a:hover{color:var(--accent-primary)}.footer-copyright{color:var(--text-muted);font-size:.8rem}@media(max-width:768px){.seo-content{padding:40px 16px}.section-title{font-size:1.25rem}.features-grid{grid-template-columns:1fr 1fr;gap:16px}.feature-item{padding:16px}.feature-icon{font-size:2rem}}@media(max-width:480px){.features-grid{grid-template-columns:1fr}}.usp-highlight{background:linear-gradient(135deg,rgba(59,130,246,0.15) 0,rgba(20,184,166,0.15) 100%);border:1px solid rgba(59,130,246,0.3);border-radius:var(--radius-lg);padding:28px;margin-bottom:32px;text-align:center}.usp-highlight .section-title{color:var(--accent-secondary);margin-bottom:16px}.usp-highlight p{font-size:1.05rem;line-height:1.7}.steps-list-seo{list-style:none;counter-reset:steps;padding-left:0;margin:20px 0}.steps-list-seo li{counter-increment:steps;position:relative;padding-left:48px;margin-bottom:16px;font-size:1rem;line-height:1.6}.steps-list-seo li::before{content:counter(steps);position:absolute;left:0;top:0;width:32px;height:32px;background:var(--accent-gradient);color:white;font-weight:600;font-size:.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center}@media(min-width:1200px){.features-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:769px) and (max-width:1199px){.features-grid{grid-template-columns:repeat(3,1fr)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}body::before{animation:none !important}}.modal,.sidebar,.fab-main,.radial-menu,.radial-item,.toast,.card{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}@media(max-width:768px){.btn{min-height:44px;min-width:44px}.btn-icon{width:44px;height:44px}*{transition-duration:.15s !important}}.modal-content,.sidebar-section,.output-section,.history-list-full{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.seo-content,.features-grid,.footer{content-visibility:auto;contain-intrinsic-size:0 500px}.sidebar-close{min-width:44px;min-height:44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1) !important;border-radius:50%;cursor:pointer;z-index:10;transition:all .2s ease}.sidebar-close:hover{background:rgba(239,68,68,0.2) !important;color:var(--error);transform:scale(1.1)}.sidebar-close:active{transform:scale(0.95)}body{background-color:var(--bg-primary) !important;color:var(--text-primary)}.sidebar:not(.open){transform:translateX(-100%) !important;visibility:hidden !important;pointer-events:none !important}.sidebar-overlay.active{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;background:rgba(0,0,0,0.7) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999 !important}@media(max-width:768px){.card{border-radius:var(--radius-lg);background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color)}.btn{transition:transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(0.97)}.modal-content{animation:slideUp .3s ease-out;border-radius:var(--radius-xl);max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch}textarea,input[type="text"],input[type="password"] {
 font-size: 16px !important; /* Prevents iOS zoom */
 border-radius: var(--radius-md);
 background: var(--bg-secondary);
 color: var(--text-primary);
 }
 
 /* Bottom nav spacing */
 .bottom-nav-bar {
 padding-bottom: env(safe-area-inset-bottom, 8px);
 }
}

/* Smooth slide up animation */
@keyframes slideUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* Messages modal improvements */
.modal-content input[type="text"] {
 background: var(--bg-secondary);
 border: 1px solid var(--border-color);
 color: var(--text-primary);
 padding: 12px 16px;
 border-radius: var(--radius-md);
}

.modal-content input[type="text"]:focus {
 border-color: var(--accent-primary);
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
 outline: none;
}

/* Room card enhancements */
.room-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-lg);
 padding: 20px;
 text-align: center;
}

.room-card .room-id {
 font-family: var(--font-mono);
 font-size: 1.8rem;
 font-weight: 700;
 background: var(--accent-gradient);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

/* Action buttons grid */
.action-buttons {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}

.action-buttons .btn {
 padding: 14px 20px;
 border-radius: var(--radius-md);
 font-weight: 500;
}

/* Welcome Modal Styles */
.welcome-modal {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    padding: 32px 24px;
}

.welcome-modal h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 0.95rem;
}

.welcome-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.welcome-options .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    width: 100%;
}

.welcome-options .btn-lg {
    min-height: 56px;
}

.welcome-options .btn-primary {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.22);
}

.welcome-options .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28);
}

.welcome-options .btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.welcome-options .btn-secondary:hover {
    background: var(--bg-glass);
    border-color: var(--accent-primary);
}

.welcome-options .btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
}

.welcome-options .btn-outline:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    border-style: solid;
}

.welcome-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.welcome-divider::before,
.welcome-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);

}

.welcome-hint {
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--bg-glass);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
}

.social-link.telegram:hover {
    border-color: #08c;
    color: #08c;
}

.made-in-india {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin: 20px auto;
    width: fit-content;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.made-in-india .flag {
    font-size: 1.2rem;
}

/* --- Theme tone-down overrides (avoid neon/glow “cam-site” look) --- */
:root {
    --accent-primary: #3b82f6;
    --accent-secondary: #14b8a6;
    --accent-tertiary: #0ea5e9;
    --accent-pink: #1d4ed8;

    --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
    --accent-gradient-cyan: linear-gradient(135deg, #14b8a6 0%, #3b82f6 100%);
    --accent-gradient-subtle: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.18) 0%,
        rgba(20, 184, 166, 0.16) 100%
    );

    --border-color: rgba(59, 130, 246, 0.14);
    --border-glow: rgba(59, 130, 246, 0.22);
    --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.12);
    --shadow-glow-pink: 0 0 30px rgba(20, 184, 166, 0.1);
}

[data-theme="light"] {
    --bg-glass: rgba(59, 130, 246, 0.05);
    --border-color: rgba(59, 130, 246, 0.18);
    --shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(20, 184, 166, 0.05) 0%, transparent 55%);
}

[data-theme="light"] .room-id {
    background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
}

body {
    background-image:
        radial-gradient(ellipse at 20% 0, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 40%, rgba(20, 184, 166, 0.1) 0%, transparent 55%);
}

body::before {
    background:
        radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 28%),
        radial-gradient(circle at 70% 60%, rgba(20, 184, 166, 0.04) 0%, transparent 28%);
    animation: none;
}

.sidebar-header h2,
.logo-text h1,
.footer strong,
.footer-name {
    text-shadow: none !important;
}

.btn-primary {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    text-shadow: none !important;
}

.btn-primary:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

.logo-img {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

.logo-img:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

.connection-status {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.connection-status:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--border-color) !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35) !important;
}

.btn-icon:hover {
    background: rgba(59, 130, 246, 0.1) !important;
}

.card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.char-count {
    background: rgba(59, 130, 246, 0.08) !important;
}

.input-container textarea {
    border-color: rgba(59, 130, 246, 0.18) !important;
}

.input-container textarea:focus {
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.18),
        0 0 20px rgba(59, 130, 246, 0.08) !important;
}

.toast {
    border-color: rgba(59, 130, 246, 0.18) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.toast.info {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(59, 130, 246, 0.12) !important;
}

.loading {
    border-color: rgba(59, 130, 246, 0.18) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.16) !important;
}

::selection {
    background: rgba(59, 130, 246, 0.25) !important;
}

.toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.18) !important;
}

.room-info-bar {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.18) !important;
}

.message-item.own {
    background: rgba(59, 130, 246, 0.08) !important;
}

.message-item.own:hover {
    background: rgba(59, 130, 246, 0.12) !important;
}

.feature-item {
    border-color: rgba(59, 130, 246, 0.18) !important;
}

.feature-item:hover {
    border-color: rgba(59, 130, 246, 0.28) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

::-webkit-scrollbar-track {
    background: rgba(59, 130, 246, 0.04) !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.35) 0%,
        rgba(20, 184, 166, 0.35) 100%
    ) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.5) 0%,
        rgba(20, 184, 166, 0.5) 100%
    ) !important;
}

/* Override late-loaded "modern-icons" gradients/glows */
.btn-primary {
    background: var(--accent-gradient) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
}

.btn-primary:hover {
    background-position: 0 0 !important;
}

.toggle:checked {
    background: var(--accent-gradient) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
}

.card-header svg,
.nav-item:hover svg,
.nav-item.active svg,
.btn:hover svg,
.btn-icon:hover svg {
    filter: none !important;
}

.room-id,
.room-id:hover {
    text-shadow: none !important;
}

/* Override circular-nav + performance.css FAB gradient */
body .fab-main {
    background: var(--accent-gradient) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body .radial-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    border-color: var(--accent-primary) !important;
}
/* Compact actions for files and messages */
.message-actions .btn,
.file-actions-compact .btn {
    padding: 8px 12px;
    font-size: 0.8rem;
    min-height: 36px;
    min-width: unset;
}

.file-actions-compact {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .message-actions {
        opacity: 1;
        gap: 8px;
    }

    .message-actions .btn {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}