/* MiKO Profile Centered Card Layout v22 — approved visual direction 2026-09-26
   Goal: centered responsive profile, larger cover, rounded rectangular content cards. */

body.page-id-24563{
  --mp22-bg:#f5f9fd;
  --mp22-card:#ffffff;
  --mp22-line:#dbe8f5;
  --mp22-line-strong:#c8ddf1;
  --mp22-blue:#1477e8;
  --mp22-blue-deep:#0a5fc8;
  --mp22-ink:#153a63;
  --mp22-muted:#6d839a;
  --mp22-radius:22px;
  background:linear-gradient(180deg,#f8fbff 0%,#f4f8fc 46%,#eef5fb 100%)!important;
}
body.page-id-24563 .miko-basic-page{
  overflow-x:clip!important;
  background:transparent!important;
}
body.page-id-24563 .miko-basic-shell{
  width:min(1180px,calc(100% - 36px))!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:20px 0 72px!important;
  overflow:visible!important;
}
body.page-id-24563 .miko-basic-card,
body.page-id-24563 .miko-basic-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
body.page-id-24563 .mp14-shell{
  width:100%!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:0 auto!important;
  gap:16px!important;
}

/* Breadcrumb / share */
body.page-id-24563 .mp14-breadcrumb{
  min-height:50px!important;
  padding:8px 12px!important;
  border:1px solid var(--mp22-line)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 8px 24px rgba(22,67,108,.055)!important;
  backdrop-filter:blur(10px)!important;
  font-size:12px!important;
}
body.page-id-24563 .mp14-breadcrumb button{
  min-height:38px!important;
  border-radius:11px!important;
}

/* Main profile hero */
body.page-id-24563 .mp14-hero{
  width:100%!important;
  overflow:hidden!important;
  border:1px solid var(--mp22-line)!important;
  border-radius:26px!important;
  background:#fff!important;
  box-shadow:0 18px 48px rgba(23,67,108,.10)!important;
}
body.page-id-24563 .mp14-cover{
  height:clamp(290px,23vw,390px)!important;
  min-height:290px!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center 30%!important;
}
body.page-id-24563 .mp14-cover:after{
  background:linear-gradient(180deg,rgba(6,31,59,.02) 42%,rgba(6,31,59,.28) 100%)!important;
}
body.page-id-24563 .mp14-cover>a{
  right:18px!important;
  bottom:18px!important;
  min-height:42px!important;
  padding:9px 14px!important;
  border-radius:12px!important;
  font-size:11px!important;
}
body.page-id-24563 .mp14-hero-body{
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr) 330px!important;
  gap:20px!important;
  align-items:start!important;
  padding:0 22px 22px!important;
  background:#fff!important;
}
body.page-id-24563 .mp14-avatar-wrap{
  width:158px!important;
  height:158px!important;
  margin-top:-72px!important;
}
body.page-id-24563 .mp14-avatar-wrap>.miko-cosmetic-avatar{
  width:158px!important;
  height:158px!important;
}
body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-avatar-img{
  width:136px!important;
  height:136px!important;
  border-width:6px!important;
  box-shadow:0 10px 30px rgba(16,63,106,.18)!important;
}
body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-frame{
  width:158px!important;
  height:158px!important;
}
body.page-id-24563 .mp14-user-info{
  padding-top:18px!important;
}
body.page-id-24563 .mp14-user-info h1{
  font-size:28px!important;
  line-height:1.15!important;
}
body.page-id-24563 .mp14-userline{
  margin-top:6px!important;
  font-size:11px!important;
}
body.page-id-24563 .mp14-profile-status,
body.page-id-24563 .mp14-roles{
  gap:7px!important;
  margin-top:10px!important;
}
body.page-id-24563 .mp14-roles>span:not(.miko-user-badges),
body.page-id-24563 .mp14-roles .miko-writer-role-badge{
  min-height:29px!important;
  padding:5px 10px!important;
  font-size:10px!important;
}
body.page-id-24563 .mp14-user-info>p{
  max-width:650px!important;
  margin-top:10px!important;
  font-size:12px!important;
  line-height:1.65!important;
}
body.page-id-24563 .mp14-meta{
  gap:8px 12px!important;
  margin-top:10px!important;
}
body.page-id-24563 .mp14-meta span,
body.page-id-24563 .mp14-meta a{
  min-height:28px!important;
  padding:5px 8px!important;
  border:1px solid #e0ebf5!important;
  border-radius:10px!important;
  background:#f8fbff!important;
  font-size:10px!important;
}
body.page-id-24563 .mp14-quick-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:12px!important;
}
body.page-id-24563 .mp14-quick-actions>a,
body.page-id-24563 .mp14-quick-actions>button{
  min-height:38px!important;
  padding:8px 12px!important;
  border:1px solid #d2e3f2!important;
  border-radius:11px!important;
  background:#f8fbff!important;
  color:#2b659e!important;
  font-size:10px!important;
  font-weight:900!important;
}
body.page-id-24563 .mp14-quote{
  padding-top:18px!important;
}
body.page-id-24563 .mp14-quote blockquote{
  min-height:112px!important;
  padding:18px!important;
  border:1px solid #e0ebf5!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#f8fbff,#f0f6fc)!important;
  color:#355a7e!important;
  font-size:12px!important;
  line-height:1.65!important;
  box-shadow:none!important;
}
body.page-id-24563 .mp14-quote>div{
  gap:8px!important;
  margin-top:8px!important;
}
body.page-id-24563 .mp14-quote a{
  min-height:40px!important;
  border-radius:11px!important;
  font-size:10px!important;
}

/* Stat cards */
body.page-id-24563 .mp14-stats{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
}
body.page-id-24563 .mp14-stats article{
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:10px!important;
  min-height:82px!important;
  padding:12px!important;
  border:1px solid var(--mp22-line)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(18,59,98,.055)!important;
}
body.page-id-24563 .mp14-stats article>i{
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
}
body.page-id-24563 .mp14-stats b{font-size:20px!important}
body.page-id-24563 .mp14-stats span{font-size:9px!important}
body.page-id-24563 .mp14-stats small{font-size:8px!important}

/* Tabs */
body.page-id-24563 .mp14-tabs{
  padding:8px!important;
  gap:6px!important;
  border:1px solid var(--mp22-line)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 8px 22px rgba(18,59,98,.04)!important;
}
body.page-id-24563 .mp14-tabs button{
  min-height:44px!important;
  border-radius:11px!important;
  font-size:10px!important;
}

/* Rounded rectangular cards */
body.page-id-24563 .mp14-dashboard{
  grid-template-columns:minmax(0,1.42fr) minmax(330px,.9fr)!important;
  gap:16px!important;
}
body.page-id-24563 .mp14-left,
body.page-id-24563 .mp14-right{
  gap:16px!important;
}
body.page-id-24563 .mp14-card{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:20px!important;
  border:1px solid var(--mp22-line)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(18,59,98,.06)!important;
  overflow:hidden!important;
}
body.page-id-24563 .mp14-card-head{
  gap:14px!important;
  margin-bottom:16px!important;
}
body.page-id-24563 .mp14-card-head small{
  font-size:8px!important;
  letter-spacing:.14em!important;
}
body.page-id-24563 .mp14-card-head h2{
  margin-top:3px!important;
  font-size:19px!important;
  line-height:1.25!important;
}
body.page-id-24563 .mp14-card-head p{
  margin-top:5px!important;
  font-size:10px!important;
  line-height:1.5!important;
}
body.page-id-24563 .mp14-card-head>a,
body.page-id-24563 .mp14-card-head>button{
  min-height:34px!important;
  padding:7px 11px!important;
  border:1px solid #d2e3f2!important;
  border-radius:10px!important;
  background:#f8fbff!important;
  color:#176fd0!important;
  font-size:9.5px!important;
  text-decoration:none!important;
}
body.page-id-24563 .mp14-empty{
  min-height:100px!important;
  padding:22px!important;
  border-radius:14px!important;
  font-size:10px!important;
}

/* NFT section: keep three cards neat inside one rounded section */
body.page-id-24563 #nft.mp14-card{
  padding:20px!important;
  border-radius:22px!important;
}
body.page-id-24563 #nft .mp14-nft-grid{
  gap:12px!important;
}
body.page-id-24563 #nft .mp14-nft-grid>article{
  border-radius:17px!important;
  padding:10px!important;
}
body.page-id-24563 #nft .mp14-nft-copy>b{
  font-size:13px!important;
}
body.page-id-24563 #nft .mp14-nft-copy>small,
body.page-id-24563 #nft .mp14-nft-copy>em{
  font-size:9px!important;
}

/* Lists / wallet / recent activity */
body.page-id-24563 .mp14-mission-list{gap:9px!important}
body.page-id-24563 .mp14-mission-list article{
  min-height:54px!important;
  padding:10px!important;
  border-radius:12px!important;
}
body.page-id-24563 .mp14-mission-list b{font-size:10px!important}
body.page-id-24563 .mp14-mission-list small{font-size:8px!important}
body.page-id-24563 .mp14-timeline article{
  min-height:42px!important;
}
body.page-id-24563 .mp14-saved-list article{
  border-radius:12px!important;
}
body.page-id-24563 .mp14-reward-cta{
  border-radius:13px!important;
}

/* Extra/expanded panels retain the same centered card language */
body.page-id-24563 .mp14-extended{
  gap:16px!important;
}
body.page-id-24563 .mp14-overview-tools{
  margin-top:0!important;
}
body.page-id-24563 .mp14-more-btn{
  width:100%!important;
  min-height:52px!important;
  border:1px solid var(--mp22-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(18,59,98,.045)!important;
}

/* Dark mode remains legible */
body.page-id-24563.options_dark_skin,
.options_dark_skin body.page-id-24563{
  --mp22-card:#102a42;
  --mp22-line:#294962;
  --mp22-ink:#eef7ff;
  --mp22-muted:#afc3d6;
}
.options_dark_skin body.page-id-24563 .mp14-card,
body.page-id-24563.options_dark_skin .mp14-card,
.options_dark_skin body.page-id-24563 .mp14-hero,
body.page-id-24563.options_dark_skin .mp14-hero,
.options_dark_skin body.page-id-24563 .mp14-stats article,
body.page-id-24563.options_dark_skin .mp14-stats article{
  background:#102a42!important;
  border-color:#294962!important;
}

/* Tablet */
@media(max-width:1100px){
  body.page-id-24563 .miko-basic-shell{
    width:min(1000px,calc(100% - 28px))!important;
  }
  body.page-id-24563 .mp14-shell{max-width:1000px!important}
  body.page-id-24563 .mp14-cover{
    height:clamp(270px,30vw,330px)!important;
    min-height:270px!important;
  }
  body.page-id-24563 .mp14-hero-body{
    grid-template-columns:150px minmax(0,1fr) 285px!important;
    gap:16px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap,
  body.page-id-24563 .mp14-avatar-wrap>.miko-cosmetic-avatar,
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-frame{
    width:142px!important;
    height:142px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-avatar-img{
    width:122px!important;
    height:122px!important;
  }
  body.page-id-24563 .mp14-dashboard{
    grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr)!important;
  }
}

/* Small tablet */
@media(max-width:900px){
  body.page-id-24563 .miko-basic-shell{
    width:calc(100% - 24px)!important;
    max-width:820px!important;
  }
  body.page-id-24563 .mp14-shell{max-width:820px!important}
  body.page-id-24563 .mp14-cover{
    height:260px!important;
    min-height:260px!important;
  }
  body.page-id-24563 .mp14-hero-body{
    grid-template-columns:132px minmax(0,1fr)!important;
    gap:14px!important;
    padding:0 18px 18px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap,
  body.page-id-24563 .mp14-avatar-wrap>.miko-cosmetic-avatar,
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-frame{
    width:126px!important;
    height:126px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap{margin-top:-56px!important}
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-avatar-img{
    width:108px!important;
    height:108px!important;
  }
  body.page-id-24563 .mp14-quote{
    grid-column:1/-1!important;
    padding-top:0!important;
  }
  body.page-id-24563 .mp14-quote blockquote{min-height:76px!important}
  body.page-id-24563 .mp14-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.page-id-24563 .mp14-dashboard{
    grid-template-columns:1fr!important;
  }
  body.page-id-24563 .mp14-dashboard>.mp14-left,
  body.page-id-24563 .mp14-dashboard>.mp14-right{
    grid-column:1!important;
    grid-row:auto!important;
  }
  body.page-id-24563 .mp14-tabs{
    display:flex!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
  }
  body.page-id-24563 .mp14-tabs::-webkit-scrollbar{display:none!important}
  body.page-id-24563 .mp14-tabs button{
    flex:0 0 auto!important;
    min-width:116px!important;
  }
}

/* Mobile */
@media(max-width:760px){
  body.page-id-24563 .miko-basic-shell{
    width:calc(100% - 18px)!important;
    max-width:none!important;
    padding:10px 0 96px!important;
  }
  body.page-id-24563 .mp14-shell{
    max-width:none!important;
    gap:10px!important;
  }
  body.page-id-24563 .mp14-breadcrumb{display:none!important}
  body.page-id-24563 .mp14-hero{border-radius:20px!important}
  body.page-id-24563 .mp14-cover{
    height:220px!important;
    min-height:220px!important;
    background-position:center 28%!important;
  }
  body.page-id-24563 .mp14-cover>a{
    right:10px!important;
    bottom:10px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:13px!important;
    justify-content:center!important;
  }
  body.page-id-24563 .mp14-cover>a span{display:none!important}
  body.page-id-24563 .mp14-hero-body{
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:10px!important;
    padding:0 12px 14px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap,
  body.page-id-24563 .mp14-avatar-wrap>.miko-cosmetic-avatar,
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-frame{
    width:88px!important;
    height:88px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap{margin-top:-38px!important}
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-avatar-img{
    width:74px!important;
    height:74px!important;
    border-width:4px!important;
  }
  body.page-id-24563 .mp14-user-info{padding-top:9px!important}
  body.page-id-24563 .mp14-user-info h1{font-size:20px!important}
  body.page-id-24563 .mp14-userline{font-size:8.5px!important}
  body.page-id-24563 .mp14-roles>span:not(.miko-user-badges),
  body.page-id-24563 .mp14-roles .miko-writer-role-badge{
    min-height:25px!important;
    padding:4px 8px!important;
    font-size:8px!important;
  }
  body.page-id-24563 .mp14-user-info>p{font-size:9px!important}
  body.page-id-24563 .mp14-quote{grid-column:1/-1!important}
  body.page-id-24563 .mp14-quote blockquote{
    min-height:70px!important;
    padding:13px!important;
    font-size:10px!important;
  }
  body.page-id-24563 .mp14-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.page-id-24563 .mp14-stats article{
    min-height:72px!important;
    padding:9px!important;
    border-radius:14px!important;
  }
  body.page-id-24563 .mp14-stats b{font-size:17px!important}
  body.page-id-24563 .mp14-card{
    padding:14px!important;
    border-radius:18px!important;
  }
  body.page-id-24563 .mp14-card-head{margin-bottom:12px!important}
  body.page-id-24563 .mp14-card-head h2{font-size:17px!important}
  body.page-id-24563 #nft.mp14-card{padding:14px!important}
  body.page-id-24563 #nft .mp14-nft-grid{
    grid-template-columns:1fr!important;
  }
}

/* 430 / 390 / 360 targets */
@media(max-width:430px){
  body.page-id-24563 .miko-basic-shell{width:calc(100% - 12px)!important}
  body.page-id-24563 .mp14-cover{
    height:200px!important;
    min-height:200px!important;
  }
  body.page-id-24563 .mp14-hero-body{
    grid-template-columns:82px minmax(0,1fr)!important;
    padding-inline:10px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap,
  body.page-id-24563 .mp14-avatar-wrap>.miko-cosmetic-avatar,
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-frame{
    width:78px!important;
    height:78px!important;
  }
  body.page-id-24563 .mp14-avatar-wrap{margin-top:-32px!important}
  body.page-id-24563 .mp14-avatar-wrap .miko-cosmetic-avatar-img{
    width:66px!important;
    height:66px!important;
  }
  body.page-id-24563 .mp14-user-info h1{font-size:18px!important}
  body.page-id-24563 .mp14-stats article{
    grid-template-columns:36px minmax(0,1fr)!important;
  }
  body.page-id-24563 .mp14-stats article>i{
    width:34px!important;
    height:34px!important;
  }
}
@media(max-width:390px){
  body.page-id-24563 .mp14-cover{
    height:190px!important;
    min-height:190px!important;
  }
  body.page-id-24563 .mp14-stats article{min-height:68px!important}
}
@media(max-width:360px){
  body.page-id-24563 .miko-basic-shell{width:calc(100% - 10px)!important}
  body.page-id-24563 .mp14-cover{
    height:180px!important;
    min-height:180px!important;
  }
  body.page-id-24563 .mp14-user-info h1{font-size:17px!important}
}