:root{--bg: #FAF8F5;--surface: #FFFFFF;--surface-soft: #F5F1EB;--primary: #5C4B8A;--primary-dark: #3B2E58;--accent: #D9A441;--text: #2B2730;--text-muted: #756E7E;--border: #E7E2DA;--success: #5C8A72;--danger: #B5654B;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--focus-ring: 0 0 0 3px rgba(92, 75, 138, .2)}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#ede8e1;color:var(--text)}.app-shell{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 0 1px #2b273008;display:flex;flex-direction:column}.page{flex:1;padding:20px 20px 90px}h1,h2,h3{color:var(--primary-dark);margin-top:0}.subtitle{color:var(--text-muted);font-size:14px;margin-top:-8px}input,textarea,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:15px;margin-bottom:12px;background:var(--surface);font-family:inherit}button{cursor:pointer;font-family:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn-primary{background:var(--primary);color:#fff;border:none;padding:13px 20px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;width:100%}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary);padding:12px 20px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;width:100%}.btn-text{background:none;border:none;color:var(--primary);font-size:14px;padding:8px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-bottom:14px}.row{display:flex;align-items:center;gap:12px}.row-between{display:flex;align-items:center;justify-content:space-between}.col{display:flex;flex-direction:column}.gap-8{gap:8px}.gap-12{gap:12px}.tag{display:inline-block;background:#efe9f5;color:var(--primary);padding:4px 10px;border-radius:100px;font-size:12px;margin-right:6px;margin-bottom:6px}.badge{background:#f3eddd;color:var(--accent);padding:4px 10px;border-radius:100px;font-size:12px;font-weight:600}.likert-row{display:flex;justify-content:space-between;margin:10px 0}.likert-option{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:600}.likert-option.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px #2b27300f}.nav-item{background:none;border:none;color:var(--text-muted);min-width:56px;min-height:44px;padding:4px 8px;border-radius:var(--radius-sm);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px}.nav-item:hover,.nav-item.active{color:var(--primary);background:#f2edf6}.nav-item.active{font-weight:700}.nav-icon{width:21px;height:21px;fill:currentColor}.error-text{color:var(--danger);font-size:13px;margin-bottom:8px}.empty-state{display:flex;flex-direction:column;gap:6px;align-items:center;padding:36px 20px;border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--text-muted);text-align:center}.empty-state strong{color:var(--primary-dark)}.story-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.story-tile{flex:0 0 84px;aspect-ratio:1;border:1px solid var(--border);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}.story-tile strong,.story-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}.story-avatar{object-fit:cover}.story-add{color:var(--primary);font-size:24px}.story-add span,.story-tile span{font-size:12px}.story-composer-heading{margin-bottom:8px}.story-composer-heading h3{margin:0}.character-count{color:var(--text-muted);font-size:12px}.character-count-error{color:var(--danger);font-weight:600}.story-preview{margin:0 0 12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}.story-preview-label{display:block;margin-bottom:6px;color:var(--text-muted);font-size:11px;font-weight:700;text-transform:uppercase}.story-preview p{margin:0;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.story-composer-actions button{flex:1}.post-comments{border-top:1px solid var(--border);margin-top:12px;padding-top:8px}.post-comments p{margin:4px 0;font-size:13px}.post-comment{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.post-comment>span{min-width:0;overflow-wrap:anywhere}.post-comment-delete{flex:0 0 auto;padding:0 4px;border:0;background:none;color:var(--text-muted);font-size:17px;line-height:1}.post-comment-delete:hover{color:var(--danger)}.post-comments form{display:flex;gap:8px;margin-top:8px}.post-comments input{min-width:0}.composer-card{background:var(--surface-soft);border-color:#e4dccf}.post-card{padding:18px}.post-card>p{line-height:1.55}.comment-form button{width:auto;flex:0 0 auto}.story-backdrop{padding:16px}.story-viewer{position:relative;width:min(100%,520px);min-height:min(680px,calc(100vh - 32px));padding:22px 64px 24px;border-radius:var(--radius-lg);background:linear-gradient(145deg,#fff,#f5f1eb);display:flex;flex-direction:column;justify-content:space-between;text-align:center;overflow:hidden;box-shadow:0 20px 60px #2b273038}.story-progress{display:flex;gap:4px;width:100%}.story-progress-segment{height:3px;flex:1;border-radius:3px;background:var(--border)}.story-progress-segment.active{background:var(--primary)}.story-viewer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}.story-author{min-width:0}.story-viewer-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;object-fit:cover}.story-viewer-avatar.profile-avatar-placeholder{font-size:18px}.story-meta{color:var(--text-muted);font-size:12px}.story-close{width:40px;height:40px;flex:0 0 40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--primary);font-size:28px;line-height:1}.story-close:hover{background:#5c4b8a14}.story-content{display:grid;place-items:center;min-height:220px;padding:30px 0}.story-content p{max-width:38ch;margin:0;color:var(--text);font-size:clamp(20px,4vw,30px);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.story-nav{position:absolute;top:50%;z-index:1;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:50%;background:#ffffffdb;color:var(--primary);font-size:34px;line-height:30px;transform:translateY(-50%)}.story-nav:hover:not(:disabled){background:var(--surface);border-color:var(--primary)}.story-nav:disabled{opacity:.35;cursor:default}.story-nav-previous{left:12px}.story-nav-next{right:12px}.story-viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}.story-delete-button{width:auto;padding:8px 0;color:var(--danger);font-size:12px}.reply-composer{position:fixed;left:50%;bottom:65px;z-index:4;display:flex;align-items:center;gap:10px;width:min(100%,480px);min-height:52px;padding:7px 20px 7px 12px;border-top:1px solid var(--border);border-left:3px solid var(--primary);background:var(--surface);box-shadow:0 -4px 12px #2b27300f;font-size:13px;transform:translate(-50%)}.reply-composer-copy{min-width:0;flex:1}.reply-composer-label{display:block;margin-bottom:2px;color:var(--primary);font-size:11px;font-weight:700}.reply-target-button,.message-reply-preview{display:block;border:0;background:none;color:inherit;cursor:pointer;text-align:left}.reply-target-button{width:100%;padding:0;min-width:0;overflow:hidden;color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap}.message-reply-preview{width:100%;overflow:hidden;border-left:2px solid currentColor;opacity:.7;padding:0 0 5px 8px;margin-bottom:7px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.message-reply-preview:hover,.reply-target-button:hover{opacity:1}.message-highlighted{animation:message-highlight 1.4s ease-out}@keyframes message-highlight{0%,to{background:var(--surface)}20%,70%{background:color-mix(in srgb,var(--primary) 18%,var(--surface))}}.message-send-error{margin:6px 12px 0}.reply-cancel-button{flex:0 0 auto;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--border);color:var(--text-muted);font-size:18px;line-height:1}.message-reply-button{display:block;max-height:0;margin:0 0 0 auto;overflow:hidden;padding:0;border:0;background:none;color:inherit;opacity:.65;font-size:11px;cursor:pointer;transition:max-height .15s ease,margin-top .15s ease}.message:hover .message-reply-button,.message:focus-within .message-reply-button{max-height:18px;margin-top:6px}.profile-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0}.profile-thumb.profile-avatar-placeholder{border-radius:50%;font-size:20px}.profile-thumb-large{width:56px;height:56px}.profile-word-count{margin:-6px 0 12px;color:var(--text-muted);font-size:12px}.profile-word-count-complete{color:var(--success)}.profile-username-status{min-height:18px;margin:-6px 0 12px;color:var(--danger);font-size:12px}.profile-username-available{color:var(--success)}.discover-card{padding:14px}.discover-card+.discover-card{margin-top:10px}.discover-tags{margin-top:12px}.discover-tags h3,.discover-profile-section h3{margin:0 0 8px;color:var(--text-muted);font-size:15px;font-weight:600}.discover-profile-section{margin-top:18px}.discover-completion-reminder{margin-bottom:24px}.discover-action{margin-top:12px}.discover-profile-navigation{display:flex;gap:12px;margin-top:2px}.discover-profile-navigation button{flex:1}.discover-pager{display:flex;justify-content:center;gap:8px;margin-top:14px}.discover-pager-item{width:32px;height:6px;padding:0;border:0;border-radius:3px;background:var(--border)}.discover-pager-item.active{background:var(--primary)}.invite-card{padding:14px}.invite-search-card h3{margin-bottom:10px}.invite-search-result{padding:10px 0;border-top:1px solid var(--border)}.discover-profile-header{text-align:center;margin:18px 0 28px}.discover-profile-header .profile-avatar{margin:0 auto 12px}.discover-profile-header h2{margin-bottom:8px}.discover-profile-header h2{font-size:32px}.profile-detail-card{margin-bottom:16px}.profile-detail-card h3{color:var(--text-muted);font-size:15px;font-weight:600;margin-bottom:10px}.profile-identity-section{margin:0 0 16px}.profile-identity-section h3{margin-bottom:8px}.profile-identity-section h3{color:var(--text-muted);font-size:15px;font-weight:600}.profile-identity-section .identity-line{font-size:16px;margin-bottom:8px}.profile-tags-card{min-height:64px}.profile-invite-button{margin-top:4px;margin-bottom:36px}.profile-avatar-picker{position:relative;display:block;cursor:pointer}.profile-avatar-picker input{display:none}.profile-avatar-picker:hover .profile-avatar{opacity:.8}.privacy-note{color:var(--text-muted);font-size:13px;margin:-10px 0 18px}.profile-setup-avatar{margin:18px 0 22px}.profile-view-header{align-items:center;margin-bottom:24px}.profile-edit-button{width:auto;padding:9px 14px}.profile-editor-topbar{position:fixed;top:0;left:50%;z-index:5;display:flex;align-items:center;justify-content:space-between;width:min(100%,480px);min-height:56px;padding:8px 20px;background:var(--bg);border-bottom:1px solid var(--border);transform:translate(-50%)}.profile-editor-topbar .btn-text{padding-left:0}.profile-editor-save{border:0;background:none;color:var(--primary);font:inherit;font-weight:700;cursor:pointer}.profile-editor-save:disabled{opacity:.5;cursor:not-allowed}.profile-editor-heading{margin-top:58px}.profile-view-identity{text-align:center;margin-bottom:28px}.profile-view-identity .profile-avatar{margin:0 auto 12px}.profile-view-identity h3{margin-bottom:6px}.profile-view-identity p{margin:0;color:var(--text-muted)}.profile-view-identity>p:last-child{max-width:440px;margin:10px auto 0;line-height:1.5}.identity-line{color:var(--text);font-size:14px;margin:0 0 4px}.profile-view-identity .identity-line{color:var(--text)}.profile-showcase-section{padding:16px;border:1px solid var(--border);border-radius:12px;background:#ffffff73}.profile-showcase-section h3{margin-bottom:6px}.profile-showcase-section .identity-line{margin-bottom:10px}.portfolio-photo-strip{display:flex;width:fit-content;max-width:100%;gap:8px;overflow-x:auto;padding:4px 0 8px}.portfolio-photo-item{position:relative;flex:0 0 auto}.portfolio-photo-button{display:block;padding:0;border:0;background:none}.portfolio-photo-thumbnail{width:70px;height:70px;object-fit:cover;border-radius:10px;display:block}.profile-showcase-section .portfolio-photo-thumbnail{width:92px;height:92px}.portfolio-editor-section .portfolio-photo-thumbnail{width:60px;height:60px}.portfolio-photo-remove{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;border:1px solid var(--surface);border-radius:50%;background:var(--danger);color:#fff;line-height:18px}.portfolio-editor-section{margin:-4px 0 12px}.portfolio-warning{color:var(--text-muted);font-size:12px;line-height:1.4;margin:0 0 8px}.portfolio-upload{display:inline-block;width:auto;padding:9px 14px}.portfolio-upload input{display:none}.portfolio-count{color:var(--text-muted);font-size:12px;margin-left:8px}.portfolio-limit{color:var(--text-muted);font-size:12px;margin:0 0 8px}.portfolio-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#2b2730cc}.portfolio-lightbox img{max-width:min(90vw,600px);max-height:85vh;object-fit:contain;border-radius:10px}.portfolio-lightbox-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface);color:var(--text);font-size:20px}.profile-view-section{margin-bottom:24px}.profile-view-section>h3{font-size:18px;letter-spacing:0}.profile-view-section:not(.profile-showcase-section){padding-bottom:4px}.profile-view-section h3{margin-bottom:10px}.profile-question{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.profile-question:last-child{border-bottom:none}.profile-question>div{min-width:0}.profile-question strong{display:block;line-height:1.4}.profile-question>.badge{flex-shrink:0}.profile-question-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.profile-post{margin-bottom:10px}.profile-post p{margin:0}.profile-avatar-editor{display:flex;align-items:center;gap:16px;margin:18px 0 22px}.profile-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent)}.profile-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-size:38px;font-weight:700}.response-action{width:auto;padding:9px 14px}.choice-option{display:block;padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px}.choice-option input{width:auto;margin:0 8px 0 0}.friend-profile-link{cursor:pointer}.remove-friend-button{color:var(--danger);font-size:26px;line-height:1;padding:4px 8px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;background:#2b27306b}.confirmation-modal{width:min(100%,400px);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 12px 32px #2b273033}.confirmation-modal h3{margin-bottom:8px}.confirmation-modal p{margin:0 0 20px;color:var(--text-muted)}.confirmation-actions{align-items:stretch}.confirmation-actions button{flex:1}.profile-image{width:100%;max-height:280px;object-fit:cover;border-radius:10px;margin:12px 0}.chat-friend{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px}.chat-friend:hover{border-color:var(--primary)}.chat-friend-info{flex:1;gap:4px}.chat-friend-info span{color:var(--text-muted);font-size:13px}.chat-arrow{color:var(--primary);font-size:26px;line-height:1}.chat-header{margin-top:12px}.chat-header-identity{min-width:0}.chat-header-identity h2{margin-bottom:8px}.chat-header-avatar{width:48px;height:48px;flex:0 0 48px;border-radius:50%;object-fit:cover}.chat-header-avatar.profile-avatar-placeholder{font-size:20px}.chat-page{background:#f1eee9}.chat-topbar{position:sticky;top:0;z-index:2;padding-bottom:4px;background:#f1eee9}.chat-topbar>.btn-text{display:block;width:100%;padding:8px 0;text-align:left}.chat-profile-button{width:auto;padding:9px 14px}.message-list{min-height:50vh;padding:16px 0 175px}.message-list-end{height:175px;flex-shrink:0}.message{width:fit-content;max-width:80%;background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:10px 12px;margin-bottom:8px}.message-own{margin-left:auto;background:var(--primary);color:#fff;border-color:var(--primary);border-radius:14px 14px 4px}.message-body{display:block;line-height:1.4;overflow-wrap:anywhere}.message-time{display:block;margin-top:4px;color:#756e7ecc;font-size:10px;text-align:right}.message-own .message-time{color:#ffffffb8}.message-form{display:flex;gap:8px;position:fixed;left:50%;bottom:0;transform:translate(-50%);z-index:3;width:min(100%,480px);background:var(--bg);border-top:1px solid var(--border);padding:8px 20px calc(8px + env(safe-area-inset-bottom))}.message-form input{margin:0}.message-form .btn-primary{width:auto}.report-block-menu{position:relative;flex-shrink:0}.menu-trigger{width:auto;min-width:42px;padding:7px 12px;font-size:20px;line-height:1}.report-block-popover{position:absolute;z-index:2;top:calc(100% + 6px);right:0;width:230px;margin:0;box-shadow:0 8px 24px #2b273024}.report-block-popover .btn-secondary,.report-block-popover .btn-primary{margin-top:8px}.report-block-popover label{display:block;font-size:13px;font-weight:600}.report-block-popover select{width:100%;padding:10px;margin-top:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font:inherit}
