
/* MiKO Profile Fluid Responsive v13 — full-width adaptive layout, scoped to /profile/ */
.page-id-24563{
  --mpf-gap:clamp(10px,1.1vw,18px);
  --mpf-pad:clamp(12px,1.35vw,22px);
  --mpf-radius:clamp(14px,1.2vw,20px);
}
.page-id-24563,
.page-id-24563 .miko-basic-page,
.page-id-24563 .miko-basic-card,
.page-id-24563 .miko-basic-content{
  min-width:0!important;
}
.page-id-24563 .miko-basic-page{overflow-x:clip!important}
.page-id-24563 .miko-basic-shell{
  width:min(1280px,calc(100% - clamp(20px,3vw,48px)))!important;
  max-width:1280px!important;
  margin-inline:auto!important;
  padding:clamp(10px,1.1vw,16px) 0 clamp(36px,4vw,64px)!important;
}
.page-id-24563 .miko-profile-app{
  width:100%!important;
  max-width:1280px!important;
  margin:0 auto!important;
  grid-template-columns:clamp(180px,15vw,210px) minmax(0,1fr)!important;
  gap:var(--mpf-gap)!important;
}
.page-id-24563 .miko-profile-main{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  gap:var(--mpf-gap)!important;
}
.page-id-24563 .miko-profile-main>*{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Every major card fills the available content column */
.page-id-24563 .miko-profile-card,
.page-id-24563 .miko-master-pro-packages,
.page-id-24563 .miko-cosmetic-studio,
.page-id-24563 .miko-profile-right,
.page-id-24563 .miko-profile-right>section{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-inline:0!important;
}
.page-id-24563 .miko-profile-card,
.page-id-24563 .miko-profile-right>section{
  padding:var(--mpf-pad)!important;
  border-radius:var(--mpf-radius)!important;
}

/* Personal profile card */
.page-id-24563 .miko-profile-personal,
.page-id-24563 .miko-profile-form{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.page-id-24563 .miko-profile-card-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(120px,280px)!important;
  align-items:center!important;
  gap:var(--mpf-gap)!important;
  width:100%!important;
  min-width:0!important;
  margin-bottom:clamp(14px,1.5vw,22px)!important;
}
.page-id-24563 .miko-profile-card-head>div{min-width:0!important}
.page-id-24563 .miko-completion{
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
}

/* Avatar/Cover management cards */
.page-id-24563 .miko-upload-row--profile{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:var(--mpf-gap)!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 clamp(16px,1.6vw,24px)!important;
}
.page-id-24563 .miko-profile-avatar-gate{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:150px!important;
  padding:clamp(14px,1.5vw,22px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:7px!important;
  border-radius:16px!important;
}
.page-id-24563 .miko-profile-avatar-gate>a{
  margin-top:auto!important;
  width:auto!important;
  max-width:100%!important;
}

/* Fluid form */
.page-id-24563 .miko-profile-form .miko-form-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(12px,1.2vw,18px)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.page-id-24563 .miko-profile-form .miko-form-grid>label,
.page-id-24563 .miko-profile-form .miko-form-grid>fieldset{
  display:grid!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
.page-id-24563 .miko-profile-form .miko-form-grid>.wide{
  grid-column:1/-1!important;
}
.page-id-24563 .miko-profile-form input[type="text"],
.page-id-24563 .miko-profile-form input[type="email"],
.page-id-24563 .miko-profile-form input[type="url"],
.page-id-24563 .miko-profile-form input[type="password"],
.page-id-24563 .miko-profile-form select{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:44px!important;
  padding:10px 12px!important;
  border-radius:11px!important;
}
.page-id-24563 .miko-profile-form textarea{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:120px!important;
  padding:11px 12px!important;
  border-radius:11px!important;
  resize:vertical!important;
}
.page-id-24563 .miko-profile-form label{
  min-width:0!important;
}
.page-id-24563 .miko-profile-form label>span:first-child,
.page-id-24563 .miko-profile-form label{
  overflow-wrap:anywhere!important;
}

/* Interest chips wrap naturally across any screen width */
.page-id-24563 .miko-interest-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
.page-id-24563 .miko-interest-chips label{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
.page-id-24563 .miko-interest-chips label span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  white-space:normal!important;
  text-align:center!important;
}

/* Switch rows and badge picker fully fluid */
.page-id-24563 .miko-profile-form .miko-switch,
.page-id-24563 .miko-profile-form .miko-switch.wide{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.page-id-24563 .miko-profile-form .miko-badge-picker{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-top:clamp(14px,1.4vw,20px)!important;
  padding:clamp(12px,1.2vw,18px)!important;
}
.page-id-24563 .miko-profile-form .miko-badge-picker>label{
  margin:5px 8px 5px 0!important;
  max-width:100%!important;
}

/* Submit fills appropriately without becoming comically wide on desktop */
.page-id-24563 .miko-profile-form>.miko-primary-btn{
  width:min(100%,260px)!important;
  min-width:180px!important;
  min-height:44px!important;
  margin-top:clamp(14px,1.4vw,20px)!important;
}

/* Profile Studio fully fluid */
.page-id-24563 .miko-cosmetic-studio{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:clamp(14px,1.7vw,26px)!important;
}
.page-id-24563 .miko-cosmetic-layout{
  grid-template-columns:clamp(230px,22vw,320px) minmax(0,1fr)!important;
  gap:var(--mpf-gap)!important;
}
.page-id-24563 .miko-cosmetic-main,
.page-id-24563 .miko-cosmetic-showcase{
  min-width:0!important;
  max-width:none!important;
}
.page-id-24563 .miko-cosmetic-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))!important;
  gap:var(--mpf-gap)!important;
  width:100%!important;
  min-width:0!important;
}
.page-id-24563 .miko-cosmetic-nft{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* PRO / point / reward grids adapt to width */
.page-id-24563 .miko-master-pro-packages .miko-master-package-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:var(--mpf-gap)!important;
}
.page-id-24563 #points .miko-point-cards,
.page-id-24563 .miko-profile-stats{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:var(--mpf-gap)!important;
}
.page-id-24563 #settings .miko-account-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:var(--mpf-gap)!important;
}
.page-id-24563 #settings .miko-account-grid>*{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* Medium desktop / tablet */
@media(max-width:1180px){
  .page-id-24563 .miko-profile-app{
    grid-template-columns:170px minmax(0,1fr)!important;
  }
  .page-id-24563 .miko-master-pro-packages .miko-master-package-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .page-id-24563 #points .miko-point-cards,
  .page-id-24563 .miko-profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .page-id-24563 .miko-cosmetic-layout{
    grid-template-columns:230px minmax(0,1fr)!important;
  }
}

/* Tablet: navigation becomes horizontal and content uses full width */
@media(max-width:880px){
  .page-id-24563 .miko-basic-shell{
    width:calc(100% - 16px)!important;
  }
  .page-id-24563 .miko-profile-app{
    display:block!important;
    width:100%!important;
  }
  .page-id-24563 .miko-profile-app>.miko-profile-nav{
    position:static!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 var(--mpf-gap)!important;
    padding:8px!important;
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin!important;
  }
  .page-id-24563 .miko-profile-nav-title,
  .page-id-24563 .miko-profile-help{display:none!important}
  .page-id-24563 .miko-profile-nav>a{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
  }
  .page-id-24563 .miko-cosmetic-layout{
    grid-template-columns:1fr!important;
  }
  .page-id-24563 .miko-cosmetic-showcase{
    position:relative!important;
    top:auto!important;
    width:100%!important;
  }
}

/* Mobile */
@media(max-width:760px){
  .page-id-24563 .miko-profile-card,
  .page-id-24563 .miko-profile-right>section{
    padding:clamp(12px,3vw,16px)!important;
  }
  .page-id-24563 .miko-profile-card-head{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .page-id-24563 .miko-upload-row--profile{
    grid-template-columns:1fr!important;
  }
  .page-id-24563 .miko-profile-avatar-gate{
    min-height:0!important;
  }
  .page-id-24563 .miko-profile-avatar-gate>a{
    width:100%!important;
  }
  .page-id-24563 .miko-profile-form .miko-form-grid,
  .page-id-24563 #settings .miko-account-grid{
    grid-template-columns:1fr!important;
  }
  .page-id-24563 .miko-profile-form .miko-form-grid>.wide,
  .page-id-24563 .miko-profile-form .miko-switch,
  .page-id-24563 .miko-profile-form .miko-switch.wide{
    grid-column:1!important;
  }
  .page-id-24563 .miko-profile-form>.miko-primary-btn{
    width:100%!important;
    min-width:0!important;
  }
  .page-id-24563 .miko-cosmetic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* 430 / 390 */
@media(max-width:430px){
  .page-id-24563 .miko-basic-shell{
    width:100%!important;
    padding-inline:8px!important;
  }
  .page-id-24563 .miko-profile-main{
    gap:10px!important;
  }
  .page-id-24563 .miko-profile-card,
  .page-id-24563 .miko-master-pro-packages,
  .page-id-24563 .miko-cosmetic-studio,
  .page-id-24563 .miko-profile-right>section{
    border-radius:14px!important;
  }
  .page-id-24563 .miko-master-pro-packages .miko-master-package-grid,
  .page-id-24563 #points .miko-point-cards,
  .page-id-24563 .miko-profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .page-id-24563 .miko-profile-form input[type="text"],
  .page-id-24563 .miko-profile-form input[type="email"],
  .page-id-24563 .miko-profile-form input[type="url"],
  .page-id-24563 .miko-profile-form input[type="password"],
  .page-id-24563 .miko-profile-form select{
    min-height:42px!important;
  }
  .page-id-24563 .miko-interest-chips{
    gap:6px!important;
  }
  .page-id-24563 .miko-interest-chips label span{
    min-height:32px!important;
    padding:6px 9px!important;
    font-size:9px!important;
  }
}
@media(max-width:390px){
  .page-id-24563 .miko-cosmetic-grid{
    grid-template-columns:1fr!important;
  }
}

/* 360: everything single-column where squeeze could occur */
@media(max-width:360px){
  .page-id-24563 .miko-master-pro-packages .miko-master-package-grid,
  .page-id-24563 #points .miko-point-cards,
  .page-id-24563 .miko-profile-stats{
    grid-template-columns:1fr!important;
  }
  .page-id-24563 .miko-profile-form .miko-badge-picker>label{
    display:flex!important;
    width:100%!important;
    margin:4px 0!important;
  }
}

/* Safety against accidental horizontal overflow */
.page-id-24563 .miko-profile-main img,
.page-id-24563 .miko-profile-main video,
.page-id-24563 .miko-profile-main iframe{
  max-width:100%!important;
}
.page-id-24563 .miko-profile-main input,
.page-id-24563 .miko-profile-main textarea,
.page-id-24563 .miko-profile-main select,
.page-id-24563 .miko-profile-main button,
.page-id-24563 .miko-profile-main a{
  box-sizing:border-box!important;
}
