:root{--primary: #2563eb;--primary-gradient: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);--bg-color: #f8fafc;--card-bg: #ffffff;--border-color: #f1f5f9;--text-main: #0f172a;--text-muted: #64748b;--heart-color: #ff2851;--bottom-nav-height: 64px;--header-height: 56px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-main);overflow-x:hidden;user-select:none}.app-container{max-width:480px;margin:0 auto;min-height:100vh;background:#fff;position:relative;display:flex;flex-direction:column;box-shadow:0 0 30px #0000000a}.app-header{height:var(--header-height);position:sticky;top:0;background:#fffffff2;backdrop-filter:blur(12px);z-index:40;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.logo-area{display:flex;align-items:center;gap:8px}.logo-icon{font-size:22px}.logo-text{font-size:20px;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.header-actions{display:flex;align-items:center;gap:8px}.refresh-icon-btn{background:#f1f5f9;border:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer}.spin{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:4px}.auth-badge.db-online{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.auth-badge.authorized{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}.auth-badge.preview{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.app-content{flex:1;padding-bottom:calc(var(--bottom-nav-height) + 16px)}.stories-bar{display:flex;gap:14px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border-color)}.stories-bar::-webkit-scrollbar{display:none}.story-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}.story-avatar-wrap{width:56px;height:56px;border-radius:50%;padding:2px;background:var(--primary-gradient);position:relative;display:flex;align-items:center;justify-content:center}.story-avatar-wrap.my-story{background:#e2e8f0}.story-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #ffffff}.story-placeholder-avatar{width:100%;height:100%;border-radius:50%;background:#cbd5e1;display:flex;align-items:center;justify-content:center;font-weight:700;color:#475569;border:2px solid #ffffff}.add-story-badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid #ffffff}.story-name{font-size:11px;color:var(--text-muted);max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.storage-info-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 16px;background:#f8fafc;border-bottom:1px solid var(--border-color)}.storage-tag{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:#475569}.post-card{margin-bottom:16px;border-bottom:1px solid var(--border-color)}.post-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}.post-author-info{display:flex;align-items:center;gap:10px}.author-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}.author-avatar-fallback{width:38px;height:38px;border-radius:50%;background:#e2e8f0;color:#334155;font-weight:700;display:flex;align-items:center;justify-content:center}.author-name{font-size:14px;font-weight:600;color:var(--text-main)}.post-meta{font-size:12px;color:var(--text-muted)}.s3-badge{font-size:10px;font-weight:700;color:#2563eb;background:#eff6ff;border:1px solid #dbeafe;padding:2px 6px;border-radius:6px}.post-image-container{width:100%;aspect-ratio:1 / 1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.post-image{width:100%;height:100%;object-fit:cover;display:block}.filter-warm{filter:sepia(.25) saturate(1.3) contrast(1.05)}.filter-cinema{filter:contrast(1.15) brightness(.95) saturate(1.2)}.filter-mono{filter:grayscale(1) contrast(1.1)}.filter-vintage{filter:sepia(.4) contrast(.9) brightness(1.05)}.post-actions{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px}.actions-left{display:flex;align-items:center;gap:16px}.action-btn{background:none;border:none;cursor:pointer;color:#1e293b;padding:4px;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}.action-btn:active{transform:scale(.85)}.heart-btn.liked{color:var(--heart-color);animation:popHeart .25s ease-out}@keyframes popHeart{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.post-likes-info{padding:0 14px 4px;font-size:13px;color:var(--text-main)}.post-likes-info .no-likes{color:var(--text-muted);font-size:12px}.post-caption{padding:2px 14px 6px;font-size:13.5px;line-height:1.4}.caption-author{font-weight:600;margin-right:4px}.post-comments-summary{padding:2px 14px 12px}.view-comments-btn{background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:0}.view-comments-btn.write-first{color:#94a3b8}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:var(--bottom-nav-height);background:#fffffffa;backdrop-filter:blur(16px);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-around;z-index:50}.nav-tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;background:none;border:none;color:#94a3b8;cursor:pointer;font-size:11px;font-weight:500}.nav-tab-btn.active{color:var(--text-main);font-weight:700}.create-view{padding:20px 16px}.section-title-wrap{margin-bottom:20px}.section-title-wrap h2{font-size:20px;font-weight:700}.section-title-wrap p{font-size:13px;color:var(--text-muted);margin-top:2px}.upload-dropzone{border:2px dashed #cbd5e1;border-radius:18px;overflow:hidden;cursor:pointer;min-height:280px;display:flex;align-items:center;justify-content:center;background:#f8fafc;transition:border-color .2s;position:relative}.upload-dropzone:hover{border-color:#3b82f6}.upload-dropzone.has-image{border:1px solid #e2e8f0;background:#000}.upload-empty-placeholder{text-align:center;padding:24px}.upload-icon-circle{width:64px;height:64px;border-radius:50%;background:#e2e8f0;color:#2563eb;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}.upload-prompt{font-size:15px;font-weight:600;color:var(--text-main)}.upload-hint{font-size:12px;color:var(--text-muted);margin-top:4px;display:block}.preview-box{width:100%;height:320px;position:relative}.preview-image{width:100%;height:100%;object-fit:cover}.change-image-badge{position:absolute;bottom:12px;right:12px;background:#000000b3;color:#fff;border:none;padding:6px 12px;border-radius:20px;font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer}.filters-strip{margin:18px 0}.filters-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:8px}.filters-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.filters-scroll::-webkit-scrollbar{display:none}.filter-chip{background:#f1f5f9;border:1px solid #e2e8f0;padding:6px 14px;border-radius:999px;font-size:12px;color:var(--text-main);cursor:pointer;white-space:nowrap}.filter-chip.active{background:#0f172a;color:#fff;border-color:#0f172a}.form-group{margin:16px 0;display:flex;flex-direction:column}.form-group label{font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:6px}.form-group textarea{width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:12px;font-family:inherit;font-size:14px;resize:none;outline:none}.form-group textarea:focus{border-color:var(--primary)}.char-counter{font-size:11px;color:var(--text-muted);text-align:right;margin-top:4px}.primary-submit-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s}.primary-submit-btn:disabled{opacity:.5;cursor:not-allowed}.profile-view{padding:16px}.profile-card{background:#fff;border:1px solid var(--border-color);border-radius:18px;padding:18px;margin-bottom:20px}.profile-header-main{display:flex;align-items:center;gap:20px}.profile-avatar-big{width:72px;height:72px;border-radius:50%;object-fit:cover}.profile-avatar-big-fallback{width:72px;height:72px;border-radius:50%;background:var(--primary-gradient);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center}.profile-stats{flex:1;display:flex;justify-content:space-around;text-align:center}.stat-value{display:block;font-size:17px;font-weight:700;color:var(--text-main)}.stat-label{font-size:11px;color:var(--text-muted)}.profile-user-details{margin-top:14px}.profile-fullname{font-size:16px;font-weight:700}.profile-handle{font-size:13px;color:var(--primary);margin-bottom:6px}.profile-bio{font-size:13.5px;color:#334155;line-height:1.4}.tg-status-tag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:#475569;background:#f1f5f9;padding:4px 10px;border-radius:999px}.profile-gallery-header{margin-bottom:12px}.profile-gallery-header h3{font-size:16px;font-weight:700}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.grid-photo-card{position:relative;aspect-ratio:1 / 1;cursor:pointer;overflow:hidden;background:#000}.grid-photo-card img{width:100%;height:100%;object-fit:cover}.grid-overlay{position:absolute;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:12px;font-weight:600;opacity:0;transition:opacity .15s ease}.grid-photo-card:hover .grid-overlay{opacity:1}.empty-gallery{text-align:center;padding:40px 16px;color:var(--text-muted)}.btn-secondary{margin-top:12px;background:#f1f5f9;border:none;color:var(--text-main);padding:10px 18px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer}.modal-backdrop{position:fixed;inset:0;background:#00000080;z-index:60;display:flex;align-items:flex-end;backdrop-filter:blur(2px)}.comments-sheet{width:100%;max-width:480px;margin:0 auto;height:75vh;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .25s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.comments-sheet-header{padding:10px 16px;border-bottom:1px solid var(--border-color)}.sheet-notch{width:36px;height:4px;background:#cbd5e1;border-radius:2px;margin:0 auto 10px}.sheet-title-row{display:flex;align-items:center;justify-content:space-between}.sheet-title-row h3{font-size:16px;font-weight:700}.close-sheet-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px}.comments-scroll-area{flex:1;overflow-y:auto;padding:16px}.no-comments-block{text-align:center;color:var(--text-muted);padding-top:40px;font-size:14px}.comments-thread{display:flex;flex-direction:column;gap:14px}.comment-entry{display:flex;gap:10px}.comment-avatar img{width:34px;height:34px;border-radius:50%;object-fit:cover}.comment-avatar-fallback{width:34px;height:34px;border-radius:50%;background:#e2e8f0;color:#334155;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:13px}.comment-body{flex:1}.comment-bubble{background:#f8fafc;padding:8px 12px;border-radius:14px;display:inline-block;max-width:100%}.comment-user-name{font-size:12.5px;font-weight:700;color:var(--text-main);display:block;margin-bottom:2px}.comment-text{font-size:13.5px;color:#1e293b;word-break:break-word}.comment-time{font-size:11px;color:var(--text-muted);margin-left:6px;margin-top:2px;display:inline-block}.add-comment-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border-color);background:#fff}.add-comment-bar input{flex:1;border:1px solid #e2e8f0;border-radius:999px;padding:10px 16px;font-size:14px;outline:none}.add-comment-bar input:focus{border-color:var(--primary)}.send-comment-btn{width:40px;height:40px;border-radius:50%;background:var(--primary);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s}.send-comment-btn:disabled{opacity:.4;cursor:not-allowed}.toast-banner{position:fixed;top:70px;left:50%;transform:translate(-50%);background:#0f172a;color:#fff;padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 4px 14px #00000040;z-index:100;animation:fadeInOut 2.5s forwards}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-10px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}