.app-shell{min-height:100dvh;display:grid;grid-template-columns:230px minmax(0,1fr)}
.sidebar{padding:24px 16px;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:28px}.side-nav{display:grid;gap:7px}.nav-item{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:13px;color:var(--muted);border:1px solid transparent;background:transparent;text-align:left;min-width:0}.nav-item.active,.nav-item:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}.nav-item .nav-icon{width:22px;text-align:center;flex-shrink:0}.sidebar-bottom{margin-top:auto}.main-area{min-width:0;min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(14px,3vw,36px);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);position:sticky;top:0;z-index:10;backdrop-filter:blur(18px)}.topbar-actions{display:flex;gap:8px;align-items:center}.page-content{width:min(980px,100%);margin:0 auto;padding:clamp(18px,3vw,34px);flex:1}.home-page{display:grid;place-items:center;padding:16px}.brand-name{font-size:1.1rem}.profile-top{width:44px;height:44px;border-radius:15px;border:1px solid var(--border);background:var(--surface-2);overflow:hidden;display:grid;place-items:center;color:var(--text)}.avatar-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.profile-top .avatar-photo{border-radius:14px}.match-home{width:100%;min-height:min(70dvh,680px);display:grid;place-items:center;align-content:center;position:relative}.ripple-button{width:clamp(190px,44vw,240px);aspect-ratio:1;border:0;background:transparent;position:relative;display:grid;place-items:center;color:white;isolation:isolate;padding:0;touch-action:manipulation}.ripple-button:before,.ripple-button:after{content:"";position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--primary) 80%,white);border-radius:50%;animation:ripple 3.2s ease-out infinite;z-index:-1;pointer-events:none}.ripple-button:after{animation-delay:1.6s}.ripple-core{width:66%;height:66%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#658bff,#8b69ed);border:5px solid color-mix(in srgb,var(--primary) 35%,white);box-shadow:0 0 50px color-mix(in srgb,var(--primary) 35%,transparent),inset 0 0 28px #ffffff30;font-size:3rem}.ripple-core .avatar-photo{border-radius:50%}.ripple-button.searching .ripple-core{animation:pulse 1.1s ease-in-out infinite alternate}.ripple-caption{margin-top:32px;text-align:center;color:var(--muted);font-size:clamp(1rem,3vw,1.2rem)}@keyframes ripple{0%{transform:scale(.7);opacity:.85}100%{transform:scale(1.65);opacity:0}}@keyframes pulse{to{transform:scale(1.05)}}
.mobile-nav{display:none}.content-title{font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.035em;margin:0 0 6px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.setting-card{padding:clamp(18px,3vw,26px);display:grid;gap:12px}.setting-card h2{margin:0 0 4px;font-size:1.15rem}.field-label,.field label{display:block;font-size:.92rem;font-weight:650;margin-bottom:7px}.field{display:grid;gap:7px;min-width:0}.field input,.field textarea,.field select,.setting-card select{width:100%;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);padding:12px 13px}.field textarea{resize:vertical}.profile-heading{display:flex;align-items:center;gap:16px;margin-bottom:22px}.profile-avatar-large{width:76px;height:76px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);font-size:2rem;flex-shrink:0}.profile-avatar-large .avatar-photo{border-radius:24px}.profile-form{padding:clamp(18px,4vw,30px);display:grid;gap:22px}.photo-upload{display:flex;align-items:center;gap:14px;cursor:pointer;padding:14px;border:1px dashed var(--border);border-radius:16px;background:var(--surface-2)}.photo-preview{width:64px;height:64px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#658bff,#8b69ed);color:#fff;font-size:1.8rem;flex-shrink:0}.photo-preview .avatar-photo{border-radius:20px}.photo-upload strong,.photo-upload small{display:block}.photo-upload small,.field small{color:var(--muted);margin-top:4px}.profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field-full{grid-column:1/-1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn-danger{border:1px solid #b94b58;background:#8f2636;color:#fff;border-radius:12px;padding:12px 15px}.empty-state{padding:clamp(28px,6vw,60px);text-align:center;display:grid;justify-items:center;gap:12px}.empty-state h1,.empty-state p{margin:0}.empty-state p{color:var(--muted);max-width:34ch}.empty-icon{font-size:2rem;color:var(--primary)}
@media(max-width:850px){.app-shell{grid-template-columns:1fr;padding-bottom:calc(72px + env(safe-area-inset-bottom))}.sidebar{display:none}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:8px 3px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--border);backdrop-filter:blur(18px)}.mobile-nav .nav-item{display:grid;justify-items:center;align-content:center;gap:4px;color:var(--muted);border:0;background:transparent;font-size:clamp(.62rem,2.5vw,.75rem);padding:5px 1px;white-space:normal;text-align:center;line-height:1.15}.mobile-nav .nav-item .nav-icon{font-size:1.25rem;width:auto}.mobile-nav .nav-item.active{color:var(--primary)}.page-content{padding:20px 16px}.home-page{padding:10px 16px}.match-home{min-height:calc(100dvh - 190px);min-height:calc(100svh - 190px)}.ripple-button{width:min(58vw,230px)}.settings-grid,.profile-fields{grid-template-columns:1fr}.field-full{grid-column:auto}.topbar{padding:12px 15px}.profile-avatar-large{width:64px;height:64px;border-radius:20px}}
@media(max-width:380px){.mobile-nav .nav-item{font-size:.59rem}.mobile-nav .nav-icon{font-size:1.1rem}.ripple-button{width:54vw}.profile-form{padding:15px}.photo-upload{padding:10px}}
@media(prefers-reduced-motion:reduce){.ripple-button:before,.ripple-button:after,.ripple-button.searching .ripple-core{animation:none}}

/* Mobile alignment corrections (override earlier layout rules) */
.topbar { width:100%; min-width:0; min-height:72px; max-height:84px; padding:10px clamp(12px,3vw,24px); gap:10px; }
.topbar .brand { min-width:0; display:flex; align-items:center; gap:10px; flex:1 1 auto; }
.topbar .brand-mark-small { flex:0 0 42px; width:42px; height:42px; }
.topbar .brand-name { font-size:clamp(1rem,4vw,1.2rem); white-space:nowrap; }
.topbar-actions { flex:0 0 auto; gap:8px; }
.topbar-actions .icon-btn { flex:0 0 42px; width:42px; height:42px; }
.topbar-actions .profile-top { display:none; }
.profile-top { flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px; padding:0; overflow:hidden; }
.profile-top img,.profile-top .avatar-photo { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; }
.page-content.home-page { width:100%; max-width:100%; min-width:0; margin:0; padding:12px 16px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.match-home { width:100%; max-width:560px; min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0; margin:0 auto; }
.ripple-button { display:grid; flex:0 0 auto; width:clamp(190px,52vw,238px); max-width:100%; aspect-ratio:1; margin:0 auto; }
.ripple-core { width:66%; height:66%; min-width:0; min-height:0; }
.ripple-caption { margin:26px 0 0; max-width:100%; padding:0 8px; text-align:center; line-height:1.4; overflow-wrap:anywhere; }
@media (max-width:850px) {
  .app-shell { display:block; width:100%; min-height:100svh; padding-bottom:calc(76px + env(safe-area-inset-bottom)); overflow-x:clip; }
  .main-area { width:100%; min-width:0; min-height:calc(100svh - 76px); }
  .topbar { position:relative; top:auto; min-height:72px; max-height:76px; }
  .topbar-actions .profile-top { display:none; }
  .page-content.home-page { min-height:calc(100svh - 152px - env(safe-area-inset-bottom)); height:calc(100svh - 152px - env(safe-area-inset-bottom)); }
  .match-home { min-height:0; height:100%; }
  .ripple-button { width:clamp(180px,52vw,228px); }
  .ripple-button:before,.ripple-button:after { inset:0; }
  .mobile-nav { min-height:68px; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .mobile-nav .nav-item { min-width:0; overflow:hidden; }
  .mobile-nav .nav-item span:last-child { display:block; max-width:100%; overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  .topbar { padding-inline:10px; }
  .topbar .brand-mark-small { flex-basis:38px; width:38px; height:38px; }
  .topbar .brand-name { font-size:1rem; }
  .page-content.home-page { padding-inline:10px; }
  .ripple-button { width:clamp(170px,54vw,205px); }
  .ripple-caption { font-size:.95rem; }
  .mobile-nav .nav-item { font-size:.58rem; }
}


/* Profile page: strict sizing and mobile-safe form layout */
.profile-heading { display:flex; align-items:center; gap:14px; min-width:0; }
.profile-heading > div { min-width:0; }
.profile-avatar-large { width:clamp(54px, 16vw, 76px); height:clamp(54px, 16vw, 76px); flex:0 0 clamp(54px, 16vw, 76px); border-radius:18px; overflow:hidden; }
.profile-avatar-large .avatar-photo { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; display:block; }
.profile-form { width:100%; min-width:0; max-width:100%; overflow:hidden; padding:clamp(14px, 3vw, 24px); gap:18px; }
.photo-upload { display:flex; align-items:center; width:100%; min-width:0; gap:12px; overflow:hidden; }
.photo-upload > span:last-child { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.photo-upload strong { font-size:clamp(.9rem, 3.5vw, 1rem); line-height:1.35; }
.photo-upload small { font-size:.78rem; line-height:1.4; }
.photo-preview { width:58px; height:58px; min-width:58px; min-height:58px; max-width:58px; max-height:58px; flex:0 0 58px; border-radius:15px; overflow:hidden; }
.photo-preview .avatar-photo { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover; display:block; }
#profilePhoto.visually-hidden { display:none !important; }
.profile-fields { width:100%; min-width:0; }
.profile-fields .field { min-width:0; }
.profile-fields input, .profile-fields textarea, .profile-fields select { width:100%; max-width:100%; min-width:0; font-size:16px; }
.profile-fields textarea { min-height:110px; }
@media (max-width: 850px) {
  .page-content:not(.home-page) { padding:18px 14px calc(24px + env(safe-area-inset-bottom)); }
  .profile-heading { align-items:center; margin-bottom:16px; }
  .profile-heading .content-title { font-size:1.65rem; line-height:1.2; overflow-wrap:anywhere; }
  .profile-heading .muted { font-size:.92rem; line-height:1.45; margin:6px 0 0; }
  .profile-avatar-large { width:58px; height:58px; flex-basis:58px; border-radius:15px; }
  .profile-avatar-large .avatar-photo { border-radius:15px; }
  .profile-form { border-radius:18px; }
  .photo-upload { padding:10px; }
}
@media (max-width: 380px) {
  .profile-form { padding:12px; gap:15px; }
  .photo-preview { width:50px; height:50px; min-width:50px; min-height:50px; max-width:50px; max-height:50px; flex-basis:50px; }
  .photo-upload { gap:9px; }
}