/* ========================================================================== 
   v1.7.88: reliable swipe tabs + My Page unified glass theme
   ========================================================================== */

/* Swipe targets must receive horizontal touch movement instead of Safari
   converting it into page navigation/selection. Vertical scrolling remains. */
.top-nav-tabs,.segment-row,.builder-tabs,.ref-status-tabs{
  touch-action:pan-y!important;
  -webkit-user-select:none!important;user-select:none!important;
  overscroll-behavior-x:contain!important;
}
.top-nav-tabs button,.segment-row button,.builder-tabs button,.ref-status-tabs button{
  touch-action:pan-y!important;
}

/* My Page: remove the legacy beige/yellow visual language and use the same
   floating glass system as the other screens. */
.mypage-ref{
  padding:10px 14px 30px!important;
  background:transparent!important;
  color:var(--text)!important;
}
.mypage-label{display:none!important}
.ref-profile{
  margin:4px 0 14px!important;
  padding:18px 14px 16px!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,var(--glass-a),var(--glass-b))!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:0 14px 34px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.46)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.26)!important;
  backdrop-filter:blur(24px) saturate(1.26)!important;
}
.ref-profile .profile-avatar{
  width:68px!important;height:68px!important;margin:0 auto 9px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--glass-a) 82%,#fff 18%),color-mix(in srgb,var(--glass-b) 88%,transparent))!important;
  border:1px solid var(--glass-border)!important;
  color:var(--flat-icon-a)!important;
  box-shadow:0 10px 24px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.58)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;backdrop-filter:blur(18px) saturate(1.15)!important;
}
.ref-profile .profile-avatar small{
  background:color-mix(in srgb,var(--glass-a) 86%,transparent)!important;
  border:1px solid var(--glass-border)!important;color:var(--flat-icon-b)!important;
  box-shadow:0 4px 12px var(--glass-shadow)!important;
}
.ref-profile h2{font-size:15px!important;color:var(--text)!important}
.ref-profile h2 button{
  width:30px!important;height:30px!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--glass-a) 84%,transparent)!important;
  border:1px solid var(--glass-border)!important;color:var(--text)!important;
  box-shadow:0 5px 14px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.40)!important;
}
.ref-profile p{font-size:8.5px!important;color:var(--muted)!important;margin-top:6px!important}

.mypage-link,
a.mypage-link,
button.mypage-link{
  width:100%!important;min-height:70px!important;margin:10px 0!important;padding:11px 13px!important;
  display:grid!important;grid-template-columns:46px minmax(0,1fr) 18px!important;gap:11px!important;align-items:center!important;
  border-radius:20px!important;text-align:left!important;text-decoration:none!important;color:var(--text)!important;
  background:linear-gradient(145deg,var(--glass-a),var(--glass-b))!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:0 12px 28px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.44)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.24)!important;backdrop-filter:blur(22px) saturate(1.24)!important;
}
.mypage-link>span{
  width:44px!important;height:44px!important;border-radius:15px!important;display:grid!important;place-items:center!important;
  background:color-mix(in srgb,var(--glass-a) 82%,transparent)!important;
  border:1px solid var(--glass-border)!important;color:var(--flat-icon-a)!important;
  box-shadow:0 7px 18px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.44)!important;
}
.mypage-link>span .ref-icon-mask{opacity:1!important}
.mypage-link strong{font-size:12px!important;color:var(--text)!important}
.mypage-link small{display:block!important;margin-top:3px!important;font-size:9px!important;line-height:1.45!important;color:var(--muted)!important}
.mypage-link>b{font-size:20px!important;color:var(--muted)!important}
.mypage-link:active{transform:translateY(1px) scale(.992)!important}

/* My Record used to be a solid yellow card; make it a subtle accent glass card. */
.record-card-ref,.mypage-link.my-record{
  color:var(--text)!important;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--glass-accent) 14%,transparent),transparent 44%),
    linear-gradient(145deg,var(--glass-a),var(--glass-b))!important;
  border:1px solid color-mix(in srgb,var(--glass-accent) 24%,var(--glass-border))!important;
  box-shadow:0 12px 30px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.48)!important;
}
.record-card-ref>span,.mypage-link.my-record>span{
  background:color-mix(in srgb,var(--glass-accent) 16%,var(--glass-a))!important;
  color:var(--flat-icon-a)!important;
}
.record-card-ref small,.record-card-ref>b,.mypage-link.my-record small{color:var(--muted)!important}
.record-card-ref strong,.mypage-link.my-record strong{color:var(--text)!important}

.mypage-counts{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:11px!important;margin:14px 0 17px!important;
}
.mypage-counts>div,
.mypage-ref .room-stat,
.mypage-mini-stats>div,
.mypage-ref .portfolio-empty{
  background:linear-gradient(145deg,var(--glass-a),var(--glass-b))!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:0 11px 26px var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.42)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.22)!important;backdrop-filter:blur(22px) saturate(1.22)!important;
  color:var(--text)!important;
}
.mypage-counts>div{min-height:86px!important;border-radius:20px!important;padding:14px!important;text-align:center!important}
.mypage-counts small{font-size:9px!important;color:var(--muted)!important}
.mypage-counts strong{display:block!important;font-size:23px!important;margin-top:7px!important;color:var(--text)!important}
.mypage-counts em{font-size:9px!important;color:var(--muted)!important}
.mypage-section-title-row{margin:16px 1px 9px!important;align-items:center!important}
.mypage-section-title-row h3,.mypage-section-title{font-size:12px!important;color:var(--text)!important;font-weight:700!important;margin:12px 1px 9px!important}
.mypage-ref .pill-switch{background:color-mix(in srgb,var(--glass-a) 76%,transparent)!important;border:1px solid var(--glass-border)!important;box-shadow:0 6px 16px var(--glass-shadow)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}
.mypage-ref .pill-switch button{background:transparent!important;color:var(--muted)!important;box-shadow:none!important}
.mypage-ref .pill-switch button.active{background:color-mix(in srgb,var(--glass-accent) 18%,var(--glass-a))!important;color:var(--text)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 12px var(--glass-shadow)!important}
.mypage-ref .portfolio-empty{min-height:82px!important;border-radius:20px!important;color:var(--muted)!important}
.room-stats.video-room-stats,.mypage-ref .room-stats{gap:10px!important}
.mypage-ref .room-stat{min-height:82px!important;padding:12px!important;border-radius:20px!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:10px!important}
.mypage-ref .room-stat-icon{width:40px!important;height:40px!important;border-radius:14px!important;background:color-mix(in srgb,var(--glass-accent) 12%,var(--glass-a))!important;color:var(--flat-icon-a)!important;border:1px solid var(--glass-border)!important}
.mypage-ref .room-stat strong{font-size:10.5px!important;color:var(--text)!important}.mypage-ref .room-stat small{font-size:8px!important;color:var(--muted)!important}.mypage-ref .room-count{font-size:18px!important;color:var(--text)!important}
.mypage-mini-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:9px!important;margin:13px 0 4px!important}
.mypage-mini-stats>div{min-height:70px!important;border-radius:18px!important;padding:9px!important}
.mypage-mini-stats strong{font-size:14px!important;color:var(--text)!important}.mypage-mini-stats small{font-size:8px!important;color:var(--muted)!important}
.mypage-mini-stats .yellow,.mypage-mini-stats .brown,.mypage-mini-stats .green{color:var(--flat-icon-a)!important}

@media(max-width:390px){
  .mypage-ref{padding-left:11px!important;padding-right:11px!important}
  .mypage-link,a.mypage-link,button.mypage-link{grid-template-columns:42px minmax(0,1fr) 16px!important;padding:10px 11px!important;border-radius:18px!important}
  .mypage-link>span{width:40px!important;height:40px!important;border-radius:14px!important}
  .mypage-counts>div{min-height:78px!important;padding:11px!important}
  .mypage-mini-stats{gap:7px!important}
}