*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-background:#fff;--color-text-primary:#000;--color-text-secondary:#666;--color-border:#000;--color-accent:gold;--color-button-bg:#fff;--color-button-hover:#f5f5f5;--color-error:#dc2626;--color-success:#16a34a;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell",sans-serif;--font-size-title:48px;--font-size-heading:32px;--font-size-body:16px;--font-size-small:14px;--font-size-button:18px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:600;--shadow-none:none;--transition-fast:.15s ease;--transition-normal:.25s ease}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text-primary);background-color:var(--color-background);min-height:100vh;margin:0;line-height:1.5}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-regular);line-height:1.2}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.5}img{max-width:100%;height:auto;display:block}ul,ol{list-style:none}input,textarea{font-family:inherit;font-size:inherit}:focus-visible{outline:2px solid var(--color-border);outline-offset:2px}#root{flex-direction:column;min-height:100vh;display:flex}.button{justify-content:center;align-items:center;gap:var(--spacing-sm);border:2px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-button-bg);color:var(--color-text-primary);font-size:var(--font-size-button);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color var(--transition-fast);min-height:44px;padding:12px 24px;display:inline-flex}.button:hover:not(:disabled){background-color:var(--color-button-hover)}.button:active:not(:disabled){background-color:#e5e5e5}.button:disabled{opacity:.5;cursor:not-allowed}.button--secondary{background-color:#0000}.button--danger{color:var(--color-error);border-color:var(--color-error)}.button--danger:hover:not(:disabled){background-color:#fee2e2}.spinner{justify-content:center;align-items:center;display:inline-flex}.spinner--small{width:20px;height:20px}.spinner--medium{width:40px;height:40px}.spinner--large{width:60px;height:60px}.spinner-circle{border:2px solid var(--color-button-hover);border-top-color:var(--color-border);border-radius:50%;width:100%;height:100%;animation:.8s linear infinite spinner-rotate}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.welcome-screen{min-height:100vh;padding:var(--spacing-lg);background-color:var(--color-background);justify-content:center;align-items:center;display:flex}.welcome-container{align-items:center;gap:var(--spacing-xl);width:100%;max-width:500px;padding:var(--spacing-2xl);border:2px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;display:flex}.welcome-title{font-size:var(--font-size-title);font-weight:var(--font-weight-regular);text-align:center;margin:0}.welcome-error{padding:var(--spacing-md);color:var(--color-error);border-radius:var(--radius-sm);text-align:center;background-color:#fee2e2;width:100%}.welcome-button{min-width:250px}.google-icon{color:#fff;width:24px;height:24px;font-weight:var(--font-weight-bold);background:linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335);border-radius:4px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}@media (max-width:768px){.welcome-title{font-size:32px}.welcome-container{padding:var(--spacing-xl)}}.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,#f5f5f5 0%,#e5e5e5 50%,#f5f5f5 100%) 0 0/200% 100%;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton--circular{border-radius:50%}.skeleton--text{border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-post-card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);gap:var(--spacing-md);flex-direction:column;display:flex}.skeleton-post-header{align-items:center;gap:var(--spacing-sm);display:flex}.skeleton-post-header-text{gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.skeleton-post-media{margin:var(--spacing-sm)0}.skeleton-post-actions{gap:var(--spacing-md);display:flex}.card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);box-shadow:var(--shadow-none)}.card[role=button]{cursor:pointer;transition:background-color var(--transition-fast)}.card[role=button]:hover{background-color:var(--color-button-hover)}.post-card{gap:var(--spacing-md);flex-direction:column;animation:.3s fadeIn;display:flex}.post-card.highlight{animation:2s highlight}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes highlight{0%,to{box-shadow:none}50%{box-shadow:0 0 20px #ffd70080}}.post-header{justify-content:space-between;align-items:center;display:flex}.post-author{align-items:center;gap:var(--spacing-sm);cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;padding:0;display:flex}.post-author:hover{opacity:.7}.post-author-pic{object-fit:cover;border:1px solid var(--color-border);border-radius:50%;width:40px;height:40px}.post-author-info{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.post-author-name{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.post-timestamp{font-size:var(--font-size-small);color:var(--color-text-secondary)}.post-description{font-size:var(--font-size-body);color:var(--color-text-primary);word-wrap:break-word;margin:0;line-height:1.5}.post-media-container{border-radius:var(--radius-sm);background-color:#f5f5f5;width:100%;position:relative;overflow:hidden}.post-media{cursor:pointer;-webkit-user-select:none;user-select:none;width:100%}.post-media-image{object-fit:cover;width:100%;height:auto;max-height:500px;display:block}.post-media-video-wrapper{width:100%;position:relative}.post-media-video{width:100%;height:auto;max-height:500px;display:block}.post-video-duration{bottom:var(--spacing-sm);right:var(--spacing-sm);color:#fff;font-size:var(--font-size-small);background-color:#000000b3;border-radius:4px;padding:4px 8px;position:absolute}.post-media-indicators{bottom:var(--spacing-sm);gap:var(--spacing-xs);z-index:10;display:flex;position:absolute;left:50%;transform:translate(-50%)}.media-indicator{cursor:pointer;width:8px;height:8px;transition:background-color var(--transition-fast);background-color:#ffffff80;border:none;border-radius:50%;padding:0}.media-indicator.active{background-color:#fff}.media-nav{border:1px solid var(--color-border);cursor:pointer;width:40px;height:40px;transition:all var(--transition-fast);z-index:10;background-color:#ffffffe6;border-radius:50%;justify-content:center;align-items:center;font-size:24px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.media-nav:hover{background-color:#fff;transform:translateY(-50%)scale(1.1)}.media-nav-prev{left:var(--spacing-sm)}.media-nav-next{right:var(--spacing-sm)}.post-actions{gap:var(--spacing-md);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border);display:flex}.post-action-button{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs)var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background:0 0;min-height:36px;display:flex}.post-action-button:hover{background-color:var(--color-button-hover);transform:scale(1.05)}.action-icon{font-size:18px;line-height:1}.action-text{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}@media (max-width:768px){.post-media-image,.post-media-video{max-height:400px}.media-nav{width:32px;height:32px;font-size:20px}}.timeline-page{background-color:var(--color-background);flex-direction:column;min-height:100vh;display:flex}.timeline-header{z-index:100;padding:var(--spacing-md)var(--spacing-lg);background-color:var(--color-background);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.timeline-logo{font-size:var(--font-size-heading);font-weight:var(--font-weight-regular);margin:0}.timeline-profile-button{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs)var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-background);cursor:pointer;transition:background-color var(--transition-fast);min-height:44px;display:flex}.timeline-profile-button:hover{background-color:var(--color-button-hover)}.timeline-profile-pic{object-fit:cover;border-radius:50%;width:32px;height:32px}.timeline-profile-name{font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}.timeline-refresh-indicator{padding:var(--spacing-sm);text-align:center;background-color:var(--color-button-hover);font-size:var(--font-size-small)}.timeline-feed{width:100%;max-width:600px;padding:var(--spacing-lg);gap:var(--spacing-lg);flex-direction:column;flex:1;margin:0 auto;display:flex}.timeline-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.timeline-upload-button{bottom:var(--spacing-lg);right:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)var(--spacing-lg);border:2px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-background);cursor:pointer;transition:all var(--transition-fast);z-index:50;min-height:56px;display:flex;position:fixed;box-shadow:0 4px 12px #0000001a}.timeline-upload-button:hover{background-color:var(--color-border);color:var(--color-background);transform:scale(1.05)}.upload-icon{font-size:24px;font-weight:var(--font-weight-bold);line-height:1}.upload-text{font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}@media (max-width:768px){.timeline-logo{font-size:24px}.timeline-profile-name{display:none}.timeline-feed{padding:var(--spacing-md)}.upload-text{display:none}.timeline-upload-button{padding:var(--spacing-md);border-radius:50%;justify-content:center;width:56px;height:56px}}.storage-indicator{border:1px solid var(--color-border,#e0e0e0);background-color:var(--color-bg-secondary,#f9f9f9);border-radius:8px;flex-direction:column;gap:12px;margin-top:20px;padding:16px;display:flex}.storage-header{justify-content:space-between;align-items:center;display:flex}.storage-label{color:var(--color-text,#333);font-size:14px;font-weight:600}.storage-text{color:var(--color-text-secondary,#666);font-size:13px;font-weight:500}.storage-bar{background-color:#e0e0e0;border-radius:4px;width:100%;height:8px;position:relative;overflow:hidden}.storage-fill{background-color:#4caf50;height:100%;transition:width .3s}.storage-bar.storage-medium .storage-fill{background-color:#ff9800}.storage-bar.storage-high .storage-fill{background-color:#f44336}.storage-remaining{color:var(--color-text-secondary,#999);margin-top:4px;font-size:12px}@media (max-width:768px){.storage-indicator{gap:8px;padding:12px}.storage-label{font-size:13px}.storage-text{font-size:12px}}.profile-page{max-width:800px;min-height:100vh;padding:var(--spacing-lg);gap:var(--spacing-xl);flex-direction:column;margin:0 auto;display:flex}.profile-back-button{padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-background);font-size:var(--font-size-body);cursor:pointer;transition:background-color var(--transition-fast);align-self:flex-start}.profile-back-button:hover{background-color:var(--color-button-hover)}.profile-header{gap:var(--spacing-lg);flex-direction:column;display:flex}.profile-header-content{gap:var(--spacing-lg);align-items:flex-start;display:flex}.profile-picture{object-fit:cover;border:2px solid var(--color-border);border-radius:50%;flex-shrink:0;width:100px;height:100px}.profile-info{gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.profile-name{font-size:var(--font-size-heading);font-weight:var(--font-weight-medium);margin:0}.profile-email{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0}.profile-join-date{font-size:var(--font-size-small);color:var(--color-text-secondary);margin:0}.profile-stats{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);margin:0}.profile-signout{align-self:flex-start}.profile-posts-section{gap:var(--spacing-lg);flex-direction:column;display:flex}.profile-section-title{font-size:var(--font-size-heading);font-weight:var(--font-weight-medium);margin:0}.profile-loading{padding:var(--spacing-2xl);justify-content:center;display:flex}.profile-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.profile-posts-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr);display:grid}.profile-post-item{aspect-ratio:1;border-radius:var(--radius-sm);position:relative;overflow:hidden}.profile-post-thumbnail{cursor:pointer;width:100%;height:100%;position:relative;overflow:hidden}.profile-post-image{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal)}.profile-post-thumbnail:hover .profile-post-image{transform:scale(1.05)}.profile-post-play-icon{color:#fff;text-shadow:0 2px 4px #00000080;pointer-events:none;font-size:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.profile-post-overlay{padding:var(--spacing-sm);opacity:0;transition:opacity var(--transition-fast);background:linear-gradient(#0000,#000000b3);position:absolute;bottom:0;left:0;right:0}.profile-post-thumbnail:hover .profile-post-overlay{opacity:1}.profile-post-likes{color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium)}.profile-post-menu{top:var(--spacing-xs);right:var(--spacing-xs);border:1px solid var(--color-border);cursor:pointer;opacity:0;width:32px;height:32px;transition:opacity var(--transition-fast);z-index:10;background-color:#ffffffe6;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute}.profile-post-item:hover .profile-post-menu{opacity:1}.profile-post-menu:hover{background-color:#fff}.profile-dialog-overlay{z-index:1000;padding:var(--spacing-lg);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.profile-dialog{gap:var(--spacing-lg);flex-direction:column;width:100%;max-width:400px;display:flex}.profile-dialog-title{font-size:var(--font-size-heading);font-weight:var(--font-weight-medium);margin:0}.profile-dialog-message{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0}.profile-dialog-actions{gap:var(--spacing-md);justify-content:flex-end;display:flex}.profile-error{text-align:center;padding:var(--spacing-2xl);color:var(--color-error)}@media (min-width:768px){.profile-posts-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.profile-posts-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:768px){.profile-page{padding:var(--spacing-md)}.profile-header-content{text-align:center;flex-direction:column;align-items:center}.profile-picture{width:80px;height:80px}.profile-name{font-size:24px}.profile-info{align-items:center}}.upload-flow{min-height:100vh;padding:var(--spacing-lg);background-color:var(--color-background);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.upload-return-button{top:var(--spacing-lg);left:var(--spacing-lg);padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-background);font-size:var(--font-size-body);cursor:pointer;transition:background-color var(--transition-fast);z-index:10;position:absolute}.upload-return-button:hover{background-color:var(--color-button-hover)}.upload-container{gap:var(--spacing-lg);width:100%;max-width:600px;padding:var(--spacing-xl);border:2px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-background);flex-direction:column;display:flex}.upload-header{justify-content:space-between;align-items:center;display:flex}.upload-title{font-size:var(--font-size-heading);font-weight:var(--font-weight-regular);margin:0}.upload-empty{align-items:center;gap:var(--spacing-lg);padding:var(--spacing-2xl);text-align:center;flex-direction:column;display:flex}.upload-empty-text{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0}.upload-media-preview{gap:var(--spacing-md);padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex;overflow-x:auto}.upload-media-item{border:1px solid var(--color-border);border-radius:var(--radius-sm);flex-shrink:0;width:150px;height:150px;position:relative;overflow:hidden}.upload-media-thumbnail{object-fit:cover;width:100%;height:100%}.upload-media-play-icon{color:#fff;text-shadow:0 2px 4px #00000080;font-size:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.upload-media-remove{top:var(--spacing-xs);right:var(--spacing-xs);color:#fff;cursor:pointer;width:24px;height:24px;transition:background-color var(--transition-fast);background-color:#000000b3;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;line-height:1;display:flex;position:absolute}.upload-media-remove:hover{background-color:#000000e6}.upload-media-size{bottom:var(--spacing-xs);left:var(--spacing-xs);color:#fff;background-color:#000000b3;border-radius:4px;padding:2px 6px;font-size:12px;position:absolute}.upload-add-more{justify-content:center;align-items:center;gap:var(--spacing-xs);border:2px dashed var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-button-hover);cursor:pointer;width:150px;height:150px;transition:all var(--transition-fast);flex-direction:column;flex-shrink:0;display:flex}.upload-add-more:hover{border-color:var(--color-text-primary);background-color:#e5e5e5}.upload-add-icon{font-size:32px;font-weight:var(--font-weight-bold)}.upload-description{gap:var(--spacing-sm);flex-direction:column;display:flex}.upload-label{font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}.upload-textarea{width:100%;min-height:100px;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-body);resize:vertical;transition:border-width var(--transition-fast)}.upload-textarea:focus{border-width:2px;outline:none}.upload-char-count{font-size:var(--font-size-small);color:var(--color-text-secondary);align-self:flex-end}.upload-progress{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--color-button-hover);border-radius:var(--radius-sm);font-size:var(--font-size-small);display:flex}.upload-error{padding:var(--spacing-md);color:var(--color-error);border-radius:var(--radius-sm);font-size:var(--font-size-small);background-color:#fee2e2;justify-content:space-between;align-items:center;display:flex}.upload-publish-button{width:100%;padding:var(--spacing-md);font-size:var(--font-size-button)}@media (max-width:768px){.upload-flow{padding:0}.upload-container{max-width:100%;min-height:100vh;padding:var(--spacing-lg);border:none;border-radius:0}.upload-title{font-size:24px}.upload-media-item,.upload-add-more{width:120px;height:120px}}.fullscreen-gallery{z-index:2000;background-color:#000000f2;flex-direction:column;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.gallery-close{top:var(--spacing-lg);right:var(--spacing-lg);cursor:pointer;z-index:10;width:48px;height:48px;transition:all var(--transition-fast);background-color:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:32px;line-height:1;display:flex;position:absolute}.gallery-close:hover{background-color:#fff;transform:scale(1.1)}.gallery-media-container{padding:var(--spacing-2xl);flex:1;justify-content:center;align-items:center;display:flex;position:relative}.gallery-media-image,.gallery-media-video{object-fit:contain;max-width:100%;max-height:100%}.gallery-nav{cursor:pointer;width:56px;height:56px;transition:all var(--transition-fast);z-index:10;background-color:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:32px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.gallery-nav:hover{background-color:#fff;transform:translateY(-50%)scale(1.1)}.gallery-nav-prev{left:var(--spacing-lg)}.gallery-nav-next{right:var(--spacing-lg)}.gallery-indicators{top:var(--spacing-lg);padding:var(--spacing-sm)var(--spacing-md);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);background-color:#000000b3;position:absolute;left:50%;transform:translate(-50%)}.gallery-info{padding:var(--spacing-lg);gap:var(--spacing-md);background-color:#000000e6;border-top:1px solid #ffffff1a;flex-direction:column;display:flex}.gallery-author{align-items:center;gap:var(--spacing-sm);display:flex}.gallery-author-pic{object-fit:cover;border:1px solid #fff3;border-radius:50%;width:40px;height:40px}.gallery-author-details{flex-direction:column;gap:2px;display:flex}.gallery-author-name{color:#fff;font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}.gallery-timestamp{color:#ffffffb3;font-size:var(--font-size-small)}.gallery-description{color:#fff;font-size:var(--font-size-body);margin:0;line-height:1.5}.gallery-actions{gap:var(--spacing-md);display:flex}.gallery-action-button{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-sm);color:#fff;font-size:var(--font-size-small);cursor:pointer;transition:all var(--transition-fast);background-color:#ffffff1a;border:1px solid #fff3;display:flex}.gallery-action-button:hover{background-color:#fff3;transform:scale(1.05)}.action-icon{font-size:18px}.gallery-loading,.gallery-error{justify-content:center;align-items:center;gap:var(--spacing-lg);color:#fff;flex-direction:column;height:100%;display:flex}.gallery-close-button{padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-sm);color:#fff;font-size:var(--font-size-body);cursor:pointer;transition:all var(--transition-fast);background-color:#0000;border:2px solid #fff}.gallery-close-button:hover{color:#000;background-color:#fff}@media (max-width:768px){.gallery-media-container{padding:var(--spacing-lg)}.gallery-close{top:var(--spacing-md);right:var(--spacing-md);width:40px;height:40px;font-size:28px}.gallery-nav{width:44px;height:44px;font-size:28px}.gallery-nav-prev{left:var(--spacing-sm)}.gallery-nav-next{right:var(--spacing-sm)}.gallery-info{padding:var(--spacing-md)}.gallery-actions{flex-wrap:wrap}}.app{min-height:100vh}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}html{scroll-behavior:smooth}:focus-visible{outline:2px solid var(--color-border);outline-offset:2px;border-radius:4px}