:root {
  --primary:var(--rose,#ff416c); --primary-hover:color-mix(in srgb,var(--primary) 88%,#000);
  --primary-active:color-mix(in srgb,var(--primary) 76%,#000); --primary-soft:color-mix(in srgb,var(--primary) 11%,var(--card,#fff));
  --background:var(--paper,#fff9fa); --surface:var(--card,#fff); --surface-secondary:color-mix(in srgb,var(--surface) 78%,var(--background));
  --text-primary:var(--ink,#17171c); --text-secondary:var(--muted,#6f7078); --border:var(--line,#eee5e8);
  --danger:#c82747; --success:#15885f; --warning:#a46610;
  --space-1:clamp(4px,.8vw,6px); --space-2:clamp(8px,1.4vw,12px); --space-3:clamp(12px,2vw,16px); --space-4:clamp(18px,3vw,24px);
  --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-round:999px;
  --icon-sm:20px; --icon-md:24px; --avatar-sm:38px; --avatar-md:48px; --touch-target:44px;
  --header-height:clamp(58px,9dvh,68px); --bottom-nav-base:76px;
  --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);
  --native-ad-height:0px; --native-ad-reported-height:0px;
  --bottom-nav-height:calc(var(--bottom-nav-base) + var(--safe-bottom));
  --effective-bottom-nav-height:var(--bottom-nav-height); --visual-viewport-height:100dvh;
}
html { min-width:0; max-width:100%; overflow-x:clip; background:var(--background); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-width:0; max-width:100%; min-height:100dvh; overflow-x:clip; background:var(--background); color:var(--text-primary); }
img,video,canvas,svg { max-width:100%; }
img,video { object-fit:cover; }
button,input,select,textarea { font:inherit; }
button,.nav-item,.setting-row,.decision,.view-icon-button { min-height:var(--touch-target); }
:where(h1,h2,h3,p,strong,small,span,time,blockquote) { overflow-wrap:anywhere; }
.app-shell,.view,main,.social-layout,.discover-grid,.match-layout,.groups-layout { min-width:0; }
.modal-backdrop { padding:max(16px,var(--safe-top)) max(16px,var(--safe-right)) max(16px,calc(var(--safe-bottom) + var(--native-ad-height))); }
.modal { max-height:calc(var(--visual-viewport-height) - var(--safe-top) - var(--safe-bottom) - var(--native-ad-height) - 32px); overflow-y:auto; overscroll-behavior:contain; }
.toast { max-width:min(90vw,430px); bottom:calc(20px + var(--safe-bottom) + var(--native-ad-height)); text-align:center; }
.live-room,.call-screen { padding-top:var(--safe-top); padding-right:var(--safe-right); padding-bottom:var(--safe-bottom); padding-left:var(--safe-left); }
.live-chat-panel,.call-controls { margin-bottom:var(--native-ad-height); }
.composer { min-width:0; }
.composer input,.post-composer textarea { min-width:0; }
.message>span:nth-child(2),.group-card { min-width:0; }
.message strong,.message small,.group-card strong,.group-card small { overflow:hidden; text-overflow:ellipsis; }
.social-media,.reference-cover img,.reference-media-preview span,.profile-card img,.live-card-media { aspect-ratio:var(--media-ratio,4/3); }
.profile-card img,.reference-cover img,.live-card-media img { width:100%; height:100%; }
.auth-card,.settings-card,.social-post,.message,.group-card,.live-card { container-type:inline-size; }

@media (max-width:700px) {
  :root { --bottom-nav-base:76px; }
  body { min-height:var(--visual-viewport-height); }
  .app-shell { min-height:var(--visual-viewport-height); padding-bottom:calc(var(--effective-bottom-nav-height) + var(--native-ad-height)); }
  main { width:100%; padding-top:var(--safe-top); padding-right:var(--safe-right); padding-bottom:var(--space-3); padding-left:var(--safe-left); }
  .view { width:100%; min-height:calc(var(--visual-viewport-height) - var(--effective-bottom-nav-height) - var(--native-ad-height) - var(--safe-top)); }
  .sidebar { right:auto; bottom:var(--native-ad-height); left:50%; width:min(100%,460px); height:var(--effective-bottom-nav-height); padding-right:max(10px,var(--safe-right)); padding-bottom:var(--safe-bottom); padding-left:max(10px,var(--safe-left)); transform:translateX(-50%); }
  .sidebar nav { width:100%; min-width:0; }
  .sidebar .nav-item { min-width:0; min-height:52px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .mobile-create { min-height:50px; }
  .section-head,.topbar { min-height:var(--header-height); padding-top:var(--space-1); }
  .section-head h1,.topbar h1 { font-size:clamp(22px,7vw,28px); }
  .fyp-brand h1 { font-size:clamp(21px,6.4vw,25px); }
  .profile-card { height:clamp(430px,calc(var(--visual-viewport-height) - 238px),650px); min-height:0; }
  .profile-copy h2 { font-size:clamp(25px,8vw,31px); }
  .conversation.mobile-open,.group-room.mobile-open { bottom:calc(var(--effective-bottom-nav-height) + var(--native-ad-height)); padding-bottom:max(12px,var(--safe-bottom)); }
  .conversation .composer,.group-room .composer { position:sticky; bottom:0; z-index:3; background:var(--surface); padding-bottom:max(6px,var(--safe-bottom)); }
  .notification-panel { bottom:calc(var(--effective-bottom-nav-height) + var(--native-ad-height) + 10px); }
  .toast { bottom:calc(var(--effective-bottom-nav-height) + var(--native-ad-height) + 12px); }
  .create-sheet-card { max-height:calc(var(--visual-viewport-height) - var(--safe-top)); overflow-y:auto; padding-right:max(20px,var(--safe-right)); padding-bottom:max(24px,var(--safe-bottom)); padding-left:max(20px,var(--safe-left)); }
  .auth-gate { min-height:var(--visual-viewport-height); padding-top:var(--safe-top); padding-bottom:var(--safe-bottom); }
  .auth-card.auth-welcome { width:auto; max-width:none; }
  .auth-card:not(.auth-welcome) { max-height:calc(var(--visual-viewport-height) - var(--safe-top) - var(--safe-bottom) - 28px); }
  .auth-form input,.auth-form select,.auth-form textarea,.composer input,.live-create input,.live-create textarea,.live-create select { font-size:max(16px,1em); }
  .reference-filter-row,.reference-group-tabs,.stories,.social-post-actions,.live-tabs { overscroll-behavior-inline:contain; scroll-snap-type:x proximity; }
  .reference-filter-row>*,.reference-group-tabs>*,.stories>*,.live-tabs>* { scroll-snap-align:start; }
}

@media (max-width:340px) {
  :root { --bottom-nav-base:72px; }
  .view { padding-right:10px; padding-left:10px; }
  .sidebar { padding-right:4px; padding-left:4px; }
  .sidebar .nav-item { font-size:8px!important; padding-right:1px; padding-left:1px; }
  .sidebar .nav-item span { font-size:19px; }
  .mobile-create { width:48px; height:48px; }
  .decision-row { gap:10px; }
  .decision { width:54px; height:54px; }
  .post-compose-actions .attach-label,.post-compose-actions .feeling-button { padding-inline:7px; }
}

@media (max-height:620px) and (orientation:landscape) {
  .profile-card { height:360px; min-height:0; }
  .auth-card:not(.auth-welcome) { position:relative; inset:auto; margin:calc(var(--safe-top) + 12px) 14px calc(var(--safe-bottom) + 12px); max-height:none; }
  .modal { max-height:calc(var(--visual-viewport-height) - 20px); }
}

html.keyboard-open .sidebar { pointer-events:auto; transform:translateX(-50%); }
html.keyboard-open .app-shell { padding-bottom:var(--effective-bottom-nav-height); }
html.keyboard-open .conversation.mobile-open,html.keyboard-open .group-room.mobile-open { bottom:var(--effective-bottom-nav-height); }
html.keyboard-open .toast { bottom:calc(var(--effective-bottom-nav-height) + 12px); }
html.keyboard-open .create-sheet { display:none; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}
@media (prefers-contrast:more) {
  :root { --border:color-mix(in srgb,var(--text-primary) 48%,var(--surface)); }
  button,input,select,textarea,.social-post,.settings-card { border-width:2px; }
}