/* Control ANDRIK v55.00l — compact monitor chart, unified comment archive header,
   non-empty months only, and repaired Lyrics landscape header. */

/* 1) ANDRIK Monitor: the graph must hug its SVG and never leave a tall empty cavity. */
.observability-page .uptime-card{
  display:block!important;
  height:auto!important;
  min-height:0!important;
}
.observability-page .uptime-chart-shell{
  display:block!important;
  flex:none!important;
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
.observability-page #andrikMonitorChart{
  display:block!important;
  width:100%!important;
  height:clamp(176px,32vw,238px)!important;
  min-height:0!important;
  max-height:238px!important;
  overflow:hidden!important;
}
.observability-page #andrikMonitorChart>svg,
.observability-page .uptime-chart-shell svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:238px!important;
  object-fit:fill!important;
}
.observability-page .uptime-empty-chart{
  min-height:176px!important;
  height:100%!important;
}
.observability-page .uptime-legend{
  position:static!important;
  min-height:0!important;
  margin:0!important;
  padding:10px 14px 12px!important;
  align-content:start!important;
}
@media (orientation:portrait) and (max-width:760px){
  .observability-page .uptime-range-tabs{
    margin:12px 0!important;
    gap:7px!important;
  }
  .observability-page .uptime-range-tabs .btn{
    min-height:48px!important;
  }
  .observability-page #andrikMonitorChart{
    height:clamp(168px,43vw,205px)!important;
    max-height:205px!important;
  }
  .observability-page #andrikMonitorChart>svg,
  .observability-page .uptime-chart-shell svg{
    max-height:205px!important;
  }
  .observability-page .uptime-legend{
    gap:9px 13px!important;
    font-size:.76rem!important;
  }
}

/* 2) Comment collection: one common ANDRIK top bar in portrait and landscape. */
.comment-collection-page .collection-topbar{
  position:relative!important;
  width:100%!important;
  height:126px!important;
  min-height:126px!important;
  padding:0 clamp(14px,3.5vw,28px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(132,201,230,.15)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,255,124,.17),transparent 25%),
    linear-gradient(90deg,#02070b,#061a12 50%,#02070b)!important;
}
.comment-collection-page .collection-logo{
  grid-column:2!important;
  width:92px!important;
  height:92px!important;
  border-radius:50%!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  background:#010807!important;
  box-shadow:0 0 30px rgba(0,255,124,.22)!important;
  text-decoration:none!important;
}
.comment-collection-page .collection-logo img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:50%!important;
  clip-path:circle(49% at 50% 50%)!important;
  filter:drop-shadow(0 0 18px rgba(0,255,124,.42))!important;
}
.comment-collection-page .collection-nav{
  min-width:0!important;
  min-height:48px!important;
  max-width:170px!important;
  padding:0 17px!important;
  border:1px solid rgba(139,210,238,.22)!important;
  border-radius:999px!important;
  background:rgba(7,22,31,.86)!important;
  color:#dff5ff!important;
  text-decoration:none!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  backdrop-filter:blur(12px)!important;
}
.comment-collection-page .collection-nav-back{grid-column:1!important;justify-self:start!important}
.comment-collection-page .collection-nav-map{grid-column:3!important;justify-self:end!important}
.comment-collection-page main{
  padding-top:22px!important;
}
.comment-collection-page .hero{
  max-width:980px!important;
  margin:0 auto!important;
}
.comment-collection-page .hero h1{
  max-width:920px!important;
  margin:8px auto 8px!important;
  font-size:clamp(2.35rem,7vw,4.55rem)!important;
  line-height:.94!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
  text-wrap:balance!important;
  overflow-wrap:anywhere!important;
}
.comment-collection-page .hero p{
  max-width:760px!important;
  margin-inline:auto!important;
  text-align:center!important;
  text-wrap:balance!important;
}
.comment-collection-page .status{
  max-width:760px!important;
  margin-top:18px!important;
}
.comment-collection-page .months.is-single-month{
  grid-template-columns:minmax(0,420px)!important;
  justify-content:center!important;
}
.comment-collection-page .months.is-empty-months{
  display:block!important;
}
.comment-collection-page .month-empty{
  padding:30px 18px!important;
  border:1px dashed rgba(133,201,228,.20)!important;
  border-radius:22px!important;
  color:#8ea8b5!important;
  text-align:center!important;
}
@media (orientation:landscape){
  .comment-collection-page .collection-topbar{
    height:88px!important;
    min-height:88px!important;
    grid-template-columns:minmax(180px,1fr) 72px minmax(180px,1fr)!important;
    padding-inline:24px!important;
  }
  .comment-collection-page .collection-logo{
    width:70px!important;
    height:70px!important;
  }
  .comment-collection-page .collection-nav{
    min-height:44px!important;
    max-width:190px!important;
    font-size:.94rem!important;
  }
  .comment-collection-page main{
    padding-top:14px!important;
  }
  .comment-collection-page .hero .eyeline{
    font-size:.72rem!important;
    letter-spacing:.28em!important;
  }
  .comment-collection-page .hero h1{
    max-width:1100px!important;
    margin:5px auto 5px!important;
    font-size:clamp(2.15rem,4.8vw,3.65rem)!important;
    line-height:.95!important;
    white-space:normal!important;
  }
  .comment-collection-page .hero p{
    font-size:.88rem!important;
    line-height:1.35!important;
  }
  .comment-collection-page .status{
    min-height:48px!important;
    margin-top:12px!important;
  }
  .comment-collection-page .status span{
    padding:9px 12px!important;
  }
  .comment-collection-page .card{
    margin-top:16px!important;
  }
}
@media (max-width:430px){
  .comment-collection-page .collection-topbar{
    grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)!important;
    gap:8px!important;
    padding-inline:10px!important;
  }
  .comment-collection-page .collection-logo{
    width:78px!important;
    height:78px!important;
  }
  .comment-collection-page .collection-nav{
    min-height:44px!important;
    padding-inline:11px!important;
    font-size:.80rem!important;
  }
  .comment-collection-page .hero h1{
    font-size:clamp(2.15rem,12.5vw,3rem)!important;
  }
}

/* 3) Lyrics: lock the landscape header to the same centered Control geometry. */
@media (orientation:landscape){
  html:has(body.lyrics-admin-page),
  body.lyrics-admin-page{
    overflow-x:hidden!important;
  }
  .lyrics-admin-page .control-detail-topbar{
    position:relative!important;
    height:88px!important;
    min-height:88px!important;
    max-height:88px!important;
    overflow:hidden!important;
    border-bottom:1px solid rgba(132,201,230,.15)!important;
    background:
      radial-gradient(circle at 50% 50%,rgba(0,255,124,.16),transparent 24%),
      linear-gradient(90deg,#02070b,#061a12 50%,#02070b)!important;
  }
  .lyrics-admin-page .control-detail-topbar::before,
  .lyrics-admin-page .control-detail-topbar::after{
    display:none!important;
    background-image:none!important;
  }
  .lyrics-admin-page .control-detail-topbar .nav-shell{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:88px!important;
    min-height:88px!important;
    padding:0 22px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .lyrics-admin-page .control-detail-topbar .control-center-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:72px!important;
    height:72px!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    overflow:hidden!important;
    z-index:3!important;
  }
  .lyrics-admin-page .control-detail-topbar .control-center-logo img{
    width:68px!important;
    height:68px!important;
    max-width:68px!important;
    max-height:68px!important;
    object-fit:cover!important;
    border-radius:50%!important;
    clip-path:circle(49% at 50% 50%)!important;
  }
  .lyrics-admin-page .control-detail-topbar .control-detail-nav{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    z-index:2!important;
  }
  .lyrics-admin-page .control-detail-topbar .control-detail-nav a,
  .lyrics-admin-page .control-detail-topbar .control-detail-current{
    min-height:42px!important;
    max-width:210px!important;
    padding:0 16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(139,210,238,.20)!important;
    border-radius:999px!important;
    background:rgba(7,22,31,.82)!important;
    color:#dff5ff!important;
    font-size:.88rem!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  .lyrics-admin-page .admin-main{
    padding-top:0!important;
    overflow-x:hidden!important;
  }
  .lyrics-admin-page .admin-main>.wrap{
    max-width:1180px!important;
    padding-inline:clamp(16px,3vw,34px)!important;
  }
  .lyrics-admin-page .admin-header.control-header{
    max-width:1040px!important;
    margin:0 auto!important;
    padding:14px 18px 16px!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  .lyrics-admin-page .admin-header.control-header .eyeline{
    font-size:clamp(.68rem,1.25vw,.92rem)!important;
    letter-spacing:.24em!important;
  }
  .lyrics-admin-page .admin-header.control-header h1{
    max-width:100%!important;
    margin:5px auto 7px!important;
    font-size:clamp(2.15rem,5vw,3.7rem)!important;
    line-height:.94!important;
    letter-spacing:-.025em!important;
    white-space:normal!important;
    text-align:center!important;
    text-wrap:balance!important;
    overflow-wrap:anywhere!important;
  }
  .lyrics-admin-page .admin-header.control-header p{
    max-width:920px!important;
    margin:0 auto!important;
    padding:0!important;
    font-size:clamp(.76rem,1.25vw,.94rem)!important;
    line-height:1.42!important;
    text-align:center!important;
    text-wrap:balance!important;
  }
  .lyrics-admin-page .admin-auth-strip{
    margin-top:10px!important;
  }
}