/* V21: quieter, photo-led social UI. Keep the app dark without editable theme colours. */
:root{
  --bg:#171817;
  --surface:#212321;
  --surface-2:#292b29;
  --line:#343834;
  --text:#f2f2ee;
  --muted:#a8aaa5;
  --green:#536e5d;
  --green-bright:#afc8b4;
  --cream:#ecece7;
  color-scheme:dark;
  font-family:Manrope,system-ui,sans-serif;
}
body{background:#101110}
.app{border-color:#363936;box-shadow:0 24px 70px #0008}
.topbar{background:var(--bg);backdrop-filter:none;height:67px;padding:16px 20px 0}
.brand{font-size:23px;letter-spacing:-1.7px}
.brand-o:after{background:#a7bbae}
.screen{height:calc(100% - 67px);padding:18px 18px 96px;scroll-behavior:auto;scroll-snap-type:none}
.screen .post-card,.screen .profile-section-title{scroll-snap-align:none}
.screen[data-screen="feed"],.screen[data-screen="friends"],.screen[data-screen="profile"]{overflow-y:auto;touch-action:pan-y}
.daily-row h1,.friends-page h1{font-size:26px;letter-spacing:-1.1px}
.eyebrow,.finder-label,.section-label{font-family:Manrope,system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.daily-row .eyebrow{color:#9da89e}
.icon-button{width:30px;height:30px;border-color:transparent;background:transparent;color:var(--muted)}
.activity-strip{margin:16px -18px 18px;padding:0 18px 4px;scroll-snap-type:none}
.activity-card{border-color:#383d38;border-radius:12px;padding:7px 9px;min-width:112px;background:#202320;box-shadow:none;scroll-snap-align:none}
.you-card{background:#252d27;border-color:#3e4a40}
.activity-copy b{font-size:11px}.activity-copy small{font-size:10px}
.mini-plus{width:20px;height:20px;background:#596b5c;color:#f5f5ef;box-shadow:none;font-size:15px}
.feed-head{margin-bottom:11px}.feed-head>span{color:var(--muted);font-size:10px}
.feed-dot{background:#a8bdae}
.feed{gap:18px}
.post-card{border:0;border-bottom:1px solid #343834;border-radius:0;background:transparent;box-shadow:none;padding:0 0 18px}
.dual-photo{border-radius:13px}
.post-meta{padding:10px 1px 0}.post-meta div{gap:3px}
.post-author{border:0;padding:0;background:transparent;color:var(--text);font-size:13px;font-weight:750;text-align:left;cursor:pointer}
.post-meta span{font-size:11px}.post-product{color:#c5cec4!important}
.reaction-pill{background:transparent;border-color:#434743;color:var(--text);box-shadow:none}
.feed-lock{border:1px solid #454b45;border-radius:16px;background:#222622f2;box-shadow:0 12px 40px #0009}
.feed-lock .eyebrow{color:#b2c4b4}.feed-lock h2{font-size:19px}
.primary-button{height:43px;border-radius:10px;background:var(--cream);color:#1b1d1a;font-size:12px;box-shadow:none}
.primary-button span{color:#526e59}
.tabbar{height:76px;background:#1b1d1bee;border-top-color:#353a35;box-shadow:none;backdrop-filter:blur(14px)}
.tab{color:#a2a7a2;gap:3px}.tab svg{width:18px;height:18px}.tab small{font-size:10px;font-weight:650}
.tab.active{color:#f2f2ee}.dose-button{height:42px;width:42px;border:3px solid #313a33;background:#506e59;box-shadow:none;font-size:18px}
.order-option{border-color:#3b403b;background:#212421;border-radius:11px}.order-option.selected{border-color:#899f8e;background:#2b332d}
.order-option b{font-size:11px}.order-option small{font-size:10px}
.camera-preview{background:#272c28;border-radius:15px}.camera-grid{opacity:.35}
.capture-button{box-shadow:0 0 0 3px var(--bg),0 0 0 4px #999e99}
.friends-hero>div>p:not(.eyebrow){font-size:12px}
.friends-total{background:#242724;border-color:#3a403a;border-radius:11px;min-width:55px}
.friends-total b{color:var(--text);font-size:15px}.friends-total small{font-size:9px}
.friend-finder{margin-top:19px;background:#222422;border-color:#373b37;border-radius:12px;padding:10px 12px 2px}
.friend-finder .search{height:36px}.search input{font-size:14px}.search svg{color:var(--muted)}
.invite-panel{background:#232623;border-color:#373d37;border-radius:12px;padding:12px;margin-top:12px}
.invite-panel small{font-size:11px}.invite-actions{margin-top:10px}
.invite-button{height:37px;border-color:#454a45;border-radius:9px;background:#292d29;color:var(--text);font-size:11px}
.invite-button svg{color:inherit}.invite-primary{background:#e4e8e2;color:#1b211b;border-color:#e4e8e2}
.friends-page .section-label{margin:22px 0 7px;border-color:#333833}
.section-label span{color:var(--text)}
.friend,.request,.friend-result{border:0;border-bottom:1px solid #333833;border-radius:0;background:transparent;padding:9px 0;margin:0;box-shadow:none;gap:8px;min-height:56px}
.friend-search-results{gap:0}
.friend-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.friend-info>span:last-child{display:grid;gap:2px;min-width:0}.friend-info b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-info small{font-size:10px;color:var(--muted)}
.friend-add{padding:7px 9px;border-color:#6d7b6e;border-radius:8px;background:transparent;color:#dce6dc;font-size:10px}
.friend-state{font-family:Manrope,system-ui,sans-serif;font-size:10px}
.remove-friend{min-height:36px;padding:0 4px;display:grid;place-items:center;border:0;background:transparent;color:#b2b9b2;border-radius:8px;flex:none;font-size:10px;font-weight:650}
.request button[data-friend-action]{width:32px;height:32px;border-radius:8px;background:#292d29;border-color:#4a514a;color:var(--text)}
.request button[data-friend-action="accept"]{background:#384b3a;border-color:#647c68;color:#ecf4ec}
.friends-empty,.feed-empty{border:1px solid #3c423c;background:#202320;border-radius:10px;color:var(--muted)}
.avatar{flex:none;background:#394139;color:#f2f3ef;background-size:cover;background-position:center;background-repeat:no-repeat;border-color:#545e54}
.avatar-you,.avatar-generic{background:#445247;color:#f4f4ef}
.avatar.has-photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent}
.profile-chip .avatar{width:34px;height:34px}
.profile-header{padding:0;border:0;min-height:0;border-radius:0;background:transparent;text-align:left}
.profile-banner{height:146px;border-radius:14px;background:#323631;background-size:cover;background-position:center;position:relative;overflow:hidden}
.profile-banner-empty{position:absolute;left:16px;bottom:14px;color:#c6cac2;font-size:12px;font-weight:650}
.profile-banner.has-banner .profile-banner-empty{display:none}
.profile-header .settings{top:10px;right:10px;width:32px;height:32px;color:#f8f8f5;background:#1118;border-radius:50%;z-index:1}
.profile-identity{display:flex;align-items:flex-end;gap:12px;padding:0 8px;margin-top:-28px;position:relative;z-index:1}
.profile-identity .profile-avatar{width:70px;height:70px;border:3px solid var(--bg);font-size:22px;margin:0;border-radius:50%}
.profile-copy{padding-bottom:2px;min-width:0}.profile-copy h1,.profile-copy h3{font-family:Manrope,system-ui,sans-serif;font-size:18px;letter-spacing:-.6px;line-height:1.15;margin:0;overflow-wrap:anywhere}
.profile-copy>p:not(.bio){font:500 11px Manrope,system-ui,sans-serif;color:var(--muted);margin:3px 0}
.profile-copy .bio{font-size:11px;line-height:1.4;color:#d1d4d0;margin:5px 0 0}
.profile-buttons{margin:13px 8px 0;gap:7px}.profile-header .edit-profile{background:#292d29;border:1px solid #414741;border-radius:9px;padding:8px 11px;font-size:11px;color:var(--text)}
.profile-header .edit-profile svg{color:var(--text);width:13px;height:13px}.profile-header .profile-share{width:35px}
.profile-stats{margin:18px 0 22px;padding:11px 0;background:transparent;border:0;border-top:1px solid #383d38;border-bottom:1px solid #383d38;border-radius:0;text-align:center}
.profile-stats b{font-size:14px;color:var(--text)}.profile-stats span{font-size:10px;color:var(--muted)}
.profile-stats div{border-color:#353b35}
.profile-section-title>span{font:500 10px Manrope,system-ui,sans-serif}
.profile-moment{border-radius:5px}.profile-moment-inset{border-radius:3px}
.profile-moment[data-open-moment]{cursor:pointer}.profile-moment[data-open-moment]:focus-visible{outline:2px solid #d4ded5;outline-offset:2px}
.sheet-backdrop{background:#000c}.sheet-content{background:#202220;border-color:#3a403a;border-radius:18px 18px 0 0}
.sheet-title h2{font-size:20px;letter-spacing:-.6px}.sheet-handle{margin-bottom:14px}
.close-sheet{width:30px;height:30px;color:var(--muted)}.close-sheet svg{width:18px;height:18px}
.field{gap:5px}.field span{font-size:11px;color:var(--muted)}.field em{color:#858b85}
.profile-edit-content,.qr-content,.view-profile-content{max-height:min(89dvh,760px);overflow-y:auto}
.profile-edit-content form{padding-top:14px}
.profile-photo-control,.profile-banner-control{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #3d433d;border-radius:10px;background:#292c29;margin-bottom:10px;cursor:pointer}
.profile-photo-control .profile-avatar{width:42px;height:42px;font-size:15px;border-color:#666e66}
.profile-photo-control b,.profile-banner-control b{font-size:11px}.profile-photo-control small,.profile-banner-control small{font-size:10px;color:var(--muted)}
.profile-upload-caption{display:grid;gap:3px;flex:1}
.editor-banner-preview{width:78px;height:48px;border-radius:6px;background:#454a44;background-size:cover;background-position:center;display:grid;place-items:center;color:#d8dcd7;flex:none}
.editor-banner-preview svg{width:18px;height:18px}.editor-banner-preview.has-banner svg{visibility:hidden}
.profile-edit-content .field input,.profile-edit-content .field textarea,.auth-card input{min-height:40px;background:#272a27!important;border:1px solid #444a44;border-radius:8px;color:var(--text)!important;-webkit-text-fill-color:var(--text);padding:9px 11px;font:500 16px Manrope,system-ui,sans-serif;box-shadow:none}
.profile-edit-content .field textarea{min-height:72px;resize:vertical}
.profile-edit-content input:-webkit-autofill,.auth-card input:-webkit-autofill{box-shadow:0 0 0 100px #272a27 inset!important;-webkit-text-fill-color:var(--text)!important}
.auth-gate{background:#151715}.auth-card{background:#202320;border-color:#3b403b;border-radius:17px;box-shadow:0 20px 50px #0008;padding:23px}
.auth-card h1{font-size:25px;letter-spacing:-.9px}.auth-copy{font-size:12px}.auth-card label span{font-size:11px}.auth-card input:focus,.profile-edit-content input:focus,.profile-edit-content textarea:focus{outline:2px solid #728575;outline-offset:1px;border-color:#728575}
.auth-switch b,.auth-message.success{color:#c0d4c3}
.qr-canvas-wrap{border-radius:10px}.qr-copy{font-size:11px}
.view-profile-content{padding-bottom:max(22px,env(safe-area-inset-bottom))}.view-profile-content .visitor-profile{margin-top:13px}
.view-profile-content .profile-banner{height:140px}.view-profile-info{margin:13px 3px 0;font-size:11px;color:var(--muted)}
.visitor-stats{grid-template-columns:repeat(2,1fr);margin:14px 0 18px}.locked-profile-moment{display:grid;place-items:center;padding:8px;text-align:center;color:var(--muted);font-size:10px;border:1px solid #444a44;background:#2a2f2a}
.moment-view-content{max-height:94dvh;overflow-y:auto}.moment-view-photo{margin-top:15px;width:100%;height:auto;aspect-ratio:4/5}
.profile-grid{gap:3px}
button{cursor:pointer}button:disabled{opacity:.6;cursor:default}
@media(max-width:500px){.app{border:0;border-radius:0}.screen{padding-left:17px;padding-right:17px}.profile-banner{height:clamp(118px,33vw,160px)}}