/* Sierra Hub layout and surface refinement — v1.9.0
   Shared public/admin spacing, edge, grid, and card-body normalization. */
:root{
  --shph-ui-radius-xs:10px;
  --shph-ui-radius-sm:12px;
  --shph-ui-radius-md:16px;
  --shph-ui-radius-lg:20px;
  --shph-ui-radius-xl:24px;
  --shph-ui-space-1:6px;
  --shph-ui-space-2:10px;
  --shph-ui-space-3:14px;
  --shph-ui-space-4:18px;
  --shph-ui-space-5:24px;
  --shph-ui-space-6:32px;
}

/* --------------------------------------------------------------------------
   Public interface
   -------------------------------------------------------------------------- */
.public-page{
  --shph-ui-card-border:var(--public-border,#dfe3e9);
  --shph-ui-card-bg:var(--public-surface,#fff);
  --shph-ui-card-text:var(--public-text,#202631);
  --shph-ui-card-heading:var(--public-heading,#0f141d);
  --shph-ui-card-muted:var(--public-muted,#626b78);
  --shph-ui-card-shadow:var(--public-shadow-sm,0 10px 30px rgba(17,24,39,.065));
  --shph-ui-card-shadow-hover:var(--public-shadow-md,0 22px 58px rgba(17,24,39,.11));
}

.public-page :where(.video-grid,.collections-grid,.playlist-grid,.gallery-grid,.value-grid,.purpose-grid,.faq-grid,.bio-related-grid,.product-grid){
  gap:clamp(16px,2vw,24px)!important;
  align-items:stretch;
}

.public-page :where(.section-heading,.catalog-heading,.karaoke-head-row,.store-toolbar){
  gap:clamp(12px,2vw,22px)!important;
}

.public-page :where(.section-heading,.catalog-heading) > :where(div,p,a,form){min-width:0}
.public-page :where(.section-heading h1,.section-heading h2,.catalog-heading h1,.catalog-heading h2){margin-bottom:0}

/* Video cards: one continuous surface with consistent edge treatment. */
.public-page .video-card{
  display:flex;
  min-width:0;
  min-height:100%;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--shph-ui-card-border)!important;
  border-radius:var(--public-radius-card,var(--shph-ui-radius-lg))!important;
  background:var(--shph-ui-card-bg)!important;
  color:var(--shph-ui-card-text)!important;
  box-shadow:var(--shph-ui-card-shadow)!important;
  isolation:isolate;
}
.public-page .video-card:hover{
  border-color:color-mix(in srgb,var(--shph-primary) 24%,var(--shph-ui-card-border))!important;
  box-shadow:var(--shph-ui-card-shadow-hover)!important;
  transform:none!important;
}
.public-page .video-thumb{
  flex:0 0 auto;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.public-page .video-thumb::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:color-mix(in srgb,var(--shph-ui-card-border) 80%,transparent);
  pointer-events:none;
}
.public-page .video-card-body{
  display:flex;
  min-width:0;
  min-height:172px;
  flex:1 1 auto;
  flex-direction:column;
  padding:clamp(16px,1.6vw,20px)!important;
}
.public-page .video-card-body h3{
  min-height:calc(2 * 1.38em);
  margin:0!important;
  color:var(--shph-ui-card-heading)!important;
  font-size:clamp(.98rem,1.1vw,1.08rem)!important;
  font-weight:820!important;
  line-height:1.38!important;
  letter-spacing:-.018em;
}
.public-page .video-card-body h3 a{
  display:-webkit-box;
  overflow:hidden;
  color:inherit!important;
  text-decoration:none;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.public-page .video-description{
  display:-webkit-box!important;
  min-height:calc(2 * 1.52em);
  margin:8px 0 0!important;
  overflow:hidden!important;
  color:var(--shph-ui-card-muted)!important;
  font-size:.79rem!important;
  line-height:1.52!important;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2!important;
}
.public-page .video-card-meta{
  display:grid!important;
  grid-template-columns:max-content max-content minmax(0,1fr);
  align-items:center;
  gap:8px 12px!important;
  min-width:0;
  margin-top:auto!important;
  padding-top:13px;
  border-top:1px solid color-mix(in srgb,var(--shph-ui-card-border) 82%,transparent);
  color:var(--shph-ui-card-muted)!important;
  font-size:clamp(.64rem,.72vw,.72rem)!important;
  line-height:1.3;
}
.public-page .video-card-meta > span{
  display:inline-flex!important;
  min-width:0;
  align-items:center;
  gap:5px!important;
  white-space:nowrap;
}
.public-page .video-card-meta > .video-published{justify-self:end}
.public-page .video-card-meta .fa{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px;
  border-radius:7px!important;
}
.public-page .video-card-meta .youtube-stat,
.public-page .video-card-meta [data-video-field="published"]{font-variant-numeric:tabular-nums}

/* Dark fixed sections retain a dark card surface even while the site uses day mode. */
.public-page .section-dark .video-card{
  --shph-ui-card-bg:#151c27;
  --shph-ui-card-border:#2b3544;
  --shph-ui-card-text:#dfe6ef;
  --shph-ui-card-heading:#f7f9fc;
  --shph-ui-card-muted:#a3afbd;
  --shph-ui-card-shadow:0 14px 38px rgba(0,0,0,.22);
  --shph-ui-card-shadow-hover:0 20px 52px rgba(0,0,0,.3);
}

/* Normalize other public card families without flattening custom artwork cards. */
.public-page :where(
  .playlist-card,.product-card-premium,.product-purchase-card,.product-gallery-card,
  .cart-items-card,.checkout-step-card,.checkout-summary-card,.order-success-card,
  .live-schedule-card,.live-replay-card,.live-feature-card,.bio-panel,.bio-related-card,
  .release-story,.watch-meta,.track-list,.search-panel,.premium-search,.empty-state,
  .gallery-info-card,.contact-conversion,.faq-grid details,.value-grid article,.purpose-grid article
){
  border-width:1px!important;
  border-style:solid!important;
  border-color:var(--shph-ui-card-border)!important;
  border-radius:var(--public-radius-card,var(--shph-ui-radius-lg))!important;
  box-shadow:var(--shph-ui-card-shadow)!important;
}
.public-page :where(
  .playlist-card,.product-card-premium,.product-gallery-card,.live-replay-card,.bio-related-card
){overflow:hidden}
.public-page :where(
  .playlist-card,.product-card-premium,.live-replay-card,.bio-related-card,.gallery-item
):hover{
  border-color:color-mix(in srgb,var(--shph-primary) 24%,var(--shph-ui-card-border))!important;
  box-shadow:var(--shph-ui-card-shadow-hover)!important;
  transform:none!important;
}
.public-page :where(.playlist-card-body,.product-card-copy,.live-replay-copy){
  padding:clamp(17px,1.8vw,22px)!important;
}
.public-page :where(.card,.empty-state){overflow:hidden}
.public-page .empty-state{padding:clamp(28px,5vw,52px)!important;text-align:center}

/* Stable media edges and clean card joins. */
.public-page :where(.playlist-card-art,.product-card-art,.live-replay-art,.bio-related-art,.gallery-item>img){
  display:block;
  border-radius:0!important;
}
.public-page :where(.product-card-copy,.playlist-card-body){display:flex;min-height:0;flex-direction:column}
.public-page .product-card-premium{display:flex;min-height:100%;flex-direction:column}
.public-page .product-card-copy{flex:1 1 auto}

/* Forms, filters, buttons, and pagination share the same compact geometry. */
.public-page :where(.search-panel,.premium-search,.filter-bar,.store-toolbar){
  padding:clamp(14px,2vw,20px)!important;
}
.public-page :where(.filter-bar,.store-toolbar,.conversion-actions,.hero-actions,.live-actions,.watch-actions){
  gap:10px!important;
}
.public-page :where(.btn,.icon-button,.filter-chip,.page-link,.form-control,.form-select){
  border-radius:var(--shph-ui-radius-sm)!important;
}
.public-page .pagination{gap:6px}
.public-page .page-item .page-link{
  display:grid;
  min-width:40px;
  min-height:40px;
  place-items:center;
  margin:0!important;
  border:1px solid var(--shph-ui-card-border)!important;
  background:var(--shph-ui-card-bg)!important;
  color:var(--shph-ui-card-text)!important;
}
.public-page .page-item.active .page-link{
  border-color:var(--shph-primary)!important;
  background:var(--shph-primary)!important;
  color:#fff!important;
}

/* Prevent edge collisions in Bootstrap rows used by public cards. */
.public-page .row[class*="g-"] > *{min-width:0}
.public-page :where(.product-grid,.live-replay-grid) > *{display:flex}
.public-page :where(.product-grid,.live-replay-grid) > * > article{width:100%}

/* --------------------------------------------------------------------------
   Administration interface
   -------------------------------------------------------------------------- */
.page-wrapper{
  --shph-admin-card-radius:18px;
  --shph-admin-panel-radius:14px;
  --shph-admin-section-gap:18px;
}
.page-wrapper .shph-workspace{
  min-width:0;
}
.page-wrapper .shph-workspace > :where(.row,.card,.alert,section,form) + :where(.row,.card,.alert,section,form){
  margin-top:var(--shph-admin-section-gap);
}
.page-wrapper .shph-workspace > .row{--bs-gutter-x:clamp(14px,1.8vw,24px);--bs-gutter-y:clamp(14px,1.8vw,24px)}
.page-wrapper .shph-workspace .row > *{min-width:0}

.page-wrapper .card{
  overflow:clip;
  border:1px solid var(--shph-border)!important;
  border-radius:var(--shph-admin-card-radius)!important;
  background:var(--shph-surface)!important;
  box-shadow:var(--shph-shadow-sm)!important;
}
.page-wrapper .card-header,
.page-wrapper .card-body,
.page-wrapper .card-footer{min-width:0}
.page-wrapper .card-header{
  padding:clamp(17px,1.6vw,23px)!important;
}
.page-wrapper .card-body{
  padding:clamp(17px,1.7vw,25px)!important;
}
.page-wrapper .card-footer{
  padding:clamp(14px,1.4vw,20px)!important;
}
.page-wrapper .card-header :where(h1,h2,h3,h4,h5,h6,p){overflow-wrap:anywhere}
.page-wrapper .card-header > :where(.d-flex,.shph-toolbar){row-gap:12px!important}

.page-wrapper :where(
  .shph-stat,.shph-quick-action,.music-kpi-card,.music-credit-card,.cloud-status,
  .stem-mode-card,.bpm-process-card,.collection-editor-panel,.provider-secret,
  .music-lrc-source-stat,.stem-file-summary,.stem-download-item,.bpm-selection-summary>div,
  .bpm-history-item,.shph-cloud-browser,.shph-cloud-policy,.shph-cloud-queue
){
  overflow:hidden;
  border:1px solid var(--shph-border)!important;
  border-radius:var(--shph-admin-panel-radius)!important;
}

.page-wrapper .shph-toolbar{
  gap:12px!important;
}
.page-wrapper .shph-toolbar .filters{
  flex:1 1 620px;
  gap:10px!important;
}
.page-wrapper .shph-toolbar .filters > :where(.form-control,.form-select){
  min-width:min(100%,190px)!important;
  flex:1 1 190px;
}
.page-wrapper .shph-toolbar > .btn{flex:0 0 auto}

.page-wrapper .table-responsive{
  margin:0;
  overflow:auto;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.page-wrapper .table{
  margin:0!important;
}
.page-wrapper .table > :not(caption) > * > *{
  padding:13px 15px!important;
}
.page-wrapper .table tbody tr:last-child > *{border-bottom:0!important}
.page-wrapper .table tbody tr{transition:background-color .16s ease}
@media (hover:hover) and (pointer:fine){
  .page-wrapper .table-hover > tbody > tr:hover > *{
    --bs-table-accent-bg:color-mix(in srgb,var(--theme-deafult) 4%,var(--shph-surface))!important;
    background:var(--bs-table-accent-bg)!important;
  }
}

.page-wrapper :where(.form-control,.form-select,.input-group-text,.btn,.dropdown-menu,.modal-content,.alert,.pagination .page-link){
  border-radius:var(--shph-ui-radius-sm)!important;
}
.page-wrapper .input-group > :not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.page-wrapper .input-group > :not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.page-wrapper .btn-group > .btn{min-width:0}
.page-wrapper .pagination{gap:6px}
.page-wrapper .pagination .page-link{
  display:grid;
  min-width:38px;
  min-height:38px;
  place-items:center;
  margin:0!important;
  border:1px solid var(--shph-border)!important;
  background:var(--shph-surface)!important;
  color:var(--shph-text)!important;
}
.page-wrapper .pagination .page-item.active .page-link{
  border-color:var(--theme-deafult)!important;
  background:var(--theme-deafult)!important;
  color:#fff!important;
}

/* Specialized workspaces keep their own layout but inherit clean outer edges. */
.page-wrapper :where(.canvas-shell,.tool-panel,.photo-studio-header,.photo-canvas-card,.photo-inspector,.music-lrc-player-panel,.music-lrc-output-panel){
  border-radius:var(--shph-admin-card-radius)!important;
}
.page-wrapper :where(.shph-dropzone,.shph-file-dropzone,.stem-dropzone,.bpm-dropzone){
  padding:clamp(18px,2.2vw,30px)!important;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media(max-width:1199.98px){
  .public-page .video-card-body{min-height:164px}
  .public-page .video-card-meta{gap:8px 10px!important}
}
@media(max-width:991.98px){
  .public-page .video-card-body{min-height:158px}
  .page-wrapper .shph-toolbar{align-items:stretch!important}
  .page-wrapper .shph-toolbar .filters{flex-basis:100%}
}
@media(max-width:767.98px){
  .public-page .video-card-body{min-height:0;padding:16px!important}
  .public-page .video-card-body h3{min-height:0}
  .public-page .video-description{min-height:0}
  .public-page .video-card-meta{font-size:.7rem!important}
  .page-wrapper{--shph-admin-section-gap:14px}
  .page-wrapper .card-header,.page-wrapper .card-body,.page-wrapper .card-footer{padding:16px!important}
  .page-wrapper .card-header > :where(.d-flex,.shph-toolbar),
  .page-wrapper .card-footer.d-flex{align-items:stretch!important}
  .page-wrapper .card-footer.d-flex > :where(div,.btn){width:100%}
  .page-wrapper .card-footer.d-flex .btn{justify-content:center}
  .page-wrapper .shph-toolbar > .btn{width:100%}
}
@media(max-width:575.98px){
  .public-page .video-card{border-radius:18px!important}
  .public-page .video-card-meta{
    grid-template-columns:max-content minmax(0,1fr);
  }
  .public-page .video-card-meta > :nth-child(2){justify-self:end}
  .public-page .video-card-meta > .video-published{
    grid-column:1/-1;
    justify-self:start;
  }
  .public-page :where(.playlist-card-body,.product-card-copy,.live-replay-copy){padding:16px!important}
  .page-wrapper{--shph-admin-card-radius:16px;--shph-admin-panel-radius:13px}
  .page-wrapper .shph-toolbar .filters{
    display:grid!important;
    grid-template-columns:1fr;
    width:100%;
  }
  .page-wrapper .shph-toolbar .filters > *{width:100%!important;min-width:0!important}
}

@media(prefers-reduced-motion:reduce){
  .public-page .video-card,
  .page-wrapper .table tbody tr{transition:none!important}
}

/* Administration authentication screens. */
.shph-auth-body .shph-auth-shell{padding:clamp(16px,4vw,40px)!important}
.shph-auth-body .shph-auth-card{
  overflow:hidden;
  border:1px solid var(--shph-border,#dfe3e9)!important;
  border-radius:20px!important;
  background:var(--shph-surface,#fff)!important;
  box-shadow:0 22px 64px rgba(17,24,39,.14)!important;
}
.shph-auth-body .shph-auth-card .card-body{padding:clamp(24px,4vw,38px)!important}
.shph-auth-body .shph-auth-brand{gap:12px!important;margin-bottom:clamp(24px,4vw,34px)!important}
.shph-auth-body .shph-auth-heading{margin-bottom:22px!important}
.shph-auth-body .shph-auth-heading h1{margin-bottom:8px!important;line-height:1.08!important;letter-spacing:-.035em}
.shph-auth-body .shph-auth-heading p{margin:0!important;line-height:1.6}
.shph-auth-body :where(.form-control,.btn,.alert,.shph-auth-theme button){border-radius:12px!important}
.shph-auth-body .form-label{margin-bottom:7px!important}
.shph-auth-body .shph-auth-links{gap:10px 14px!important;margin-top:22px!important;padding-top:18px!important}
@media(max-width:575.98px){
  .shph-auth-body .shph-auth-card{border-radius:17px!important}
  .shph-auth-body .shph-auth-card .card-body{padding:22px 18px!important}
  .shph-auth-body .shph-auth-links{align-items:flex-start!important;flex-direction:column!important}
  .shph-auth-body .shph-auth-links > span[aria-hidden="true"]{display:none}
}