/* Shared Phantom banner language: title in HTML, complete source art contained. */
#view-promote .promote-banner {
  display: grid;
  grid-template-columns: minmax(7rem, 32%) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 144px;
  padding: 12px 76px 64px 16px;
  background: radial-gradient(ellipse at 100% 0%, #3b005755, transparent 65%), #090910;
}
#view-promote .promote-banner > img {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  aspect-ratio: auto;
}
#view-promote .promote-banner-copy {
  grid-column: 1;
  grid-row: 1;
  color: #f6f4ff;
}
#view-promote .promote-banner-copy h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
}
@media (max-width: 600px) {
  #view-promote .promote-banner {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 12px 72px;
  }
  #view-promote .promote-banner > img {
    grid-column: 1;
    grid-row: 2;
    max-height: 140px;
  }
  #view-promote .promote-banner-copy { grid-column: 1; grid-row: 1; }
}

/* Social dashboard uses the shared Phantom banner and existing page navigation. */
.social-dashboard {display:grid;gap:16px;padding:12px 0;min-width:0}
.social-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.social-panel {border:1px solid var(--accent,#8b5cf6);border-radius:10px;background:#0d0d14;padding:16px;min-width:0;margin-bottom:12px}
.social-panel h3,.social-panel p {margin:0 0 10px}
.social-panel header,.social-dialog header {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.social-panel header h3,.social-dialog header h2 {margin:0;margin-right:auto}
.social-panel header select {width:auto;max-width:180px}
.social-connection {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.social-connection>div {flex:1;min-width:140px}
.social-connection button {font-size:.85rem;padding:9px 12px}
.social-provider {font-size:28px;line-height:1;border-radius:10px;padding:10px}
.social-youtube {background:#f00;color:#fff}.social-ga4 {color:#ffad16}
.social-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.social-metrics>div {border:1px solid #383047;border-radius:7px;padding:12px}
.social-metrics span {font-size:.85rem;display:block}.social-metrics strong {display:block;font-size:1.45rem;margin-top:8px}
.social-report svg {width:100%;height:160px;margin-top:18px;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#322640 40px)}
.social-report table {width:100%;font-size:.85rem}.social-report td {padding:5px}
#social-content {overflow:auto}.social-content-table {width:100%;border-collapse:collapse;text-align:left}
.social-content-table td,.social-content-table th {border-bottom:1px solid #332740;padding:12px;font-size:.9rem}
.social-content-table img {width:100px;height:56px;object-fit:cover;border-radius:6px;margin-right:12px;vertical-align:middle}
.social-upload-row {display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #332740}
.social-dialog {width:min(820px,94vw);max-height:90vh;padding:22px;background:#0d0d14;color:#f6f4ff;border:1px solid #8b5cf6;border-radius:12px;overflow:auto}
.social-dialog::backdrop {background:#050509cc}.social-dialog-body {display:grid;gap:14px}
.social-dialog ol {margin:0;padding-left:24px;line-height:1.8}.social-field {display:grid;gap:6px;min-width:0}
.social-field input,.social-field textarea,.social-field select {width:100%;box-sizing:border-box}
.social-inline {display:flex!important;align-items:center;gap:10px;margin:10px 0}.social-inline input {width:auto!important;margin:0!important}
.social-help,.social-tabs {display:flex;gap:12px;flex-wrap:wrap}.social-tabs button {flex:1}
.social-picker {display:flex;gap:8px;flex-wrap:wrap;max-height:220px;overflow:auto;border:1px dashed #5b407c;border-radius:8px;padding:12px}
.social-picker button {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-upload-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.social-upload-form video {width:100%;max-height:220px;background:#050509;grid-row:span 2;border-radius:8px}
@media(max-width:1000px){.social-grid{grid-template-columns:1fr}}
@media(max-width:600px){.social-panel{padding:12px}.social-dialog{padding:14px}.social-metrics{gap:5px}.social-metrics>div{padding:8px}.social-metrics strong{font-size:1.1rem}.social-upload-form{grid-template-columns:1fr}.social-dialog header h2{font-size:1.25rem}}

.social-ga4 {display:flex;align-items:flex-end;gap:4px}.social-ga-bar{display:block;width:8px;border-radius:5px;background:#f9ab00}.social-ga-bar.bar-1{height:10px}.social-ga-bar.bar-2{height:22px}.social-ga-bar.bar-3{height:36px}

.social-dashboard [hidden] {display:none !important}

/* Social overview follows the shared cloud panels and violet controls. */
#app-shell #main #social-dashboard{gap:14px;font-family:Arial,sans-serif;color:#f5f1ff}
#social-dashboard .social-nav{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid #77549a55;padding:10px 0;flex-wrap:wrap}
#social-dashboard .social-main-tabs,#social-dashboard .social-subtabs{display:flex;gap:6px;flex-wrap:wrap}
#social-dashboard button{font-size:13px;min-height:36px;border-radius:8px;padding:8px 13px}
#social-dashboard .social-main-tabs button:not(.primary),#social-dashboard .social-subtabs button:not(.primary){background:transparent;border-color:transparent}
#social-dashboard button:focus-visible{outline:2px solid #d1afff;outline-offset:3px}
#app-shell #main #social-dashboard .social-panel{padding:18px;border:1px solid #8b6ab44d;border-radius:14px;box-shadow:inset 0 1px #e4d0ff08}
#social-dashboard h3{font-size:17px;margin:0 0 5px}#social-dashboard h4{font-size:14px;margin:12px 0}
#social-dashboard p.status,#social-dashboard small.status{color:#c7bddc;font-size:12px;line-height:1.5;display:block;margin:5px 0}
#social-dashboard header{gap:10px;margin-bottom:14px}#social-dashboard header>div:first-of-type{margin-right:auto}
#social-dashboard .social-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#social-dashboard .social-metric{padding:16px;border:1px solid #9863df9c;background:linear-gradient(130deg,#30204865,#10101a88);border-radius:10px;min-width:0}
#social-dashboard .social-metric strong{font-size:27px;margin:8px 0;color:#fff}#social-dashboard .social-metric span{font-size:12px;color:#ded4ef}
#social-dashboard .social-delta{display:block;color:#bdb1d0;font-size:11px}#social-dashboard .social-delta.positive{color:#62e8be}
#social-dashboard .social-platform-card{display:flex;align-items:center;gap:14px;border:1px solid #9762de99;border-radius:12px;background:#130e2270;padding:16px;min-width:0;flex-wrap:wrap}
#social-dashboard .social-platform-card>div:not(.social-card-actions){flex:1;min-width:150px}
#social-dashboard .social-card-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;width:100%}
#social-dashboard .social-provider{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:50px;height:48px;padding:0;border-radius:10px;font-size:26px}
#social-dashboard .social-ga4{background:#fff8e4;align-items:flex-end;padding:8px;box-sizing:border-box}
#social-dashboard .social-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#social-dashboard .social-overview-columns{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:14px}
#social-dashboard .social-content-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#social-dashboard .social-content-card{border:1px solid #8563a66e;border-radius:10px;background:#100d1c70;overflow:hidden;padding:8px;min-width:0;position:relative}
#social-dashboard .social-content-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
#social-dashboard .social-content-card h4{overflow-wrap:anywhere;margin:6px 0}#social-dashboard .social-content-counts{font-size:12px;margin:10px 28px 0 0}
#social-dashboard .social-content-card button{position:absolute;bottom:6px;right:6px;padding:3px 7px;min-height:27px}
#social-dashboard .social-breakdown{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
#social-dashboard .social-breakdown-list{flex:1;min-width:130px;max-width:100%}
#social-dashboard .social-breakdown-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-bottom:12px;font-size:12px}
#social-dashboard .social-breakdown-list span{overflow-wrap:anywhere}#social-dashboard .social-breakdown-list strong{font-weight:400;color:#d5c7e9}
#social-dashboard progress{grid-column:1/-1;width:100%;height:7px;accent-color:#a34fff}
#social-dashboard .social-donut{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;margin:auto;flex-shrink:0}
#social-dashboard .social-donut>div{width:99px;height:99px;border-radius:50%;background:#171126;display:flex;flex-direction:column;align-items:center;justify-content:center}
#social-dashboard .social-donut strong{font-size:25px}#social-dashboard .social-donut small{font-size:11px}
#social-dashboard .social-quick-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}#social-dashboard .social-quick-tools button{text-align:left;padding:18px 12px;background:#30204466;border:1px solid #9562c988}
#social-dashboard .social-calendar-empty{text-align:center;padding:22px;border:1px dashed #a485c566;border-radius:10px;color:#d8c7ed}
#social-dashboard .social-details{display:grid;gap:20px}#social-dashboard .social-detail-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid #7950a344;margin-bottom:16px;padding-bottom:10px}
#social-dashboard .social-detail-bar .social-subtabs{margin-right:auto}#social-dashboard select{max-width:220px;width:auto;font-size:12px;padding:8px;border-radius:8px}
#social-dashboard .social-detail-columns{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;margin-top:12px}
#social-dashboard .social-chart{min-width:0}#social-dashboard .social-chart svg{height:auto;width:100%;margin:0;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#503c6633 40px)}
#social-dashboard .social-chart-dates{display:flex;justify-content:space-between;color:#c8bce3;margin-bottom:12px}#social-dashboard details{font-size:12px}
#social-dashboard .social-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#social-dashboard .social-calendar-day{border:1px solid #72518a66;border-radius:8px;min-height:90px;padding:8px;background:#17102566;overflow-wrap:anywhere}
#social-dashboard .social-calendar-day a,#social-dashboard .social-calendar-day>span:not(:first-child){display:block;font-size:11px;background:#7135ae66;padding:5px;border-radius:4px;margin-top:5px;color:#f0e2ff}
@media(max-width:1100px){#social-dashboard .social-overview-columns{grid-template-columns:1fr}#social-dashboard .social-platform-card>div:not(.social-card-actions){min-width:100px}}
@media(max-width:650px){#app-shell #main #social-dashboard .social-panel{padding:12px}#social-dashboard .social-grid,#social-dashboard .social-detail-columns{grid-template-columns:1fr}#social-dashboard .social-metrics{grid-template-columns:1fr 1fr;gap:8px}#social-dashboard .social-content-cards{grid-template-columns:1fr}#social-dashboard .social-main-tabs{gap:2px}#social-dashboard .social-main-tabs button{font-size:12px;padding:8px}#social-dashboard .social-metric{padding:12px}#social-dashboard .social-metric strong{font-size:23px}#social-dashboard .social-calendar-grid{gap:2px;font-size:10px}#social-dashboard .social-calendar-day{padding:3px;min-height:65px}#social-dashboard .social-calendar-day a{font-size:9px;padding:2px}}
.social-toolbar {display:flex;justify-content:flex-end;margin-bottom:16px}
.social-empty {padding:32px 20px;max-width:680px;margin:0 auto;text-align:center}
.social-empty p {color:var(--muted,#aaa);line-height:1.6}
.social-grid.social-single {grid-template-columns:minmax(0,1fr)}

.social-provider-heading {display:flex;align-items:center;gap:16px;margin-bottom:14px}
.social-provider-heading h3 {margin:0}
.social-provider {display:inline-flex;align-items:center;justify-content:center;flex:none;width:64px;height:52px;box-sizing:border-box}
.social-ga4 {align-items:flex-end;background:#fff4dc;padding:8px}
.social-setup-status {padding:16px;border:1px solid #79549b;border-radius:10px;line-height:1.6}
#app-shell #main #social-dashboard [role=tab][aria-selected=true]{background:linear-gradient(135deg,#7637d4,#9d59ff)!important;border-color:#aa76ef!important;color:#fff!important}
#app-shell #main #social-dashboard .social-metric{border:1px solid #9761d9!important}
#social-dashboard progress::-webkit-progress-bar{background:#3a3348;border-radius:6px}#social-dashboard progress::-webkit-progress-value{background:#a34fff;border-radius:6px}
#social-dashboard .social-spark{width:110px;height:35px;position:absolute;right:16px;top:15px;background:transparent}
#social-dashboard .social-spark text{display:none}#social-dashboard .social-platform-card{position:relative}
#social-dashboard .social-platform-card h3{padding-right:100px}
#social-dashboard .social-top-thumb{width:70px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;grid-row:span 2}
@media(max-width:650px){#social-dashboard .social-spark{display:none}#social-dashboard .social-platform-card h3{padding-right:0}}

.social-facebook{background:#1877f2;color:#fff;font:bold 36px Arial;}
.social-tiktok{background:#101018;color:#fff;text-shadow:-2px 0 #25f4ee,2px 0 #fe2c55;}
