/* MiKO Profile Clean v10 — stable, centered, no side overflow */

/* Remove the generic white page card around the profile page. */
.page-id-24563 .miko-basic-page{background:#f4f8fc!important}
.page-id-24563 .miko-basic-shell{width:min(1460px,calc(100% - 28px))!important;padding:14px 0 54px!important}
.page-id-24563 .miko-basic-breadcrumb,.page-id-24563 .miko-basic-title{display:none!important}
.page-id-24563 .miko-basic-card{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.page-id-24563 .miko-basic-content{margin:0!important;padding:0!important;background:transparent!important;color:inherit!important;font-size:inherit!important;line-height:normal!important;overflow:visible!important}

.miko-profile-app,.miko-profile-app *{box-sizing:border-box!important}
.miko-profile-app{
  width:100%!important;
  max-width:1400px!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:190px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:start!important;
  background:transparent!important;
  overflow:visible!important;
}
.miko-profile-app>*{min-width:0!important;max-width:100%!important}

/* Left navigation stays compact; content occupies one clean center column. */
.miko-profile-app>.miko-profile-nav{
  grid-column:1!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
  position:sticky!important;
  top:18px!important;
  align-self:start!important;
}
.miko-profile-main{
  grid-column:2!important;
  grid-row:auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
}

/* Kill all legacy grid coordinates/orders that previously pushed cards sideways. */
.miko-profile-main>*{
  flex:0 0 auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  order:initial!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  position:relative!important;
  float:none!important;
  transform:none!important;
}

/* Every section is a contained card in the middle column. */
.miko-profile-hero,
.miko-profile-card,
.miko-master-pro-packages,
.miko-profile-right,
.miko-profile-right>section{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.miko-profile-hero,
.miko-profile-card,
.miko-master-pro-packages,
.miko-profile-right>section{
  overflow:hidden!important;
}

/* Additional member widgets are no longer a right rail. */
.miko-profile-right{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.miko-profile-right>section{
  display:block!important;
  grid-column:auto!important;
  grid-row:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:18px!important;
  position:static!important;
  float:none!important;
  transform:none!important;
  border:1px solid var(--mp5-line,#dce7f2)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(13,48,86,.06)!important;
}
.miko-profile-right>.miko-pro-mini{
  background:linear-gradient(135deg,#fff9e8 0%,#fff2c9 100%)!important;
  border-color:#efd27c!important;
}

/* Hero must end cleanly; no white strip extending below it. */
.miko-profile-hero{background:#fff!important}
.miko-profile-cover{width:100%!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.miko-profile-identity,.miko-profile-stats{background:#fff!important}

/* Form: contained and aligned. */
.miko-profile-form,
.miko-profile-form .miko-form-grid,
.miko-profile-form .miko-upload-row,
.miko-profile-form .miko-badge-picker{width:100%!important;min-width:0!important;max-width:100%!important}
.miko-profile-form input,
.miko-profile-form textarea,
.miko-profile-form select,
.miko-profile-form button{max-width:100%!important}

/* Points */
#points .miko-point-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
}
#points .miko-point-cards>div{min-width:0!important}

/* Check-in */
#missions .miko-profile-checkin{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
}

/* Calendar */
#calendar .miko-calendar-grid{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
}
#calendar .miko-calendar-grid>*{min-width:0!important}

/* Reading history */
#reading .miko-reading-history{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
}
#reading .miko-reading-history article{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:9px!important;
  overflow:hidden!important;
}
#reading .miko-reading-history article>*{min-width:0!important;max-width:100%!important}
#reading .miko-reading-history .thumb,
#reading .miko-reading-history .thumb img{width:58px!important;height:44px!important;min-width:58px!important;object-fit:cover!important;border-radius:7px!important}

/* Lists/grids must wrap inside their card. */
#history .miko-history-list,
#activity .miko-profile-activity-list,
#video-missions .miko-reading-history,
#rewards-store .miko-reward-store-grid,
#pro-history .miko-pro-detail-grid{width:100%!important;min-width:0!important;max-width:100%!important}
#history .miko-history-list>*,
#activity .miko-profile-activity-list>*,
#video-missions .miko-reading-history>*,
#rewards-store .miko-reward-store-grid>*{min-width:0!important;max-width:100%!important;overflow:hidden!important}

/* PRO packages — featured directly under the profile hero */
.miko-profile-hero + .miko-master-pro-packages{margin-top:0!important}
.miko-master-pro-packages{
  position:relative!important;
  padding:18px 20px 20px!important;
  border:1px solid #edca6b!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fffdf6 0%,#fff9e8 58%,#fffdf9 100%)!important;
  box-shadow:0 10px 28px rgba(165,113,10,.08)!important;
}
.miko-master-pro-packages:after{
  content:"PRO"!important;
  position:absolute!important;
  right:18px!important;
  top:-9px!important;
  color:rgba(215,163,30,.09)!important;
  font-size:72px!important;
  line-height:1!important;
  font-weight:950!important;
  pointer-events:none!important;
}
.miko-master-pro-packages .miko-master-section-title{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  margin:0!important;
}
.miko-master-pro-packages .miko-master-section-title>span{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:12px!important;
  background:#fff1c5!important;
  color:#a97400!important;
}
.miko-master-pro-packages .miko-master-section-title>span svg{width:22px!important;height:22px!important}
.miko-master-pro-packages .miko-master-section-title h3{
  margin:0!important;
  color:#17324f!important;
  font-size:19px!important;
  line-height:1.2!important;
  font-weight:900!important;
}
.miko-master-pro-packages .miko-master-section-title p{
  margin:3px 0 0!important;
  color:#8d742f!important;
  font-size:10px!important;
  line-height:1.45!important;
}
.miko-master-pro-packages .miko-master-package-grid{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-top:15px!important;
}
.miko-master-pro-packages .miko-master-package-grid article{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:150px!important;
  margin:0!important;
  padding:13px 13px 12px!important;
  border:1px solid #eadba9!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(97,70,15,.05)!important;
  overflow:hidden!important;
}
.miko-master-pro-packages .miko-master-package-grid article:last-child{border-color:#e6ad20!important;box-shadow:0 7px 20px rgba(202,145,13,.12)!important}
.miko-master-pro-packages .miko-master-package-grid small{
  color:#ac7a06!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  white-space:nowrap!important;
}
.miko-master-pro-packages .miko-master-package-grid h4{
  margin:7px 0 3px!important;
  color:#17324f!important;
  font-size:14px!important;
  line-height:1.25!important;
  font-weight:900!important;
  white-space:nowrap!important;
  word-break:normal!important;
}
.miko-master-pro-packages .miko-master-package-grid b{
  display:block!important;
  margin:2px 0 10px!important;
  color:#c08400!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:900!important;
  white-space:normal!important;
  word-break:normal!important;
}
.miko-master-pro-packages .miko-master-package-grid button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:36px!important;
  margin-top:auto!important;
  padding:8px 7px!important;
  border:0!important;
  border-radius:9px!important;
  background:#e9eef5!important;
  color:#7d8a99!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
.miko-master-pro-packages .miko-master-package-grid button:not(:disabled){background:#0d6efd!important;color:#fff!important;cursor:pointer!important}
.miko-master-pro-packages .miko-master-package-grid h4,
.miko-master-pro-packages .miko-master-package-grid b,
.miko-master-pro-packages .miko-master-package-grid small,
.miko-master-pro-packages .miko-master-package-grid button{max-width:100%!important;overflow-wrap:normal!important}

/* Account settings */
#settings .miko-account-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
}
#settings .miko-account-grid>*{min-width:0!important;max-width:100%!important}

/* Desktop widths: everything remains inside the middle column. */
@media(max-width:1100px){
  .miko-profile-app{grid-template-columns:170px minmax(0,1fr)!important;gap:14px!important}
  #points .miko-point-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #reading .miko-reading-history{grid-template-columns:1fr!important}
  .miko-master-pro-packages .miko-master-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:760px){
  .page-id-24563 .miko-basic-shell{width:100%!important;padding:10px!important}
  .miko-profile-app{display:block!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}
  .miko-profile-app>.miko-profile-nav{
    position:static!important;
    width:100%!important;
    margin:0 0 12px!important;
    padding:8px!important;
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  .miko-profile-nav-title,.miko-profile-help{display:none!important}
  .miko-profile-nav>a{flex:0 0 auto!important;min-height:38px!important;margin:0!important;padding:7px 9px!important}
  .miko-profile-main{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important;min-width:0!important;overflow:hidden!important}
  .miko-profile-main>*{width:100%!important;min-width:0!important;max-width:100%!important}
  .miko-profile-right{gap:12px!important}
  .miko-profile-right>section{padding:14px!important}
  #points .miko-point-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #missions .miko-profile-checkin{grid-template-columns:1fr!important}
  #missions .miko-profile-checkin button{width:100%!important}
  #reading .miko-reading-history{grid-template-columns:1fr!important}
  .miko-master-pro-packages .miko-master-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #settings .miko-account-grid{grid-template-columns:1fr!important}
  .miko-profile-identity{grid-template-columns:auto minmax(0,1fr)!important;padding:0 14px 14px!important}
  .miko-profile-identity>a{grid-column:1/-1!important;width:100%!important}
  .miko-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:390px){
  .miko-master-pro-packages .miko-master-package-grid{grid-template-columns:1fr!important}
  .miko-profile-cover{height:145px!important}
  .miko-profile-identity>img{width:82px!important;height:82px!important;min-width:82px!important}
}