/* Small layout correction after removing the decorative character. */
.app-item:nth-child(1) { left: 9px; top: 10px; }
.app-item:nth-child(2) { left: 104px; top: 72px; }
.app-item:nth-child(3) { right: 104px; top: 9px; }
.app-item:nth-child(4) { right: 9px; top: 72px; bottom: auto; }

/* Neutral image and avatar placeholders. */
.avatar-placeholder { background: #f4f4f2; color: #555; }
.avatar-placeholder::after { display: none; }
.avatar-placeholder svg { width: 28px; height: 28px; }
.avatar-small.avatar-placeholder svg { width: 20px; height: 20px; }
.highlight { display: grid; place-items: center; background: #fafaf8; }
.highlight svg { width: 17px; height: 17px; }
.photo-placeholder { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; align-content: center; gap: 8px; background: #eeeeeb; color: #8c8c88; }
.photo-placeholder svg { width: 28px; height: 28px; }
.photo-placeholder span { font-size: 7px; letter-spacing: .14em; }

/* Page two stays inside one screen. */
.mood-page { overflow: hidden; display: flex; flex-direction: column; }
.mood-page .phrase-pill { flex: 0 0 auto; margin-bottom: 11px; }
.mood-page .editorial-grid { flex: 1; min-height: 0; grid-template-rows: minmax(92px,1.2fr) minmax(92px,1.1fr) 78px minmax(118px,.9fr); }
.mood-page .photo-card { grid-row: span 2; display: grid; grid-template-rows: minmax(0,1fr) 39px; }
.mood-page .photo-meta { height: 39px; }
.mood-page .square-app { height: 100%; min-height: 0; }
.mood-page .personal-note { min-height: 0; height: 100%; padding: 12px; overflow: visible; }
.mood-page .personal-note p { margin: 7px 0; font-size: 10px; line-height: 1.45; }
.mood-page blockquote { min-height: 0; padding: 13px 18px; font-size: 15px; overflow: visible; }
.mood-page blockquote cite { margin-top: 6px; }
.mood-page .about-card, .mood-page .todo-card { min-height: 0; padding: 12px; overflow: visible; }
.mood-page .about-row { margin: 7px 0; }
.mood-page .about-card > p:last-child { margin: 5px 0 0; }
.mood-page .todo-card li { padding-top: 3px; padding-bottom: 3px; }

/* Swipe-left profile and app navigation. */
.nav-shade { position: absolute; inset: 0; z-index: 29; background: rgba(15,15,15,.24); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.nav-shade.open { opacity: 1; pointer-events: auto; }
.side-nav { position: absolute; z-index: 30; top: 0; left: 0; bottom: 0; width: min(84%, 350px); padding: 54px 22px 25px; background: #f7f7f5; box-shadow: 18px 0 45px rgba(0,0,0,.1); transform: translateX(-105%); transition: transform .42s cubic-bezier(.22,.8,.25,1); overflow: hidden; touch-action: pan-y; }
.side-nav.open { transform: translateX(0); }
.side-close { position: absolute; right: 18px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #e9e9e6; font-size: 19px; font-weight: 300; }
.side-profile { padding-bottom: 20px; border-bottom: 1px solid #dededb; }
.side-avatar { width: 66px; height: 66px; padding: 0; margin-bottom: 15px; border: 0; border-radius: 50%; display: grid; place-items: center; position: relative; overflow: visible; }
.side-avatar > span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
.side-avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-avatar small { position: absolute; right: -2px; bottom: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #171717; color: white; border: 2px solid #f7f7f5; }
.side-profile h2 { margin: 5px 0 2px; font: 600 24px/1.15 var(--display-font); outline: none; }
.side-handle { margin: 0; font-size: 9px; color: #888; outline: none; }
.side-bio { max-width: 220px; margin: 11px 0; font-size: 9px; line-height: 1.55; color: #666; outline: none; }
.side-profile [contenteditable="true"] { background: white; border-radius: 5px; box-shadow: 0 0 0 3px white; }
.side-edit { border: 0; border-radius: 9px; padding: 8px 13px; background: #171717; color: #fff; font-size: 8px; letter-spacing: .06em; }
.side-links { display: grid; gap: 3px; margin-top: 16px; }
.side-links button { height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; grid-template-columns: 28px 1fr 14px; align-items: center; text-align: left; font-size: 10px; }
.side-links button:hover { background: #fff; }
.side-links button span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #fff; }
.side-links button svg { width: 15px; height: 15px; }
.side-links button b { color: #aaa; font-size: 15px; font-weight: 400; }
.drawer-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
.drawer-pages button { height: 32px; border: 1px solid #dededb; border-radius: 10px; background: #fff; font-size: 7px; letter-spacing: .08em; }
.swipe-tip { position: absolute; bottom: 18px; margin: 0; font-size: 7px; letter-spacing: .12em; color: #aaa; }

.phone { touch-action: pan-y; }

/* Editable content and local image slots. */
.inline-editable { cursor: text; border-radius: 4px; transition: background .2s, box-shadow .2s; }
.inline-editable:hover { background: rgba(0,0,0,.035); box-shadow: 0 0 0 3px rgba(0,0,0,.035); }
.inline-editable[contenteditable="true"] { outline: none; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #ddd; }
.editable-avatar { border: 0; padding: 0; }
.editable-avatar img, .photo-placeholder img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.photo-placeholder { border: 0; padding: 0; position: relative; cursor: pointer; }
.image-edit-hint { position: absolute; right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 9px; background: rgba(0,0,0,.58); color: white; font-size: 6px; letter-spacing: .1em; }

/* Functional API settings view. */
.api-settings { max-height: calc(68dvh - 48px); padding: 34px 3px 24px; text-align: left; overflow-y: auto; scrollbar-width: none; }
.api-settings::-webkit-scrollbar { display: none; }
.api-settings h2 { margin: 4px 0 22px; font: 600 27px var(--display-font); }
.api-settings label { display: grid; gap: 7px; margin-bottom: 14px; }
.api-settings label > span { font-size: 8px; letter-spacing: .08em; color: #777; }
.api-settings input, .api-settings select, .api-settings textarea { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #dededb; border-radius: 11px; background: #fff; outline: none; font-size: 10px; resize: vertical; }
.api-settings textarea { height: auto; min-height: 78px; padding-top: 11px; line-height: 1.5; }
.api-settings input:focus, .api-settings select:focus { border-color: #777; }
.key-row { display: grid; grid-template-columns: 1fr 55px; gap: 7px; }
.key-row button, .model-row > button { border: 0; border-radius: 10px; background: #e7e7e4; font-size: 8px; }
.model-row { display: grid; grid-template-columns: 1fr 86px; align-items: end; gap: 8px; }
.model-row label { margin: 0; }
.model-row > button { height: 42px; }
.test-model { width: 100%; height: 43px; margin-top: 16px; border: 0; border-radius: 11px; background: #171717; color: white; font-size: 9px; letter-spacing: .05em; }
.api-status { margin-top: 13px; font-size: 8px; line-height: 1.5; color: #888; }
.api-status[data-state="success"] { color: #287246; }
.api-status[data-state="error"] { color: #a23d3d; }
.preset-box { margin-bottom: 22px; padding: 13px; border: 1px solid #e1e1de; border-radius: 15px; background: #efefec; }
.preset-box label { margin-bottom: 9px; }
.preset-actions { display: grid; grid-template-columns: 1fr 58px; gap: 7px; }
.preset-actions button { border: 0; border-radius: 10px; background: #171717; color: #fff; font-size: 8px; }
.preset-minor { display: grid; grid-template-columns: 1fr 70px; gap: 7px; margin-top: 7px; }
.preset-minor button { height: 31px; border: 0; border-radius: 9px; background: #fff; font-size: 8px; }
.settings-section-title { margin: 0 0 12px; font-size: 8px; font-weight: 600; letter-spacing: .14em; color: #555; }
.image-api-block { margin-top: 25px; padding-top: 20px; border-top: 1px solid #dededb; }

/* Invite-only authentication. */
.auth-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: #efefed; transition: opacity .35s, visibility .35s; }
.auth-screen.authenticated { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-screen.auth-checking .auth-card > :not(.auth-mark):not(.auth-message) { visibility: hidden; }
.auth-screen.auth-checking .auth-message { margin-top: 18px; color: #858581; letter-spacing: .04em; }
.auth-card { width: min(100%, 360px); padding: 30px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.auth-mark { width: 52px; height: 52px; margin-bottom: 26px; border-radius: 17px; display: grid; place-items: center; background: #171717; color: #fff; font: 600 12px var(--display-font); letter-spacing: .08em; }
.auth-card h1 { margin: 7px 0 9px; font-size: 28px; }
.auth-intro { margin: 0 0 24px; color: #777; font-size: 10px; line-height: 1.5; }
.auth-card form { display: grid; gap: 13px; }
.auth-card label { display: grid; gap: 7px; }
.auth-card label span { font-size: 8px; letter-spacing: .08em; color: #777; }
.auth-card input { height: 44px; padding: 0 13px; border: 1px solid #dfdfdc; border-radius: 11px; outline: none; font-size: 11px; }
.auth-card input:focus { border-color: #777; }
.auth-submit { height: 44px; margin-top: 5px; border: 0; border-radius: 11px; background: #171717; color: #fff; font-size: 9px; letter-spacing: .05em; }
.auth-submit:disabled { opacity: .55; }
.forgot-password { margin-top: 14px; padding: 0; border: 0; background: transparent; font-size: 8px; color: #777; }
.local-preview { display: block; width: 100%; margin-top: 13px; padding: 10px; border: 1px solid #dededb; border-radius: 10px; background: #f5f5f3; font-size: 8px; color: #666; }
.local-preview[hidden] { display: none; }
.auth-message { min-height: 15px; margin: 18px 0 0; font-size: 8px; color: #999; }
.auth-message[data-state="error"] { color: #a23d3d; }
.auth-message[data-state="success"] { color: #287246; }
.sign-out { width: 100%; height: 34px; margin-top: 9px; border: 1px solid #dededb; border-radius: 10px; background: transparent; color: #777; font-size: 8px; }

/* INS-style friends and private messaging. */
.social-app { position: fixed; z-index: 80; top: 0; bottom: 0; left: 50%; width: min(100%,430px); padding: env(safe-area-inset-top) 18px env(safe-area-inset-bottom); background: #f1f1ef; transform: translate(-50%,105%); transition: transform .45s cubic-bezier(.22,.8,.25,1); overflow: hidden; }
.social-app.open { transform: translate(-50%,0); }
.social-header { height: 68px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border-bottom: 1px solid #dededb; }
.social-header button,.chat-person button { width: 36px; height: 36px; border: 0; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.social-header svg,.chat-person button svg { width: 18px; height: 18px; }.social-header>div{text-align:center}.social-header span,.social-header strong{display:block}.social-header span{font-size:7px;letter-spacing:.18em;color:#999}.social-header strong{font:600 17px var(--display-font);margin-top:2px}.social-home{height:calc(100% - 68px);overflow:hidden}.social-profile-card{height:104px;margin:16px 0 12px;padding:15px;border-radius:20px;background:#fff;box-shadow:var(--shadow);display:grid;grid-template-columns:54px 1fr 48px;gap:12px;align-items:center}.social-avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center}.social-avatar svg{width:24px}.social-profile-card strong,.social-profile-card>div>span{display:block}.social-profile-card strong{font:600 18px var(--display-font);letter-spacing:.08em}.social-profile-card>div>span{font-size:7px;color:#999;margin-top:3px}.social-profile-card>button{height:30px;border:1px solid #ddd;border-radius:10px;background:#fff;font-size:7px}.social-tabs{height:42px;display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #d7d7d4}.social-tabs button{border:0;background:none;font-size:9px;color:#999;position:relative}.social-tabs button.active{color:#171717;font-weight:600}.social-tabs button.active:after{content:"";position:absolute;bottom:-1px;left:22%;right:22%;height:2px;background:#171717}.social-tabs span{display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:3px;border-radius:8px;background:#e5e5e2;font-size:7px}.social-panel{display:none;height:calc(100% - 174px);padding-top:14px;overflow-y:auto;scrollbar-width:none}.social-panel.active{display:block}.friend-search{height:40px;padding:0 13px;border-radius:20px;background:#fff;display:flex;align-items:center;gap:8px}.friend-search svg{width:15px}.friend-search input{border:0;outline:0;background:none;flex:1;font-size:9px}.friend-list{display:grid;gap:8px;margin-top:13px}.social-empty{padding:60px 20px;text-align:center;color:#aaa;font-size:9px}.friend-row{height:70px;padding:10px 12px;border:0;border-radius:17px;background:#fff;display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.035)}.friend-avatar{width:44px;height:44px;border-radius:50%;background:#e6e6e3;overflow:hidden;display:grid;place-items:center;font:600 12px var(--display-font)}.friend-avatar img{width:100%;height:100%;object-fit:cover}.friend-row strong,.friend-row span{display:block}.friend-row strong{font-size:10px}.friend-row span{font-size:7px;color:#999;margin-top:4px}.friend-row time{font-size:7px;color:#aaa}.request-actions{display:flex;gap:5px}.request-actions button{height:26px;border:0;border-radius:8px;padding:0 9px;font-size:7px}.request-actions .accept{background:#171717;color:#fff}.add-friend-card{margin-top:18px;padding:27px 22px;border-radius:22px;background:#fff;text-align:center;box-shadow:var(--shadow)}.add-symbol{width:48px;height:48px;margin:0 auto 17px;border-radius:50%;display:grid;place-items:center;background:#171717;color:#fff;font-size:20px}.add-friend-card h2{font:600 23px var(--display-font);margin:5px}.add-friend-card>p:not(.eyebrow){font-size:8px;line-height:1.5;color:#888}.add-friend-card input{width:100%;height:44px;margin-top:16px;border:1px solid #ddd;border-radius:12px;text-align:center;letter-spacing:.2em;text-transform:uppercase;outline:0}.add-friend-card button{width:100%;height:42px;margin-top:9px;border:0;border-radius:11px;background:#171717;color:#fff;font-size:9px}.chat-room{position:absolute;inset:0;background:#f1f1ef;transform:translateX(105%);transition:transform .4s cubic-bezier(.22,.8,.25,1);display:grid;grid-template-rows:72px 30px 1fr 70px;padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom)}.chat-room.open{transform:none}.chat-person{display:grid;grid-template-columns:38px 44px 1fr 38px;gap:9px;align-items:center;border-bottom:1px solid #ddd}.chat-person>div:nth-of-type(2) strong,.chat-person>div:nth-of-type(2) span{display:block}.chat-person strong{font-size:10px}.chat-person span{font-size:7px;color:#999;margin-top:3px}.message-day{text-align:center;padding-top:10px;font-size:7px;letter-spacing:.15em;color:#aaa}.message-list{overflow-y:auto;padding:10px 3px 18px;display:flex;flex-direction:column;gap:8px}.message{max-width:76%;padding:10px 12px;border-radius:15px 15px 15px 4px;background:#fff;font-size:9px;line-height:1.5;box-shadow:0 3px 10px rgba(0,0,0,.03)}.message.mine{align-self:flex-end;border-radius:15px 15px 4px 15px;background:#171717;color:#fff}.message time{display:block;margin-top:4px;font-size:6px;opacity:.55}.message-composer{align-self:center;height:50px;padding:5px 7px;border-radius:25px;background:#fff;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;box-shadow:var(--shadow)}.message-composer button{width:36px;height:36px;border:0;border-radius:50%;background:#f0f0ed;font-size:18px}.message-composer button:last-child{background:#171717;color:#fff;display:grid;place-items:center}.message-composer button svg{width:17px}.message-composer textarea{border:0;outline:0;resize:none;font:9px/1.5 var(--font-family);padding:10px 5px;background:none}.social-toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%,20px);padding:9px 14px;border-radius:16px;background:#171717;color:#fff;font-size:8px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.social-toast.show{opacity:1;transform:translate(-50%,0)}