:root{--gold: #C9A96E;--gold-light: #E8D5B0;--navy: #1B365D;--navy-light: #2A4A7F;--beige: #F5E6D3;--beige-light: #FAF6F1;--green: #6B8F71;--green-light: #8FB996;--white: #FFFFFF;--text-dark: #2C2C2C;--text-medium: #555555;--text-muted: #8A8A8A;--peach: #E8A87C;--rose: #D4A5A5;--shadow-sm: 0 1px 3px rgba(0,0,0,.08);--shadow-md: 0 4px 12px rgba(0,0,0,.1);--shadow-lg: 0 8px 24px rgba(0,0,0,.12);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Playfair Display", Georgia, serif;--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;font-family:var(--font-body);background:var(--beige-light);color:var(--text-dark);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}.app-container{height:100%;width:100%;max-width:430px;margin:0 auto;display:flex;flex-direction:column;background:var(--beige-light);position:relative;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--white);border-bottom:1px solid rgba(0,0,0,.06);z-index:10;flex-shrink:0}.app-header .logo{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}.app-header .logo-circle{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--peach));display:flex;align-items:center;justify-content:center;font-size:16px}.app-header-actions{display:flex;gap:12px;align-items:center}.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--beige);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .2s;color:var(--text-dark)}.icon-btn:active{transform:scale(.92);background:var(--gold-light)}.icon-btn.has-badge{position:relative}.icon-btn .badge-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#e74c3c;border:2px solid var(--white)}.content-area{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.content-area::-webkit-scrollbar{display:none}.bottom-nav{display:flex;align-items:center;justify-content:space-around;padding:8px 16px;padding-bottom:calc(8px + var(--safe-bottom));background:var(--white);border-top:1px solid rgba(0,0,0,.06);flex-shrink:0;z-index:10}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border:none;background:none;cursor:pointer;border-radius:var(--radius-md);transition:all .2s;min-width:56px}.nav-item .nav-icon{font-size:22px;transition:transform .2s}.nav-item .nav-label{font-size:11px;font-weight:500;color:var(--text-muted);transition:color .2s}.nav-item.active .nav-icon{transform:scale(1.1)}.nav-item.active .nav-label{color:var(--navy);font-weight:600}.nav-item.active{background:#1b365d0f}.post-card{background:var(--white);border-radius:var(--radius-lg);margin:12px 16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s}.post-card:active{transform:scale(.99)}.post-header{display:flex;align-items:center;gap:12px;padding:14px 16px}.post-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-light)}.post-author-info{flex:1}.post-author-name{font-weight:600;font-size:15px;color:var(--text-dark)}.post-meta{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:4px}.post-privacy{font-size:10px}.post-content{padding:0 16px 12px;font-size:15px;line-height:1.6;color:var(--text-medium)}.post-image{width:100%;height:280px;object-fit:cover;display:block}.post-actions{display:flex;align-items:center;padding:10px 16px;gap:4px;border-top:1px solid rgba(0,0,0,.04)}.post-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:none;background:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .2s}.post-action-btn:active{background:var(--beige);transform:scale(.95)}.post-action-btn.liked{color:#e74c3c}.post-action-btn.saved{color:var(--gold)}.post-action-btn .action-icon{font-size:18px}.stories-row{display:flex;gap:12px;padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}.stories-row::-webkit-scrollbar{display:none}.story-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:72px;cursor:pointer}.story-avatar-ring{width:64px;height:64px;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--gold),var(--peach),var(--green))}.story-avatar-ring.seen{background:var(--text-muted)}.story-avatar-inner{width:100%;height:100%;border-radius:50%;border:3px solid var(--white);overflow:hidden}.story-avatar-inner img{width:100%;height:100%;object-fit:cover}.story-name{font-size:11px;font-weight:500;color:var(--text-medium);text-align:center;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--navy);padding:16px 20px 8px}.section-subtitle{font-size:13px;color:var(--text-muted);padding:0 20px 12px}.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 16px}.community-card{background:var(--white);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:8px}.community-card:active{transform:scale(.97)}.community-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px}.community-name{font-weight:600;font-size:14px;color:var(--text-dark);line-height:1.3}.community-members{font-size:12px;color:var(--text-muted)}.community-join-btn{padding:6px 12px;border-radius:20px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:auto}.community-join-btn.joined{background:var(--green-light);color:var(--white)}.community-join-btn.not-joined{background:var(--beige);color:var(--navy)}.memory-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;margin:8px 16px;box-shadow:var(--shadow-sm)}.memory-image{width:100%;height:200px;object-fit:cover}.memory-content{padding:14px 16px}.memory-date{font-size:12px;color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.memory-title{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--navy);margin:4px 0}.memory-description{font-size:13px;color:var(--text-muted);line-height:1.5}.memory-type-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;margin-top:8px}.memory-type-badge.on-this-day{background:#fff3e0;color:#e65100}.memory-type-badge.highlight{background:#e8f5e9;color:#2e7d32}.memory-type-badge.scrapbook{background:#f3e5f5;color:#7b1fa2}.conversation-item{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--white);border-bottom:1px solid rgba(0,0,0,.04);cursor:pointer;transition:background .2s}.conversation-item:active{background:var(--beige)}.conversation-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}.conversation-avatar.family-ring{border:3px solid var(--gold)}.conversation-info{flex:1;min-width:0}.conversation-name{font-weight:600;font-size:15px;color:var(--text-dark);display:flex;align-items:center;gap:6px}.conversation-name .family-badge{font-size:10px;background:var(--gold-light);color:var(--navy);padding:1px 6px;border-radius:8px;font-weight:600}.conversation-preview{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-time{font-size:12px;color:var(--text-muted);flex-shrink:0}.unread-badge{width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--white);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.profile-header{background:linear-gradient(135deg,var(--navy),var(--navy-light));padding:32px 20px 48px;text-align:center;position:relative}.profile-avatar-large{width:96px;height:96px;border-radius:50%;border:4px solid var(--white);margin:0 auto 12px;box-shadow:var(--shadow-md)}.profile-name{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--white)}.profile-bio{font-size:14px;color:#fffc;margin-top:4px;line-height:1.5}.profile-location{font-size:13px;color:#fff9;margin-top:4px}.profile-stats{display:flex;justify-content:center;gap:32px;margin-top:20px}.profile-stat{text-align:center}.profile-stat-number{font-size:20px;font-weight:700;color:var(--white)}.profile-stat-label{font-size:12px;color:#fff9}.profile-body{padding:0 16px;margin-top:-24px}.profile-card{background:var(--white);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}.profile-card-title{font-weight:600;font-size:15px;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px}.hobby-tags{display:flex;flex-wrap:wrap;gap:8px}.hobby-tag{padding:6px 14px;border-radius:20px;background:var(--beige);font-size:13px;font-weight:500;color:var(--navy)}.badge-item{display:flex;align-items:center;gap:12px;padding:8px 0}.badge-icon{width:40px;height:40px;border-radius:50%;background:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:20px}.badge-info{flex:1}.badge-name{font-weight:600;font-size:14px;color:var(--text-dark)}.badge-desc{font-size:12px;color:var(--text-muted)}.family-member-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--white);border-radius:var(--radius-md);margin:6px 16px;box-shadow:var(--shadow-sm)}.family-avatar{width:50px;height:50px;border-radius:50%;border:3px solid var(--gold-light)}.family-name{font-weight:600;font-size:15px;color:var(--text-dark)}.family-relation{font-size:13px;color:var(--gold);font-weight:500}.family-action-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--beige);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;margin-left:auto}.event-card{background:var(--white);border-radius:var(--radius-lg);margin:8px 16px;padding:16px;box-shadow:var(--shadow-sm);display:flex;gap:14px}.event-icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--beige);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.event-info{flex:1}.event-title{font-weight:600;font-size:15px;color:var(--text-dark)}.event-detail{font-size:13px;color:var(--text-muted);margin-top:2px}.event-attendees{font-size:12px;color:var(--green);margin-top:4px;font-weight:500}.event-join-btn{padding:8px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;align-self:center;transition:all .2s}.event-join-btn.joined{background:var(--green-light);color:var(--white)}.event-join-btn.not-joined{background:var(--navy);color:var(--white)}.wellness-card{background:var(--white);border-radius:var(--radius-lg);margin:8px 16px;padding:16px;box-shadow:var(--shadow-sm)}.wellness-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.wellness-icon{width:44px;height:44px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:22px}.wellness-title{font-weight:600;font-size:15px;color:var(--text-dark)}.wellness-category{font-size:12px;color:var(--green);font-weight:500}.wellness-content{font-size:14px;color:var(--text-medium);line-height:1.6}.wellness-duration{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:12px;background:var(--beige);font-size:12px;font-weight:600;color:var(--navy)}.market-item{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.market-image{width:100%;height:160px;object-fit:cover}.market-info{padding:12px}.market-title{font-weight:600;font-size:14px;color:var(--text-dark)}.market-price{font-size:16px;font-weight:700;color:var(--green);margin-top:4px}.market-seller{font-size:12px;color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:4px}.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 16px}.onboarding-container{height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-light) 50%,var(--beige-light) 100%)}.onboarding-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center}.onboarding-logo{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--peach));display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:24px;box-shadow:0 8px 32px #c9a96e66}.onboarding-title{font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--white);margin-bottom:12px}.onboarding-subtitle{font-size:16px;color:#fffc;line-height:1.6;max-width:300px}.onboarding-bottom{padding:32px 32px calc(32px + var(--safe-bottom));display:flex;flex-direction:column;gap:12px}.btn-primary{padding:16px 32px;border-radius:28px;border:none;background:linear-gradient(135deg,var(--gold),var(--peach));color:var(--white);font-size:17px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px #c9a96e66}.btn-primary:active{transform:scale(.97)}.btn-secondary{padding:16px 32px;border-radius:28px;border:2px solid rgba(255,255,255,.3);background:transparent;color:var(--white);font-size:17px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:active{background:#ffffff1a}.search-bar{display:flex;align-items:center;gap:10px;margin:8px 16px 0;padding:12px 16px;background:var(--white);border-radius:28px;box-shadow:var(--shadow-sm)}.search-bar input{flex:1;border:none;outline:none;font-size:15px;color:var(--text-dark);background:transparent;font-family:var(--font-body)}.search-bar input::placeholder{color:var(--text-muted)}.search-icon{font-size:18px;color:var(--text-muted)}.quick-actions{display:flex;gap:12px;padding:16px;overflow-x:auto}.quick-actions::-webkit-scrollbar{display:none}.quick-action{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:80px;cursor:pointer}.quick-action-icon{width:56px;height:56px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:var(--shadow-sm);transition:transform .2s}.quick-action-icon:active{transform:scale(.9)}.quick-action-label{font-size:12px;font-weight:500;color:var(--text-medium);text-align:center}.settings-group{background:var(--white);border-radius:var(--radius-lg);margin:12px 16px;overflow:hidden;box-shadow:var(--shadow-sm)}.settings-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.04);cursor:pointer;transition:background .2s}.settings-item:last-child{border-bottom:none}.settings-item:active{background:var(--beige)}.settings-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px}.settings-label{flex:1;font-size:15px;font-weight:500;color:var(--text-dark)}.settings-value{font-size:13px;color:var(--text-muted)}.settings-arrow{font-size:16px;color:var(--text-muted)}.toggle{width:48px;height:28px;border-radius:14px;background:#ccc;position:relative;cursor:pointer;transition:background .3s;border:none;padding:0}.toggle.active{background:var(--green)}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--white);transition:transform .3s;box-shadow:0 1px 3px #0003}.toggle.active:after{transform:translate(20px)}.ai-chat-container{display:flex;flex-direction:column;height:100%}.ai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.ai-message{max-width:85%;padding:12px 16px;border-radius:var(--radius-lg);font-size:14px;line-height:1.6}.ai-message.assistant{background:var(--white);color:var(--text-dark);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}.ai-message.user{background:var(--navy);color:var(--white);align-self:flex-end;border-bottom-right-radius:4px}.ai-input-bar{display:flex;gap:10px;padding:12px 16px;padding-bottom:calc(12px + var(--safe-bottom));background:var(--white);border-top:1px solid rgba(0,0,0,.06)}.ai-input-bar input{flex:1;padding:12px 16px;border:1px solid rgba(0,0,0,.1);border-radius:24px;font-size:15px;font-family:var(--font-body);outline:none;background:var(--beige-light)}.ai-input-bar input:focus{border-color:var(--navy)}.ai-send-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--navy);color:var(--white);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}.video-call-screen{height:100%;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.video-call-avatar{width:120px;height:120px;border-radius:50%;border:4px solid var(--white);margin-bottom:16px}.video-call-name{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--white)}.video-call-status{font-size:15px;color:#ffffffb3;margin-top:4px}.video-call-controls{position:absolute;bottom:40px;display:flex;gap:20px}.video-control-btn{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:transform .2s}.video-control-btn:active{transform:scale(.9)}.video-control-btn.end-call{background:#e74c3c;color:#fff}.video-control-btn.mute{background:#fff3;color:#fff}.category-tabs{display:flex;gap:8px;padding:12px 16px;overflow-x:auto}.category-tabs::-webkit-scrollbar{display:none}.category-tab{padding:8px 18px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s}.category-tab.active{background:var(--navy);color:var(--white)}.category-tab:not(.active){background:var(--white);color:var(--text-medium)}.notification-banner{display:flex;align-items:center;gap:12px;margin:8px 16px;padding:14px 16px;background:linear-gradient(135deg,var(--gold-light),var(--beige));border-radius:var(--radius-md);border-left:4px solid var(--gold)}.notification-icon{font-size:24px}.notification-text{flex:1;font-size:13px;color:var(--text-dark);line-height:1.4}.notification-text strong{font-weight:600}.content-area{scrollbar-width:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease forwards}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.slide-up{animation:slideUp .3s ease forwards}.large-text .post-content,.large-text .post-author-name{font-size:18px}.large-text .community-name{font-size:16px}.large-text .conversation-name{font-size:18px}.large-text .conversation-preview{font-size:16px}.large-text .memory-title{font-size:20px}.large-text .memory-description{font-size:16px}.large-text .section-title{font-size:24px}.dark-mode{--beige-light: #1a1a2e;--beige: #252540;--white: #16213e;--text-dark: #e8e8e8;--text-medium: #b8b8b8;--text-muted: #7a7a8e}.dark-mode .app-header,.dark-mode .bottom-nav{background:var(--white);border-color:#ffffff0f}.dark-mode .post-card,.dark-mode .community-card{background:var(--white)}.dark-mode .conversation-item{background:var(--white);border-color:#ffffff0a}.dark-mode .profile-card,.dark-mode .settings-group,.dark-mode .event-card,.dark-mode .wellness-card,.dark-mode .memory-card,.dark-mode .search-bar{background:var(--white)}.dark-mode .ai-message.assistant{background:var(--white);color:var(--text-dark)}.dark-mode .notification-banner{background:linear-gradient(135deg,#2a2a4a,#1a1a2e)}.dark-mode .hobby-tag{background:var(--beige);color:var(--text-dark)}.dark-mode .category-tab:not(.active){background:var(--white);color:var(--text-medium)}.dark-mode .icon-btn{background:var(--beige);color:var(--text-dark)}.scroll-padding{padding-bottom:20px}.back-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:none;background:none;font-size:15px;font-weight:500;color:var(--navy);cursor:pointer}.back-btn:active{opacity:.7}.sub-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--white);border-bottom:1px solid rgba(0,0,0,.06)}.sub-header-title{flex:1;font-size:17px;font-weight:600;color:var(--text-dark)}