.notification-banner{position:fixed;top:var(--space-md);left:50%;transform:translate(-50%) translateY(-20px);width:calc(100vw - var(--space-xl));max-width:calc(var(--breakpoint-mobile, 430px) - var(--space-xl));background:var(--bg-secondary);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-md);box-shadow:0 6px 30px #00000026,0 2px 6px #0000000f;border:1px solid var(--border-color);z-index:99999;opacity:0;animation:bannerSlideDown .4s cubic-bezier(.34,1.56,.64,1) forwards;overflow:hidden;cursor:pointer;transition:transform var(--transition-base),box-shadow var(--transition-base)}.notification-banner:hover{transform:translate(-50%) translateY(0) scale(1.01);box-shadow:0 10px 40px #0000002e}.notification-banner.exiting{animation:bannerSlideUp var(--transition-base) forwards}@media (prefers-color-scheme: dark){.notification-banner{background:var(--bg-secondary);border-color:var(--border-color);box-shadow:0 6px 30px #0006}}.banner-content{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);position:relative}.banner-icon-wrapper{flex-shrink:0;position:relative;width:var(--avatar-sm);height:var(--avatar-sm)}.banner-icon-avatar{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:50%;object-fit:cover;border:1.5px solid var(--border-color);background:var(--bg-input);display:block}@media (prefers-color-scheme: dark){.banner-icon-avatar{border-color:var(--border-color);background:var(--bg-input)}}.banner-icon-img{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:50%;object-fit:contain;background:var(--bg-card)}.banner-icon-emoji{width:var(--avatar-sm);height:var(--avatar-sm);display:flex;align-items:center;justify-content:center;font-size:var(--font-md);background:var(--bg-card);border-radius:50%;flex-shrink:0}@media (prefers-color-scheme: dark){.banner-icon-emoji{background:var(--bg-card)}}.banner-icon-svg{width:var(--avatar-sm);height:var(--avatar-sm);display:flex;align-items:center;justify-content:center}.banner-icon-svg svg{width:var(--icon-md);height:var(--icon-md)}.banner-online-dot{position:absolute;bottom:0;right:0;width:calc(10px * var(--vp-scale-space));height:calc(10px * var(--vp-scale-space));background:#4ade80;border-radius:50%;border:1.5px solid var(--bg-secondary);box-shadow:0 0 6px #4ade8066}@media (prefers-color-scheme: dark){.banner-online-dot{border-color:var(--bg-secondary)}}.banner-text{flex:1;min-width:0}.banner-header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:calc(2px * var(--vp-scale-space))}.banner-type-label{font-size:calc(11px * var(--vp-scale-font));font-weight:600;color:var(--color-text-muted);letter-spacing:.3px;text-transform:uppercase}.banner-sender-name{font-size:var(--font-xs);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100px * var(--vp-scale-space))}@media (prefers-color-scheme: dark){.banner-sender-name{color:var(--color-text)}}.banner-title{font-size:var(--font-xs);font-weight:600;color:var(--color-text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@media (prefers-color-scheme: dark){.banner-title{color:var(--color-text)}}.banner-message{font-size:var(--font-xs);color:var(--color-text-secondary);line-height:1.4;margin-top:calc(2px * var(--vp-scale-space));white-space:pre-line;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media (prefers-color-scheme: dark){.banner-message{color:var(--color-text-secondary)}}.banner-close-btn{flex-shrink:0;width:calc(24px * var(--vp-scale-btn));height:calc(24px * var(--vp-scale-btn));border:none;background:var(--bg-card);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background var(--transition-fast),transform var(--transition-fast);margin-top:0}.banner-close-btn:hover{background:var(--bg-card-hover);transform:scale(1.1)}.banner-close-btn:active{transform:scale(.9)}.banner-close-btn svg{width:calc(12px * var(--vp-scale-icon));height:calc(12px * var(--vp-scale-icon));color:var(--color-text-muted);stroke-width:2.5}@media (prefers-color-scheme: dark){.banner-close-btn{background:var(--bg-card)}.banner-close-btn:hover{background:var(--bg-card-hover)}.banner-close-btn svg{color:var(--color-text-muted)}}.banner-progress-bar{height:calc(2px * var(--vp-scale-space));background:var(--bg-card);overflow:hidden;position:relative}@media (prefers-color-scheme: dark){.banner-progress-bar{background:var(--bg-card)}}.banner-progress-fill{height:100%;background:var(--gradient-primary);border-radius:0 calc(1px * var(--vp-scale-radius)) calc(1px * var(--vp-scale-radius)) 0;animation:progressFill 5s linear forwards}.notification-banner.weather-alert{border-color:var(--color-error);box-shadow:0 6px 30px var(--color-error-dim)}.notification-banner.weather-alert .banner-type-label{color:var(--color-error)}.notification-banner.weather-alert .banner-progress-fill{background:linear-gradient(90deg,var(--color-error),var(--color-warning))}@keyframes bannerSlideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes bannerSlideUp{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-20px) scale(.95)}}@keyframes progressFill{0%{width:100%}to{width:0%}}@media (max-width: 480px){.notification-banner{top:var(--space-sm);border-radius:var(--radius-sm)}.banner-content{padding:var(--space-xs) var(--space-sm);gap:var(--space-xs)}.banner-icon-wrapper,.banner-icon-avatar,.banner-icon-emoji{width:var(--avatar-xs);height:var(--avatar-xs)}.banner-icon-emoji{font-size:var(--font-sm)}.banner-message{-webkit-line-clamp:2}}@media (prefers-color-scheme: dark){.notification-banner ::-webkit-scrollbar{width:3px}.notification-banner ::-webkit-scrollbar-track{background:transparent}.notification-banner ::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-xs)}}.banner-message.weather-alert-message{display:flex;flex-direction:column;gap:2px;margin-top:2px}.banner-message.weather-alert-message .weather-alert-line{font-size:12px;color:var(--color-text-secondary);line-height:1.4}.banner-message.weather-alert-message .weather-alert-title{font-weight:700;color:var(--color-text)}.banner-message.weather-alert-message .weather-alert-desc{font-weight:400;color:var(--color-text-secondary)}.post-inline-gif{display:inline-block;vertical-align:middle;margin:0 4px;max-height:1.6em;line-height:1;border-radius:4px;-webkit-user-select:none;user-select:none;cursor:default;position:relative}.post-inline-gif img{display:inline-block;vertical-align:middle;height:1.6em;width:auto;max-width:8em;border-radius:4px;object-fit:contain;background:var(--bg-card);pointer-events:none}@media (max-width: 430px){.post-inline-gif img{max-width:6em}}[data-theme=light] .post-inline-gif img{background:rgba(0,0,0,.04)}.incoming-call-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:incomingCallFadeIn .25s ease}@keyframes incomingCallFadeIn{0%{opacity:0}to{opacity:1}}.incoming-call-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-2xl) var(--space-xl);width:min(90vw,360px);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:0 20px 60px #00000080;text-align:center}.incoming-call-avatar-wrap{position:relative;width:calc(96px * var(--vp-scale-space));height:calc(96px * var(--vp-scale-space));margin-bottom:var(--space-lg)}.incoming-call-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--bg-secondary)}.incoming-call-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:calc(40px * var(--vp-scale-font));font-weight:700;color:var(--color-primary);background:var(--gradient-primary);color:#fff}.incoming-call-avatar-pulse{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:2px solid var(--color-primary);animation:incomingCallPulse 1.5s ease-out infinite;pointer-events:none}@keyframes incomingCallPulse{0%{transform:scale(.95);opacity:.8}to{transform:scale(1.25);opacity:0}}.incoming-call-name{font-size:var(--font-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-xs);letter-spacing:.02em}.incoming-call-subtitle{font-size:var(--font-sm);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.incoming-call-countdown{font-size:var(--font-xs);color:var(--color-text-muted);margin-bottom:var(--space-xl)}.incoming-call-actions{display:flex;gap:var(--space-2xl);justify-content:center;width:100%}.incoming-call-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);background:transparent;border:none;cursor:pointer;padding:0;transition:transform var(--transition-fast)}.incoming-call-btn:active{transform:scale(.92)}.incoming-call-btn-icon{display:flex;align-items:center;justify-content:center;width:calc(64px * var(--vp-scale-btn));height:calc(64px * var(--vp-scale-btn));border-radius:50%;color:#fff;box-shadow:0 4px 20px #0000004d;transition:transform var(--transition-fast)}.incoming-call-btn:active .incoming-call-btn-icon{transform:scale(.92)}.incoming-call-btn-icon svg{position:relative;width:55%;height:55%;display:block}.incoming-call-btn-reject .incoming-call-btn-icon{background:linear-gradient(135deg,#ef4444,#dc2626)}.incoming-call-btn-accept .incoming-call-btn-icon{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 4px 20px #10b98166;animation:incomingCallAcceptPulse 1.2s ease-in-out infinite}.incoming-call-btn-accept .incoming-call-btn-icon:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:2px solid rgba(16,185,129,.4);animation:incomingCallRipple 1.5s ease-out infinite;pointer-events:none}@keyframes incomingCallRipple{0%{transform:scale(.9);opacity:.6}to{transform:scale(1.3);opacity:0}}@keyframes incomingCallAcceptPulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.incoming-call-btn-label{font-size:var(--font-sm);color:var(--color-text-secondary);font-weight:500}[data-theme=light] .incoming-call-overlay{background:rgba(255,255,255,.85)}[data-theme=light] .incoming-call-card{background:#fff;box-shadow:0 20px 60px #00000026}@media screen and (max-width: 374px){.incoming-call-card{padding:var(--space-xl) var(--space-md)}.incoming-call-avatar-wrap{width:calc(80px * var(--vp-scale-space));height:calc(80px * var(--vp-scale-space))}.incoming-call-btn-icon{width:calc(56px * var(--vp-scale-btn));height:calc(56px * var(--vp-scale-btn))}}.share-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;background:var(--bg-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:shareFadeIn var(--transition-fast)}@keyframes shareFadeIn{0%{opacity:0}to{opacity:1}}.share-modal{width:100%;max-width:calc(430px * var(--vp-scale-space));max-height:80vh;background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-lg) var(--space-xl) var(--space-2xl);border-top:calc(2px * var(--vp-scale-space)) solid var(--color-primary);animation:shareSlideUp .35s cubic-bezier(.34,1.56,.64,1);overflow-y:auto;box-sizing:border-box}@keyframes shareSlideUp{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}@media screen and (min-width: 431px){.share-modal{border-radius:var(--radius-xl);max-height:75vh}}@media screen and (max-width: 374px){.share-modal{padding:var(--space-md) var(--space-lg) var(--space-xl)}}.share-modal-handle{width:calc(40px * var(--vp-scale-space));height:calc(4px * var(--vp-scale-space));background:var(--border-color);border-radius:var(--radius-xs);margin:0 auto var(--space-md)}.share-modal-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-lg);font-weight:700;color:var(--color-text);margin-bottom:var(--space-lg)}@media screen and (max-width: 374px){.share-modal-title{font-size:var(--font-base)}}.share-modal-icon{font-size:var(--icon-xl);display:inline-flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}.share-modal-icon svg{width:var(--icon-xl);height:var(--icon-xl);display:block;flex-shrink:0}@media screen and (max-width: 374px){.share-modal-icon{font-size:var(--icon-md)}.share-modal-icon svg{width:var(--icon-md);height:var(--icon-md)}}.share-notice{font-size:var(--font-sm);color:var(--color-warning);background:var(--color-warning-dim);border:1px solid var(--color-warning-border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-lg);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--space-xs)}@media screen and (max-width: 374px){.share-notice{font-size:var(--font-xs);padding:var(--space-sm) var(--space-md)}}.share-notice-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.share-notice-icon svg{width:var(--icon-sm);height:var(--icon-sm);display:block;flex-shrink:0;color:var(--color-warning)}.share-channels-title{font-size:var(--font-base);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-md)}@media screen and (max-width: 374px){.share-channels-title{font-size:var(--font-sm)}}.share-channels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}@media screen and (max-width: 374px){.share-channels-grid{gap:var(--space-sm)}}.share-channel-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);background:none;border:none;cursor:pointer;padding:var(--space-sm) var(--space-xs);border-radius:var(--radius-md);transition:all var(--transition-fast);font-family:var(--font-body)}.share-channel-btn:hover{transform:translateY(-2px)}.share-channel-icon{width:var(--avatar-lg);height:var(--avatar-lg);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--font-2xl);color:#fff;transition:all var(--transition-fast)}@media screen and (max-width: 374px){.share-channel-icon{width:var(--avatar-md);height:var(--avatar-md);font-size:var(--font-xl)}}.share-channel-icon svg{width:var(--icon-lg);height:var(--icon-lg);display:block;flex-shrink:0;color:currentColor}@media screen and (max-width: 374px){.share-channel-icon svg{width:var(--icon-md);height:var(--icon-md)}}.share-channel-btn:hover .share-channel-icon{transform:scale(1.05);box-shadow:0 4px 16px #0000004d}.share-channel-name{font-size:var(--font-xs);color:var(--color-text-muted);font-weight:500}.share-copy-section{margin-bottom:var(--space-lg)}.share-copy-input-wrapper{display:flex;gap:var(--space-sm);background:var(--bg-input);border-radius:var(--radius-md);padding:var(--space-xs);border:1px solid var(--border-color)}.share-copy-input{flex:1;padding:var(--space-md);background:transparent;border:none;outline:none;color:var(--color-text-secondary);font-size:var(--font-sm);font-family:var(--font-body);min-width:0}@media screen and (max-width: 374px){.share-copy-input{padding:var(--space-sm) var(--space-md);font-size:var(--font-xs)}}.share-copy-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-sm);border:none;background:var(--color-primary-dim);color:var(--color-primary);font-size:var(--font-sm);font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}@media screen and (max-width: 374px){.share-copy-btn{padding:var(--space-sm) var(--space-md);font-size:var(--font-sm)}}.share-copy-btn svg{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0;display:block}.share-copy-btn:hover{background:var(--color-primary-dim)}.share-copy-btn.success{background:var(--color-green-dim);color:var(--color-green)}.share-modal-footer{display:flex;justify-content:flex-end;padding-top:var(--space-md);border-top:1px solid var(--border-color)}.share-modal-cancel{padding:var(--space-sm) var(--space-2xl);border:none;border-radius:var(--radius-sm);background:var(--bg-card);color:var(--color-text-muted);font-size:var(--font-base);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}@media screen and (max-width: 374px){.share-modal-cancel{padding:var(--space-sm) var(--space-lg);font-size:var(--font-sm)}}.share-modal-cancel:hover{background:var(--bg-card-hover);color:var(--color-text)}@media (prefers-reduced-motion: reduce){.share-modal-overlay,.share-modal{animation:none}}@supports (padding: max(0px)){.share-modal-overlay{padding-bottom:var(--safe-area-bottom)}.share-modal{padding-bottom:max(var(--space-2xl),var(--safe-area-bottom))}}.video-preview{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--preview-bg, #000);z-index:var(--preview-z-index, 1000);overflow:hidden;animation:previewFadeIn .4s ease-out}@keyframes previewFadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.preview-video-container,.preview-video-wrapper{position:relative;width:100%;height:100%;background:var(--preview-bg, #000);overflow:hidden}.preview-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:var(--preview-bg, #000);transition:opacity var(--transition-base)}.preview-video.hidden{opacity:0;pointer-events:none}.preview-video.visible{opacity:1;pointer-events:auto}.preview-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--loading-gap);background:var(--preview-bg, #000);z-index:2;color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .85));font-size:var(--loading-font-size)}.loading-spinner{width:var(--loading-spinner-size);height:var(--loading-spinner-size);border:var(--loading-spinner-border-width) solid var(--preview-overlay-track, rgba(255, 255, 255, .1));border-top-color:var(--loading-spinner-color, var(--color-primary));border-radius:50%;animation:spin .8s linear infinite}.loading-steps{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-sm);font-size:var(--font-xs);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .65))}.loading-steps .step{padding:2px var(--space-xs);border-radius:var(--radius-xs);background:var(--preview-overlay-track, rgba(255, 255, 255, .06));transition:all .3s ease}.loading-steps .step.active{color:var(--color-primary);background:var(--color-primary-dim)}.loading-steps .step.done{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .5))}.loading-steps .step-arrow{color:var(--preview-overlay-track, rgba(255, 255, 255, .1));font-size:var(--font-xs)}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--preview-placeholder-gap);background:var(--preview-bg, #000);transition:opacity var(--transition-base);z-index:1}.preview-placeholder.visible{opacity:1}.preview-placeholder.fade-out{opacity:0;pointer-events:none}.preview-avatar{width:var(--preview-avatar-size);height:var(--preview-avatar-size);border-radius:var(--preview-avatar-border-radius, 50%);object-fit:cover;flex-shrink:0}.preview-avatar-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.guest-avatar-svg{width:var(--preview-avatar-size);height:var(--preview-avatar-size);border-radius:var(--preview-avatar-border-radius, 50%);flex-shrink:0}.placeholder-name{color:var(--preview-overlay-text, #ffffff);font-size:var(--placeholder-name-font-size);font-weight:500}.placeholder-text{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));font-size:var(--placeholder-text-font-size);text-align:center}.preview-retry-btn{padding:var(--preview-retry-btn-padding);border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .2));border-radius:var(--preview-retry-btn-radius);background:transparent;color:var(--preview-overlay-text, #ffffff);font-size:var(--preview-retry-btn-font-size);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.preview-retry-btn:hover{background:var(--preview-overlay-bg-hover, rgba(0, 0, 0, .7))}.permission-guide{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--permission-guide-padding);background:var(--preview-popup-bg, rgba(20, 20, 31, .92));border-radius:var(--permission-guide-radius);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:min(calc(360px * var(--vp-scale-space)),85vw);z-index:5;border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08))}.permission-guide-icon{font-size:var(--permission-guide-icon-size);margin-bottom:var(--space-sm)}.permission-guide-title{color:var(--preview-popup-text, #ffffff);font-size:var(--permission-guide-title-size);font-weight:600;margin-bottom:var(--space-xs);font-family:var(--font-body)}.permission-guide-desc{color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--permission-guide-desc-size);margin-bottom:var(--space-md);line-height:1.5}.permission-guide-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;justify-content:center}.permission-guide-btn{padding:var(--permission-guide-btn-padding);border:none;border-radius:var(--permission-guide-btn-radius);font-size:var(--permission-guide-btn-font-size);font-weight:600;cursor:pointer;transition:all var(--transition-fast);background:var(--color-primary);color:var(--color-text-inverse);font-family:var(--font-body)}.permission-guide-btn:hover{transform:scale(1.02);opacity:.9}.permission-guide-btn.secondary{background:var(--preview-overlay-track, rgba(255, 255, 255, .1));color:var(--preview-overlay-text, #ffffff)}.permission-guide-btn.secondary:hover{background:var(--preview-overlay-track-hover, rgba(255, 255, 255, .2))}.preview-header-overlay{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;padding:var(--preview-header-padding-top) var(--preview-header-padding-x);padding-top:max(var(--preview-header-padding-top),env(safe-area-inset-top));background:var(--preview-header-gradient, linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, transparent 100%));z-index:10}.preview-header-top{display:flex;align-items:center;justify-content:space-between;gap:var(--preview-header-gap);width:100%;min-height:var(--preview-header-btn-size)}.preview-header-left{display:flex;align-items:center;gap:var(--preview-header-gap);flex-shrink:1;min-width:0;overflow:hidden}.preview-back-btn{width:var(--preview-back-btn-size);height:var(--preview-back-btn-size);border-radius:var(--preview-back-btn-radius, 50%);border:none;background:var(--preview-overlay-bg, rgba(0, 0, 0, .55));color:var(--preview-overlay-text, #ffffff);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex-shrink:0;padding:0}.preview-back-btn svg{width:var(--preview-back-btn-icon);height:var(--preview-back-btn-icon);display:block;flex-shrink:0;stroke-width:2.5}.preview-back-btn:active{transform:scale(.92)}.preview-online-indicator{display:flex;align-items:center;gap:calc(6px * var(--vp-scale-space));padding:var(--preview-online-indicator-padding-y) var(--preview-online-indicator-padding-x);min-height:var(--preview-header-btn-size);height:var(--preview-header-btn-size);box-sizing:border-box;background:var(--preview-overlay-bg, rgba(0, 0, 0, .55));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--preview-online-indicator-radius);cursor:pointer;z-index:15;border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .1));max-width:100%;overflow:hidden;flex-shrink:1;min-width:0;color:var(--preview-overlay-text, #ffffff)}.preview-online-indicator:active{transform:scale(.96)}.online-count{color:var(--preview-overlay-text, #ffffff);font-size:var(--online-count-font-size);font-weight:600;flex-shrink:0;min-width:var(--online-count-min-width);text-align:center;line-height:1}.online-count.waiting{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .85));font-weight:500;font-size:var(--online-count-waiting-font-size);white-space:nowrap;display:flex;align-items:center;gap:var(--space-xs)}.waiting-dot{width:var(--waiting-dot-size);height:var(--waiting-dot-size);border-radius:50%;background:var(--color-primary);animation:pulse-dot 1.2s ease-in-out infinite;display:inline-block;flex-shrink:0}@keyframes pulse-dot{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.online-avatar{width:var(--online-avatar-size);height:var(--online-avatar-size);border-radius:50%;border:var(--online-avatar-border-width) solid var(--preview-overlay-border, rgba(255, 255, 255, .15));overflow:hidden;flex-shrink:0;background:var(--preview-popup-bg, rgba(20, 20, 31, .92));display:flex;align-items:center;justify-content:center}.online-avatar:first-child{margin-left:0!important}.online-avatar img{width:100%;height:100%;object-fit:cover}.online-avatar span{font-size:calc(var(--online-avatar-size) * .4);font-weight:600;color:var(--preview-overlay-text, #ffffff)}.online-avatar.more{background:var(--color-primary-dim);border-color:var(--color-primary);font-size:var(--online-avatar-more-font-size);color:var(--color-primary);font-weight:600}.preview-header-actions{display:flex;align-items:center;gap:var(--preview-header-action-gap);flex-shrink:0}.preview-beauty-btn,.preview-settings-btn{width:var(--preview-header-btn-size);height:var(--preview-header-btn-size);border-radius:var(--preview-header-btn-radius, 50%);border:none;background:var(--preview-overlay-bg, rgba(0, 0, 0, .55));color:var(--preview-overlay-text, #ffffff);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex-shrink:0;padding:0}.preview-beauty-btn{font-size:calc(20px * var(--vp-scale-font))}.preview-beauty-btn.active{background:rgba(255,182,193,.3);color:#ffb6c1}.preview-beauty-btn:active,.preview-settings-btn:active{transform:scale(.92)}.preview-settings-btn svg{width:var(--preview-header-btn-icon);height:var(--preview-header-btn-icon);display:block;flex-shrink:0}.preview-title-row{display:flex;justify-content:center;align-items:center;padding-top:var(--space-sm);width:100%}.preview-title{color:var(--preview-overlay-text, #ffffff);font-size:var(--preview-title-font-size);font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.5);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--space-xs);font-family:var(--font-body)}.preview-title .guest-badge{font-size:var(--font-xs);font-weight:400;color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));background:var(--preview-overlay-track, rgba(255, 255, 255, .1));padding:1px var(--space-sm);border-radius:var(--radius-sm)}.preview-user-list-popup,.preview-settings-panel{position:fixed;animation:fadeIn .2s ease-out forwards}.preview-user-list-popup{position:fixed;top:var(--preview-popup-top);left:var(--preview-popup-left);width:var(--preview-popup-width);max-height:var(--preview-popup-max-height);background:var(--preview-popup-bg, rgba(20, 20, 31, .92));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--preview-popup-radius);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));box-shadow:var(--shadow-card);z-index:1100;overflow:hidden}.user-list-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--preview-popup-padding-y) var(--preview-popup-padding-x);border-bottom:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));color:var(--preview-popup-text, #ffffff);font-size:var(--user-list-header-font-size);font-weight:600;font-family:var(--font-body);white-space:nowrap;flex-shrink:0;min-height:calc(44px * var(--vp-scale-space))}.user-list-header>span{display:flex;align-items:center;gap:var(--space-xs);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.user-list-header>span svg{width:var(--icon-sm);height:var(--icon-sm);display:block;flex-shrink:0;color:var(--color-primary)}.user-list-icon{width:var(--icon-sm);height:var(--icon-sm);margin-right:var(--space-xs);display:block}.user-list-close{background:none;border:none;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--font-md);cursor:pointer;padding:var(--space-xs);line-height:1;flex-shrink:0;display:flex;align-items:center;justify-content:center}.user-list-close:hover{color:var(--preview-popup-text, #ffffff)}.user-list-body{padding:var(--space-xs) 0;max-height:calc(var(--preview-popup-max-height) - 50px);overflow-y:auto}.user-list-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--preview-popup-padding-x);transition:background var(--transition-fast)}.user-list-item:active{background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .06))}.user-list-avatar{width:var(--user-list-avatar-size);height:var(--user-list-avatar-size);border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--preview-overlay-track, rgba(255, 255, 255, .08));display:flex;align-items:center;justify-content:center}.user-list-avatar img{width:100%;height:100%;object-fit:cover}.user-list-avatar span{font-size:var(--font-sm);font-weight:600;color:var(--preview-popup-text, #ffffff)}.user-list-name{flex:1;font-size:var(--user-list-name-font-size);color:var(--preview-popup-text, #ffffff);font-family:var(--font-body)}.user-list-status{font-size:var(--user-list-status-font-size);color:var(--color-green);display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-body)}.status-dot{width:var(--icon-xs);height:var(--icon-xs);border-radius:50%;background:var(--color-green);display:inline-block}.user-list-empty{padding:var(--space-lg);text-align:center;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--font-sm);display:flex;flex-direction:column;gap:var(--space-xs);font-family:var(--font-body)}.user-list-empty .empty-hint{font-size:var(--font-xs);color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .3))}.preview-beauty-panel{position:absolute;top:var(--preview-popup-top);right:var(--preview-popup-left);width:var(--preview-popup-width);background:var(--preview-popup-bg, rgba(20, 20, 31, .92));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--preview-popup-radius);padding:var(--preview-popup-padding-y) var(--preview-popup-padding-x);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));box-shadow:var(--shadow-card);z-index:20}.beauty-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm)}.beauty-title{color:var(--preview-popup-text, #ffffff);font-size:var(--beauty-title-font-size);font-weight:600;font-family:var(--font-body)}.beauty-toggle-btn{padding:2px var(--space-md);border:none;border-radius:var(--radius-sm);font-size:var(--beauty-toggle-font-size);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.beauty-toggle-btn.on{background:var(--color-primary-dim);color:var(--color-primary)}.beauty-toggle-btn.off{background:var(--preview-overlay-track, rgba(255, 255, 255, .06));color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65))}.beauty-status{text-align:center;padding:var(--space-xs) 0;font-size:var(--beauty-status-font-size);font-family:var(--font-body)}.beauty-status .status-on{color:var(--color-green)}.beauty-status .status-off{color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .5))}.beauty-status .status-loading{color:var(--color-warning)}.beauty-hint{text-align:center;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .5));font-size:var(--beauty-hint-font-size);padding-top:var(--space-xs);border-top:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));margin-top:var(--space-xs)}.preview-settings-panel{position:fixed;top:var(--preview-popup-top);right:var(--preview-popup-left);width:var(--preview-popup-width);max-height:calc(100% - 140px);overflow-y:auto;background:var(--preview-popup-bg, rgba(20, 20, 31, .92));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--preview-popup-radius);padding:var(--preview-popup-padding-y) var(--preview-popup-padding-x);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));box-shadow:var(--shadow-card);z-index:1100}.settings-group{margin-bottom:var(--space-sm)}.settings-group:last-child{margin-bottom:0}.settings-group label{display:block;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--settings-label-font-size);margin-bottom:2px;font-family:var(--font-body)}.settings-group select{width:100%;padding:var(--space-xs) var(--space-sm);padding-right:30px;border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:var(--radius-xs);background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .06));color:var(--preview-popup-text, #ffffff);font-size:var(--settings-select-font-size);outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;transition:all .2s ease;font-family:var(--font-body)}.settings-group select:hover{border-color:var(--preview-overlay-border, rgba(255, 255, 255, .2))}.settings-group select:focus{border-color:var(--color-primary);background-color:var(--preview-popup-hover-bg, rgba(255, 255, 255, .08));box-shadow:0 0 0 3px var(--color-primary-dim)}.settings-group select option{background:var(--preview-popup-bg-solid, #1a1a2e);color:#fff;padding:var(--space-xs) var(--space-sm)}.settings-group select option:checked{background:var(--color-primary-dim);color:var(--color-primary)}.settings-group select:disabled{opacity:.4;cursor:not-allowed}.device-switching-indicator{display:inline-block;font-size:var(--font-xs);color:var(--color-primary);margin-top:2px}.settings-buttons{display:flex;gap:var(--space-xs)}.settings-btn{flex:1;padding:var(--space-xs) var(--space-sm);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:var(--radius-xs);background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .04));color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--settings-btn-font-size);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body)}.settings-btn.active{background:var(--color-primary-dim);border-color:var(--color-primary);color:var(--color-primary)}.settings-permission-info{margin-top:var(--space-xs)}.permission-warning{color:var(--color-warning);font-size:var(--font-xs);margin:0}.device-switching-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);background:var(--preview-overlay-bg, rgba(0, 0, 0, .5));z-index:3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.device-switching-overlay .loading-spinner.small{width:var(--device-switching-spinner-size);height:var(--device-switching-spinner-size)}.device-switching-overlay span{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .8));font-size:var(--device-switching-text-size);font-family:var(--font-body)}.preview-controls-overlay{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:var(--preview-controls-padding-y) var(--preview-controls-padding-x);padding-bottom:max(var(--preview-controls-bottom-padding),env(safe-area-inset-bottom));background:var(--preview-controls-gradient, linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 100%));z-index:10}.preview-main-actions{display:flex;flex-direction:column;align-items:center;gap:var(--preview-controls-gap);width:100%;max-width:calc(360px * var(--vp-scale-space))}.preview-controls-row{display:flex;align-items:center;gap:var(--preview-control-btn-gap)}.preview-control-btn{width:var(--preview-control-btn-size);height:var(--preview-control-btn-size);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);background:var(--preview-overlay-bg, rgba(0, 0, 0, .55));color:var(--preview-overlay-text, #ffffff);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0}.preview-control-btn:active{transform:scale(.92)}.preview-control-btn.active{background:var(--color-primary-dim);color:var(--color-primary)}.preview-control-btn.inactive{background:var(--color-error-dim);color:var(--color-error)}.preview-control-btn svg{width:var(--preview-control-btn-icon-size);height:var(--preview-control-btn-icon-size);display:block;flex-shrink:0}.preview-join-btn{padding:var(--preview-join-btn-padding-y) var(--preview-join-btn-padding-x);border:none;border-radius:var(--preview-join-btn-radius);font-size:var(--preview-join-btn-font-size);font-weight:600;color:var(--color-text-inverse);background:var(--preview-join-btn-bg, var(--gradient-primary));cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 20px var(--color-primary-dim);display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:100%;max-width:var(--preview-join-btn-max-width);white-space:nowrap;font-family:var(--font-body)}.preview-join-btn:active:not(:disabled){transform:scale(.96)}.preview-join-btn:disabled{opacity:.6;cursor:not-allowed}.preview-center-info{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);z-index:3;pointer-events:none;text-align:center;width:80%;max-width:calc(400px * var(--vp-scale-space))}.preview-center-info .center-title{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .85));font-size:var(--preview-title-font-size);font-weight:500;text-shadow:0 2px 12px rgba(0,0,0,.6);letter-spacing:.5px}.preview-center-info .center-hint{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .85));font-size:var(--preview-tips-font-size);font-weight:400;text-shadow:0 2px 12px rgba(0,0,0,.5);letter-spacing:.3px}.preview-error-toast{position:absolute;bottom:var(--preview-error-toast-bottom);left:50%;transform:translate(-50%);max-width:90%;padding:var(--space-sm) var(--space-md);background:var(--color-error);color:#fff;font-size:var(--preview-error-toast-font-size);border-radius:var(--preview-error-toast-radius);display:flex;align-items:center;gap:var(--space-sm);z-index:30;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-body)}.preview-error-toast button{background:none;border:none;color:#fff;font-size:var(--font-md);cursor:pointer;opacity:.6}.loading-spinner-small{width:18px;height:18px;border:2px solid var(--preview-overlay-track, rgba(255, 255, 255, .2));border-top-color:var(--preview-overlay-text, #ffffff);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}.user-list-body::-webkit-scrollbar{width:3px}.user-list-body::-webkit-scrollbar-track{background:transparent}.user-list-body::-webkit-scrollbar-thumb{background:var(--preview-popup-border, rgba(255, 255, 255, .1));border-radius:var(--radius-xs)}@supports (padding: max(0px)){.preview-header-overlay{padding-top:max(var(--preview-header-padding-top),env(safe-area-inset-top))}.preview-controls-overlay{padding-bottom:max(var(--preview-controls-bottom-padding),env(safe-area-inset-bottom))}}.preview-toast{position:fixed;bottom:calc(140px * var(--vp-scale-space));left:50%;transform:translate(-50%);padding:var(--space-md) var(--space-2xl);border-radius:var(--radius-md);background:var(--preview-popup-bg-solid, rgba(20, 20, 31, .98));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--preview-popup-text, #ffffff);font-size:var(--font-base);font-weight:500;z-index:99999;animation:toastFadeIn .3s ease;border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));box-shadow:var(--shadow-card);pointer-events:none;font-family:var(--font-body)}.preview-toast.warning{border-color:var(--color-warning-border, rgba(255, 193, 7, .25));color:var(--color-warning)}.preview-toast.success{border-color:var(--color-green-border, rgba(76, 175, 80, .25));color:var(--color-green)}.preview-toast.info{border-color:var(--color-primary);color:var(--color-primary)}@keyframes toastFadeIn{0%{opacity:0;transform:translate(-50%) translateY(20px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@media (min-width: 1440px){.preview-center-info .center-title{font-size:calc(26px * var(--vp-scale-font))}.preview-center-info .center-hint{font-size:calc(18px * var(--vp-scale-font))}.preview-center-info{gap:var(--space-lg);max-width:calc(500px * var(--vp-scale-space))}}@media (min-width: 1920px){.preview-center-info .center-title{font-size:calc(34px * var(--vp-scale-font))}.preview-center-info .center-hint{font-size:calc(22px * var(--vp-scale-font))}.preview-center-info{gap:var(--space-xl);max-width:calc(600px * var(--vp-scale-space))}}@media (max-width: 420px){.preview-center-info .center-title{font-size:var(--font-sm)}.preview-center-info .center-hint{font-size:var(--font-xs)}.preview-center-info{gap:var(--space-sm);width:85%}}.video-item{position:relative;background:var(--video-item-bg, #14141f);border-radius:var(--video-item-radius, var(--radius-md));overflow:hidden;aspect-ratio:4 / 3;min-height:calc(120px * var(--vp-scale-space));transition:all .3s ease}.video-item.fullscreen-item{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;border-radius:0;aspect-ratio:auto;min-height:100vh;animation:fullscreen-in .25s ease-out}@keyframes fullscreen-in{0%{opacity:.8;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.video-element{width:100%;height:100%;object-fit:cover;background:#000;will-change:transform}.video-item .video-element{width:100%;height:100%;object-fit:cover;background:#000}.video-item .video-element:not([style*=display]){display:block}.video-item.local .video-element{transform:scaleX(-1)}.video-item.local.screen-sharing .video-element,.video-item.local.local-floating .video-element{transform:scaleX(1)}.video-item.video-off .video-element{display:none}.video-placeholder,.video-placeholder-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);background:var(--video-item-bg, #14141f);z-index:1;padding:var(--space-md)}.video-placeholder-overlay{position:absolute}.video-placeholder .video-avatar,.video-placeholder-overlay .video-avatar{width:calc(60px * var(--vp-scale-icon));height:calc(60px * var(--vp-scale-icon));border-radius:50%;object-fit:cover;border:calc(2px * var(--vp-scale-icon)) solid var(--preview-overlay-border, rgba(255, 255, 255, .15))}.video-placeholder .video-avatar-placeholder,.video-placeholder-overlay .video-avatar-placeholder{width:calc(60px * var(--vp-scale-icon));height:calc(60px * var(--vp-scale-icon));border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:calc(24px * var(--vp-scale-font));font-weight:600;color:#fff}.video-placeholder .placeholder-label,.video-placeholder-overlay .placeholder-label{color:var(--color-text-muted);font-size:var(--font-sm);font-weight:400;text-align:center;font-family:var(--font-body)}.video-placeholder .placeholder-sub-label,.video-placeholder-overlay .placeholder-sub-label{color:var(--color-text-muted);opacity:.6;font-size:var(--font-xs);text-align:center;font-family:var(--font-body)}.video-overlays{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;transition:opacity .25s ease}.video-overlays.visible{opacity:1}.video-overlays.hidden{opacity:0}.video-overlays.toolbar-hidden .video-action-buttons{display:none}.video-overlays .video-top-left{position:absolute;top:var(--space-md);left:var(--space-md);right:var(--space-md);display:flex;align-items:center;gap:var(--space-xs);pointer-events:auto;flex-wrap:nowrap;overflow:hidden;min-width:0}.video-overlays .video-top-left .video-name-tag{flex:0 1 auto;min-width:0}.video-overlays .video-top-left .speaking-indicator{flex:0 0 auto}.video-overlays .video-action-buttons{position:absolute;bottom:var(--space-md);right:var(--space-md);display:flex;gap:var(--space-sm);pointer-events:auto}.video-name-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:#fff;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;pointer-events:auto;font-family:var(--font-body);line-height:1.2;box-sizing:border-box}.video-name-tag>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-name-tag .name-tag-self,.video-name-tag .name-tag-sharing,.video-name-tag .name-tag-muted,.video-name-tag .name-tag-speaking,.video-name-tag .name-tag-blocked,.video-name-tag .name-tag-disconnected{flex:0 0 auto;white-space:nowrap}.video-name-tag .name-tag-self{color:#fff;background:rgba(34,211,238,.85)}.video-name-tag .name-tag-sharing{color:#fff;background:rgba(255,152,0,.85)}.video-name-tag .name-tag-muted{color:#fff;background:rgba(239,68,68,.85)}.video-name-tag .name-tag-speaking{color:#fff;background:rgba(76,175,80,.95);box-shadow:0 0 8px #4caf5080;animation:pulse-speaking 1.2s ease-in-out infinite}.video-name-tag .name-tag-blocked{color:#fff;background:rgba(239,68,68,.85)}.video-name-tag .name-tag-disconnected{color:#fff;background:rgba(255,152,0,.85);animation:pulse-disconnected 2s ease-in-out infinite;font-variant-numeric:tabular-nums}@keyframes pulse-speaking{0%,to{opacity:.85}50%{opacity:1}}@keyframes pulse-disconnected{0%,to{opacity:.6}50%{opacity:1}}.speaking-indicator{position:relative;display:flex;align-items:center;justify-content:center;padding:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-sm);cursor:pointer;pointer-events:auto;transition:all .2s ease;width:32px;height:32px;border:1px solid rgba(255,255,255,.1);box-sizing:border-box;flex-shrink:0}.speaking-indicator:hover{background:rgba(0,0,0,.9)}.speaking-indicator svg{width:18px;height:18px;display:block;flex-shrink:0}.speaking-indicator .speaking-muted{color:#ff5252;opacity:.9}.speaking-indicator .speaking-active{color:#4caf50;animation:pulse-speaking .8s ease-in-out infinite}.speaking-indicator .speaking-idle{color:#fff9}.speaking-indicator.active{background:rgba(0,0,0,.85)!important;border-color:#4caf50;box-shadow:0 0 8px #4caf5099}.speaking-indicator.active .speaking-active{animation:pulse-speaking .6s ease-in-out infinite}.volume-slider-popup{position:absolute;bottom:calc(100% + var(--space-sm));left:50%;transform:translate(-50%);background:var(--preview-overlay-bg, rgba(0, 0, 0, .9));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);z-index:10;min-width:calc(80px * var(--vp-scale-space));border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .15))}.volume-slider-popup .volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(80px * var(--vp-scale-space));height:4px;border-radius:2px;background:var(--preview-overlay-track, rgba(255, 255, 255, .15));outline:none;transition:background .2s}.volume-slider-popup .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(14px * var(--vp-scale-space));height:calc(14px * var(--vp-scale-space));border-radius:50%;background:var(--color-primary);cursor:pointer;border:calc(2px * var(--vp-scale-space)) solid #000}.volume-slider-popup .volume-slider::-moz-range-thumb{width:calc(14px * var(--vp-scale-space));height:calc(14px * var(--vp-scale-space));border-radius:50%;background:var(--color-primary);cursor:pointer;border:calc(2px * var(--vp-scale-space)) solid #000}.video-action-btn{width:calc(32px * var(--vp-scale-btn));height:calc(32px * var(--vp-scale-btn));border-radius:50%;border:none;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;pointer-events:auto;padding:0}.video-action-btn:hover{background:rgba(0,0,0,.85);transform:scale(1.1)}.video-action-btn:active{transform:scale(.9)}.video-action-btn svg{width:calc(18px * var(--vp-scale-icon));height:calc(18px * var(--vp-scale-icon));display:block;flex-shrink:0}.video-item.speaking{outline:1px solid rgba(102,187,106,.5);outline-offset:-1px;box-shadow:none;transition:outline-color .3s ease}.video-item.speaking.just-started{animation:speaking-flash .4s ease-out}@keyframes speaking-flash{0%{outline-color:#66bb6a;box-shadow:0 0 12px #66bb6a66}to{outline-color:#66bb6a80;box-shadow:none}}.video-item.muted{outline:calc(2px * var(--vp-scale-space)) solid var(--color-error, #ff5252);outline-offset:calc(-2px * var(--vp-scale-space))}.video-item.disconnected{opacity:.7;filter:grayscale(.5)}.video-item.disconnected .placeholder-sub-label{font-size:12px;color:var(--color-warning);margin-top:4px;font-variant-numeric:tabular-nums}.video-item.local-floating{position:fixed;border-radius:var(--floating-radius, var(--radius-md));box-shadow:var(--floating-shadow, 0 8px 32px rgba(0, 0, 0, .6));border:calc(2px * var(--vp-scale-space)) solid var(--floating-border-color, var(--color-primary));cursor:grab;z-index:2000;touch-action:none;min-height:unset;aspect-ratio:auto}.video-item.local-floating .video-name-tag{font-size:10px;padding:2px 6px}.video-item.local-floating .video-name-tag .name-tag-self,.video-item.local-floating .video-name-tag .name-tag-sharing,.video-item.local-floating .video-name-tag .name-tag-muted,.video-item.local-floating .video-name-tag .name-tag-speaking{font-size:9px;padding:1px 4px}.video-item.local-floating .video-placeholder .video-avatar,.video-item.local-floating .video-placeholder .video-avatar-placeholder{width:calc(32px * var(--vp-scale-icon));height:calc(32px * var(--vp-scale-icon));font-size:14px}.video-item.local-floating .video-placeholder .placeholder-label{font-size:10px}.video-item.local-floating .speaking-indicator{width:24px;height:24px;min-width:24px;min-height:24px;padding:0}.video-item.local-floating .speaking-indicator svg{width:14px;height:14px}.video-item.local-floating .video-action-btn{width:calc(24px * var(--vp-scale-btn));height:calc(24px * var(--vp-scale-btn))}.video-item.local-floating .video-action-btn svg{width:calc(14px * var(--vp-scale-icon));height:calc(14px * var(--vp-scale-icon))}.resize-handle{position:absolute;bottom:0;right:0;width:calc(20px * var(--vp-scale-space));height:calc(20px * var(--vp-scale-space));cursor:nwse-resize;z-index:10}.resize-handle:after{content:"";position:absolute;bottom:calc(4px * var(--vp-scale-space));right:calc(4px * var(--vp-scale-space));width:calc(10px * var(--vp-scale-space));height:calc(10px * var(--vp-scale-space));border-right:calc(2px * var(--vp-scale-space)) solid var(--preview-overlay-text-secondary, rgba(255, 255, 255, .65));border-bottom:calc(2px * var(--vp-scale-space)) solid var(--preview-overlay-text-secondary, rgba(255, 255, 255, .65));border-radius:0 0 var(--radius-xs) 0}.floating-controls{position:absolute;top:var(--space-sm);right:var(--space-sm);display:flex;gap:var(--space-xs);z-index:5;pointer-events:auto}.floating-controls .minimize-btn{width:calc(24px * var(--vp-scale-btn));height:calc(24px * var(--vp-scale-btn));border-radius:50%;border:none;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0}.floating-controls .minimize-btn:hover{background:rgba(0,0,0,.85)}.floating-restore-btn{position:fixed;z-index:2000;width:calc(56px * var(--vp-scale-btn));height:calc(56px * var(--vp-scale-btn));border-radius:50%;border:calc(2px * var(--vp-scale-space)) solid var(--floating-border-color, var(--color-primary));background:rgba(0,0,0,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #00000080;transition:transform .2s,box-shadow .2s;padding:0}.floating-restore-btn svg{width:50%;height:50%;display:block}.video-emoji-bubble{position:absolute;bottom:calc(60px * var(--vp-scale-space));left:50%;transform:translate(-50%);font-size:calc(28px * var(--vp-scale-font));pointer-events:none;z-index:3;animation:emoji-float-0 1.5s ease-out forwards}@keyframes emoji-float-0{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-80px) scale(1.3)}}@keyframes emoji-float-1{0%{opacity:1;transform:translate(-60%) translateY(0) scale(1) rotate(-5deg)}to{opacity:0;transform:translate(-40%) translateY(-80px) scale(1.3) rotate(5deg)}}@keyframes emoji-float-2{0%{opacity:1;transform:translate(-40%) translateY(0) scale(1) rotate(5deg)}to{opacity:0;transform:translate(-60%) translateY(-80px) scale(1.3) rotate(-5deg)}}@media (max-width: 768px){.video-item{aspect-ratio:4 / 3}}@media (max-width: 480px){.video-item .speaking-indicator svg{width:16px;height:16px}}.video-item.fullscreen-item .video-element{object-fit:cover}.video-item.fullscreen-item .video-placeholder .video-avatar,.video-item.fullscreen-item .video-placeholder .video-avatar-placeholder{width:calc(100px * var(--vp-scale-icon));height:calc(100px * var(--vp-scale-icon));font-size:calc(40px * var(--vp-scale-font))}.video-item.fullscreen-item .video-placeholder .placeholder-label{font-size:calc(18px * var(--vp-scale-font))}.video-item.fullscreen-item .video-placeholder .placeholder-sub-label{font-size:calc(14px * var(--vp-scale-font))}.video-item.fullscreen-item .video-overlays .video-top-left{top:var(--space-lg);left:var(--space-lg);right:var(--space-lg)}.video-item.fullscreen-item .video-overlays .video-action-buttons{bottom:var(--space-lg);right:var(--space-lg)}.wave-bar{transform-box:fill-box;transform-origin:bottom center}.wave-bar-speaking{animation-name:wave-jump;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}@keyframes wave-jump{0%{transform:scaleY(.7)}to{transform:scaleY(1)}}.video-name-tag.name-tag-speaking-only{opacity:0;pointer-events:none;transition:opacity .25s ease}.video-name-tag.name-tag-visible{opacity:1;pointer-events:auto;transition:opacity .25s ease}.video-overlays .video-top-right{position:absolute;top:var(--space-md);right:var(--space-md);display:flex;align-items:center;gap:var(--space-xs);pointer-events:auto;z-index:3}.video-effect-canvas{position:absolute;top:0;right:0;bottom:0;left:0;object-fit:cover;pointer-events:none;z-index:1;background:transparent}.video-item.local .video-effect-canvas{transform:scaleX(-1)}.video-item.local.screen-sharing .video-effect-canvas,.video-item.local.local-floating .video-effect-canvas{transform:scaleX(1)}.remote-effect-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.effect-badge{position:absolute;font-size:56px;line-height:1;animation:effect-pop .3s ease-out;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));-webkit-user-select:none;user-select:none}.effect-badge.effect-head{top:8%;left:50%;transform:translate(-50%)}.effect-badge.effect-eyes{top:32%;left:50%;transform:translate(-50%)}.effect-badge.effect-nose{top:45%;left:50%;transform:translate(-50%)}.effect-badge.effect-mouth,.effect-badge.effect-mustache{top:55%;left:50%;transform:translate(-50%)}.effect-badge.effect-ears{top:25%;left:50%;transform:translate(-50%)}.effect-badge.effect-face{top:40%;left:50%;transform:translate(-50%);font-size:80px}.effect-badge.effect-full{top:50%;left:50%;transform:translate(-50%,-50%);font-size:120px;animation:effect-pop-full .3s ease-out}@keyframes effect-pop{0%{opacity:0;transform:translate(-50%) scale(.3)}60%{transform:translate(-50%) scale(1.15)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes effect-pop-full{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}60%{transform:translate(-50%,-50%) scale(1.15)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.video-item.drag-over,.video-item.drag-hover{outline:3px solid #22d3ee;outline-offset:-3px;box-shadow:0 0 24px #22d3ee99,inset 0 0 32px #22d3ee26;transform:scale(1.02);transition:outline .15s ease,box-shadow .15s ease,transform .15s ease;z-index:5;border-radius:inherit}.video-grid{flex:1;display:grid;gap:calc(2px * var(--vp-scale-space));padding:calc(2px * var(--vp-scale-space));width:100%;height:100%;background:var(--video-grid-bg, #0a0a14);min-height:0;overflow:hidden}.video-grid.single-user{grid-template-columns:1fr!important}.video-grid.two-users{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important}.video-grid.fullscreen-mode{gap:0;padding:0}.video-top-left{display:flex;align-items:center;gap:var(--space-sm);align-self:flex-start;pointer-events:none}.video-top-left .video-name-tag,.video-top-left .speaking-indicator{pointer-events:auto}.video-item.local-floating{box-shadow:var(--floating-shadow, 0 8px 32px rgba(0, 0, 0, .6));border:calc(2px * var(--vp-scale-space)) solid var(--floating-border-color, var(--color-primary));border-radius:var(--floating-radius, var(--radius-md));cursor:grab;overflow:hidden;transition:none;touch-action:none}.video-item.local-floating:active{cursor:grabbing}.floating-controls{position:absolute;top:var(--space-xs);right:var(--space-xs);display:flex;gap:var(--space-xs);z-index:10;pointer-events:auto}.floating-controls .minimize-btn{border:none;background:var(--preview-overlay-bg, rgba(0, 0, 0, .6));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);padding:0}.floating-controls .minimize-btn:hover{background:var(--color-error);transform:scale(1.1)}.floating-controls .minimize-btn svg{width:60%;height:60%;display:block}.resize-handle{position:absolute;right:0;bottom:0;width:calc(20px * var(--vp-scale-space));height:calc(20px * var(--vp-scale-space));cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--color-primary) 50%);opacity:.6;z-index:10;pointer-events:auto}.resize-handle:hover{opacity:1}.floating-restore-btn{border:calc(2px * var(--vp-scale-space)) solid var(--floating-border-color, var(--color-primary));background:var(--preview-overlay-bg-hover, rgba(0, 0, 0, .75));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 20px #00000080;padding:0}.floating-restore-btn:hover{transform:scale(1.1);box-shadow:0 6px 30px #0009}.floating-restore-btn svg{width:50%;height:50%;display:block;flex-shrink:0}@media (max-width: 768px){.video-grid{gap:1px;padding:1px}}@media (max-width: 480px){.video-grid{gap:1px;padding:1px}}.video-controls{position:absolute;bottom:var(--video-controls-bottom);left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:var(--video-controls-gap);padding:var(--video-controls-padding);background:var(--video-controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--video-controls-radius);border:1px solid var(--video-controls-border);z-index:1100;transition:all .4s ease;box-shadow:0 8px 40px #0006}.video-controls.visible{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.video-controls.hidden{opacity:0;transform:translate(-50%) translateY(20px);pointer-events:none}.controls-left{display:flex;align-items:center;gap:var(--space-sm);margin-right:var(--space-xs)}.controls-participants{display:flex;align-items:center;gap:var(--space-xs);padding:6px 12px;font-size:var(--font-sm);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base);font-family:var(--font-body)}.controls-participants:hover{background:var(--preview-overlay-track, rgba(255, 255, 255, .08));color:var(--preview-overlay-text, #ffffff)}.controls-participants.active{background:var(--color-primary-dim);color:var(--color-primary)}.controls-participants svg{width:var(--icon-sm);height:var(--icon-sm);display:block;flex-shrink:0}.controls-center{display:flex;align-items:center;gap:var(--space-sm)}.controls-right{display:flex;align-items:center;gap:var(--space-sm);margin-left:var(--space-xs)}.control-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--video-btn-padding);border-radius:var(--video-btn-radius);border:none;font-size:var(--video-btn-font-size);font-weight:500;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));background:var(--preview-overlay-track, rgba(255, 255, 255, .08))}.control-btn:hover{transform:translateY(-2px);background:var(--preview-overlay-track-hover, rgba(255, 255, 255, .15))}.control-btn:active{transform:translateY(0)}.control-btn svg{width:var(--video-btn-icon-size);height:var(--video-btn-icon-size);display:block;flex-shrink:0}.control-btn.on{color:var(--color-primary, #22d3ee);background:var(--color-primary-dim)}.control-btn.on:hover{background:var(--color-primary-weak)}.control-btn.off{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .5));background:var(--preview-overlay-track, rgba(255, 255, 255, .08))}.control-btn.off:hover{background:var(--preview-overlay-track-hover, rgba(255, 255, 255, .15))}.control-btn.off svg{color:var(--color-error, #ef4444)}.control-btn span{font-size:var(--video-btn-font-size)}.control-btn.end-call{background:var(--color-error);color:#fff;padding:var(--video-btn-end-call-padding);font-weight:600}.control-btn.end-call:hover{background:var(--color-error);transform:translateY(-2px);box-shadow:0 4px 20px var(--color-error-dim)}.control-btn.end-call:active{transform:translateY(0)}.control-btn.end-call span{font-weight:600}.control-btn.layout-btn,.control-btn.fullscreen-btn{padding:var(--space-xs) var(--space-sm);background:var(--preview-overlay-track, rgba(255, 255, 255, .08));color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75))}.control-btn.layout-btn:hover,.control-btn.fullscreen-btn:hover{background:var(--preview-overlay-track-hover, rgba(255, 255, 255, .15));color:var(--preview-overlay-text, #ffffff)}.control-btn.effect-btn.active{background:var(--color-primary-dim);color:var(--color-primary);box-shadow:0 0 12px var(--color-primary-weak)}.resolution-selector{position:relative}.resolution-btn{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:none;background:var(--preview-overlay-track, rgba(255, 255, 255, .08));color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));cursor:pointer;transition:all .2s;font-size:var(--font-md);display:flex;align-items:center;justify-content:center}.resolution-btn:hover{background:var(--preview-overlay-track-hover, rgba(255, 255, 255, .15));color:var(--preview-overlay-text, #ffffff)}.resolution-menu{position:absolute;bottom:calc(100% + var(--space-sm));right:0;background:var(--preview-popup-bg, rgba(20, 20, 31, .92));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-md);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));padding:var(--space-sm);min-width:calc(160px * var(--vp-scale-space));box-shadow:var(--shadow-card);animation:slideUp .2s ease-out;z-index:5}.resolution-menu-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-sm) var(--space-sm);font-size:var(--font-xs);color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));border-bottom:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08))}.auto-quality-toggle{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-xs);cursor:pointer;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65))}.auto-quality-toggle input{accent-color:var(--color-primary)}.resolution-option{display:block;width:100%;padding:var(--space-sm) var(--space-md);border:none;background:transparent;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--font-xs);cursor:pointer;border-radius:var(--radius-sm);transition:all .2s;text-align:left;font-family:var(--font-body)}.resolution-option:hover:not(:disabled){background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .08));color:var(--preview-popup-text, #ffffff)}.resolution-option.active{background:var(--color-primary-dim);color:var(--color-primary)}.resolution-option:disabled{opacity:.3;cursor:not-allowed}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.emoji-picker{position:absolute;bottom:calc(100% + var(--space-sm));left:50%;transform:translate(-50%);display:flex;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--preview-popup-bg, rgba(20, 20, 31, .92));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-md);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));box-shadow:var(--shadow-card);animation:slideUp .2s ease-out;z-index:5}.emoji-picker button{width:calc(40px * var(--vp-scale-icon));height:calc(40px * var(--vp-scale-icon));border:none;background:transparent;font-size:calc(24px * var(--vp-scale-font));cursor:pointer;border-radius:var(--radius-sm);transition:all .2s;display:flex;align-items:center;justify-content:center;padding:0}.emoji-picker button:hover{background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .08));transform:scale(1.2)}.control-btn.invite-btn{position:relative;background:var(--preview-overlay-track, rgba(255, 255, 255, .08));color:var(--preview-overlay-text, #ffffff);border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .15));transition:all .3s ease}.control-btn.invite-btn:hover{background:var(--color-green-dim, rgba(76, 175, 80, .3));border-color:var(--color-green, #4CAF50);transform:scale(1.05)}.control-btn.invite-btn:active{transform:scale(.95)}.invite-tooltip{position:absolute;bottom:calc(100% + var(--space-sm));left:50%;transform:translate(-50%);background:var(--color-green, #4CAF50);color:#fff;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-xs);font-size:var(--font-xs);white-space:nowrap;animation:inviteTooltipFade 2s ease forwards;pointer-events:none;font-family:var(--font-body)}.invite-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-green, #4CAF50)}@keyframes inviteTooltipFade{0%{opacity:0;transform:translate(-50%) translateY(4px)}15%{opacity:1;transform:translate(-50%) translateY(0)}85%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-4px)}}@media (max-width: 768px){.video-controls{max-width:95%;flex-wrap:nowrap}.control-btn span,.controls-left,.controls-right{display:none}.controls-center{gap:var(--space-xs)}}@media (max-width: 480px){.control-btn.invite-btn span:not(.invite-tooltip){display:none}}.video-participant-strip{position:absolute;bottom:var(--participant-strip-bottom, 112px);left:50%;transform:translate(-50%);z-index:20;cursor:pointer;padding:var(--participant-strip-padding, var(--space-sm) var(--space-lg));background:var(--video-controls-bg, rgba(0, 0, 0, .6));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--participant-strip-radius, var(--radius-lg));border:1px solid var(--video-controls-border, rgba(255, 255, 255, .06));transition:all var(--transition-base);-webkit-user-select:none;user-select:none}.video-participant-strip:hover{background:var(--video-controls-bg, rgba(0, 0, 0, .75));transform:translate(-50%) scale(1.02)}.strip-content{display:flex;align-items:center;gap:var(--space-md)}.strip-avatars{display:flex;align-items:center}.strip-avatar-item{position:relative;width:var(--strip-avatar-size, calc(32px * var(--vp-scale-icon)));height:var(--strip-avatar-size, calc(32px * var(--vp-scale-icon)));border-radius:50%;overflow:hidden;border:calc(2px * var(--vp-scale-space)) solid var(--preview-popup-bg, #14141f);margin-right:calc(-4px * var(--vp-scale-space));flex-shrink:0;background:var(--preview-popup-bg, #14141f)}.strip-avatar-item:last-child{margin-right:0}.strip-avatar-item.speaking{border-color:var(--color-primary);box-shadow:0 0 12px var(--color-primary-dim)}.strip-avatar-item.muted{opacity:.7}.strip-avatar-img{width:100%;height:100%;object-fit:cover}.strip-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:600;background:var(--gradient-primary);color:#fff}.strip-speaking-dot{position:absolute;bottom:calc(-1px * var(--vp-scale-space));right:calc(-1px * var(--vp-scale-space));width:var(--strip-speaking-dot-size, calc(10px * var(--vp-scale-space)));height:var(--strip-speaking-dot-size, calc(10px * var(--vp-scale-space)));border-radius:50%;background:var(--color-green, #4caf50);border:calc(2px * var(--vp-scale-space)) solid var(--preview-popup-bg, #14141f);animation:dot-pulse .8s ease-in-out infinite}.strip-more-badge{width:var(--strip-avatar-size, calc(32px * var(--vp-scale-icon)));height:var(--strip-avatar-size, calc(32px * var(--vp-scale-icon)));border-radius:50%;background:var(--preview-overlay-track, rgba(255, 255, 255, .1));border:calc(2px * var(--vp-scale-space)) solid var(--preview-overlay-border, rgba(255, 255, 255, .15));display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);font-weight:600;color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));margin-left:calc(-4px * var(--vp-scale-space));flex-shrink:0}.strip-status-icon{position:absolute;bottom:calc(-2px * var(--vp-scale-space));right:calc(-2px * var(--vp-scale-space));font-size:calc(10px * var(--vp-scale-font));background:var(--preview-overlay-bg, rgba(0, 0, 0, .7));border-radius:50%;padding:1px;line-height:1;border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .15))}.strip-info{display:flex;align-items:center;gap:var(--space-xs);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));font-size:var(--font-sm)}.strip-info svg{width:var(--icon-sm);height:var(--icon-sm);display:block;flex-shrink:0}.strip-count{font-weight:600;color:var(--preview-overlay-text, #ffffff)}.strip-speaking-count{color:var(--color-green, #4caf50);font-size:var(--font-xs)}.strip-arrow{color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));display:flex;align-items:center;justify-content:center;transition:transform var(--transition-base)}.strip-arrow svg{width:var(--icon-sm);height:var(--icon-sm);display:block;flex-shrink:0}.video-participant-strip:hover .strip-arrow{transform:translateY(2px)}@keyframes dot-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}.participant-popup-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background:var(--preview-backdrop, rgba(0, 0, 0, .2));backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:backdropFadeIn .2s ease-out}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}.participant-popup{position:fixed;z-index:100;background:var(--preview-popup-bg-solid, rgba(20, 20, 31, .98));box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;overflow:hidden}.participant-popup-side{top:0;right:0;bottom:0;width:360px;max-width:90vw;border-left:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:0;animation:slideInRight .25s ease-out}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.participant-popup-bottom{left:0;right:0;bottom:0;width:100%;max-height:60vh;min-height:40vh;border-top:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:var(--radius-lg) var(--radius-lg) 0 0;animation:slideInBottom .25s ease-out}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.popup-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));flex-shrink:0}.popup-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-md);font-weight:600;color:var(--preview-popup-text, #ffffff);margin:0;font-family:var(--font-body)}.popup-title svg{width:var(--icon-md);height:var(--icon-md);display:block;flex-shrink:0;color:var(--color-primary)}.popup-close-btn{width:var(--btn-sm);height:var(--btn-sm);border-radius:50%;border:none;background:var(--preview-overlay-track, rgba(255, 255, 255, .08));color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);padding:0;flex-shrink:0}.popup-close-btn svg{width:var(--icon-sm);height:var(--icon-sm);display:block;flex-shrink:0}.popup-close-btn:hover{background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .12));color:var(--preview-popup-text, #ffffff)}.popup-list{flex:1;overflow-y:auto;padding:var(--space-sm) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);min-height:0}.popup-list::-webkit-scrollbar{width:4px}.popup-list::-webkit-scrollbar-track{background:transparent}.popup-list::-webkit-scrollbar-thumb{background:var(--preview-popup-border, rgba(255, 255, 255, .1));border-radius:var(--radius-xs)}.popup-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:var(--preview-overlay-track, rgba(255, 255, 255, .04));border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));cursor:pointer;transition:all var(--transition-fast);position:relative}.popup-item:hover{background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .08));border-color:var(--preview-overlay-border, rgba(255, 255, 255, .15))}.popup-item.speaking{border-color:var(--color-green-border, rgba(76, 175, 80, .3));background:var(--color-green-dim, rgba(76, 175, 80, .05))}.popup-item.self{background:var(--color-primary-dim, rgba(34, 211, 238, .12));border-color:var(--color-primary, #22d3ee);cursor:default}.popup-item.self:hover{background:var(--color-primary-dim, rgba(34, 211, 238, .12));border-color:var(--color-primary, #22d3ee)}.popup-item.muted{opacity:.8}.popup-item-avatar{position:relative;width:var(--avatar-md);height:var(--avatar-md);border-radius:50%;overflow:hidden;flex-shrink:0}.popup-item-avatar img{width:100%;height:100%;object-fit:cover}.popup-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-md);font-weight:600;background:var(--gradient-primary);color:#fff}.popup-item-badge{position:absolute;bottom:calc(-2px * var(--vp-scale-space));right:calc(-2px * var(--vp-scale-space));font-size:calc(8px * var(--vp-scale-font));font-weight:600;padding:1px var(--space-xs);border-radius:var(--radius-xs);background:var(--color-primary);color:#fff;border:calc(2px * var(--vp-scale-space)) solid var(--preview-popup-bg-solid, #14141f)}.popup-speaking-dot{position:absolute;bottom:calc(-2px * var(--vp-scale-space));right:calc(-2px * var(--vp-scale-space));width:calc(12px * var(--vp-scale-space));height:calc(12px * var(--vp-scale-space));border-radius:50%;background:var(--color-green, #4caf50);border:calc(2px * var(--vp-scale-space)) solid var(--preview-popup-bg-solid, #14141f);animation:dot-pulse .8s ease-in-out infinite}.popup-muted-badge{position:absolute;bottom:calc(-2px * var(--vp-scale-space));right:calc(-2px * var(--vp-scale-space));font-size:calc(10px * var(--vp-scale-font));background:var(--preview-overlay-bg, rgba(0, 0, 0, .7));border-radius:50%;padding:1px;line-height:1}.popup-item-info{flex:1;display:flex;flex-direction:column;min-width:0;gap:var(--space-xs)}.popup-item-name{font-size:var(--font-sm);font-weight:500;color:var(--preview-popup-text, #ffffff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup-item-status{font-size:var(--font-xs);font-weight:500;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .55))}.popup-item-status.status-video{color:var(--color-green, #4caf50)}.popup-item-status.status-muted{color:var(--color-warning)}.popup-item-status.status-audio{color:var(--color-primary)}.popup-item-status.status-idle,.popup-item-status.status-standby{color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .5))}.popup-item-status.online{color:var(--color-green, #4caf50)}.popup-item-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0}.popup-speaking-indicator{font-size:var(--font-xs);color:var(--color-green, #4caf50)}.popup-mic-off{color:var(--color-error)}.popup-action-btn{display:flex;align-items:center;justify-content:center;width:calc(28px * var(--vp-scale-btn));height:calc(28px * var(--vp-scale-btn));border:none;border-radius:50%;background:var(--preview-overlay-track, rgba(255, 255, 255, .08));color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));cursor:pointer;padding:0;transition:all var(--transition-fast);flex-shrink:0}.popup-action-btn:hover{background:var(--color-primary-dim);color:var(--color-primary);transform:scale(1.1)}.popup-action-btn svg{width:calc(16px * var(--vp-scale-icon));height:calc(16px * var(--vp-scale-icon))}.popup-action-btn.danger{background:rgba(239,68,68,.15);color:#ef4444}.popup-action-btn.danger:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.popup-footer{padding:var(--space-sm) var(--space-lg);border-top:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));text-align:center;font-size:var(--font-xs);color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .5));flex-shrink:0}.popup-item-disconnected-tag{display:inline-block;margin-left:6px;padding:1px 6px;font-size:10px;color:var(--color-warning, #f59e0b);background:rgba(245,158,11,.12);border-radius:4px;font-weight:500;vertical-align:middle}.popup-item-status.status-disconnected{color:var(--color-warning, #f59e0b);font-variant-numeric:tabular-nums}@media (max-width: 480px){.participant-popup-side{top:auto;right:0;bottom:0;left:0;width:100%;max-height:60vh;min-height:40vh;border-left:none;border-top:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:var(--radius-lg) var(--radius-lg) 0 0;animation:slideInBottom .25s ease-out}}@media (max-width: 900px) and (orientation: landscape){.participant-popup-bottom{top:0;right:0;bottom:0;left:auto;width:320px;max-width:60vw;max-height:100vh;min-height:100vh;border-left:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-top:none;border-radius:0;animation:slideInRight .25s ease-out}}@media (max-width: 768px){.strip-speaking-count{display:none}}@media (max-width: 480px){.strip-arrow{display:none}}.effect-panel-drawer{position:fixed;bottom:0;left:0;right:0;background:rgba(20,20,30,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px 20px 0 0;padding:8px 16px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1000;animation:effect-slide-up .3s cubic-bezier(.16,1,.3,1);box-shadow:0 -8px 32px #00000080;overflow:visible}@keyframes effect-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.effect-panel-handle{width:40px;height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin:4px auto 8px}.effect-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.effect-panel-title{color:#fff;font-size:16px;font-weight:600}.effect-panel-close{background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.effect-panel-tabs{display:flex;gap:8px;margin-bottom:16px}.effect-tab{padding:6px 14px;background:rgba(255,255,255,.08);border:none;border-radius:12px;color:#aaa;font-size:13px;cursor:pointer;transition:all .2s}.effect-tab.active{background:linear-gradient(135deg,#22d3ee,#06b6d4);color:#000;font-weight:500}.effect-panel-scroll{display:flex;gap:12px;overflow-x:auto;padding:8px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}.effect-panel-scroll::-webkit-scrollbar{display:none}.effect-item{flex-shrink:0;width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-x;transition:transform .15s}.effect-item:active:not(.cooling){transform:scale(.92)}.effect-item.cooling{opacity:.6;cursor:not-allowed}.effect-icon-wrap{position:relative;width:60px;height:60px}.effect-icon{width:100%;height:100%;border-radius:16px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid rgba(255,255,255,.12);overflow:hidden}.effect-icon img{width:100%;height:100%;object-fit:contain;display:block}.effect-cooldown-mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;pointer-events:none}.cooldown-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.cooldown-text{position:relative;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.8);z-index:1}.effect-name{font-size:11px;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .75));text-align:center;white-space:nowrap}.effect-panel-hint{text-align:center;font-size:12px;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .4));padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.effect-panel-drawer.dragging{opacity:.3;pointer-events:none;transition:opacity .15s}.effect-panel-target-hint{font-size:12px;color:#22d3ee;font-weight:400;margin-left:4px}.interactive-section{padding:16px 0;display:flex;flex-direction:column;gap:16px}.interactive-toggle{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(255,255,255,.06);border-radius:12px;cursor:pointer;transition:background .2s}.interactive-toggle:active{background:rgba(255,255,255,.12)}.interactive-toggle input[type=checkbox]{width:20px;height:20px;accent-color:var(--color-primary, #22d3ee);cursor:pointer}.interactive-toggle-label{font-size:15px;color:#fff;font-weight:500}.interactive-list{display:flex;flex-direction:column;gap:8px}.interactive-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.04);border-radius:10px;opacity:.5;transition:opacity .2s}.interactive-item.active{opacity:1}.interactive-icon{font-size:24px;flex-shrink:0}.interactive-info{display:flex;flex-direction:column;gap:2px}.interactive-name{font-size:14px;color:#fff}.interactive-desc{font-size:12px;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .55))}.interactive-hint{font-size:12px;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .4));text-align:center;margin:0}.theme-section{padding:8px 0;display:flex;flex-direction:column;gap:12px}.theme-grid{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto}.theme-card{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;cursor:pointer;transition:all .2s;overflow:hidden}.theme-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--theme-gradient, linear-gradient(135deg, #888, #555));opacity:0;transition:opacity .2s;z-index:0}.theme-card.active{border-color:var(--theme-color, #fff);box-shadow:0 0 16px var(--theme-color, rgba(255,255,255,.3))}.theme-card.active:before{opacity:.15}.theme-card:active{transform:scale(.98)}.theme-icon{font-size:32px;flex-shrink:0;position:relative;z-index:1}.theme-info{flex:1;position:relative;z-index:1}.theme-name{font-size:15px;color:#fff;font-weight:600;margin-bottom:2px}.theme-desc{font-size:12px;color:#aaa}.theme-active-badge{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--theme-color, #22d3ee);color:#000;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.theme-hint{text-align:center;font-size:12px;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .4));margin:0}.effect-panel-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin:8px 12px;background:var(--preview-overlay-track, rgba(255, 255, 255, .06));border-radius:10px;border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08))}.effect-switch-info{display:flex;flex-direction:column;gap:2px}.effect-switch-label{font-size:13px;font-weight:500;color:var(--preview-popup-text, #ffffff)}.effect-switch-desc{font-size:11px;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .5))}.effect-switch-btn{padding:6px 14px;border-radius:16px;font-size:12px;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}.effect-switch-btn.on{background:#22c55e;color:#fff}.effect-switch-btn.off{background:var(--preview-overlay-track, rgba(255, 255, 255, .15));color:var(--preview-popup-text, #ffffff)}.effect-switch-btn:disabled{opacity:.6;cursor:not-allowed}.group-video-call{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--video-call-bg, #07070f);z-index:1000;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-body)}.group-video-call.fullscreen{z-index:9999}.group-video-call-error{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);background:var(--video-call-bg, #07070f);color:#fff;z-index:9999;padding:var(--space-lg)}.group-video-call-error p{font-size:var(--font-md)}.group-video-call-error button{padding:var(--space-sm) var(--space-lg);background:var(--color-primary-dim);color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);font-size:var(--font-sm)}.video-network-indicator{position:absolute;top:var(--network-indicator-top);right:var(--network-indicator-right);display:flex;align-items:center;gap:var(--space-sm);padding:var(--network-indicator-padding);background:var(--video-controls-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--network-indicator-radius);font-size:var(--network-indicator-font-size);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));z-index:10;border:1px solid var(--video-controls-border);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}.quality-dot{width:var(--quality-dot-size);height:var(--quality-dot-size);border-radius:50%;display:inline-block;flex-shrink:0}.quality-dot.excellent{background:#4caf50;box-shadow:0 0 6px #4caf50}.quality-dot.good{background:#8bc34a;box-shadow:0 0 6px #8bc34a}.quality-dot.fair{background:#ffc107;box-shadow:0 0 6px #ffc107}.quality-dot.slow{background:#ff9800;box-shadow:0 0 6px #ff9800}.quality-dot.poor{background:#f44336;box-shadow:0 0 6px #f44336}.quality-dot.unknown{background:#9e9e9e}.quality-text.excellent{color:#4caf50}.quality-text.good{color:#8bc34a}.quality-text.fair{color:#ffc107}.quality-text.slow{color:#ff9800}.quality-text.poor{color:#f44336}.quality-text.unknown{color:#9e9e9e}@keyframes poor-quality-pulse{0%,to{opacity:1}50%{opacity:.4}}.network-details-popup{position:absolute;top:calc(100% + var(--space-sm));right:0;left:auto;transform:none;background:var(--preview-popup-bg, rgba(20, 20, 31, .92));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:var(--radius-md);padding:var(--space-md);min-width:calc(200px * var(--vp-scale-space));box-shadow:var(--shadow-card);z-index:20;max-width:calc(100vw - 32px)}.network-detail-item{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-xs) 0;font-size:var(--font-xs);color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65))}.network-detail-item .quality-text.good{color:var(--color-green, #4caf50)}.network-detail-item .quality-text.fair{color:var(--color-warning)}.network-detail-item .quality-text.poor{color:var(--color-error)}.video-connecting-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--connecting-overlay-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100}.connecting-spinner{width:var(--connecting-spinner-size);height:var(--connecting-spinner-size);border:var(--connecting-spinner-border) solid var(--preview-overlay-track, rgba(255, 255, 255, .1));border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.video-connecting-overlay p{margin-top:var(--space-md);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));font-size:var(--connecting-font-size)}.video-error-toast{position:absolute;bottom:var(--video-error-toast-bottom);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-md);padding:var(--video-error-toast-padding);background:var(--color-error);border-radius:var(--video-error-toast-radius);font-size:var(--video-error-toast-font-size);color:#fff;box-shadow:0 8px 40px #ef44444d;z-index:50;animation:slideUp .3s ease-out;max-width:90%}.video-error-toast button{background:none;border:none;color:#ffffffb3;font-size:var(--font-lg);cursor:pointer;padding:0 var(--space-xs)}.video-click-hint{position:absolute;bottom:var(--video-click-hint-bottom);left:50%;transform:translate(-50%);z-index:20;padding:var(--video-click-hint-padding);background:var(--video-controls-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--video-click-hint-radius);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));font-size:var(--video-click-hint-font-size);pointer-events:none;animation:fadeInOut 2s ease-in-out infinite;border:1px solid var(--video-controls-border)}@keyframes fadeInOut{0%,to{opacity:.5;transform:translate(-50%) scale(1)}50%{opacity:1;transform:translate(-50%) scale(1.02)}}.video-call-duration{position:absolute;top:var(--duration-top);left:50%;transform:translate(-50%);z-index:10;display:flex;align-items:center;gap:var(--space-sm);padding:var(--duration-padding);background:var(--video-controls-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--duration-radius);border:1px solid var(--video-controls-border);font-size:var(--duration-font-size);color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));pointer-events:none;font-family:var(--font-body)}.duration-icon{font-size:var(--duration-font-size);line-height:1}.duration-time{font-family:SF Mono,Monaco,Consolas,monospace;font-weight:500;letter-spacing:.5px;color:var(--preview-overlay-text, #ffffff)}.screen-sharing-indicator{position:absolute;bottom:var(--sharing-indicator-bottom);left:50%;transform:translate(-50%);z-index:15;display:flex;align-items:center;gap:var(--space-sm);padding:var(--sharing-indicator-padding);background:var(--color-green-dim, rgba(76, 175, 80, .2));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--sharing-indicator-radius);border:1px solid var(--color-green-border, rgba(76, 175, 80, .3));font-size:var(--sharing-indicator-font-size);color:var(--color-green, #4caf50);animation:slideUp .3s ease-out}.screen-sharing-indicator .sharing-icon{font-size:var(--font-md);line-height:1}.screen-sharing-indicator .sharing-stop-btn{background:var(--preview-overlay-track, rgba(255, 255, 255, .1));border:none;color:var(--preview-overlay-text-secondary, rgba(255, 255, 255, .75));cursor:pointer;padding:2px var(--space-xs);border-radius:var(--radius-xs);font-size:var(--font-sm);transition:all .2s}.screen-sharing-indicator .sharing-stop-btn:hover{background:var(--color-error-dim);color:var(--color-error)}.video-toast{position:absolute;bottom:var(--video-toast-bottom);left:50%;transform:translate(-50%);z-index:25;padding:var(--video-toast-padding);border-radius:var(--video-toast-radius);font-size:var(--video-toast-font-size);font-weight:500;animation:slideUp .3s ease-out;pointer-events:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:var(--font-body);max-width:90%;text-align:center}.video-toast.info{background:var(--color-primary-dim);border:1px solid var(--color-primary);color:var(--color-primary)}.video-toast.success{background:var(--color-green-dim, rgba(76, 175, 80, .2));border:1px solid var(--color-green-border, rgba(76, 175, 80, .3));color:var(--color-green, #4caf50)}.video-toast.warning{background:var(--color-warning-dim, rgba(255, 152, 0, .2));border:1px solid var(--color-warning-weak, rgba(255, 152, 0, .3));color:var(--color-warning)}.video-toast.error{background:var(--color-error-dim);border:1px solid var(--color-error);color:var(--color-error)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.video-toast.emoji{background:var(--preview-overlay-bg, rgba(0, 0, 0, .6));border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .15));color:var(--preview-overlay-text, #ffffff);font-size:var(--font-lg);padding:var(--space-sm) var(--space-lg);min-width:60px;text-align:center}.video-toast.emoji span{font-size:var(--font-2xl)}.video-guest-badge{position:absolute;top:var(--guest-badge-top, var(--space-md));left:var(--space-md);z-index:10;padding:var(--guest-badge-padding);background:var(--guest-badge-bg);color:var(--guest-badge-color);border-radius:var(--guest-badge-radius);font-size:var(--guest-badge-font-size);font-family:var(--font-body);font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--preview-overlay-border, rgba(255, 255, 255, .15))}.video-participant-list-popup{position:absolute;bottom:calc(120px * var(--vp-scale-space));left:50%;transform:translate(-50%);z-index:40;width:100%;max-width:var(--participant-list-popup-width);max-height:var(--participant-list-popup-max-height);background:var(--participant-list-popup-bg, rgba(20, 20, 31, .95));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));border-radius:var(--participant-list-popup-radius);box-shadow:var(--shadow-card);display:flex;flex-direction:column;overflow:hidden;animation:slideUp .25s ease-out}.participant-list-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--preview-popup-border, rgba(255, 255, 255, .08));color:var(--preview-popup-text, #ffffff);font-size:var(--font-sm);font-weight:600;flex-shrink:0}.participant-list-header span{display:flex;align-items:center;gap:var(--space-xs)}.participant-list-header button{background:none;border:none;color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .65));font-size:var(--font-lg);cursor:pointer;padding:0 var(--space-xs);transition:color var(--transition-fast)}.participant-list-header button:hover{color:var(--preview-popup-text, #ffffff)}.participant-list-body{flex:1;overflow-y:auto;padding:var(--space-xs) 0}.participant-list-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--participant-list-item-padding);border-radius:var(--participant-list-item-radius);margin:0 var(--space-xs);transition:background var(--transition-fast)}.participant-list-item:hover{background:var(--preview-popup-hover-bg, rgba(255, 255, 255, .08))}.participant-list-item.self{background:var(--color-primary-dim, rgba(34, 211, 238, .12))}.participant-list-avatar{position:relative;width:var(--participant-list-avatar-size);height:var(--participant-list-avatar-size);border-radius:50%;overflow:hidden;background:var(--preview-overlay-track, rgba(255, 255, 255, .08));display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-primary, #22d3ee);font-weight:600}.participant-list-avatar img{width:100%;height:100%;object-fit:cover}.participant-list-avatar .self-badge{position:absolute;bottom:-2px;right:-2px;background:var(--color-primary);color:#fff;font-size:var(--font-xs);padding:0 var(--space-xs);border-radius:var(--radius-xs);font-weight:600}.participant-list-name{flex:1;min-width:0;font-size:var(--participant-list-name-size);color:var(--preview-popup-text, #ffffff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-list-status{display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}.status-icon{font-size:var(--font-sm);line-height:1}.status-icon.muted{color:var(--color-error)}.status-icon.video-off{color:var(--color-warning)}.status-icon.speaking{color:var(--color-green, #4caf50);animation:status-dot-pulse 1s ease-in-out infinite}.status-icon.disconnected{color:var(--preview-popup-text-secondary, rgba(255, 255, 255, .5))}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.online{background:var(--color-green, #4caf50);box-shadow:0 0 6px var(--color-green-dim, rgba(76, 175, 80, .6))}@keyframes status-dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.video-self-disconnected-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:rgba(0,0,0,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;padding:var(--space-lg);box-sizing:border-box}.disconnected-content{text-align:center;color:#fff;max-width:calc(400px * var(--vp-scale-space));width:100%;padding:var(--space-2xl);box-sizing:border-box}.disconnected-icon{font-size:calc(64px * var(--vp-scale-icon));margin-bottom:var(--space-lg);animation:float 2s ease-in-out infinite;line-height:1}.disconnected-content h3{font-size:calc(24px * var(--vp-scale-font));margin-bottom:var(--space-sm);color:var(--color-error, #ff6b6b);font-family:var(--font-body)}.disconnected-content p{font-size:calc(16px * var(--vp-scale-font));color:#ffffffb3;margin-bottom:var(--space-lg);font-family:var(--font-body)}.disconnected-spinner{width:var(--reconnect-icon-size, 40px);height:var(--reconnect-icon-size, 40px);border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin:var(--space-lg) auto}.disconnected-actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.disconnected-content .rejoin-btn{padding:var(--space-md) var(--space-2xl);border-radius:var(--radius-md);border:none;background:var(--gradient-primary);color:#fff;font-size:calc(16px * var(--vp-scale-font));font-weight:600;cursor:pointer;transition:all .3s;font-family:var(--font-body)}.disconnected-content .rejoin-btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--color-primary-dim)}.disconnected-content .leave-btn{padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.1);color:#ffffffb3;font-size:calc(16px * var(--vp-scale-font));cursor:pointer;transition:all .3s;font-family:var(--font-body)}.disconnected-content .leave-btn:hover{background:rgba(255,255,255,.2);color:#fff}@keyframes spin{to{transform:rotate(360deg)}}.reconnect-progress{width:100%;max-width:calc(300px * var(--vp-scale-space));margin:var(--space-lg) auto}.reconnect-info{display:flex;justify-content:space-between;font-size:var(--font-xs);color:#fff9;margin-bottom:var(--space-xs);font-family:var(--font-body)}.reconnect-bar{width:100%;height:var(--reconnect-bar-height);background:rgba(255,255,255,.1);border-radius:var(--reconnect-bar-radius);overflow:hidden}.reconnect-fill{height:100%;background:var(--gradient-primary);border-radius:var(--reconnect-bar-radius);transition:width .3s ease}@media (max-width: 768px){.video-network-indicator{top:var(--space-sm);right:var(--space-sm);padding:var(--space-xs) var(--space-sm);font-size:var(--font-xs)}.video-error-toast{max-width:90%;font-size:var(--font-sm);padding:var(--space-sm) var(--space-md)}.video-call-duration{top:var(--space-sm);padding:var(--space-xs) var(--space-md);font-size:var(--font-xs)}.screen-sharing-indicator{padding:var(--space-xs) var(--space-md);font-size:var(--font-xs)}.video-participant-list-popup{width:92vw;max-width:92vw}.network-details-popup{right:0;left:auto;transform:none;min-width:180px;max-width:calc(100vw - 32px)}}@media (max-width: 480px){.video-network-indicator{font-size:var(--font-xs);padding:2px var(--space-sm)}.video-click-hint{font-size:var(--font-xs);padding:var(--space-xs) var(--space-md)}.video-call-duration{top:var(--space-xs);padding:2px var(--space-sm);font-size:var(--font-xs)}.duration-icon,.screen-sharing-indicator .sharing-text{display:none}.disconnected-content{padding:var(--space-xl) var(--space-md)}.disconnected-actions{flex-direction:column;align-items:stretch}.disconnected-content .rejoin-btn,.disconnected-content .leave-btn{width:100%}}.drag-effect-ghost{font-size:56px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.7));animation:dragGhostPulse .5s ease-in-out infinite;-webkit-user-select:none;user-select:none}@keyframes dragGhostPulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}.video-item.drag-hover{outline:3px solid #22d3ee;outline-offset:2px;box-shadow:0 0 24px #22d3ee99,inset 0 0 24px #22d3ee26;transform:scale(1.02);transition:outline .15s ease,box-shadow .15s ease,transform .15s ease;z-index:5}.drag-target-hint{position:fixed;top:24px;left:50%;transform:translate(-50%);z-index:10000;display:flex;align-items:center;gap:8px;padding:10px 18px;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(34,211,238,.5);border-radius:24px;color:#fff;font-size:14px;font-weight:500;font-family:var(--font-body, system-ui, sans-serif);white-space:nowrap;pointer-events:none;animation:dragHintIn .2s ease-out;box-shadow:0 8px 32px #00000080,0 0 20px #22d3ee40}.drag-target-hint b{color:#22d3ee;font-weight:600;margin:0 2px}.drag-hint-emoji{font-size:16px;line-height:1}@keyframes dragHintIn{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 768px){.drag-target-hint{top:12px;font-size:12px;padding:8px 14px;max-width:90vw;overflow:hidden;text-overflow:ellipsis}}.effect-panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;background:transparent}.theme-flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9998;border:8px solid var(--theme-color, #fff);box-shadow:inset 0 0 60px var(--theme-color, #fff),0 0 60px var(--theme-color, #fff);animation:theme-flash-anim .6s ease-out}@keyframes theme-flash-anim{0%{opacity:0;transform:scale(.95)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}.theme-persistent-frame{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:40;border:3px solid var(--theme-color);box-shadow:inset 0 0 40px var(--theme-color),0 0 30px var(--theme-color);animation:themePulse 2.5s ease-in-out infinite;border-radius:12px}@keyframes themePulse{0%,to{opacity:.6;box-shadow:inset 0 0 30px var(--theme-color),0 0 20px var(--theme-color)}50%{opacity:1;box-shadow:inset 0 0 60px var(--theme-color),0 0 40px var(--theme-color)}}.call-screen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99998;background:#000;overflow:hidden}.call-preview-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99997;background:#000;overflow:hidden}.call-preview-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.call-preview-video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}.call-preview-video.mirrored{transform:scaleX(-1)}.call-preview-video.video-off{opacity:.15}.call-preview-bg-fallback{width:100%;height:100%;background:linear-gradient(135deg,#0a0a1a,#1a0a2e 50%,#0a1628)}.call-preview-bg-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(0,0,0,.15) 0%,rgba(0,0,0,.65) 70%,rgba(0,0,0,.9) 100%);pointer-events:none}.call-preview-foreground{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 56px) 24px calc(env(safe-area-inset-bottom,0px) + 40px);pointer-events:none}.call-preview-peer{display:flex;flex-direction:column;align-items:center;pointer-events:auto}.call-preview-bottom{display:flex;flex-direction:column;align-items:center;gap:24px;pointer-events:auto;width:100%}.call-preview-avatar-wrap{position:relative;width:calc(112px * var(--vp-scale-space));height:calc(112px * var(--vp-scale-space));margin-bottom:20px}.call-preview-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid rgba(255,255,255,.25);box-shadow:0 8px 32px #00000080}.call-preview-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:calc(48px * var(--vp-scale-font));font-weight:700;color:#fff;background:var(--gradient-primary)}.call-preview-avatar-pulse{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.4);animation:callPreviewPulse 1.8s ease-out infinite;pointer-events:none}@keyframes callPreviewPulse{0%{transform:scale(.95);opacity:.9}to{transform:scale(1.3);opacity:0}}.call-preview-name{font-size:calc(26px * var(--vp-scale-font));font-weight:700;color:#fff;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.6)}.call-preview-subtitle{font-size:var(--font-sm);color:#ffffffbf;margin-bottom:8px}.call-preview-timer{font-size:var(--font-xs);color:#ffffff80;font-variant-numeric:tabular-nums}.call-preview-controls{display:flex;gap:24px;align-items:center;justify-content:center}.call-preview-ctrl{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);cursor:pointer;transition:all .15s ease}.call-preview-ctrl:hover{background:rgba(255,255,255,.28)}.call-preview-ctrl:active{transform:scale(.92)}.call-preview-ctrl.off{background:rgba(239,68,68,.28);border-color:#ef44448c}.call-preview-ctrl span{display:none}.call-preview-cancel{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;transition:transform .15s ease}.call-preview-cancel:active{transform:scale(.92)}.call-preview-cancel-icon{display:flex;align-items:center;justify-content:center;width:calc(64px * var(--vp-scale-btn));height:calc(64px * var(--vp-scale-btn));border-radius:50%;color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px #ef444480}.call-preview-cancel-label{font-size:var(--font-sm);color:#ffffffd9;font-weight:500}:root{--vp-scale: 1;--vp-scale-font: 1;--vp-scale-space: 1;--vp-scale-icon: 1;--vp-scale-radius: 1;--vp-scale-btn: 1;--vp-device-font: 1;--vp-device-space: 1}:root{--color-accent-dim: rgba(236, 72, 153, .08);--color-secondary-dim: rgba(139, 92, 246, .08);--breakpoint-small: 374px;--breakpoint-mobile: 430px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1024px;--breakpoint-large: 1440px;--font-logo: "Orbitron", sans-serif;--font-body: "Rajdhani", sans-serif;--tabbar-height: calc(65px * var(--vp-scale-space));--safe-area-bottom: env(safe-area-inset-bottom, 0px);--input-bottom-min: calc(var(--space-md) + var(--safe-area-bottom));--input-bottom-default: var(--space-lg);--font-xs: calc(13px * var(--vp-scale-font) * var(--vp-device-font));--font-sm: calc(14px * var(--vp-scale-font) * var(--vp-device-font));--font-base: calc(16px * var(--vp-scale-font) * var(--vp-device-font));--font-md: calc(18px * var(--vp-scale-font) * var(--vp-device-font));--font-lg: calc(20px * var(--vp-scale-font) * var(--vp-device-font));--font-xl: calc(24px * var(--vp-scale-font) * var(--vp-device-font));--font-2xl: calc(28px * var(--vp-scale-font) * var(--vp-device-font));--font-3xl: calc(32px * var(--vp-scale-font) * var(--vp-device-font));--font-4xl: calc(38px * var(--vp-scale-font) * var(--vp-device-font));--space-xs: calc(6px * var(--vp-scale-space) * var(--vp-device-space));--space-sm: calc(8px * var(--vp-scale-space) * var(--vp-device-space));--space-md: calc(12px * var(--vp-scale-space) * var(--vp-device-space));--space-lg: calc(16px * var(--vp-scale-space) * var(--vp-device-space));--space-xl: calc(22px * var(--vp-scale-space) * var(--vp-device-space));--space-2xl: calc(28px * var(--vp-scale-space) * var(--vp-device-space));--space-3xl: calc(36px * var(--vp-scale-space) * var(--vp-device-space));--radius-xs: calc(7px * var(--vp-scale-radius));--radius-sm: calc(12px * var(--vp-scale-radius));--radius-md: calc(18px * var(--vp-scale-radius));--radius-lg: calc(24px * var(--vp-scale-radius));--radius-xl: calc(30px * var(--vp-scale-radius));--radius-2xl: calc(36px * var(--vp-scale-radius));--radius-full: 9999px;--avatar-xs: calc(30px * var(--vp-scale-icon));--avatar-sm: calc(38px * var(--vp-scale-icon));--avatar-md: calc(48px * var(--vp-scale-icon));--avatar-lg: calc(58px * var(--vp-scale-icon));--avatar-xl: calc(68px * var(--vp-scale-icon));--avatar-2xl: calc(80px * var(--vp-scale-icon));--avatar-3xl: calc(93px * var(--vp-scale-icon));--icon-xs: calc(16px * var(--vp-scale-icon));--icon-sm: calc(19px * var(--vp-scale-icon));--icon-md: calc(23px * var(--vp-scale-icon));--icon-lg: calc(28px * var(--vp-scale-icon));--icon-xl: calc(32px * var(--vp-scale-icon));--icon-2xl: calc(42px * var(--vp-scale-icon));--icon-3xl: calc(52px * var(--vp-scale-icon));--icon-4xl: calc(62px * var(--vp-scale-icon));--icon-5xl: calc(72px * var(--vp-scale-icon));--icon-6xl: calc(82px * var(--vp-scale-icon));--btn-xs: calc(30px * var(--vp-scale-btn));--btn-sm: calc(37px * var(--vp-scale-btn));--btn-md: calc(46px * var(--vp-scale-btn));--btn-lg: calc(56px * var(--vp-scale-btn));--btn-xl: calc(64px * var(--vp-scale-btn));--input-height: calc(48px * var(--vp-scale-btn));--input-radius: calc(22px * var(--vp-scale-radius));--input-padding: calc(13px * var(--vp-scale-space));--input-gap: calc(9px * var(--vp-scale-space));--msg-gap: calc(6px * var(--vp-scale-space));--msg-padding: calc(12px * var(--vp-scale-space));--msg-bubble-radius: calc(16px * var(--vp-scale-radius));--msg-avatar-size: calc(38px * var(--vp-scale-icon));--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease;--bg-primary: #07070f;--bg-secondary: #0d0d2b;--bg-modal: rgba(7, 7, 15, .96);--bg-card: rgba(255, 255, 255, .04);--bg-card-hover: rgba(255, 255, 255, .06);--bg-input: rgba(255, 255, 255, .06);--bg-overlay: rgba(0, 0, 0, .7);--toast-bg: rgba(20, 20, 30, .9);--toast-text: #f0f0ff;--toast-border: rgba(255, 255, 255, .08);--toast-shadow: 0 8px 32px rgba(0, 0, 0, .4);--confirm-glow-warning: rgba(251, 191, 36, .1);--confirm-glow-danger: rgba(239, 68, 68, .1);--confirm-glow-info: rgba(34, 211, 238, .1);--image-viewer-bg: rgba(0, 0, 0, .95);--image-viewer-btn-bg: rgba(0, 0, 0, .6);--image-viewer-btn-bg-hover: rgba(0, 0, 0, .8);--image-viewer-btn-border: rgba(255, 255, 255, .15);--image-viewer-btn-color: #fff;--image-viewer-counter-bg: rgba(0, 0, 0, .6);--logo-color: #ffffff;--color-text: #f0f0ff;--color-text-secondary: #8a8aaa;--color-text-muted: #6b6b8a;--color-text-inverse: #07070f;--color-primary: #22d3ee;--color-primary-dim: rgba(34, 211, 238, .12);--color-primary-weak: rgba(34, 211, 238, .06);--color-secondary: #a78bfa;--color-accent: #ec4899;--color-error: #ef4444;--color-error-dim: rgba(239, 68, 68, .1);--color-warning: #f59e0b;--color-warning-dim: rgba(245, 158, 11, .15);--color-warning-border: rgba(245, 158, 11, .3);--color-green: #4caf50;--color-green-dim: rgba(76, 175, 80, .15);--color-green-border: rgba(76, 175, 80, .3);--color-info: #2196f3;--color-info-dim: rgba(33, 150, 243, .15);--border-color: rgba(255, 255, 255, .06);--border-active: rgba(34, 211, 238, .25);--border-color-hover: rgba(255, 255, 255, .12);--neon-glow: 0 0 20px rgba(34, 211, 238, .15);--neon-glow-weak: 0 0 10px rgba(34, 211, 238, .05);--shadow-card: 0 0 30px rgba(34, 211, 238, .05);--shadow-glow: 0 0 20px rgba(34, 211, 238, .1);--gradient-primary: linear-gradient(135deg, #22d3ee, #a78bfa);--gradient-accent: linear-gradient(135deg, #ec4899, #a78bfa);--gradient-glow: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(167, 139, 250, .06));--gradient-warning: linear-gradient(135deg, #fbbf24, #f59e0b);--header-bg: rgba(7, 7, 15, .9);--cover-gradient: linear-gradient(135deg, #0d0d2b, #1a1a3e);--card-bg: rgba(255, 255, 255, .04);--followed-bg: rgba(255, 255, 255, .1);--followed-hover-bg: rgba(239, 68, 68, .15);--stats-bg: rgba(255, 255, 255, .03);--post-item-bg: rgba(255, 255, 255, .03);--post-item-hover-bg: rgba(255, 255, 255, .06);--spinner-bg: rgba(255, 255, 255, .1);--hover-bg: rgba(255, 255, 255, .05);--skeleton-base: rgba(255, 255, 255, .06);--skeleton-shine: rgba(255, 255, 255, .1);--tabbar-bg: rgba(18, 18, 42, .6);--tabbar-border: rgba(34, 211, 238, .15);--tabbar-item-active: #22d3ee;--tabbar-item-inactive: #f0f0ff;--tabbar-glow-color: rgba(34, 211, 238, .3);--tabbar-center-gradient: linear-gradient(135deg, #22d3ee, #a78bfa);--tabbar-center-border: rgba(255, 255, 255, .15);--tabbar-center-shadow: rgba(34, 211, 238, .3);--tabbar-center-shadow-hover: rgba(34, 211, 238, .4);--input-min-height: calc(46px * var(--vp-scale-space));--input-padding-y: calc(8px * var(--vp-scale-space));--input-padding-x: calc(14px * var(--vp-scale-space));--textarea-min-height: calc(34px * var(--vp-scale-space));--textarea-max-height: calc(120px * var(--vp-scale-space));--textarea-padding-y: calc(8px * var(--vp-scale-space));--textarea-padding-x: calc(34px * var(--vp-scale-space));--btn-icon-size: calc(22px * var(--vp-scale-icon));--btn-icon-wrapper: calc(34px * var(--vp-scale-icon));--send-btn-size: calc(40px * var(--vp-scale-btn));--send-btn-icon: calc(19px * var(--vp-scale-icon));--voice-btn-size: calc(30px * var(--vp-scale-btn));--voice-btn-icon: calc(17px * var(--vp-scale-icon));--emoji-btn-size: calc(34px * var(--vp-scale-btn));--emoji-btn-icon: calc(19px * var(--vp-scale-icon));--input-gap: calc(7px * var(--vp-scale-space));--input-box-gap: calc(5px * var(--vp-scale-space));--input-box-radius: calc(18px * var(--vp-scale-radius));--input-wrapper-radius: calc(20px * var(--vp-scale-radius));--video-controls-total-height: calc(72px * var(--vp-scale-space));--video-controls-safe-gap: calc(16px * var(--vp-scale-space));--floating-width-mobile-min: 140;--floating-width-mobile-max: 200;--floating-width-tablet-min: 220;--floating-width-tablet-max: 320;--floating-width-desktop-min: 260;--floating-width-desktop-max: 400;--floating-aspect-ratio: .75;--floating-min-mobile: 100;--floating-max-mobile: 280;--floating-min-tablet: 160;--floating-max-tablet: 400;--floating-min-desktop: 200;--floating-max-desktop: 500;--floating-name-tag-size: 10;--floating-indicator-size: 30;--floating-btn-size: 30;--floating-icon-size: 16;--floating-shadow: 0 8px 32px rgba(0, 0, 0, .6);--preview-overlay-bg: rgba(0, 0, 0, .5);--preview-overlay-bg-hover: rgba(0, 0, 0, .7);--preview-overlay-text: #ffffff;--preview-overlay-text-secondary: rgba(255, 255, 255, .85);--preview-overlay-border: rgba(255, 255, 255, .1);--pull-indicator-bg: rgba(0, 0, 0, .5);--pull-indicator-bg-light: rgba(255, 255, 255, .9);--tabbar-center-btn-size: calc(46px * var(--vp-scale-btn));--subtitle-size: calc(18px * var(--vp-scale-font) * var(--vp-device-font));--subtitle-color: #ffffff;--subtitle-bg: rgba(0, 0, 0, .75);--weather-tag-height: calc(34px * var(--vp-scale-btn));--weather-tag-height-compact: calc(28px * var(--vp-scale-btn));--weather-icon-sunny: #fbbf24;--weather-icon-cloudy: #9ca3af;--weather-icon-rain: #60a5fa;--weather-icon-thunder: #f59e0b;--weather-icon-fog: #9ca3af;--weather-icon-snow: #93c5fd;--weather-icon-hot: #ef4444;--weather-icon-cold: #60a5fa;--weather-icon-wind: #60a5fa;--chart-grid-line: rgba(255, 255, 255, .06);--chart-line-shadow: rgba(34, 211, 238, .2);--chart-gradient-top: rgba(34, 211, 238, .12);--chart-gradient-bottom: rgba(34, 211, 238, .01);--chart-temp-hot: #ef4444;--chart-temp-warm: #f59e0b;--chart-temp-cool: #22d3ee;--chart-temp-cold: #60a5fa;--chart-temp-max: #ef4444;--chart-temp-min: #60a5fa;--chart-point-stroke: rgba(255, 255, 255, .3);--chart-point-stroke-hi: rgba(255, 255, 255, .5);--chart-axis-text: rgba(255, 255, 255, .3);--chart-axis-text-hi: rgba(255, 255, 255, .8);--chart-cursor-line: rgba(255, 255, 255, .35);--chart-cursor-dot: rgba(34, 211, 238, .4);--chart-cursor-bg: rgba(34, 211, 238, .08);--chart-nav-bg: rgba(255, 255, 255, .08);--chart-nav-text: rgba(255, 255, 255, .4);--chart-font-xs: 9;--chart-font-sm: 10;--chart-font-md: 11;--chart-font-icon: 15;--chart-point-radius: 3;--chart-point-radius-hi: 5;--audio-bubble-max-width: calc(320px * var(--vp-scale-space));--audio-bubble-min-height: calc(44px * var(--vp-scale-btn));--audio-play-btn-size: calc(34px * var(--vp-scale-btn));--audio-play-icon-size: calc(16px * var(--vp-scale-icon));--audio-waveform-height: calc(24px * var(--vp-scale-space));--call-message-own-bg: #1b3a3f;--call-message-own-border: rgba(34, 211, 238, .35);--preview-header-gradient: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, transparent 100%);--preview-controls-gradient: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 100%);--preview-overlay-track: rgba(255, 255, 255, .1);--preview-popup-hover-bg: rgba(255, 255, 255, .06);--preview-backdrop: rgba(0, 0, 0, .2)}:root{--map-grid-size: calc(25px * var(--vp-scale-space));--map-grid-opacity: clamp(.15, .4, .5);--card-padding: calc(18px * var(--vp-scale-space));--card-gap: calc(16px * var(--vp-scale-space));--card-radius: calc(16px * var(--vp-scale-radius));--landmark-size: calc(40px * var(--vp-scale-space));--dot-size: calc(13px * var(--vp-scale-space));--toolbar-btn-size: calc(42px * var(--vp-scale-btn));--signal-bubble-padding: calc(11px * var(--vp-scale-space));--signal-bubble-radius: calc(20px * var(--vp-scale-radius));--signal-bubble-min-width: calc(150px * var(--vp-scale-space));--signal-bubble-shadow: 0 8px 32px rgba(0, 0, 0, .5);--toolbar-btn-radius: calc(15px * var(--vp-scale-radius));--toolbar-btn-gap: calc(11px * var(--vp-scale-space));--toolbar-icon-size: calc(22px * var(--vp-scale-icon));--toolbar-badge-size: calc(9px * var(--vp-scale-space));--bottom-bar-padding: calc(16px * var(--vp-scale-space));--bottom-bar-radius: calc(20px * var(--vp-scale-radius));--bottom-bar-min-width: calc(260px * var(--vp-scale-space));--bottom-avatar-size: calc(44px * var(--vp-scale-icon));--bottom-dot-size: calc(12px * var(--vp-scale-space));--bottom-name-size: calc(11px * var(--vp-scale-space));--user-marker-avatar-size: calc(50px * var(--vp-scale-icon));--user-marker-name-size: calc(14px * var(--vp-scale-icon));--user-marker-name-padding: calc(4px * var(--vp-scale-space)) calc(13px * var(--vp-scale-space));--user-marker-level-size: calc(10px * var(--vp-scale-icon));--popup-padding: calc(22px * var(--vp-scale-space));--popup-min-width: calc(330px * var(--vp-scale-space));--popup-max-width: calc(410px * var(--vp-scale-space));--popup-radius: calc(20px * var(--vp-scale-radius));--popup-bottom-offset: calc(150px * var(--vp-scale-space));--popup-avatar-size: calc(52px * var(--vp-scale-icon));--signal-wave-padding: calc(6px * var(--vp-scale-space)) calc(15px * var(--vp-scale-space));--signal-wave-radius: calc(24px * var(--vp-scale-radius));--signal-pending-padding: calc(5px * var(--vp-scale-space)) calc(10px * var(--vp-scale-space));--signal-icon-size: calc(19px * var(--vp-scale-icon));--signal-text-size: calc(14px * var(--vp-scale-space));--building-list-padding: 0 calc(16px * var(--vp-scale-space)) calc(16px * var(--vp-scale-space));--building-list-collapsed-height: calc(72px * var(--vp-scale-space));--building-list-expanded-height: clamp(55vh, 60vh, 65vh);--building-list-radius: calc(20px * var(--vp-scale-radius));--building-item-padding: calc(11px * var(--vp-scale-space)) calc(14px * var(--vp-scale-space));--building-item-radius: calc(11px * var(--vp-scale-radius));--building-icon-size: calc(20px * var(--vp-scale-icon));--building-name-size: calc(14px * var(--vp-scale-space));--building-distance-size: calc(12px * var(--vp-scale-space));--radius-selector-padding: calc(6px * var(--vp-scale-space)) calc(9px * var(--vp-scale-space));--radius-selector-radius: calc(26px * var(--vp-scale-radius));--radius-btn-padding: calc(6px * var(--vp-scale-space)) calc(11px * var(--vp-scale-space));--radius-btn-min-width: calc(44px * var(--vp-scale-radius));--radius-btn-size: calc(13px * var(--vp-scale-radius));--weather-display-padding: calc(6px * var(--vp-scale-space)) calc(16px * var(--vp-scale-space));--weather-display-radius: calc(26px * var(--vp-scale-radius));--weather-icon-size: calc(22px * var(--vp-scale-icon));--weather-temp-size: calc(16px * var(--vp-scale-space));--map-loading-height: calc(500px * var(--vp-scale-space));--spinner-size: calc(48px * var(--vp-scale-space));--spinner-border-width: calc(4px * var(--vp-scale-space));--direction-n-size: calc(22px * var(--vp-scale-space));--direction-s-size: calc(17px * var(--vp-scale-space));--marker-avatar-size: calc(54px * var(--vp-scale-icon));--marker-avatar-border: calc(3px * var(--vp-scale-icon));--marker-dot-size: calc(10px * var(--vp-scale-icon));--marker-dot-border: calc(3px * var(--vp-scale-icon));--ring-label-size: calc(13px * var(--vp-scale-space));--ring-label-padding: calc(3px * var(--vp-scale-space)) calc(11px * var(--vp-scale-space));--ring-label-radius: calc(6px * var(--vp-scale-radius))}:root{--preview-z-index: 1000;--preview-bg: #000;--loading-spinner-size: calc(38px * var(--vp-scale-space));--loading-spinner-border-width: calc(4px * var(--vp-scale-space));--loading-spinner-color: #4fc3f7;--loading-gap: calc(16px * var(--vp-scale-space));--loading-font-size: calc(14px * var(--vp-scale-font));--preview-avatar-size: calc(115px * var(--vp-scale-icon));--preview-avatar-border-radius: 50%;--preview-avatar-font-size: calc(32px * var(--vp-scale-font));--placeholder-name-font-size: calc(15px * var(--vp-scale-font));--placeholder-text-font-size: calc(14px * var(--vp-scale-font));--preview-placeholder-gap: calc(12px * var(--vp-scale-space));--preview-header-padding-top: calc(12px * var(--vp-scale-space));--preview-header-padding-x: calc(18px * var(--vp-scale-space));--preview-header-gap: calc(10px * var(--vp-scale-space));--preview-header-action-gap: calc(10px * var(--vp-scale-space));--preview-header-action-gap: calc(8px * var(--vp-scale-space));--preview-back-btn-size: calc(36px * var(--vp-scale-btn));--preview-back-btn-icon: calc(20px * var(--vp-scale-icon));--preview-back-btn-radius: 50%;--preview-back-btn-bg: rgba(0, 0, 0, .55);--preview-header-btn-size: calc(36px * var(--vp-scale-btn));--preview-header-btn-icon: calc(20px * var(--vp-scale-icon));--preview-header-btn-radius: 50%;--preview-header-btn-bg: rgba(0, 0, 0, .55);--preview-online-indicator-padding-y: calc(6px * var(--vp-scale-space));--preview-online-indicator-padding-x: calc(14px * var(--vp-scale-space));--preview-online-indicator-radius: calc(18px * var(--vp-scale-radius));--preview-online-indicator-text: #ffffff;--online-count-font-size: calc(13px * var(--vp-scale-font));--online-count-waiting-font-size: calc(12px * var(--vp-scale-font));--online-count-min-width: calc(14px * var(--vp-scale-space));--online-avatar-size: calc(22px * var(--vp-scale-icon));--online-avatar-border-width: calc(2px * var(--vp-scale-icon));--online-avatar-more-font-size: calc(10px * var(--vp-scale-font));--waiting-dot-size: calc(6px * var(--vp-scale-space));--preview-title-font-size: calc(14px * var(--vp-scale-font));--preview-title-max-width: 50%;--preview-popup-top: calc(64px * var(--vp-scale-space));--preview-popup-left: calc(14px * var(--vp-scale-space));--preview-popup-width: calc(240px * var(--vp-scale-space));--preview-popup-max-height: calc(320px * var(--vp-scale-space));--preview-popup-radius: calc(14px * var(--vp-scale-radius));--preview-popup-padding-y: calc(10px * var(--vp-scale-space));--preview-popup-padding-x: calc(14px * var(--vp-scale-space));--user-list-header-font-size: calc(14px * var(--vp-scale-font));--user-list-name-font-size: calc(14px * var(--vp-scale-font));--user-list-status-font-size: calc(12px * var(--vp-scale-font));--user-list-avatar-size: calc(30px * var(--vp-scale-icon));--beauty-title-font-size: calc(14px * var(--vp-scale-font));--beauty-toggle-font-size: calc(12px * var(--vp-scale-font));--beauty-status-font-size: calc(12px * var(--vp-scale-font));--beauty-hint-font-size: calc(11px * var(--vp-scale-font));--settings-label-font-size: calc(12px * var(--vp-scale-font));--settings-select-font-size: calc(13px * var(--vp-scale-font));--settings-btn-font-size: calc(13px * var(--vp-scale-font));--preview-controls-padding-y: calc(10px * var(--vp-scale-space));--preview-controls-padding-x: calc(14px * var(--vp-scale-space));--preview-controls-bottom-padding: calc(16px * var(--vp-scale-space));--preview-controls-gap: calc(12px * var(--vp-scale-space));--preview-control-btn-size: calc(52px * var(--vp-scale-btn));--preview-control-btn-icon-size: calc(24px * var(--vp-scale-icon));--preview-control-btn-gap: calc(16px * var(--vp-scale-space));--preview-join-btn-padding-y: calc(10px * var(--vp-scale-space));--preview-join-btn-padding-x: calc(24px * var(--vp-scale-space));--preview-join-btn-font-size: calc(16px * var(--vp-scale-font));--preview-join-btn-max-width: calc(320px * var(--vp-scale-btn));--preview-join-btn-radius: calc(24px * var(--vp-scale-radius));--preview-join-btn-bg: linear-gradient(135deg, #4fc3f7, #2196f3);--preview-tips-bottom: calc(80px * var(--vp-scale-space));--preview-tips-font-size: calc(13px * var(--vp-scale-font));--preview-tips-color: rgba(255, 255, 255, .55);--preview-retry-btn-padding-y: calc(8px * var(--vp-scale-space));--preview-retry-btn-padding-x: calc(20px * var(--vp-scale-space));--preview-retry-btn-radius: calc(8px * var(--vp-scale-radius));--preview-retry-btn-font-size: calc(14px * var(--vp-scale-font));--preview-retry-btn-border: rgba(255, 255, 255, .2);--permission-guide-padding-y: calc(18px * var(--vp-scale-space));--permission-guide-padding-x: calc(20px * var(--vp-scale-space));--permission-guide-radius: calc(14px * var(--vp-scale-radius));--permission-guide-icon-size: calc(36px * var(--vp-scale-icon));--permission-guide-title-size: calc(16px * var(--vp-scale-font));--permission-guide-desc-size: calc(13px * var(--vp-scale-space));--permission-guide-btn-padding-y: calc(8px * var(--vp-scale-space));--permission-guide-btn-padding-x: calc(20px * var(--vp-scale-space));--permission-guide-btn-radius: calc(8px * var(--vp-scale-radius));--permission-guide-btn-font-size: calc(14px * var(--vp-scale-font));--preview-error-toast-bottom: calc(120px * var(--vp-scale-space));--preview-error-toast-radius: calc(10px * var(--vp-scale-radius));--preview-error-toast-font-size: calc(13px * var(--vp-scale-font));--device-switching-spinner-size: calc(34px * var(--vp-scale-space));--device-switching-text-size: calc(14px * var(--vp-scale-space));--device-switching-text-color: rgba(255, 255, 255, .8);--preview-popup-bg: rgba(20, 20, 31, .92);--preview-popup-bg-solid: rgba(20, 20, 31, .98);--preview-popup-text: #ffffff;--preview-popup-text-secondary: rgba(255, 255, 255, .65);--preview-popup-border: rgba(255, 255, 255, .08)}:root{--participant-strip-z-index: 20;--participant-strip-padding: var(--space-sm) var(--space-lg);--participant-strip-radius: var(--radius-lg);--participant-strip-bg: rgba(0, 0, 0, .6);--strip-avatar-size: calc(32px * var(--vp-scale-icon));--strip-avatar-border: calc(2px * var(--vp-scale-icon));--strip-avatar-border-color: var(--bg-primary);--strip-speaking-dot-size: calc(10px * var(--vp-scale-space));--strip-more-badge-size: calc(31px * var(--vp-scale-space));--strip-info-font-size: calc(12px * var(--vp-scale-font));--strip-count-font-weight: 600;--participant-popup-z-index: 100;--participant-popup-width: calc(400px * var(--vp-scale-space));--participant-popup-max-height: clamp(60vh, 70vh, 80vh);--participant-popup-radius: var(--radius-xl);--participant-popup-bg: var(--bg-secondary)}:root{--video-item-radius: calc(12px * var(--vp-scale-radius));--video-item-bg: #14141f;--video-item-speaking-color: #66bb6a;--video-item-muted-color: #ff5252;--video-name-tag-radius: var(--radius-sm);--video-name-tag-font-size: calc(12px * var(--vp-scale-font));--video-name-tag-bg: rgba(0, 0, 0, .5);--video-action-btn-size: calc(31px * var(--vp-scale-btn));--video-action-btn-radius: 50%;--video-action-btn-bg: rgba(0, 0, 0, .5);--video-action-btn-hover-bg: rgba(0, 0, 0, .7);--floating-width: calc(210px * var(--vp-scale-space));--floating-height: calc(158px * var(--vp-scale-space));--floating-radius: calc(10px * var(--vp-scale-radius));--floating-border-width: calc(2px * var(--vp-scale-space));--floating-border-color: rgba(79, 195, 247, .4);--floating-bottom: calc(110px * var(--vp-scale-space));--floating-right: calc(20px * var(--vp-scale-space));--floating-restore-size: calc(50px * var(--vp-scale-space));--floating-restore-radius: 50%;--floating-restore-bg: rgba(0, 0, 0, .75);--resize-handle-size: calc(20px * var(--vp-scale-space))}:root{--video-grid-gap: calc(3px * var(--vp-scale-space));--video-grid-padding: calc(3px * var(--vp-scale-space));--video-grid-bg: var(--bg-primary, #0a0a14);--video-controls-z-index: 30;--video-controls-padding-y: clamp(6px, .8vw, 14px);--video-controls-padding-x: clamp(10px, 1.6vw, 24px);--video-controls-gap: calc(8px * var(--vp-scale-space));--video-controls-radius: calc(18px * var(--vp-scale-radius));--video-controls-bg: rgba(0, 0, 0, .7);--video-controls-border: rgba(255, 255, 255, .06);--video-controls-shadow: 0 8px 40px rgba(0, 0, 0, .4);--video-btn-size: calc(40px * var(--vp-scale-btn));--video-btn-radius: calc(12px * var(--vp-scale-radius));--video-btn-padding-y: clamp(4px, .6vw, 10px);--video-btn-padding-x: clamp(8px, 1.2vw, 18px);--video-btn-font-size: calc(12px * var(--vp-scale-font));--video-btn-icon-size: calc(20px * var(--vp-scale-icon));--video-btn-end-call-padding-y: clamp(6px, .8vw, 12px);--video-btn-end-call-padding-x: clamp(12px, 1.6vw, 28px);--video-btn-end-call-bg: var(--color-error);--resolution-menu-width: calc(170px * var(--vp-scale-space));--resolution-menu-radius: calc(13px * var(--vp-scale-radius));--resolution-menu-padding: calc(9px * var(--vp-scale-space));--emoji-picker-radius: calc(16px * var(--vp-scale-radius));--emoji-picker-padding-y: clamp(8px, 1vw, 14px);--emoji-picker-padding-x: clamp(12px, 1.6vw, 20px);--emoji-picker-btn-size: calc(38px * var(--vp-scale-btn));--emoji-picker-btn-font-size: calc(25px * var(--vp-scale-font));--invite-btn-hover-bg: rgba(76, 175, 80, .3);--invite-tooltip-radius: calc(6px * var(--vp-scale-radius));--invite-tooltip-font-size: calc(12px * var(--vp-scale-font))}:root{--video-call-z-index: 1000;--video-call-fullscreen-z-index: 9999;--video-call-bg: var(--bg-primary);--network-indicator-top: calc(17px * var(--vp-scale-space));--network-indicator-right: calc(17px * var(--vp-scale-space));--network-indicator-padding-y: clamp(4px, .6vw, 8px);--network-indicator-padding-x: clamp(10px, 1.4vw, 20px);--network-indicator-radius: calc(16px * var(--vp-scale-radius));--network-indicator-font-size: calc(12px * var(--vp-scale-font));--quality-dot-size: calc(8px * var(--vp-scale-space));--connecting-overlay-bg: rgba(0, 0, 0, .7);--connecting-spinner-size: calc(40px * var(--vp-scale-space));--connecting-spinner-border: calc(4px * var(--vp-scale-space));--connecting-font-size: calc(15px * var(--vp-scale-font));--video-error-toast-bottom: calc(105px * var(--vp-scale-space));--video-error-toast-padding-y: clamp(8px, 1vw, 14px);--video-error-toast-padding-x: clamp(14px, 2vw, 28px);--video-error-toast-radius: calc(12px * var(--vp-scale-radius));--video-error-toast-font-size: calc(14px * var(--vp-scale-font));--video-controls-bottom: calc(20px * var(--vp-scale-space));--video-controls-height: calc(72px * var(--vp-scale-space));--participant-strip-height: calc(48px * var(--vp-scale-space));--participant-strip-bottom: calc( var(--video-controls-bottom) + var(--video-controls-height) + 16px );--video-click-hint-bottom: calc( var(--participant-strip-bottom) + var(--participant-strip-height) + 16px );--duration-top: calc(20px * var(--vp-scale-space));--duration-padding-y: clamp(4px, .6vw, 8px);--duration-padding-x: clamp(12px, 1.6vw, 20px);--duration-radius: calc(18px * var(--vp-scale-radius));--duration-font-size: calc(14px * var(--vp-scale-font));--sharing-indicator-bottom: calc(95px * var(--vp-scale-space));--sharing-indicator-padding-y: clamp(6px, .8vw, 10px);--sharing-indicator-padding-x: clamp(12px, 1.6vw, 20px);--sharing-indicator-radius: calc(12px * var(--vp-scale-radius));--sharing-indicator-font-size: calc(13px * var(--vp-scale-font));--video-toast-bottom: calc(145px * var(--vp-scale-space));--video-toast-padding-y: clamp(8px, 1vw, 14px);--video-toast-padding-x: clamp(16px, 2vw, 28px);--video-toast-radius: calc(14px * var(--vp-scale-radius));--video-toast-font-size: calc(14px * var(--vp-scale-font));--reconnect-overlay-bg: rgba(0, 0, 0, .85);--reconnect-icon-size: calc(60px * var(--vp-scale-icon));--reconnect-title-size: calc(24px * var(--vp-scale-font));--reconnect-desc-size: calc(16px * var(--vp-scale-space));--reconnect-bar-height: calc(5px * var(--vp-scale-space));--reconnect-bar-radius: calc(3px * var(--vp-scale-radius));--reconnect-btn-padding-y: clamp(10px, 1.2vw, 14px);--reconnect-btn-padding-x: clamp(20px, 2.8vw, 36px);--reconnect-btn-radius: calc(14px * var(--vp-scale-radius));--reconnect-btn-gap: calc(12px * var(--vp-scale-space));--guest-badge-padding-y: clamp(2px, .3vw, 4px);--guest-badge-padding-x: clamp(10px, 1.2vw, 16px);--guest-badge-radius: calc(13px * var(--vp-scale-radius));--guest-badge-font-size: calc(12px * var(--vp-scale-font));--guest-badge-bg: rgba(255, 255, 255, .1);--guest-badge-color: rgba(255, 255, 255, .6)}:root{--end-call-z-index: 9999;--end-call-bg: #1a1a2e;--end-call-text: #ffffff;--end-call-desc-color: rgba(255, 255, 255, .6);--end-call-icon-size: calc(68px * var(--vp-scale-icon));--end-call-icon-margin-bottom: calc(20px * var(--vp-scale-space));--end-call-title-size: calc(27px * var(--vp-scale-font));--end-call-title-weight: 600;--end-call-desc-size: calc(16px * var(--vp-scale-space));--end-call-desc-margin-bottom: calc(32px * var(--vp-scale-space));--end-call-btn-padding-y: clamp(10px, 1.2vw, 14px);--end-call-btn-padding-x: clamp(32px, 3.6vw, 48px);--end-call-btn-radius: calc(13px * var(--vp-scale-radius));--end-call-btn-font-size: calc(16px * var(--vp-scale-font));--end-call-btn-font-weight: 600;--end-call-btn-bg: rgba(255, 255, 255, .1);--end-call-btn-color: #fff;--end-call-btn-border: rgba(255, 255, 255, .2);--end-call-btn-hover-bg: rgba(255, 255, 255, .2);--end-call-btn-hover-border: rgba(255, 255, 255, .4)}:root{--device-switching-overlay-bg: rgba(0, 0, 0, .5);--device-switching-spinner-size: calc(34px * var(--vp-scale-space));--device-switching-text-size: calc(14px * var(--vp-scale-space));--device-switching-text-color: rgba(255, 255, 255, .8);--participant-list-popup-width: calc(320px * var(--vp-scale-space));--participant-list-popup-max-height: calc(400px * var(--vp-scale-space));--participant-list-popup-radius: calc(18px * var(--vp-scale-radius));--participant-list-popup-bg: rgba(20, 20, 31, .95)}:root{--msg-avatar-mobile: calc(32px * var(--vp-scale-icon));--msg-image-max-width: calc(250px * var(--vp-scale-space));--msg-image-max-height: calc(310px * var(--vp-scale-space));--msg-text-size: calc(18px * var(--vp-scale-font));--msg-username-size: calc(17px * var(--vp-scale-space));--msg-time-size: calc(13px * var(--vp-scale-space));--group-header-min-height: calc(72px * var(--vp-scale-space));--group-header-avatar-size: calc(50px * var(--vp-scale-icon));--group-header-btn-size: calc(44px * var(--vp-scale-btn));--group-header-btn-icon: calc(24px * var(--vp-scale-icon));--group-avatar-size: calc(56px * var(--vp-scale-icon));--group-avatar-mobile: calc(42px * var(--vp-scale-icon));--group-unread-size: calc(24px * var(--vp-scale-space));--group-input-height: calc(55px * var(--vp-scale-btn));--group-input-radius: calc(23px * var(--vp-scale-radius));--group-input-btn-size: calc(42px * var(--vp-scale-btn));--group-input-btn-icon: calc(24px * var(--vp-scale-icon));--modal-padding-y: clamp(16px, 2vw, 28px);--modal-padding-x: clamp(20px, 2.8vw, 44px);--modal-radius: calc(23px * var(--vp-scale-radius));--modal-max-width: calc(510px * var(--vp-scale-space));--modal-max-height: clamp(60vh, 70vh, 85vh);--modal-overlay-blur: calc(10px * var(--vp-scale-space));--context-menu-min-width: calc(150px * var(--vp-scale-space));--context-menu-radius: calc(15px * var(--vp-scale-radius));--border-width-thin: calc(1px * var(--vp-scale-space));--border-width-medium: calc(2px * var(--vp-scale-space));--border-width-thick: calc(3px * var(--vp-scale-space))}:root{--notification-item-padding: calc(14px * var(--vp-scale-space));--notification-item-padding-mobile: calc(11px * var(--vp-scale-space));--notification-item-padding-small: calc(8px * var(--vp-scale-space));--notification-dot-size: calc(8px * var(--vp-scale-space));--notification-btn-size: calc(60px * var(--vp-scale-btn));--notification-btn-size-mobile: calc(46px * var(--vp-scale-btn));--notification-btn-size-small: calc(39px * var(--vp-scale-btn))}:root{--chat-menu-max-width: calc(420px * var(--vp-scale-space));--chat-menu-max-height: clamp(60vh, 65vh, 75vh);--chat-menu-item-padding: calc(13px * var(--vp-scale-space));--chat-menu-item-margin: calc(3px * var(--vp-scale-space));--chat-menu-handle-width: calc(42px * var(--vp-scale-space));--chat-menu-handle-height: calc(5px * var(--vp-scale-space));--chat-menu-shadow: 0 -8px 40px rgba(0, 0, 0, .3);--online-dot-size: calc(12px * var(--vp-scale-space));--chat-name-max-width: calc(160px * var(--vp-scale-space));--unread-badge-size: calc(21px * var(--vp-scale-space));--msg-preview-max-width: calc(185px * var(--vp-scale-space));--chat-search-results-height: calc(250px * var(--vp-scale-space))}:root{--search-results-max-height: calc(240px * var(--vp-scale-space));--input-bottom-padding: calc(10px * var(--vp-scale-space));--input-bottom-padding-mobile: calc(8px * var(--vp-scale-space));--input-bottom-padding-small: calc(6px * var(--vp-scale-space));--msg-bubble-max-width: clamp(60%, 70%, 75%);--msg-bubble-max-width-own: clamp(55%, 65%, 70%);--msg-bubble-max-width-other: clamp(60%, 70%, 75%);--msg-image-max-width: calc(210px * var(--vp-scale-space));--msg-image-max-height: calc(250px * var(--vp-scale-space));--sticker-max-width: calc(150px * var(--vp-scale-space));--sticker-max-height: calc(130px * var(--vp-scale-space));--sticker-pack-max-width: calc(190px * var(--vp-scale-space));--sticker-emoji-size: calc(44px * var(--vp-scale-space));--context-menu-max-width: calc(340px * var(--vp-scale-space));--emoji-picker-max-height: clamp(50vh, 60vh, 70vh);--image-viewer-close-top: clamp(-60px, -6vw, -40px);--typing-dot-size: calc(6px * var(--vp-scale-space));--new-message-btn-bottom: calc(100px * var(--vp-scale-btn));--mention-suggestions-max-height: calc(185px * var(--vp-scale-space));--mention-suggestions-bottom: calc(85px * var(--vp-scale-space));--checkbox-size: calc(22px * var(--vp-scale-space));--loading-spinner-size: calc(34px * var(--vp-scale-space));--msg-bubble-own-bg: #2e7d32;--msg-bubble-own-border: rgba(46, 125, 50, .4);--msg-bubble-own-text: #fff;--msg-bubble-other-bg: #2a2a3e;--msg-bubble-other-border: rgba(200, 200, 220, .1);--quote-preview-bg: rgba(255, 255, 255, .08);--quote-preview-border: rgba(255, 255, 255, .15);--quote-preview-text: rgba(255, 255, 255, .55);--quote-preview-own-bg: rgba(255, 255, 255, .12);--quote-preview-own-border: rgba(255, 255, 255, .2);--quote-preview-own-text: rgba(255, 255, 255, .6);--quote-preview-other-bg: rgba(255, 255, 255, .06);--quote-preview-other-border: rgba(255, 255, 255, .1);--quote-preview-other-text: rgba(255, 255, 255, .45)}[data-theme=light]{--color-accent-dim: rgba(236, 72, 153, .08) !important;--color-secondary-dim: rgba(99, 102, 241, .08) !important;--bg-primary: #f5f5f7 !important;--bg-secondary: #ffffff !important;--bg-modal: rgba(255, 255, 255, .96) !important;--bg-card: rgba(255, 255, 255, .8) !important;--bg-card-hover: rgba(0, 0, 0, .05) !important;--bg-input: rgba(0, 0, 0, .04) !important;--bg-overlay: rgba(0, 0, 0, .4) !important;--toast-bg: rgba(255, 255, 255, .95) !important;--toast-text: #1a1a2e !important;--toast-border: rgba(0, 0, 0, .06) !important;--toast-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important;--image-viewer-bg: rgba(0, 0, 0, .92) !important;--image-viewer-btn-bg: rgba(0, 0, 0, .55) !important;--image-viewer-btn-bg-hover: rgba(0, 0, 0, .75) !important;--image-viewer-btn-border: rgba(255, 255, 255, .2) !important;--image-viewer-btn-color: #fff !important;--image-viewer-counter-bg: rgba(0, 0, 0, .55) !important;--logo-color: #0891b2;--color-text: #1a1a2e !important;--color-text-secondary: #4a4a6a !important;--color-text-muted: #8a8aaa !important;--color-text-inverse: #f5f5f7 !important;--color-primary: #0891b2 !important;--color-primary-dim: rgba(8, 145, 178, .12) !important;--color-primary-weak: rgba(8, 145, 178, .06) !important;--color-secondary: #6366f1 !important;--color-accent: #ec4899 !important;--color-error: #dc2626 !important;--color-error-dim: rgba(220, 38, 38, .1) !important;--color-warning: #d97706 !important;--color-warning-dim: rgba(217, 119, 6, .12) !important;--color-warning-border: rgba(217, 119, 6, .25) !important;--color-green: #16a34a !important;--color-green-dim: rgba(22, 163, 74, .12) !important;--color-green-border: rgba(22, 163, 74, .25) !important;--color-info: #0891b2 !important;--color-info-dim: rgba(8, 145, 178, .12) !important;--border-color: rgba(0, 0, 0, .08) !important;--border-active: rgba(8, 145, 178, .3) !important;--border-color-hover: rgba(0, 0, 0, .12) !important;--neon-glow: 0 0 20px rgba(8, 145, 178, .15) !important;--neon-glow-weak: 0 0 10px rgba(8, 145, 178, .05) !important;--shadow-card: 0 0 30px rgba(0, 0, 0, .05) !important;--shadow-glow: 0 0 20px rgba(8, 145, 178, .08) !important;--gradient-primary: linear-gradient(135deg, #0891b2, #6366f1) !important;--gradient-accent: linear-gradient(135deg, #ec4899, #6366f1) !important;--gradient-glow: linear-gradient(135deg, rgba(8, 145, 178, .1), rgba(99, 102, 241, .1)) !important;--gradient-warning: linear-gradient(135deg, #f59e0b, #d97706) !important;--header-bg: rgba(245, 245, 247, .9) !important;--cover-gradient: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;--card-bg: rgba(255, 255, 255, .8) !important;--followed-bg: rgba(0, 0, 0, .05) !important;--followed-hover-bg: rgba(239, 68, 68, .1) !important;--stats-bg: rgba(255, 255, 255, .5) !important;--post-item-bg: rgba(255, 255, 255, .5) !important;--post-item-hover-bg: rgba(255, 255, 255, .8) !important;--spinner-bg: rgba(0, 0, 0, .1) !important;--hover-bg: rgba(0, 0, 0, .03) !important;--skeleton-base: rgba(0, 0, 0, .06) !important;--skeleton-shine: rgba(0, 0, 0, .1) !important;--tabbar-bg: rgba(255, 255, 255, .85) !important;--tabbar-border: rgba(8, 145, 178, .15) !important;--tabbar-item-active: #0891b2 !important;--tabbar-item-inactive: #1a1a2e !important;--tabbar-glow-color: rgba(8, 145, 178, .3) !important;--tabbar-center-gradient: linear-gradient(135deg, #0891b2, #6366f1) !important;--tabbar-center-border: rgba(255, 255, 255, .3) !important;--tabbar-center-shadow: rgba(8, 145, 178, .3) !important;--tabbar-center-shadow-hover: rgba(8, 145, 178, .5) !important;--preview-overlay-bg: rgba(0, 0, 0, .55);--preview-overlay-bg-hover: rgba(0, 0, 0, .75);--preview-overlay-text: #ffffff;--preview-overlay-text-secondary: rgba(255, 255, 255, .85);--preview-overlay-border: rgba(255, 255, 255, .15);--preview-popup-bg: rgba(20, 20, 31, .92);--preview-popup-text: #ffffff;--preview-popup-text-secondary: rgba(255, 255, 255, .65);--preview-popup-border: rgba(255, 255, 255, .08);--preview-bg: #000;--preview-back-btn-bg: rgba(0, 0, 0, .55);--preview-header-btn-bg: rgba(0, 0, 0, .55);--preview-online-indicator-text: #ffffff;--preview-tips-color: rgba(255, 255, 255, .55);--video-controls-bg: rgba(0, 0, 0, .7);--video-controls-border: rgba(255, 255, 255, .06);--video-controls-shadow: 0 8px 40px rgba(0, 0, 0, .4);--participant-strip-bg: rgba(0, 0, 0, .6);--video-item-bg: #14141f;--video-name-tag-bg: rgba(0, 0, 0, .5);--video-action-btn-bg: rgba(0, 0, 0, .5);--floating-restore-bg: rgba(0, 0, 0, .75);--video-grid-bg: #0a0a14;--video-call-bg: #07070f;--connecting-overlay-bg: rgba(0, 0, 0, .7);--reconnect-overlay-bg: rgba(0, 0, 0, .85);--guest-badge-bg: rgba(255, 255, 255, .1);--guest-badge-color: rgba(255, 255, 255, .6);--end-call-bg: #1a1a2e;--end-call-text: #ffffff;--end-call-desc-color: rgba(255, 255, 255, .6);--end-call-btn-bg: rgba(255, 255, 255, .1);--end-call-btn-color: #fff;--end-call-btn-border: rgba(255, 255, 255, .2);--end-call-btn-hover-bg: rgba(255, 255, 255, .2);--end-call-btn-hover-border: rgba(255, 255, 255, .4);--participant-list-popup-bg: rgba(20, 20, 31, .95);--msg-bubble-own-bg: #2e7d32 !important;--msg-bubble-own-border: rgba(46, 125, 50, .4) !important;--msg-bubble-own-text: #fff !important;---msg-bubble-other-bg: #e8e8ee !important;--msg-bubble-other-border: rgba(0, 0, 0, .06) !important;--quote-preview-bg: rgba(0, 0, 0, .06) !important;--quote-preview-border: rgba(0, 0, 0, .12) !important;--quote-preview-text: rgba(0, 0, 0, .5) !important;--quote-preview-own-bg: rgba(255, 255, 255, .15) !important;--quote-preview-own-border: rgba(255, 255, 255, .2) !important;--quote-preview-own-text: rgba(255, 255, 255, .7) !important;--quote-preview-other-bg: rgba(0, 0, 0, .06) !important;--quote-preview-other-border: rgba(0, 0, 0, .1) !important;--quote-preview-other-text: rgba(0, 0, 0, .45) !important;--subtitle-color: #1a1a2e;--subtitle-bg: rgba(255, 255, 255, .85);--weather-icon-current-color: var(--color-primary);--chart-grid-line: rgba(0, 0, 0, .06);--chart-line-shadow: rgba(8, 145, 178, .2);--chart-gradient-top: rgba(8, 145, 178, .12);--chart-gradient-bottom: rgba(8, 145, 178, .01);--chart-temp-hot: #dc2626;--chart-temp-warm: #d97706;--chart-temp-cool: #0891b2;--chart-temp-cold: #2563eb;--chart-temp-max: #dc2626;--chart-temp-min: #2563eb;--chart-point-stroke: rgba(0, 0, 0, .25);--chart-point-stroke-hi: rgba(0, 0, 0, .45);--chart-axis-text: rgba(0, 0, 0, .35);--chart-axis-text-hi: rgba(0, 0, 0, .75);--chart-cursor-line: rgba(0, 0, 0, .35);--chart-cursor-dot: rgba(8, 145, 178, .4);--chart-cursor-bg: rgba(8, 145, 178, .08);--chart-nav-bg: rgba(0, 0, 0, .06);--chart-nav-text: rgba(0, 0, 0, .4);--weather-icon-sunny: #d97706;--weather-icon-cloudy: #6b7280;--weather-icon-rain: #2563eb;--weather-icon-thunder: #d97706;--weather-icon-fog: #6b7280;--weather-icon-snow: #3b82f6;--weather-icon-hot: #dc2626;--weather-icon-cold: #2563eb;--weather-icon-wind: #2563eb;--preview-header-gradient: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, transparent 100%);--preview-controls-gradient: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, transparent 100%);--preview-overlay-track: rgba(255, 255, 255, .12);--preview-popup-hover-bg: rgba(255, 255, 255, .08);--preview-backdrop: rgba(0, 0, 0, .25)}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--color-text);overflow:hidden;margin:0;padding:0;height:100vh;width:100vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.font-logo{font-family:var(--font-logo)}.font-body{font-family:var(--font-body)}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-card{background-color:var(--bg-card)}.text-primary{color:var(--color-text)}.text-secondary{color:var(--color-text-secondary)}.text-accent-cyan{color:var(--color-primary)}.text-accent-purple{color:var(--color-secondary)}.text-accent-pink{color:var(--color-accent)}.text-accent-warning{color:var(--color-warning)}.border-theme{border-color:var(--border-color)}.glow-cyan{box-shadow:0 0 20px #22d3ee4d}.glow-text-cyan{text-shadow:0 0 10px rgba(34,211,238,.6)}.glow-text-purple{text-shadow:0 0 10px rgba(167,139,250,.6)}.glow-text-pink{text-shadow:0 0 10px rgba(236,72,153,.6)}.neon-border{border:1px solid rgba(34,211,238,.3);box-shadow:0 0 10px #22d3ee1a}.glass{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color)}.scan-line{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:.6;animation:scan 4s linear infinite;pointer-events:none}@keyframes scan{0%{top:0%}to{top:100%}}@keyframes breathe{0%,to{opacity:.6;filter:drop-shadow(0 0 5px var(--color-primary))}50%{opacity:1;filter:drop-shadow(0 0 20px var(--color-primary))}}.breathing{animation:breathe 3s ease-in-out infinite}.shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.float-animation{animation:float 3s ease-in-out infinite}@keyframes pulse-ring{0%{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes theme-flash{0%{opacity:0}50%{opacity:.3}to{opacity:0}}.theme-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-primary);opacity:0;pointer-events:none;z-index:9999}.theme-flash-active{animation:theme-flash .3s ease-out}.particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.particle{position:absolute;width:2px;height:2px;background:var(--color-primary);border-radius:50%;opacity:.3;animation:float 4s ease-in-out infinite}.toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%) translateY(100px);background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color);padding:12px 20px;border-radius:24px;z-index:300;opacity:0;transition:all .3s ease;pointer-events:none;color:var(--color-text);font-family:var(--font-body)}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.avatar-ring{border:2px solid transparent;background:var(--bg-primary) padding-box,linear-gradient(135deg,var(--color-primary),var(--color-accent)) border-box}.level-badge{background:linear-gradient(135deg,var(--color-secondary),var(--color-accent));color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;font-family:var(--font-body)}.progress-bar{height:6px;border-radius:3px;background:var(--border-color);overflow:hidden}.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary))}.stat-label{color:var(--color-text-secondary);font-size:12px;font-family:var(--font-body)}.input-glow:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #22d3ee1a}.segment-btn{position:relative;padding:8px 16px;font-size:14px;color:var(--color-text-secondary);transition:color .3s;font-family:var(--font-body);background:transparent;border:none;cursor:pointer}.segment-underline{position:absolute;bottom:0;height:2px;background:var(--color-primary);border-radius:1px;transition:all .3s ease;box-shadow:0 0 8px var(--color-primary)}.action-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--color-text-secondary);transition:color .2s,transform .15s;background:transparent;border:none;font-family:var(--font-body);cursor:pointer}.action-btn:active{transform:scale(.95)}.action-btn.active{color:var(--color-accent)}.action-btn.active svg{filter:drop-shadow(0 0 6px var(--color-accent));fill:currentColor}.switch-track{width:48px;height:26px;border-radius:13px;background:var(--border-color);position:relative;cursor:pointer;transition:background .3s}.switch-track.active{background:var(--color-primary)}.switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:white;transition:transform .3s;box-shadow:0 2px 4px #0003}.switch-track.active .switch-thumb{transform:translate(22px)}.notification-dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 8px var(--color-primary)}.weather-warning{border-left:3px solid}.weather-warning.info{border-left-color:var(--color-primary)}.weather-warning.warning{border-left-color:var(--color-warning)}.weather-warning.danger{border-left-color:var(--color-error)}.bottom-tab{position:absolute;bottom:0;left:0;right:0;z-index:50;background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-color)}.tab-btn.active{color:var(--color-primary)}.tab-btn.active svg{filter:drop-shadow(0 0 6px var(--color-primary))}.photoview{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.95);z-index:200;display:none;align-items:center;justify-content:center;touch-action:pan-y}.photoview.active{display:flex}.map-canvas{background:radial-gradient(ellipse at center,#0d0d2b 0%,#07070f 100%);position:relative;overflow:hidden}.user-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 15px var(--color-primary);animation:pulse-ring 2s ease-out infinite}.user-dot.offline{background:#6b7280;box-shadow:none;animation:none}.video-badge{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff}.multi-img-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;padding:2px 8px;border-radius:12px;font-size:12px}.card-enter{opacity:0;transform:translateY(20px);animation:cardEnter .25s ease-out forwards}@keyframes cardEnter{to{opacity:1;transform:translateY(0)}}@media (orientation: landscape) and (max-height: 500px){:root{--vp-device-font: .95;--vp-device-space: .9}}@media (max-width: 359px){:root{--vp-device-font: .92;--vp-device-space: .9}}button svg,button svg *{pointer-events:none}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}html,body{height:100%;overflow:hidden;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--color-text);transition:background var(--transition-base),color var(--transition-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-sm);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}*{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--bg-secondary)}a:hover,a:focus{color:var(--color-secondary)}button{font-family:var(--font-body);background:none;border:none;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}input,textarea,select{font-family:var(--font-body);font-size:var(--font-base);background:var(--bg-input);color:var(--color-text);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}::selection{background:var(--color-primary);color:var(--color-text-inverse)}::-moz-selection{background:var(--color-primary);color:var(--color-text-inverse)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}*{margin:0;padding:0;box-sizing:border-box;transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}html,body{height:100%;width:100%;font-family:var(--font-body);background:var(--bg-primary);color:var(--color-text);overflow:hidden;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{padding-bottom:env(safe-area-inset-bottom);padding-top:env(safe-area-inset-top)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-full)}*{scrollbar-width:thin;scrollbar-color:var(--color-primary) var(--bg-primary)}#root{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-primary)}.page-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;width:100%;background:var(--bg-primary);gap:var(--space-lg)}.page-loading-spinner{width:var(--avatar-sm);height:var(--avatar-sm);border:3px solid var(--color-primary-dim);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:page-loading-spin .8s linear infinite;box-shadow:var(--neon-glow-weak)}@keyframes page-loading-spin{to{transform:rotate(360deg)}}.page-loading p{color:var(--color-text-secondary);font-size:var(--font-base);font-family:var(--font-body);letter-spacing:.5px}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-secondary)}button{font-family:var(--font-body);background:none;border:none;cursor:pointer;color:inherit}input,textarea,select{font-family:var(--font-body);background:var(--bg-input);color:var(--color-text);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-dim)}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}img{display:block;max-width:100%;height:auto}::selection{background:var(--color-primary-dim);color:var(--color-text)}::-moz-selection{background:var(--color-primary-dim);color:var(--color-text)}ul,ol{list-style:none;margin:0;padding:0}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;font-family:var(--font-body)}p{margin:0;line-height:1.6}@media (prefers-color-scheme: dark){img:not([data-light]){filter:brightness(.95)}}[data-theme=dark] img:not([data-light]){filter:brightness(.95)}.phone-frame{width:100%;height:100%;max-width:430px;margin:0 auto;position:relative;background:var(--bg-primary);overflow:hidden}@media (min-width: 1024px){body{display:flex;align-items:center;justify-content:center;background:#000}.phone-frame{height:90vh;max-height:900px;border-radius:40px;border:8px solid #1a1a2e;box-shadow:var(--neon-glow)}}@media (min-width: 768px) and (max-width: 1023px){body{display:flex;align-items:center;justify-content:center}.phone-frame{height:95vh;max-width:600px;border-radius:24px;box-shadow:0 10px 60px #0000004d}}.page-container{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;margin:0 auto;padding:0 0 80px;overflow:hidden;background:var(--bg-primary);flex-shrink:0}@supports (padding: max(0px)){.page-container{padding-bottom:env(safe-area-inset-bottom)}}.view{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease}.view.active{opacity:1;pointer-events:auto;transform:translateY(0)}.page-enter{animation:pageEnter .3s ease-out}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.top-nav{position:sticky;top:0;z-index:40;background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color)}.page-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color)}.page-header .back-btn{width:36px;height:36px;border-radius:var(--radius-full);background:transparent;border:none;font-size:var(--font-xl);cursor:pointer;color:var(--color-text);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--transition-fast)}.page-header .back-btn:hover{background:var(--bg-card-hover)}.page-header .back-btn:active{transform:scale(.95)}.page-header h2{font-size:var(--font-lg);font-weight:600;margin:0;color:var(--color-text);flex:1;font-family:var(--font-body)}#splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease}#splash .scan-line{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:.6;animation:scan 4s linear infinite;pointer-events:none}#splash.hidden{opacity:0;pointer-events:none}.splash-logo{width:80px;height:80px;border-radius:var(--radius-2xl);display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:20px;background:var(--gradient-primary);box-shadow:var(--neon-glow);animation:breathe 3s ease-in-out infinite}.splash-logo span{font-family:var(--font-logo);font-weight:700;color:#fff;font-size:32px}.splash-title{font-size:var(--font-3xl);font-weight:700;color:var(--color-text);font-family:var(--font-logo);text-shadow:0 0 10px rgba(34,211,238,.6)}.splash-subtitle{font-size:var(--font-base);color:var(--color-text-secondary);margin-top:8px;font-family:var(--font-body);letter-spacing:2px}.splash-version{position:absolute;bottom:40px;color:var(--color-text-secondary);font-size:var(--font-xs);opacity:.6;font-family:var(--font-body)}.segment-bar{display:flex;align-items:center;justify-content:space-around;position:relative;padding:0 var(--space-md);border-bottom:1px solid var(--border-color);background:var(--bg-card)}.segment-btn{position:relative;padding:12px 16px;font-size:var(--font-sm);font-weight:500;color:var(--color-text-secondary);transition:color var(--transition-fast);background:transparent;border:none;cursor:pointer;font-family:var(--font-body)}.segment-btn.active{color:var(--color-primary)}.segment-underline{position:absolute;bottom:0;height:2px;background:var(--color-primary);border-radius:2px;transition:all .3s ease;box-shadow:0 0 8px var(--color-primary)}.glass-card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-md)}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.tap-highlight{-webkit-tap-highlight-color:transparent}.btn-press:active{transform:scale(.95)}.bg-skeleton{background:linear-gradient(90deg,#e8e8e8 25%,#f0f0f0 50%,#e8e8e8 75%);background-size:200% 100%}[data-theme=dark] .bg-skeleton{background:linear-gradient(90deg,#2a2a2a 25%,#3a3a3a 50%,#2a2a2a 75%)}.animate-shimmer{animation:shimmer 1.5s ease-in-out infinite}.aspect-16\/10{aspect-ratio:16 / 10}.aspect-1\/1{aspect-ratio:1 / 1}.aspect-4\/3{aspect-ratio:4 / 3}.bg-success-bg{background:#f0fdf4}.text-success{color:#22c55e}.avatar-dot{position:absolute;bottom:1px;right:1px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px #0000001a}.avatar-dot.online{background:#22c55e}.avatar-dot.offline{background:#cbd5e1}.image-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#e0e0e0 25%,#f0f0f0 50%,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;z-index:0}[data-theme=dark] .image-placeholder{background:linear-gradient(135deg,#2a2a2a 25%,#3a3a3a 50%,#2a2a2a 75%)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:10px 20px;border:none;border-radius:var(--radius-full);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-base);text-decoration:none}.btn:active{transform:scale(.96)}.btn-primary{background:var(--secondary-gradient);color:var(--color-text-inverse);box-shadow:0 4px 14px #ff6b6b4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-hover);border-color:var(--text-tertiary)}.btn-danger{background:var(--danger);color:var(--color-text-inverse)}.btn-danger:hover{background:#dc2626}.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}.btn-outline:hover{background:var(--primary);color:var(--color-text-inverse)}.btn-sm{padding:6px 14px;font-size:var(--font-size-sm)}.btn-lg{padding:14px 32px;font-size:var(--font-size-lg)}.btn-block{width:100%;justify-content:center}.btn.loading .btn-text{opacity:0}.btn .spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--color-text-inverse);border-radius:50%;animation:spin .8s linear infinite;opacity:0;transition:opacity var(--transition-base)}.btn.loading .spinner{opacity:1}.btn-follow{padding:6px 16px;border-radius:var(--radius-full);border:1px solid var(--primary);color:var(--primary);background:transparent;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base)}.btn-follow:hover,.btn-follow.following{background:var(--primary);color:var(--color-text-inverse)}.btn-follow.following:hover{background:var(--danger);border-color:var(--danger)}.btn-like{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:var(--font-size-base);font-weight:500;padding:4px 0;transition:color var(--transition-base)}.btn-like:hover,.btn-like.liked{color:var(--danger)}.btn-like .icon{font-size:22px;transition:transform var(--transition-fast)}.btn-like.liked .icon{animation:heartBeat .3s ease}.btn-favorite{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:var(--font-size-base);font-weight:500;padding:4px 0;transition:color var(--transition-base)}.btn-favorite.favorited{color:var(--warning)}.btn-favorite .icon{font-size:22px;transition:transform var(--transition-fast)}.btn-favorite.favorited .icon{animation:starPop .3s ease}.tab-publish-btn{position:relative;width:52px;height:52px;border-radius:50%;border:none;background:var(--secondary-gradient);color:var(--color-text-inverse);font-size:28px;font-weight:300;cursor:pointer;box-shadow:0 4px 16px #ff6b6b66;transition:all .3s ease;display:flex;align-items:center;justify-content:center;margin-top:-8px}.tab-publish-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 24px #ff6b6b80}.tab-publish-btn:active{transform:scale(.92)}.tab-publish-btn:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:linear-gradient(135deg,rgba(255,107,107,.2),rgba(255,142,83,.2));z-index:-1;animation:publishPulse 2s ease-in-out infinite}@keyframes publishPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:0}}.input-wrapper{display:flex;align-items:center;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:all var(--transition-base);overflow:hidden}.input-wrapper:focus-within{border-color:var(--neon-cyan);box-shadow:0 0 16px #00f0ff26}.input-icon{padding:0 12px;font-size:16px;color:var(--text-tertiary);flex-shrink:0}.form-input{flex:1;background:transparent;border:none;padding:12px 12px 12px 0;color:var(--text-primary);font-size:14px;outline:none;font-family:var(--font-body)}.form-input::placeholder{color:var(--text-tertiary)}.album-card{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform var(--transition-base),box-shadow var(--transition-base)}.album-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.album-cover-wrap{position:relative;width:100%;aspect-ratio:16 / 10;overflow:hidden;cursor:pointer;background:var(--bg-secondary)}.album-cover-wrap img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);transform:translateZ(0);backface-visibility:hidden}.album-cover-wrap:hover img{transform:scale(1.04)}.cover-gradient{position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:1}.cover-info{position:absolute;bottom:14px;left:16px;right:16px;z-index:2;color:var(--color-text-inverse)}.cover-title{font-size:var(--font-size-lg);font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}.cover-meta{display:flex;align-items:center;gap:var(--space-md);margin-top:4px;font-size:var(--font-size-sm);opacity:.85;text-shadow:0 1px 4px rgba(0,0,0,.4)}.cover-placeholder{font-size:56px;opacity:.6;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.album-info{padding:var(--space-md) var(--space-lg) var(--space-lg);display:flex;flex-direction:column;gap:6px}.album-author-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.album-author{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;flex:1;min-width:0}.album-author-avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-base);color:var(--color-text-inverse);overflow:hidden;flex-shrink:0}.album-author-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.album-author-name{font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-time-row{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-sm);color:var(--text-tertiary);padding:2px 0}.album-stats-row{display:flex;align-items:center;gap:14px;padding-top:var(--space-sm);border-top:1px solid var(--border);flex-wrap:wrap}.album-stat{display:flex;align-items:center;gap:3px;font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer;padding:2px 4px;border-radius:var(--radius-full);transition:all var(--transition-base);white-space:nowrap}.album-stat:active{transform:scale(.92)}.album-stat.active{color:var(--danger)}.album-stat.favorited{color:var(--warning)}.album-stat .icon{font-size:14px;transition:transform var(--transition-fast)}.album-stat.favorited .icon{animation:starPop .3s ease}.album-stat.active .icon{animation:heartBeat .3s ease}.post-card{background:var(--surface);border-radius:var(--radius-xl);padding:var(--space-xl);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base)}.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.post-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.post-card-author{display:flex;align-items:center;gap:var(--space-md)}.post-card-menu{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base)}.post-card-menu:hover{background:var(--bg-secondary);color:var(--text-secondary)}.post-card-title{font-size:var(--font-size-lg);font-weight:700;color:var(--text);margin:0 0 var(--space-sm) 0;line-height:1.5}.post-card-content{color:var(--text-secondary);line-height:1.7;font-size:var(--font-size-md);margin:0;word-break:break-word}.post-card-actions{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--border-light)}.post-card-actions-left{display:flex;align-items:center;gap:var(--space-2xl)}.post-card-actions-right{display:flex;align-items:center;gap:var(--space-xs)}.post-action-btn{display:flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:var(--font-size-base);font-weight:500;padding:4px 0;transition:color var(--transition-base)}.post-action-btn:hover{color:var(--danger)}.user-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);transition:all var(--transition-base);cursor:pointer}.user-card:hover{border-color:var(--border);box-shadow:var(--shadow-md)}.user-card .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--bg-secondary);flex-shrink:0}.user-card .avatar img{width:100%;height:100%;object-fit:cover}.user-card .info{flex:1;min-width:0}.user-card .name{font-weight:700;font-size:var(--font-size-md);color:var(--text)}.user-card .username{font-size:var(--font-size-sm);color:var(--text-tertiary)}.user-card .bio{font-size:var(--font-size-sm);color:var(--text-secondary);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-2{gap:2px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.p-4{padding:4px}.p-8{padding:8px}.p-10{padding:10px}.p-12{padding:12px}.p-14{padding:14px}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.px-8{padding-left:8px;padding-right:8px}.px-10{padding-left:10px;padding-right:10px}.px-12{padding-left:12px;padding-right:12px}.px-16{padding-left:16px;padding-right:16px}.px-20{padding-left:20px;padding-right:20px}.py-4{padding-top:4px;padding-bottom:4px}.py-8{padding-top:8px;padding-bottom:8px}.py-10{padding-top:10px;padding-bottom:10px}.py-12{padding-top:12px;padding-bottom:12px}.py-14{padding-top:14px;padding-bottom:14px}.py-16{padding-top:16px;padding-bottom:16px}.py-20{padding-top:20px;padding-bottom:20px}.pt-8{padding-top:8px}.pt-12{padding-top:12px}.pt-16{padding-top:16px}.pb-8{padding-bottom:8px}.pb-12{padding-bottom:12px}.pb-16{padding-bottom:16px}.pb-80{padding-bottom:80px}.pb-100{padding-bottom:100px}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.bg-white{background:#fff}.bg-surface{background:var(--surface)}.bg-secondary{background:var(--bg-secondary)}.bg-transparent{background:transparent}.bg-primary-gradient{background:linear-gradient(135deg,#667eea,#764ba2)}.bg-secondary-gradient{background:linear-gradient(135deg,#FF6B6B,#FF8E53)}.text-white{color:var(--color-text-inverse)}.text-primary{color:#1e293b}.text-secondary{color:#64748b}.text-tertiary{color:#94a3b8}.text-center{text-align:center}.text-sm{font-size:13px}.text-base{font-size:14px}.text-lg{font-size:16px}.text-xl{font-size:18px}.text-2xl{font-size:20px}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.leading-relaxed{line-height:1.6}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.border{border:1px solid var(--border)}.border-light{border:1px solid var(--border-light)}.border-none{border:none}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}.max-w-md{max-width:640px}.max-w-lg{max-width:680px}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.select-none{-webkit-user-select:none;user-select:none}.whitespace-nowrap{white-space:nowrap}.break-word{word-break:break-word}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.w-32{width:32px}.w-36{width:36px}.w-40{width:40px}.w-56{width:56px}.w-72{width:72px}.h-32{height:32px}.h-36{height:36px}.h-40{height:40px}.h-56{height:56px}.h-72{height:72px}.bg-primary{background:var(--primary)}.bg-success{background:var(--success)}.bg-danger{background:var(--danger)}.bg-warning{background:var(--warning)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.border-primary{border-color:var(--primary)}.border-success{border-color:var(--success)}.border-danger{border-color:var(--danger)}.border-warning{border-color:var(--warning)}.hover-scale-102:hover{transform:scale(1.02)}.hover-scale-105:hover{transform:scale(1.05)}.hover-lift:hover{transform:translateY(-2px)}.hover-shadow:hover{box-shadow:var(--shadow-md)}.transition{transition:all var(--transition-base)}.transition-fast{transition:all var(--transition-fast)}.transition-base{transition:all var(--transition-base)}.transition-slow{transition:all var(--transition-slow)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn var(--transition-base) ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.slide-up{animation:slideUp var(--transition-slow) ease}@keyframes slideDown{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideUpSheet{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes skeleton-pulse{0%{opacity:.3}50%{opacity:.6}to{opacity:.3}}@keyframes heartBeat{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes starPop{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bgFloat{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-20px,-20px) rotate(2deg)}}@keyframes logoBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes successPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes ripple-anim{to{transform:scale(4);opacity:0}}.animate-fade-in{animation:fadeIn var(--transition-base) ease}.animate-slide-up{animation:slideUp var(--transition-slow) ease}.animate-spin{animation:spin .8s linear infinite}.animate-pulse{animation:pulse .8s ease infinite}