/*
 PANTURIA PRO UI V3.8
 Direction: editorial-first, clean hierarchy, consistent rhythm.
 Sora + Inter remain unchanged.
 Brand graphics are restrained: one SG07 rail only in the public music area.
*/

:root{
  --p-navy:#17324D;
  --p-blue:#2E78A6;
  --p-coral:#F06449;
  --p-gold:#F2B544;
  --p-sand:#F4E8D6;
  --p-mist:#DCE7EF;
  --p-ink:#1F2732;
  --p-border:rgba(23,50,77,.14);
  --p-border-soft:rgba(23,50,77,.09);
  --p-shadow:0 10px 30px rgba(23,50,77,.055);
  --p-r8:8px;
  --p-r12:12px;
  --p-r16:16px;
  --p-r20:20px;
  --p-space-1:.375rem;
  --p-space-2:.625rem;
  --p-space-3:.875rem;
  --p-space-4:1.125rem;
  --p-space-5:1.5rem;
  --p-space-6:2rem;
  --p-space-7:2.75rem;
}

/* =========================================================
   PRINCIPLE 1 — ADMIN: FUNCTION FIRST, ALMOST NO DECORATION
   ========================================================= */
.story-radar-admin,
.music-admin-page,
.youtube-admin-page,
.admin-automation-panel,
.section.section-sand:has(.story-admin-heading){
  color:var(--p-ink);
}

.story-admin-heading,
.music-admin-title-row,
.admin-automation-head,
.youtube-radar-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--p-space-6);
  margin:0 0 var(--p-space-6);
}

.story-admin-heading > div:first-child,
.music-admin-title-row > div:first-child,
.admin-automation-head > div:first-child,
.youtube-radar-head > div:first-child{
  min-width:0;
  max-width:760px;
}

.story-admin-heading h1,
.music-admin-title-row h1{
  margin:.4rem 0 .65rem;
  max-width:18ch;
  color:var(--p-navy);
  font-size:clamp(2.45rem,4.7vw,4.25rem);
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.story-admin-heading p,
.music-admin-title-row p,
.admin-automation-head p,
.youtube-radar-head p{
  margin:0;
  max-width:66ch;
  color:#617081;
  line-height:1.65;
}

.story-admin-heading .actions,
.music-admin-title-row .actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:center;
  justify-content:flex-end;
}

/* Cards */
.card,
.admin-tool-card,
.story-radar-health,
.story-radar-candidate,
.youtube-radar-card,
.media-library-card{
  border:1px solid var(--p-border);
  border-radius:var(--p-r16);
  background:#fff;
  box-shadow:var(--p-shadow);
}

.card .card-body{
  padding:1.35rem;
}

.card .card-body > :first-child{margin-top:0}
.card .card-body > :last-child{margin-bottom:0}

.card h2,
.music-admin-grid h2,
.music-admin-section-card h2,
.youtube-admin-page .card h2{
  margin:0 0 1rem;
  color:var(--p-navy);
  font-size:clamp(1.2rem,2vw,1.65rem);
  line-height:1.1;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.card h2 + p,
.card h2 + form,
.card h2 + .form-grid{
  margin-top:0;
}

.card p{
  margin:.55rem 0 0;
  line-height:1.65;
}

.card p + p{
  margin-top:.85rem;
}

/* Grids */
.automation-v3-grid,
.music-admin-status-grid,
.music-admin-grid,
.story-radar-health-grid,
.admin-automation-grid{
  gap:1rem;
}

.automation-v3-grid,
.music-admin-status-grid{
  margin:1rem 0 1.5rem;
}

.music-admin-grid{
  margin:1.25rem 0;
}

/* Forms */
.form-grid{
  gap:1rem !important;
}

.field{
  min-width:0;
}

.field label{
  display:block;
  margin:0 0 .45rem;
  color:var(--p-navy);
  font-size:.78rem;
  font-weight:800;
  line-height:1.35;
}

.story-radar-admin input:not([type="checkbox"]):not([type="radio"]),
.story-radar-admin select,
.story-radar-admin textarea,
.music-admin-page input:not([type="checkbox"]):not([type="radio"]),
.music-admin-page select,
.music-admin-page textarea,
.youtube-admin-page input:not([type="checkbox"]):not([type="radio"]),
.youtube-admin-page select,
.youtube-admin-page textarea,
.section.section-sand:has(.story-admin-heading) input:not([type="checkbox"]):not([type="radio"]),
.section.section-sand:has(.story-admin-heading) select,
.section.section-sand:has(.story-admin-heading) textarea{
  width:100%;
  min-height:44px;
  padding:.72rem .82rem;
  border:1px solid rgba(23,50,77,.22);
  border-radius:10px;
  background:#fff;
  color:var(--p-ink);
  font:600 .9rem/1.35 "Inter",sans-serif;
}

.story-radar-admin textarea,
.music-admin-page textarea,
.youtube-admin-page textarea,
.section.section-sand:has(.story-admin-heading) textarea{
  min-height:104px;
  resize:vertical;
}

.story-radar-admin input:focus,
.story-radar-admin select:focus,
.story-radar-admin textarea:focus,
.music-admin-page input:focus,
.music-admin-page select:focus,
.music-admin-page textarea:focus,
.youtube-admin-page input:focus,
.youtube-admin-page select:focus,
.youtube-admin-page textarea:focus{
  outline:none;
  border-color:var(--p-blue);
  box-shadow:0 0 0 3px rgba(46,120,166,.11);
}

/* Checkboxes + helper copy */
.story-admin-check,
.music-admin-check{
  display:flex !important;
  align-items:center;
  gap:.55rem;
  min-height:32px;
  margin:.25rem 0;
  color:var(--p-ink);
  line-height:1.4;
}

.story-admin-check input,
.music-admin-check input{
  width:auto !important;
  margin:0;
  flex:0 0 auto;
}

.music-admin-field-help,
.automation-help-note,
.card small{
  color:#667484;
  line-height:1.55;
}

.music-admin-field-help,
.automation-help-note{
  margin:.7rem 0 0;
}

/* Buttons: one clear scale */
.button{
  min-height:42px;
  padding:.68rem 1rem;
  border-radius:999px;
  line-height:1;
}

.button.button-small{
  min-height:34px;
  padding:.5rem .78rem;
  font-size:.76rem;
}

.card form .button{
  margin-top:.15rem;
}

/* Alerts */
.alert{
  margin:1rem 0 0;
  padding:.95rem 1rem;
  border-radius:12px;
  line-height:1.55;
}

/* Tables */
.music-source-table-wrap{
  overflow-x:auto;
  margin-top:1rem;
  border:1px solid var(--p-border);
  border-radius:12px;
  background:#fff;
}

.music-source-table{
  width:100%;
  border-collapse:collapse;
}

.music-source-table thead{
  background:#f2f6f8;
}

.music-source-table th{
  padding:.7rem .8rem;
  color:#536374;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

.music-source-table td{
  padding:.8rem;
  line-height:1.4;
  vertical-align:middle;
}

.music-source-table tr:last-child td{
  border-bottom:0;
}

/* =========================================================
   VIDEO RADAR ADMIN
   ========================================================= */
.youtube-admin-page .automation-v3-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1.05fr);
}

.youtube-admin-page .automation-v3-grid .card{
  min-width:0;
}

.youtube-artist-card{
  margin-top:1.5rem;
}

.youtube-artist-card .story-radar-source-form{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto auto;
  gap:.9rem;
  align-items:end;
  margin:0 0 1rem;
  padding:1rem;
  border:1px solid var(--p-border-soft);
  border-radius:12px;
  background:#f8fafb;
}

.youtube-artist-card .story-radar-source-form .field{
  margin:0;
}

.youtube-artist-card .story-radar-source-form .story-admin-check{
  align-self:end;
  margin:0 0 .35rem;
}

.youtube-artist-card .story-radar-source-form .button{
  align-self:end;
  margin:0;
}

.youtube-top5-title{
  margin:2rem 0 1rem;
}

.youtube-top5-title .eyebrow{
  margin-bottom:.35rem;
}

.youtube-top5-title h2{
  margin:0;
  color:var(--p-navy);
  font-size:clamp(1.75rem,3vw,2.35rem);
  line-height:1.05;
  letter-spacing:-.045em;
}

.youtube-radar-grid{
  gap:1rem;
}

.youtube-radar-card{
  overflow:hidden;
}

.youtube-radar-copy{
  padding:.9rem 1rem 1rem;
}

.youtube-radar-copy h3{
  margin:.4rem 0 .7rem;
  font-size:.9rem;
  line-height:1.3;
}

/* =========================================================
   STORY RADAR / SETTINGS / HEALTH
   ========================================================= */
.story-radar-status-strip{
  gap:.7rem;
  margin:1rem 0;
}

.story-radar-status-strip > div{
  padding:.85rem .95rem;
  border-radius:12px;
  box-shadow:none;
}

.story-radar-status-strip span{
  margin:0 0 .28rem;
  font-size:.62rem;
}

.story-radar-status-strip strong{
  margin:0;
  font-size:1.08rem;
}

.story-radar-filter-row{
  gap:.45rem;
  margin:0 0 1rem;
}

.story-radar-candidate-grid{
  gap:1rem;
}

.story-radar-candidate{
  padding:1rem;
  border-radius:14px;
}

.story-radar-candidate h2,
.story-radar-candidate h3{
  margin:.55rem 0 .7rem;
  font-size:1.03rem;
  line-height:1.22;
  letter-spacing:-.02em;
}

.story-radar-metrics{
  gap:.4rem;
  margin:.65rem 0;
}

.story-radar-sources{
  margin:.75rem 0;
}

.story-radar-actions{
  gap:.5rem;
  margin-top:.75rem;
}

.story-radar-reason{
  margin:.7rem 0 0;
  padding:.7rem .8rem;
  border-radius:9px;
  line-height:1.5;
}

.story-radar-health{
  padding:.9rem;
  box-shadow:none;
}

/* =========================================================
   MUSIC RADAR ADMIN
   ========================================================= */
.music-admin-status-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.music-admin-status-card .card-body{
  display:grid;
  gap:.4rem;
}

.music-admin-status-card span{
  margin:0;
}

.music-admin-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);
}

.music-admin-grid .card-body > p{
  margin:.15rem 0 1rem;
}

.music-admin-inline-fields{
  gap:.8rem;
}

.music-source-form{
  gap:.7rem;
  padding:.9rem;
  border-radius:12px;
}

/* =========================================================
   PUBLIC HOMEPAGE — EDITORIAL SCALE, NOT HERO SCALE
   ========================================================= */
.v12-story-section .v12-section-head{
  align-items:end;
  gap:2rem;
  margin-bottom:1.5rem;
}

.v12-story-section .v12-section-head h2{
  max-width:13ch;
  margin:.35rem 0 0;
  color:var(--p-navy);
  font-size:clamp(2.55rem,5.2vw,4.6rem);
  line-height:.98;
  letter-spacing:-.06em;
  text-wrap:balance;
}

.v12-story-section .v12-head-side{
  max-width:390px;
}

.v12-story-section .v12-head-side p{
  margin:0 0 .65rem;
  color:#607080;
  line-height:1.7;
}

.v12-story-grid{
  gap:1rem;
}

.v12-story-card{
  overflow:hidden;
  border:1px solid var(--p-border-soft);
  border-radius:16px;
  box-shadow:var(--p-shadow);
}

.v12-story-body{
  padding:1rem;
}

.v12-story-body h3{
  margin:.48rem 0 .55rem;
  font-size:1.05rem;
  line-height:1.22;
  letter-spacing:-.025em;
}

.v12-story-body p{
  margin:0 0 .8rem;
  line-height:1.6;
  color:#607080;
}

/* =========================================================
   HOMEPAGE MUSIC — COMPACT SPOTIFY + NATIVE TOP 5
   Spotify iframe is kept compact; the 5-row list is PANTURIA UI.
   ========================================================= */
.music-home-section{
  position:relative;
  overflow:hidden;
  padding:clamp(3.4rem,6vw,5rem) 0 1rem;
  background:var(--p-navy);
  color:#fff;
}

.music-home-section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:7px;
  background:url('/assets/brand-system/sg07-jalur-ria-horizontal-primary.png') center / cover no-repeat;
  opacity:.95;
  pointer-events:none;
}

.music-home-section::after{
  content:"";
  position:absolute;
  right:-160px;
  bottom:-240px;
  width:480px;
  height:480px;
  border:1px solid rgba(242,181,68,.11);
  border-radius:50%;
  pointer-events:none;
}

.music-home-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(560px,1.28fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.music-home-copy{
  min-width:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2rem;
  padding:.25rem 0 .2rem;
}

.music-home-copy h2{
  margin:.35rem 0 1rem;
  color:#fff;
  font-size:clamp(3.6rem,6vw,6rem);
  line-height:.85;
  letter-spacing:-.06em;
}

.music-home-copy h2 span{
  display:block;
}

.music-home-copy p{
  max-width:470px;
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.7;
}

.music-home-copy .actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

.music-home-dashboard{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:#101d2a;
  box-shadow:0 20px 52px rgba(0,0,0,.18);
}

.music-home-spotify-control{
  background:#121212;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.music-home-player{
  display:block;
  width:100%;
  height:152px !important;
  min-height:152px !important;
  border:0;
  border-radius:0;
  background:#121212;
}

.music-home-top5{
  padding:1rem 1.15rem .65rem;
}

.music-home-top5-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:0 0 .75rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.music-home-top5-head span{
  color:var(--p-gold);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.14em;
}

.music-home-top5-head strong{
  max-width:58%;
  color:rgba(255,255,255,.7);
  font-size:.74rem;
  font-weight:700;
  text-align:right;
}

.music-home-top5-list{
  display:grid;
}

.music-home-top5-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 24px;
  gap:.7rem;
  align-items:center;
  min-height:56px;
  padding:.58rem 0;
  border-bottom:1px solid rgba(255,255,255,.085);
  color:#fff;
  text-decoration:none;
}

.music-home-top5-row:last-child{
  border-bottom:0;
}

.music-home-top5-row:hover{
  opacity:.8;
}

.music-home-top5-no{
  color:var(--p-gold);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
}

.music-home-top5-track{
  min-width:0;
  display:grid;
  gap:.14rem;
}

.music-home-top5-track strong{
  overflow:hidden;
  color:#fff;
  font-size:.9rem;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.music-home-top5-track small{
  overflow:hidden;
  color:rgba(255,255,255,.55);
  font-size:.76rem;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.music-home-top5-open{
  color:rgba(255,255,255,.48);
  font-size:.9rem;
  text-align:right;
}

.music-home-top5-empty{
  padding:1rem 0;
  color:rgba(255,255,255,.62);
  line-height:1.6;
}

.music-home-player-note{
  grid-column:1/-1;
  margin:.25rem 0 0;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);
  font-size:.72rem;
  line-height:1.45;
}

/* Public Video Radar */
.youtube-radar-public .youtube-radar-head h2{
  max-width:12ch;
  font-size:clamp(2.5rem,5vw,4.25rem);
  line-height:.98;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1100px){
  .youtube-admin-page .automation-v3-grid{
    grid-template-columns:1fr 1fr;
  }

  .youtube-admin-page .automation-v3-grid > :last-child{
    grid-column:1/-1;
  }

  .music-home-shell{
    grid-template-columns:minmax(240px,.8fr) minmax(480px,1.2fr);
  }
}

@media(max-width:900px){
  .story-admin-heading,
  .music-admin-title-row,
  .admin-automation-head,
  .youtube-radar-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .story-admin-heading .actions,
  .music-admin-title-row .actions{
    justify-content:flex-start;
  }

  .music-admin-status-grid,
  .music-admin-grid,
  .youtube-admin-page .automation-v3-grid{
    grid-template-columns:1fr;
  }

  .youtube-admin-page .automation-v3-grid > :last-child{
    grid-column:auto;
  }

  .youtube-artist-card .story-radar-source-form{
    grid-template-columns:1fr 1fr;
  }

  .music-home-shell{
    grid-template-columns:1fr;
  }

  .music-home-copy{
    gap:1.25rem;
  }

  .v12-story-section .v12-section-head{
    align-items:start;
  }
}

@media(max-width:680px){
  .story-admin-heading h1,
  .music-admin-title-row h1{
    font-size:clamp(2.1rem,11vw,3.2rem);
  }

  .youtube-artist-card .story-radar-source-form{
    grid-template-columns:1fr;
  }

  .youtube-artist-card .story-radar-source-form .story-admin-check{
    margin:0;
  }

  .v12-story-section .v12-section-head h2{
    font-size:clamp(2.15rem,10vw,3.2rem);
  }

  .music-home-copy h2{
    font-size:clamp(3.2rem,17vw,4.8rem);
  }

  .music-home-top5-head{
    align-items:flex-start;
    flex-direction:column;
    gap:.35rem;
  }

  .music-home-top5-head strong{
    max-width:none;
    text-align:left;
  }
}