.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)}}: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}: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));--preview-header-padding-top: calc(12px * var(--vp-scale-space));--preview-header-padding-x: calc(17px * var(--vp-scale-space));--preview-header-min-height: calc(54px * var(--vp-scale-space));--preview-header-gap: calc(7px * var(--vp-scale-space));--preview-back-btn-size: calc(34px * var(--vp-scale-btn));--preview-back-btn-radius: 50%;--preview-back-btn-bg: rgba(255, 255, 255, .12);--preview-title-font-size: calc(15px * var(--vp-scale-font));--preview-title-max-width: 40%;--preview-header-btn-size: calc(34px * var(--vp-scale-btn));--preview-header-btn-radius: 50%;--preview-header-btn-bg: rgba(255, 255, 255, .12);--preview-online-indicator-padding-y: clamp(2px, .4vw, 4px);--preview-online-indicator-padding-x: clamp(6px, 1.2vw, 14px);--preview-online-indicator-radius: calc(15px * var(--vp-scale-radius));--preview-online-indicator-text: #ffffff;--online-count-font-size: calc(12px * var(--vp-scale-font));--online-count-min-width: calc(15px * var(--vp-scale-space));--online-avatar-size: calc(21px * var(--vp-scale-icon));--online-avatar-border-width: calc(2px * var(--vp-scale-icon));--online-avatar-more-font-size: calc(9px * var(--vp-scale-font));--preview-controls-padding-y: clamp(8px, 1.2vw, 16px);--preview-controls-padding-x: clamp(12px, 2vw, 24px);--preview-controls-min-height: calc(68px * var(--vp-scale-space));--preview-controls-gap: calc(10px * var(--vp-scale-space));--preview-control-btn-size: calc(48px * var(--vp-scale-btn));--preview-control-btn-radius: 50%;--preview-join-btn-padding-y: clamp(8px, 1.2vw, 14px);--preview-join-btn-padding-x: clamp(16px, 3vw, 40px);--preview-join-btn-radius: calc(23px * var(--vp-scale-radius));--preview-join-btn-font-size: calc(16px * var(--vp-scale-font));--preview-join-btn-bg: linear-gradient(135deg, #4fc3f7, #2196f3);--preview-tips-bottom: calc(80px * var(--vp-scale-space));--preview-tips-font-size: calc(12px * var(--vp-scale-font));--preview-tips-color: rgba(255, 255, 255, .25);--preview-error-toast-bottom: calc(130px * var(--vp-scale-space));--preview-error-toast-radius: calc(11px * var(--vp-scale-radius));--preview-error-toast-font-size: calc(13px * var(--vp-scale-font));--preview-placeholder-gap: calc(12px * var(--vp-scale-space));--preview-placeholder-text-font-size: calc(14px * var(--vp-scale-font));--preview-retry-btn-padding-y: clamp(6px, .8vw, 10px);--preview-retry-btn-padding-x: clamp(16px, 2vw, 24px);--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: calc(20px * var(--vp-scale-space));--permission-guide-radius: calc(16px * var(--vp-scale-radius));--permission-guide-icon-size: calc(40px * var(--vp-scale-icon));--permission-guide-title-size: calc(19px * var(--vp-scale-font));--permission-guide-desc-size: calc(15px * var(--vp-scale-space));--permission-guide-btn-padding-y: clamp(8px, 1vw, 12px);--permission-guide-btn-padding-x: clamp(20px, 2.4vw, 32px);--permission-guide-btn-radius: calc(11px * var(--vp-scale-radius));--permission-guide-btn-font-size: calc(15px * var(--vp-scale-font))}: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-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-size: calc(44px * var(--vp-scale-icon));--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(47px * 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: rgba(200, 200, 220, .15);--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)}:root{--preview-font-base: calc(22px * var(--vp-scale-font));--preview-space-base: calc(var(--preview-font-base) * .55);--preview-avatar-size: calc(115px * var(--vp-scale-icon));--preview-avatar-border-radius: 50%;--preview-header-padding-top: calc(20px * var(--vp-scale-space));--preview-header-padding-x: calc(31px * var(--vp-scale-space));--preview-header-min-height: calc(64px * var(--vp-scale-space));--preview-header-gap: calc(12px * var(--vp-scale-space));--preview-header-action-gap: calc(8px * var(--vp-scale-space));--preview-back-btn-size: calc(50px * var(--vp-scale-btn));--preview-back-btn-icon: calc(25px * var(--vp-scale-icon));--preview-back-btn-radius: 50%;--preview-title-font-size: calc(24px * var(--vp-scale-font));--preview-title-max-width: 50%;--preview-header-btn-size: calc(50px * var(--vp-scale-btn));--preview-header-btn-icon: calc(25px * var(--vp-scale-icon));--preview-header-btn-radius: 50%;--preview-online-indicator-padding-y: clamp(4px, .8vw, 10px);--preview-online-indicator-padding-x: clamp(12px, 1.8vw, 24px);--preview-online-indicator-radius: calc(24px * var(--vp-scale-radius));--online-count-font-size: calc(18px * var(--vp-scale-font));--online-count-waiting-font-size: calc(17px * var(--vp-scale-font));--online-count-min-width: calc(22px * var(--vp-scale-space));--online-avatar-size: calc(35px * var(--vp-scale-icon));--online-avatar-border-width: calc(2px * var(--vp-scale-icon));--online-avatar-more-font-size: calc(13px * var(--vp-scale-font));--waiting-dot-size: calc(10px * var(--vp-scale-space));--preview-popup-top: calc(82px * var(--vp-scale-space));--preview-popup-left: calc(20px * var(--vp-scale-space));--preview-popup-width: calc(260px * var(--vp-scale-space));--preview-popup-max-height: calc(340px * var(--vp-scale-space));--preview-popup-radius: calc(18px * var(--vp-scale-radius));--preview-popup-padding-y: clamp(10px, 1.2vw, 16px);--preview-popup-padding-x: clamp(14px, 1.8vw, 24px);--user-list-header-font-size: calc(19px * var(--vp-scale-font));--user-list-name-font-size: calc(19px * var(--vp-scale-font));--user-list-status-font-size: calc(16px * var(--vp-scale-font));--user-list-avatar-size: calc(36px * var(--vp-scale-icon));--beauty-title-font-size: calc(19px * var(--vp-scale-font));--beauty-toggle-font-size: calc(16px * var(--vp-scale-font));--beauty-status-font-size: calc(16px * var(--vp-scale-font));--beauty-hint-font-size: calc(14px * var(--vp-scale-font));--settings-label-font-size: calc(16px * var(--vp-scale-font));--settings-select-font-size: calc(16px * var(--vp-scale-font));--settings-btn-font-size: calc(16px * var(--vp-scale-font));--preview-controls-padding-y: clamp(14px, 1.8vw, 28px);--preview-controls-padding-x: clamp(16px, 2.2vw, 40px);--preview-controls-bottom-padding: calc(28px * var(--vp-scale-space));--preview-controls-gap: calc(19px * var(--vp-scale-space));--preview-control-btn-size: calc(70px * var(--vp-scale-btn));--preview-control-btn-icon-size: calc(33px * var(--vp-scale-icon));--preview-control-btn-gap: calc(21px * var(--vp-scale-space));--preview-join-btn-padding-y: clamp(10px, 1.2vw, 18px);--preview-join-btn-padding-x: clamp(24px, 3vw, 52px);--preview-join-btn-font-size: calc(23px * var(--vp-scale-font));--preview-join-btn-max-width: calc(320px * var(--vp-scale-btn));--preview-join-btn-radius: calc(34px * var(--vp-scale-radius));--preview-tips-bottom: calc(125px * var(--vp-scale-space));--preview-tips-font-size: calc(15px * var(--vp-scale-font));--placeholder-text-font-size: calc(22px * var(--vp-scale-font));--placeholder-name-font-size: calc(22px * var(--vp-scale-font));--preview-placeholder-gap: calc(19px * var(--vp-scale-space));--preview-retry-btn-padding-y: clamp(8px, 1vw, 14px);--preview-retry-btn-padding-x: clamp(24px, 2.8vw, 40px);--preview-retry-btn-font-size: calc(21px * var(--vp-scale-font));--preview-retry-btn-radius: calc(14px * var(--vp-scale-radius));--preview-retry-btn-border: rgba(255, 255, 255, .2);--permission-guide-padding-y: clamp(20px, 2.4vw, 32px);--permission-guide-padding-x: clamp(24px, 3.2vw, 44px);--permission-guide-radius: calc(22px * var(--vp-scale-radius));--permission-guide-icon-size: calc(58px * var(--vp-scale-icon));--permission-guide-title-size: calc(28px * var(--vp-scale-font));--permission-guide-desc-size: calc(22px * var(--vp-scale-space));--permission-guide-btn-padding-y: clamp(10px, 1.2vw, 16px);--permission-guide-btn-padding-x: clamp(24px, 2.8vw, 40px);--permission-guide-btn-radius: calc(16px * var(--vp-scale-radius));--permission-guide-btn-font-size: calc(21px * var(--vp-scale-font));--preview-error-toast-bottom: calc(160px * var(--vp-scale-space));--preview-error-toast-font-size: calc(19px * var(--vp-scale-font));--preview-error-toast-radius: calc(14px * var(--vp-scale-radius));--loading-spinner-size: calc(58px * var(--vp-scale-space));--loading-spinner-border-width: calc(4px * var(--vp-scale-space));--loading-spinner-color: #4fc3f7;--loading-font-size: calc(21px * var(--vp-scale-font));--loading-gap: calc(22px * var(--vp-scale-space));--device-switching-spinner-size: calc(42px * var(--vp-scale-space));--device-switching-text-size: calc(19px * var(--vp-scale-space));--device-switching-text-color: rgba(255, 255, 255, .8);--guest-avatar-svg-size: var(--preview-avatar-size)}[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, .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);--preview-popup-bg: rgba(20, 20, 31, .92);--preview-popup-text: #ffffff;--preview-popup-text-secondary: rgba(255, 255, 255, .6);--preview-popup-border: rgba(255, 255, 255, .06);--preview-bg: #000;--preview-back-btn-bg: rgba(255, 255, 255, .12);--preview-header-btn-bg: rgba(255, 255, 255, .12);--preview-online-indicator-text: #ffffff;--preview-join-btn-bg: linear-gradient(135deg, #4fc3f7, #2196f3);--preview-tips-color: rgba(255, 255, 255, .25);--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: rgba(0, 0, 0, .08) !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}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}}*{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}