:root{--bg: #080808;--surface: #111111;--surface2: #181818;--border: #222222;--border-light: #2e2e2e;--accent: #c8ff00;--accent-dim: rgba(200, 255, 0, .12);--accent-dim2: rgba(200, 255, 0, .06);--text: #f0f0f0;--text-muted: #666666;--text-dim: #444444;--danger: #ff4444;--danger-dim: rgba(255, 68, 68, .12);--radius: 12px;--radius-sm: 8px;--radius-xs: 6px;--font-display: "Syne", sans-serif;--font-body: "DM Mono", monospace;--nav-width: 240px;--sidebar-width: 300px;--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}#root{min-height:100vh;min-height:100dvh}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;border:none;outline:none}input,textarea,select{font-family:var(--font-body);outline:none}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;letter-spacing:.02em;transition:var(--transition);cursor:pointer;border:1px solid transparent;white-space:nowrap}.btn-accent{background:var(--accent);color:#080808;border-color:var(--accent);font-weight:700}.btn-accent:hover{background:#d4ff20;box-shadow:0 0 20px #c8ff004d}.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-light)}.btn-ghost:hover{background:var(--surface2);border-color:var(--text-muted)}.btn-danger{background:var(--danger-dim);color:var(--danger);border-color:transparent}.btn-danger:hover{background:#f443}.btn-sm{padding:5px 12px;font-size:12px}.btn-lg{padding:12px 24px;font-size:15px}.btn:disabled{opacity:.4;cursor:not-allowed}.input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:10px 14px;font-size:14px;transition:var(--transition)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input::placeholder{color:var(--text-dim)}textarea.input{resize:vertical;min-height:100px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.divider{height:1px;background:var(--border)}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface2);border:1px solid var(--border);flex-shrink:0;-webkit-user-select:none;user-select:none}.avatar-sm{width:32px;height:32px;font-size:16px}.avatar-md{width:42px;height:42px;font-size:22px}.avatar-lg{width:64px;height:64px;font-size:32px}.avatar-xl{width:80px;height:80px;font-size:40px}.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:500;letter-spacing:.04em}.badge-accent{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(200,255,0,.2)}.badge-muted{background:var(--surface2);color:var(--text-muted);border:1px solid var(--border)}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border:2px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:fadeIn .15s ease}.modal{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.toast-container{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}@media (min-width: 768px){.toast-container{bottom:24px}}.toast{background:var(--surface2);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px 16px;font-size:13px;white-space:nowrap;animation:toastIn .2s ease;box-shadow:0 4px 20px #00000080}.toast.success{border-color:var(--accent);color:var(--accent)}.toast.error{border-color:var(--danger);color:var(--danger)}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.app-layout{display:flex;min-height:100vh}.main-content{flex:1;margin-left:var(--nav-width);min-height:100vh;display:flex;justify-content:center;padding-top:env(safe-area-inset-top)}.content-area{width:100%;max-width:620px;padding:24px 16px 100px;padding-top:calc(24px + env(safe-area-inset-top))}.right-sidebar{width:var(--sidebar-width);padding:24px 16px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}@media (max-width: 1100px){.right-sidebar{display:none}}@media (max-width: 768px){.main-content{margin-left:0;margin-bottom:calc(60px + env(safe-area-inset-bottom));padding-top:env(safe-area-inset-top)}.content-area{padding:16px 12px 80px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(80px + env(safe-area-inset-bottom))}}.side-nav{width:var(--nav-width);height:100vh;position:fixed;left:0;top:0;background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 12px;z-index:100;overflow-y:auto}.side-nav-logo{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.03em;padding:8px 12px 20px;display:flex;align-items:center;gap:8px}.side-nav-logo .logo-dot{color:var(--accent)}.nav-links{display:flex;flex-direction:column;gap:2px;flex:1}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;color:var(--text-muted);transition:var(--transition);cursor:pointer;position:relative;text-decoration:none}.nav-link:hover{background:var(--surface2);color:var(--text)}.nav-link.active{background:var(--accent-dim);color:var(--accent)}.nav-link .nav-icon{font-size:18px;width:22px;text-align:center}.nav-link .notif-dot{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;background:var(--accent);border-radius:50%}.nav-profile{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}.nav-profile-inner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.nav-profile-inner:hover{background:var(--surface2)}.nav-profile-info{overflow:hidden}.nav-profile-name{font-size:13px;font-weight:600;font-family:var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-profile-handle{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.side-nav{display:none}}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#080808eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border);z-index:100;padding:8px 0;padding-bottom:env(safe-area-inset-bottom,8px)}@media (max-width: 768px){.bottom-nav{display:flex}}.bottom-nav-items{display:flex;width:100%}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;color:var(--text-muted);cursor:pointer;transition:var(--transition);position:relative;background:none;border:none;text-decoration:none}.bottom-nav-item .bn-icon{font-size:22px;line-height:1}.bottom-nav-item .bn-label{font-size:10px;letter-spacing:.04em}.bottom-nav-item .bn-dot{position:absolute;top:4px;right:calc(50% - 14px);width:7px;height:7px;background:var(--accent);border-radius:50%}.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:border-color var(--transition)}.post-card:hover{border-color:var(--border-light)}.post-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.post-author-info{flex:1;overflow:hidden}.post-author-name{font-family:var(--font-display);font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}.post-meta{font-size:12px;color:var(--text-muted)}.post-community-tag{font-size:11px;color:var(--accent);background:var(--accent-dim2);padding:1px 6px;border-radius:4px}.post-text{font-size:14px;line-height:1.7;margin-bottom:12px;white-space:pre-wrap;word-break:break-word}.post-image{width:100%;border-radius:var(--radius-sm);margin-bottom:12px;max-height:500px;object-fit:cover;display:block}.post-actions{display:flex;align-items:center;gap:4px;padding-top:8px;border-top:1px solid var(--border)}.post-action-btn{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--radius-xs);background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;transition:var(--transition);font-family:var(--font-body)}.post-action-btn:hover{background:var(--surface2);color:var(--text)}.post-action-btn.liked{color:var(--accent)}.post-action-btn.liked:hover{background:var(--accent-dim)}.post-action-btn .act-icon{font-size:15px}.post-more-btn{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-xs);transition:var(--transition);font-size:16px}.post-more-btn:hover{background:var(--surface2);color:var(--text)}.comment-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)}.comment-item:last-child{border-bottom:none}.comment-body{flex:1}.comment-author{font-size:13px;font-weight:600;font-family:var(--font-display);margin-bottom:3px}.comment-text{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap}.comment-time{font-size:11px;color:var(--text-muted);margin-top:4px}.feed-list{display:flex;flex-direction:column;gap:12px}.feed-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.feed-title{font-family:var(--font-display);font-size:20px;font-weight:700}.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px}.tab-btn{padding:10px 16px;background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition);font-family:var(--font-body)}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.compose-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:16px;transition:border-color var(--transition)}.compose-bar:hover{border-color:var(--border-light)}.compose-placeholder{color:var(--text-dim);font-size:14px;flex:1}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px}.auth-logo{font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:-.04em;margin-bottom:4px}.auth-logo span{color:var(--accent)}.auth-tagline{color:var(--text-muted);font-size:13px;margin-bottom:28px}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:12px;margin:4px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-switch{text-align:center;font-size:13px;color:var(--text-muted);margin-top:12px}.auth-switch button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;font-family:var(--font-body)}.form-label{font-size:12px;color:var(--text-muted);margin-bottom:4px;display:block;letter-spacing:.04em}.form-group{display:flex;flex-direction:column}.form-error{font-size:12px;color:var(--danger);margin-top:4px}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px;max-height:200px;overflow-y:auto}.emoji-opt{display:flex;align-items:center;justify-content:center;font-size:22px;height:40px;border-radius:var(--radius-xs);cursor:pointer;background:var(--surface2);border:2px solid transparent;transition:var(--transition)}.emoji-opt:hover{background:var(--surface);border-color:var(--border-light);transform:scale(1.1)}.emoji-opt.selected{border-color:var(--accent);background:var(--accent-dim)}.profile-banner{height:120px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(135deg,#111,#1a1a1a);position:relative}.profile-info{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:0 20px 20px;margin-bottom:20px}.profile-avatar-wrap{position:relative;display:inline-block;margin-top:-36px;margin-bottom:12px}.profile-header-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px}.profile-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.profile-stats{display:flex;gap:20px;margin:12px 0;flex-wrap:wrap}.profile-stat{cursor:pointer}.profile-stat-num{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1}.profile-stat-label{font-size:11px;color:var(--text-muted)}.profile-bio{font-size:14px;color:var(--text-muted);margin-bottom:12px;word-break:break-word}.profile-username{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:2px;word-break:break-word}.profile-handle{font-size:13px;color:var(--text-muted);word-break:break-word}.community-banner{height:140px;border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:flex-end;padding:16px;position:relative;overflow:hidden}.community-banner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(8,8,8,.8) 0%,transparent 60%)}.community-info-bar{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:16px 20px;margin-bottom:20px}.community-title{font-family:var(--font-display);font-size:22px;font-weight:700}.community-desc{font-size:13px;color:var(--text-muted);margin:6px 0 12px}.community-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.community-stat{font-size:12px;color:var(--text-muted)}.community-stat strong{color:var(--text)}.search-bar-wrap{position:relative;margin-bottom:24px}.search-bar-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:16px}.search-bar{padding-left:38px}.community-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.community-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color var(--transition),transform .15s ease}.community-card:hover{border-color:var(--border-light);transform:translateY(-2px)}.community-card-banner{height:60px}.community-card-body{padding:12px}.community-card-name{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:4px}.community-card-desc{font-size:12px;color:var(--text-muted);overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical}.community-card-footer{padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.notif-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition)}.notif-item:hover{opacity:.8}.notif-item.unread .notif-text{color:var(--text)}.notif-text{font-size:13px;color:var(--text-muted);flex:1;line-height:1.5}.notif-text strong{color:var(--text)}.notif-time{font-size:11px;color:var(--text-dim);white-space:nowrap}.notif-unread-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0;margin-top:6px}.dropdown-wrap{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface2);border:1px solid var(--border-light);border-radius:var(--radius-sm);min-width:160px;z-index:200;animation:slideUp .15s ease;overflow:hidden}.dropdown-item{width:100%;padding:10px 14px;background:none;border:none;text-align:left;color:var(--text);font-size:13px;cursor:pointer;transition:var(--transition);font-family:var(--font-body);display:flex;align-items:center;gap:8px}.dropdown-item:hover{background:var(--surface)}.dropdown-item.danger{color:var(--danger)}.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted);animation:fadeIn .4s ease}.empty-state-emoji{font-size:48px;margin-bottom:16px;animation:bounceIn .5s ease}.empty-state-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.02em}.empty-state-desc{font-size:14px;line-height:1.6;max-width:280px;margin:0 auto}.empty-state.member-gate{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:48px 32px;margin:20px 0}.empty-state.member-gate .empty-state-emoji{font-size:56px;filter:drop-shadow(0 4px 12px rgba(200,255,0,.2))}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.game-lobby-section{background:var(--surface);border-radius:var(--radius);padding:24px;border:1px solid var(--border)}.game-lobby-title{font-family:var(--font-display);font-size:20px;margin-bottom:16px}.game-lobby-desc{color:var(--text-muted);margin-bottom:16px;font-size:14px}.game-lobby-join{display:flex;gap:12px;flex-wrap:wrap}.game-lobby-input{flex:1;min-width:200px;padding:12px 16px;font-size:20px;text-align:center;letter-spacing:.15em;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);text-transform:uppercase;font-family:var(--font-body)}.game-lobby-input:focus{border-color:var(--accent);outline:none}@media (max-width: 480px){.game-lobby-section{padding:16px}.game-lobby-title{font-size:18px}.game-lobby-input{font-size:18px;min-width:150px;padding:14px 12px}.game-lobby-join{gap:8px}}.user-list-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:var(--transition)}.user-list-item:hover{background:var(--surface2)}.user-list-info{flex:1}.user-list-name{font-family:var(--font-display);font-size:14px;font-weight:600}.user-list-handle{font-size:12px;color:var(--text-muted)}@media (max-width: 1024px){:root{--nav-width: 72px}.side-nav-logo{font-size:0}.side-nav-logo:first-letter{font-size:22px}.nav-link{justify-content:center;padding:12px}.nav-link .nav-icon{font-size:22px;width:auto}.nav-link span:not(.nav-icon):not(.notif-dot){display:none}.nav-profile-info{display:none}.nav-profile-inner{justify-content:center;padding:8px}.right-sidebar{width:260px}.community-card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}@media (max-width: 767px){:root{--radius: 10px;--radius-sm: 6px}body{font-size:15px}.content-area{padding:12px 10px 100px;max-width:100%}.post-card{padding:12px}.post-header{gap:10px;margin-bottom:10px}.post-author-name{font-size:15px}.post-text{font-size:15px;line-height:1.6}.post-image{max-height:400px;border-radius:8px}.post-actions{gap:2px}.post-action-btn{padding:8px 10px;font-size:13px}.post-action-btn .act-icon{font-size:16px}.profile-banner{height:100px}.profile-info{padding:0 16px 16px}.profile-avatar-wrap{margin-top:-30px}.profile-username{font-size:18px}.profile-stats{gap:16px}.profile-stat-num{font-size:16px}.auth-page{padding:16px}.auth-card{padding:24px 20px}.auth-logo{font-size:24px}.emoji-grid{grid-template-columns:repeat(6,1fr);gap:8px}.emoji-opt{height:44px;font-size:24px}.modal-overlay{padding:12px}.modal{max-height:95vh}.community-banner{height:100px;padding:12px}.community-title{font-size:18px}.community-info-bar{padding:12px 16px}.community-card-grid{grid-template-columns:1fr}.feed-list{gap:10px}.feed-header{margin-bottom:16px}.feed-title{font-size:20px}.compose-bar{padding:12px;margin-bottom:12px}.tabs{margin-bottom:16px}.tab-btn{padding:10px 14px;font-size:14px}.notif-item{padding:12px 0}.notif-text{font-size:14px}.comment-item{gap:10px;padding:14px 0}.comment-author,.comment-text{font-size:14px}.user-list-item{padding:14px 16px}.user-list-name{font-size:15px}.empty-state{padding:40px 20px}.empty-state-emoji{font-size:48px}.toast-container{bottom:70px;left:16px;right:16px;transform:none}.toast{white-space:normal;text-align:center;font-size:14px;padding:12px 16px}}@media (max-width: 480px){:root{--nav-width: 0px}body{font-size:14px}.content-area{padding:10px 8px 90px}.post-card{padding:10px;border-radius:10px}.post-header{gap:8px;margin-bottom:8px}.post-author-name{font-size:14px}.post-meta{font-size:11px}.post-text{font-size:14px;margin-bottom:10px}.post-image{max-height:300px;border-radius:6px}.post-actions{padding-top:6px}.post-action-btn{padding:6px 8px;font-size:12px;gap:4px}.post-action-btn .act-icon{font-size:14px}.bottom-nav{padding:6px 0}.bottom-nav-item{padding:4px 2px}.bottom-nav-item .bn-icon{font-size:20px}.bottom-nav-item .bn-label{font-size:9px}.profile-banner{height:80px}.profile-info{padding:0 12px 12px}.profile-avatar-wrap{margin-top:-24px}.profile-avatar-wrap .avatar-xl{width:64px;height:64px;font-size:32px}.profile-header-row{flex-direction:column;align-items:flex-start;gap:8px}.profile-actions{width:100%;justify-content:flex-start}.profile-actions .btn{flex:1;min-width:0;white-space:nowrap}.profile-username{font-size:16px}.profile-handle{font-size:12px}.profile-stats{gap:12px;margin:10px 0}.profile-stat-num{font-size:15px}.profile-stat-label{font-size:10px}.profile-bio{font-size:13px;margin-bottom:10px}.auth-card{padding:20px 16px}.auth-logo{font-size:22px}.btn{padding:10px 14px;font-size:14px}.btn-lg{padding:12px 20px;font-size:15px}.input{padding:12px;font-size:16px}.emoji-grid{grid-template-columns:repeat(5,1fr);gap:6px}.emoji-opt{height:40px;font-size:20px}.tab-btn{padding:8px 10px;font-size:13px;flex:1;text-align:center}.community-title{font-size:16px}.community-desc{font-size:12px}.community-meta{gap:12px}.community-stat{font-size:11px}.modal-overlay{padding:8px}.modal{border-radius:12px}.dropdown-menu{min-width:140px}.dropdown-item{padding:10px 12px;font-size:14px}.search-bar-wrap{margin-bottom:16px}.search-bar-icon{left:10px;font-size:14px}.search-bar{padding-left:32px}.notif-item{gap:10px;padding:10px 0}.notif-text{font-size:13px}.notif-time{font-size:10px}.compose-bar{padding:10px 12px}.compose-placeholder{font-size:14px}.avatar-md{width:38px;height:38px;font-size:20px}}.page-transition{animation:pageEnter .4s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}.page-transition.fadeOut{animation:pageExit .2s cubic-bezier(.4,0,1,1) forwards}.page-transition.fadeIn{animation:pageEnter .4s cubic-bezier(.22,1,.36,1)}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px) scale(.98);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes pageExit{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(-12px) scale(.98);filter:blur(4px)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(30px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes floatUp{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 #c8ff0000}50%{box-shadow:0 0 20px 4px #c8ff004d}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.post-card{transition:all .35s cubic-bezier(.22,1,.36,1);will-change:transform,box-shadow}.post-card:hover{transform:translateY(-4px) scale(1.005);box-shadow:0 12px 40px #0006,0 0 0 1px var(--border-light);border-color:var(--accent)}.post-card:active{transform:translateY(-2px) scale(.995)}.community-card{transition:all .4s cubic-bezier(.22,1,.36,1);will-change:transform,box-shadow}.community-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 50px #00000059,0 0 0 1px var(--border-light)}.btn{transition:all .25s cubic-bezier(.22,1,.36,1);will-change:transform,box-shadow;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);transform:translate(-100%);transition:transform .6s ease}.btn:hover:after{transform:translate(100%)}.btn:active{transform:scale(.96)}.btn-accent{transition:all .3s cubic-bezier(.22,1,.36,1)}.btn-accent:hover{box-shadow:0 4px 20px #c8ff0066,0 0 0 1px #c8ff004d;transform:translateY(-1px)}.btn-accent:active{transform:scale(.95);box-shadow:0 2px 10px #c8ff004d}.nav-link{position:relative;overflow:hidden;transition:all .25s cubic-bezier(.22,1,.36,1)}.nav-link:before{content:"";position:absolute;left:0;top:50%;height:60%;width:3px;background:var(--accent);transform:translateY(-50%) scaleY(0);transition:transform .3s cubic-bezier(.22,1,.36,1);border-radius:0 2px 2px 0}.nav-link.active:before{transform:translateY(-50%) scaleY(1)}.nav-link:hover{background:var(--surface2);transform:translate(4px)}.nav-link.active{background:var(--surface2);color:var(--accent)}.bottom-nav-item{transition:all .2s cubic-bezier(.22,1,.36,1)}.bottom-nav-item:hover{transform:translateY(-2px)}.bottom-nav-item:active{transform:scale(.9)}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-item.active .bn-icon{animation:floatUp 2s ease-in-out infinite}.feed-list>*{animation:slideUpFade .5s cubic-bezier(.22,1,.36,1) backwards;will-change:opacity,transform,filter}.feed-list>*:nth-child(1){animation-delay:0ms}.feed-list>*:nth-child(2){animation-delay:60ms}.feed-list>*:nth-child(3){animation-delay:.12s}.feed-list>*:nth-child(4){animation-delay:.18s}.feed-list>*:nth-child(5){animation-delay:.24s}.feed-list>*:nth-child(6){animation-delay:.3s}.feed-list>*:nth-child(7){animation-delay:.36s}.feed-list>*:nth-child(8){animation-delay:.42s}.feed-list>*:nth-child(9){animation-delay:.48s}.feed-list>*:nth-child(10){animation-delay:.54s}.modal-overlay{animation:fadeIn .3s cubic-bezier(.22,1,.36,1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:backdrop-filter .3s ease}.modal{animation:scaleIn .35s cubic-bezier(.22,1,.36,1);will-change:opacity,transform,filter}.skeleton{background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 25%,var(--surface) 50%,var(--surface2) 75%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite;border-radius:var(--radius-sm)}html{scroll-behavior:smooth}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}@media (min-width: 1400px){:root{--nav-width: 260px;--sidebar-width: 340px}.content-area{max-width:680px;padding:28px 20px 100px}.side-nav{padding:24px 16px}.side-nav-logo{font-size:24px}.nav-link{padding:12px 14px;font-size:15px}.nav-link .nav-icon{font-size:20px}.right-sidebar{padding:28px 20px}.post-card{padding:18px}.post-text{font-size:15px}.community-card-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (hover: none) and (pointer: coarse){.post-action-btn{padding:10px 14px}.nav-link{padding:14px 12px}.bottom-nav-item{padding:10px 4px}.tab-btn{padding:14px 16px}.btn{padding:12px 18px}.btn-sm{padding:8px 14px}.post-card:hover{border-color:var(--border)}.community-card:hover{transform:none}.nav-link:hover,.post-action-btn:hover{background:transparent}.post-action-btn:active,.nav-link:active{background:var(--surface2)}.btn:active{transform:scale(.98)}.bottom-nav-item:active{opacity:.7}::-webkit-scrollbar{width:0px;background:transparent}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.avatar,.post-card,.card,.btn,.input{border-width:.5px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spinner{animation:none;border-top-color:var(--accent)}.toast,.modal,.modal-overlay{animation:none}}@media print{.side-nav,.bottom-nav,.right-sidebar,.post-actions,.compose-bar{display:none!important}.main-content{margin:0}.content-area{max-width:100%;padding:0}.post-card{break-inside:avoid;border:1px solid #ccc;background:#fff;color:#000}body{background:#fff;color:#000}}.landing-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg) 0%,#0a0a0a 50%,var(--surface) 100%)}.landing-big-text{position:absolute;left:5%;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none}.landing-big-text h1{font-family:var(--font-display);font-size:180px;font-weight:900;letter-spacing:-8px;line-height:1;background:linear-gradient(135deg,var(--text) 0%,var(--text-muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.15;animation:bigTextFloat 6s ease-in-out infinite}.landing-big-text .dot{color:var(--accent);-webkit-text-fill-color:var(--accent);opacity:1}@keyframes bigTextFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.octopus-container{position:absolute;bottom:-10%;right:-15%;width:900px;height:900px;pointer-events:none;z-index:1;animation:octopusFloat 8s ease-in-out infinite;transition:all .8s cubic-bezier(.22,1,.36,1)}.octopus-container.mobile-position{bottom:auto;top:-10%;right:-5%;width:400px;height:400px;animation:octopusFloatMobile 6s ease-in-out infinite}.octopus-bg{width:100%;height:100%;object-fit:contain;opacity:.8;filter:drop-shadow(0 0 60px rgba(200,255,0,.2));animation:octopusGlow 4s ease-in-out infinite alternate}@keyframes octopusFloat{0%,to{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-20px) rotate(2deg) scale(1.02)}}@keyframes octopusFloatMobile{0%,to{transform:translateY(0) rotate(5deg) scale(1)}50%{transform:translateY(15px) rotate(-3deg) scale(1.03)}}@keyframes octopusGlow{0%{filter:drop-shadow(0 0 40px rgba(200,255,0,.15))}to{filter:drop-shadow(0 0 80px rgba(200,255,0,.35))}}.landing-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 30% 50%,rgba(200,255,0,.03) 0%,transparent 50%);pointer-events:none;z-index:2}.landing-gradient.mobile-gradient{background:radial-gradient(ellipse at 70% 30%,rgba(200,255,0,.05) 0%,transparent 50%)}.landing-card{position:relative;z-index:10;background:#111111d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius);padding:48px;width:100%;max-width:440px;box-shadow:0 25px 50px #00000080,0 0 0 1px #c8ff001a;animation:landingCardEnter .8s cubic-bezier(.22,1,.36,1);transition:all .4s cubic-bezier(.22,1,.36,1)}.landing-card:hover{box-shadow:0 30px 60px #0009,0 0 0 1px #c8ff0026;transform:translateY(-2px)}@keyframes landingCardEnter{0%{opacity:0;transform:translateY(40px) scale(.95);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}.landing-logo{font-family:var(--font-display);font-size:42px;font-weight:700;text-align:center;margin-bottom:8px;letter-spacing:-1px;animation:logoPulse 3s ease-in-out infinite}.landing-logo .logo-dot{color:var(--accent);position:relative}.landing-logo .logo-dot:after{content:"";position:absolute;bottom:8px;right:-4px;width:8px;height:8px;background:var(--accent);border-radius:50%;animation:dotGlow 2s ease-in-out infinite alternate}@keyframes logoPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes dotGlow{0%{box-shadow:0 0 10px var(--accent)}to{box-shadow:0 0 25px var(--accent),0 0 40px var(--accent)}}.landing-tagline{text-align:center;color:var(--text-muted);font-size:15px;margin-bottom:32px;line-height:1.5}.landing-subtitle{text-align:center;color:var(--text-dim);font-size:13px;margin-bottom:28px;line-height:1.6;padding:0 20px}.get-app-btn{position:fixed;bottom:40px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:10px;padding:14px 28px;background:#111111e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-light);border-radius:50px;color:var(--text);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 30px #0006;animation:getAppBtnEnter .6s cubic-bezier(.22,1,.36,1) .3s backwards}.get-app-btn:hover{background:var(--surface2);border-color:var(--accent);transform:translate(-50%) translateY(-4px);box-shadow:0 12px 40px #00000080,0 0 0 1px #c8ff0033}.get-app-btn:active{transform:translate(-50%) translateY(-2px) scale(.98)}@keyframes getAppBtnEnter{0%{opacity:0;transform:translate(-50%) translateY(30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.mobile-page .back-btn{position:absolute;top:-20px;left:0;background:transparent;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:8px 12px;transition:all .2s ease;display:flex;align-items:center;gap:6px}.mobile-page .back-btn:hover{color:var(--accent);transform:translate(-4px)}.download-buttons{display:flex;flex-direction:column;gap:14px;margin-top:24px}.download-btn{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1);text-align:left}.download-btn svg{width:28px;height:28px;flex-shrink:0}.download-btn span{display:flex;flex-direction:column;line-height:1.3}.download-btn span small{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.download-btn span strong{font-size:16px;font-weight:600;font-family:var(--font-display)}.download-btn:hover{background:var(--surface2);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.download-btn.ios:hover{box-shadow:0 8px 25px #0000004d,0 0 20px #007aff33}.download-btn.android:hover{box-shadow:0 8px 25px #0000004d,0 0 20px #3ddc8433}.coming-soon-badge{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:8px 16px;background:var(--accent-dim);border:1px solid rgba(200,255,0,.2);border-radius:50px;font-size:12px;color:var(--accent);font-weight:500;animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{opacity:.8}50%{opacity:1;box-shadow:0 0 15px #c8ff0033}}.landing-page{animation:pageFadeIn .5s ease}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}.pwa-install-section{display:flex;justify-content:center;margin-top:24px}.pwa-install-btn{display:flex;align-items:center;gap:16px;padding:18px 32px;background:linear-gradient(135deg,var(--accent) 0%,#a8e000 100%);border:none;border-radius:50px;color:#000;cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 30px #c8ff004d;animation:pwaBtnPulse 2s ease-in-out infinite}.pwa-install-btn svg{flex-shrink:0}.pwa-install-btn span{display:flex;flex-direction:column;text-align:left;line-height:1.2}.pwa-install-btn span small{font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.5px}.pwa-install-btn span strong{font-size:18px;font-weight:700;font-family:var(--font-display)}.pwa-install-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 40px #c8ff0066}.pwa-install-btn:active{transform:translateY(-1px) scale(.98)}@keyframes pwaBtnPulse{0%,to{box-shadow:0 8px 30px #c8ff004d}50%{box-shadow:0 12px 40px #c8ff0080,0 0 60px #c8ff0033}}.installed-badge{display:flex;align-items:center;gap:10px;padding:14px 28px;background:#00c86426;border:1px solid rgba(0,200,100,.3);border-radius:50px;color:#00c864;font-weight:600;font-size:16px}.pwa-hint{text-align:center;margin-top:16px;font-size:12px;color:var(--text-dim)}@media (max-width: 1200px){.landing-big-text h1{font-size:120px;letter-spacing:-4px}}@media (max-width: 900px){.landing-big-text{display:none}.octopus-container{width:700px;height:700px;right:-20%;bottom:-15%}}@media (max-width: 640px){.landing-card{margin:16px;padding:28px 20px;max-width:none}.landing-logo{font-size:32px}.octopus-container{width:400px;height:400px;right:-25%;bottom:-10%;opacity:.5;display:block!important}.octopus-container.mobile-position{width:300px;height:300px;top:-5%;right:-15%;opacity:.6;display:block!important}.octopus-bg{opacity:.6}.get-app-btn{bottom:16px;padding:12px 24px;font-size:13px}.pwa-install-btn{padding:16px 28px}.pwa-install-btn span strong{font-size:16px}.download-buttons{gap:12px}.download-btn{padding:12px 16px}.download-btn span strong{font-size:14px}}@media (max-width: 380px){.landing-card{padding:24px 16px}.landing-logo{font-size:28px}.octopus-container{width:300px;height:300px;right:-30%;bottom:-5%;opacity:.4;display:block!important}.octopus-container.mobile-position{width:220px;height:220px;top:-5%;right:-20%;opacity:.5;display:block!important}.pwa-install-btn{padding:14px 24px}.pwa-install-btn span strong{font-size:15px}}.fluent-emoji-picker{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:360px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;z-index:1101}.fluent-emoji-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.fluent-emoji-header h3{font-size:16px;font-weight:700;margin:0}.fluent-emoji-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;line-height:1;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);transition:var(--transition)}.fluent-emoji-close:hover{background:var(--surface2);color:var(--text)}.fluent-emoji-search{padding:12px 16px;border-bottom:1px solid var(--border)}.fluent-emoji-search input{width:100%;padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:14px}.fluent-emoji-search input:focus{border-color:var(--accent)}.fluent-emoji-search input::placeholder{color:var(--text-muted)}.fluent-emoji-categories{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}.fluent-emoji-categories::-webkit-scrollbar{display:none}.fluent-emoji-category{padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);color:var(--text-muted);font-size:12px;cursor:pointer;white-space:nowrap;transition:var(--transition)}.fluent-emoji-category:hover{background:var(--surface2);color:var(--text)}.fluent-emoji-category.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}.fluent-emoji-section{padding:12px 16px;border-bottom:1px solid var(--border)}.fluent-emoji-section-title{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.fluent-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:12px 16px;overflow-y:auto;max-height:240px;content-visibility:auto}.fluent-emoji-item{aspect-ratio:1;background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;transition:transform .1s ease;contain:layout style paint}.fluent-emoji-item:hover{background:var(--surface2);border-color:var(--border-light);transform:scale(1.15)}.fluent-emoji-item img{width:28px;height:28px;object-fit:contain;image-rendering:-webkit-optimize-contrast}.fluent-emoji-empty{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:14px}.post-text img.fluent-emoji-inline{width:1.4em;height:1.4em;vertical-align:middle;display:inline}.post-fluent-emoji{display:inline-flex;vertical-align:middle}.post-fluent-emoji img{width:1.4em;height:1.4em;object-fit:contain}