.social-publishing-page {
  display: grid;
  gap: 20px;
}

.social-publishing-page.hidden { display: none; }

.social-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 2px 0;
}

.social-hero h2 { margin: 4px 0 6px; font-size: clamp(1.55rem, 2.5vw, 2.35rem); }
.social-hero p:last-child { margin: 0; color: var(--muted, #92a1b8); max-width: 720px; }

.social-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.social-kpis article {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 18px;
  border: 1px solid rgba(129, 146, 183, .18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(24, 35, 55, .92), rgba(11, 18, 31, .92));
}

.social-kpis article::after {
  content: "";
  position: absolute;
  inset: auto -20px -34px auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(111, 92, 255, .12);
  filter: blur(2px);
}

.social-kpis article[data-tone="attention"]::after { background: rgba(245, 158, 11, .15); }
.social-kpis span, .social-kpis small { display: block; color: var(--muted, #92a1b8); }
.social-kpis strong { display: block; margin: 5px 0 2px; font-size: 2rem; line-height: 1; }
.social-queue-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid rgba(249, 115, 22, .35);
  border-radius: 13px;
  color: #fed7aa;
  background: rgba(154, 52, 18, .16);
}
.social-queue-alert.hidden { display: none; }
.social-queue-alert span { color: #d7c2b4; font-size: .82rem; }

.social-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .72fr);
  gap: 18px;
  align-items: start;
}

.social-composer, .social-connections, .social-queue { padding: 20px; }
.social-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.social-section-heading h3 { margin: 3px 0 0; font-size: 1.1rem; }
.social-project-chip {
  max-width: 260px;
  padding: 7px 11px;
  overflow: hidden;
  border: 1px solid rgba(124, 108, 255, .26);
  border-radius: 999px;
  color: #c9c2ff;
  background: rgba(124, 108, 255, .1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#social-publication-form { display: grid; gap: 16px; }
#social-publication-form label { display: grid; gap: 7px; }
#social-publication-form label > span, #social-publication-form legend {
  color: #aebbd0;
  font-size: .78rem;
  font-weight: 700;
}

#social-publication-form fieldset { min-width: 0; padding: 0; border: 0; }
.social-target-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.social-target-option {
  display: inline-flex !important;
  grid-template-columns: auto 1fr !important;
  align-items: center;
  gap: 8px !important;
  padding: 9px 12px;
  border: 1px solid rgba(129, 146, 183, .22);
  border-radius: 12px;
  background: rgba(13, 22, 36, .72);
  cursor: pointer;
}

.social-target-option:has(input:checked) {
  border-color: rgba(124, 108, 255, .65);
  background: rgba(124, 108, 255, .12);
}

.social-platform {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: white;
  font-weight: 800;
}

.social-platform[data-platform="telegram"] { background: #229ed9; }
.social-platform[data-platform="vk"] { background: #2787f5; }

.social-variant-editors { display: grid; gap: 10px; }
.social-variant-editor {
  padding: 14px;
  border: 1px solid rgba(129, 146, 183, .18);
  border-radius: 15px;
  background: rgba(8, 15, 27, .54);
}

.social-variant-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.social-variant-editor header div { display: flex; align-items: center; gap: 9px; }
.social-variant-editor textarea { min-height: 120px; resize: vertical; }
.social-variant-editor input[data-social-link] { width: 100%; }
.social-variant-editor small { color: var(--muted, #92a1b8); }
.social-variant-editor small[data-over="true"] { color: #fb7185; }
.social-variant-workbench{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,.9fr);gap:14px;align-items:start}.social-variant-controls{display:grid;gap:10px}.social-native-preview{padding:10px;border:1px solid rgba(129,146,183,.18);border-radius:16px;background:#070d16}.social-native-label{margin:0 0 7px;color:#8494aa;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.social-native-post{overflow:hidden;border-radius:13px;background:#fff;color:#17212b;box-shadow:0 10px 28px rgba(0,0,0,.25)}.social-native-preview[data-platform="telegram"] .social-native-post{background:#182533;color:#f5f7fa}.social-native-header{display:flex;align-items:center;gap:9px;padding:11px 12px}.social-native-header>div{min-width:0;flex:1}.social-native-header strong,.social-native-header small{display:block}.social-native-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.social-native-header small{margin-top:1px;color:#718096;font-size:9px}.social-native-preview[data-platform="telegram"] .social-native-header small{color:#9bb0c3}.social-native-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#2787f5;color:#fff;font-size:10px;font-weight:900}.social-native-preview[data-platform="telegram"] .social-native-avatar{background:#229ed9}.social-native-menu{color:#8290a0;letter-spacing:1px}.social-native-media{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-height:260px;background:#dfe5eb}.social-native-media[data-count="1"]{grid-template-columns:1fr}.social-native-media-tile{position:relative;min-height:105px;display:grid;place-items:center;overflow:hidden;background:#ccd5df;color:#425466}.social-native-preview[data-platform="telegram"] .social-native-media-tile{background:#263b4d;color:#cad8e3}.social-native-media-tile img{width:100%;height:100%;min-height:105px;max-height:260px;object-fit:cover}.social-native-media-tile>span{font-size:25px}.social-native-media-tile>small{position:absolute;left:7px;right:7px;bottom:6px;overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.social-native-media-tile>b{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.48);color:#fff;font-size:24px}.social-native-text{padding:11px 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.45}.social-native-text.empty{color:#8493a3;font-style:italic}.social-native-link{display:grid;gap:2px;margin:0 12px 10px;padding:9px 10px;border:1px solid #dce3ea;border-radius:9px;background:#f3f6f8;overflow:hidden}.social-native-link small{color:#748395;font-size:9px;text-transform:uppercase}.social-native-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563a9;font-size:11px}.social-native-link[data-invalid="true"]{border-color:#ef9a9a}.social-native-preview[data-platform="telegram"] .social-native-link{border-color:#31495d;background:#22374a}.social-native-preview[data-platform="telegram"] .social-native-link span{color:#70b9e8}.social-native-footer{display:flex;align-items:center;gap:14px;padding:8px 12px;border-top:1px solid #e7ebef;color:#657487;font-size:10px}.social-native-preview[data-platform="telegram"] .social-native-footer{border-color:#2b4254;color:#9fb2c1}.social-native-footer small{margin-left:auto!important;color:inherit!important}

.social-schedule-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.social-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.social-form-footer .auth-status { margin-right: auto; }
.social-account-list { display: grid; gap: 10px; }
.social-account-card {
  padding: 14px;
  border: 1px solid rgba(129, 146, 183, .18);
  border-radius: 14px;
  background: rgba(8, 15, 27, .55);
}

.social-account-card header { display: flex; align-items: center; gap: 10px; }
.social-account-card header > div { min-width: 0; flex: 1; }
.social-account-card strong, .social-account-card small { display: block; }
.social-account-card small { color: var(--muted, #92a1b8); }
.social-health { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .12); }
.social-health[data-state="error"], .social-health[data-state="revoked"] { background: #f97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .12); }
.social-account-targets { display: grid; gap: 6px; margin-top: 12px; }
.social-target-line { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(129, 146, 183, .1); font-size: .82rem; }
.social-target-line a { color: #a9a1ff; text-decoration: none; }
.social-account-actions { display: flex; gap: 6px; margin-top: 12px; }
.social-account-actions button { flex: 1; }

.social-status-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.social-status-filters button {
  padding: 7px 11px;
  border: 1px solid rgba(129, 146, 183, .18);
  border-radius: 999px;
  color: #aebbd0;
  background: transparent;
}
.social-status-filters button.active { color: white; border-color: #7467ef; background: rgba(116, 103, 239, .16); }
.social-bulk-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(160px, .6fr) minmax(190px, .7fr) auto minmax(130px, 1fr);
  gap: 9px;
  align-items: center;
  margin: -3px 0 14px;
  padding: 10px;
  border: 1px solid rgba(129, 146, 183, .14);
  border-radius: 12px;
  background: rgba(8, 15, 27, .42);
}
.social-bulk-toolbar strong { color: #b9c7dc; font-size: .78rem; white-space: nowrap; }
.social-bulk-toolbar .auth-status { margin: 0; font-size: .75rem; }
.social-publication-list { display: grid; gap: 10px; }
.social-publication-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(129, 146, 183, .15);
  border-radius: 14px;
  background: rgba(8, 15, 27, .5);
}

.social-publication-card h4 { margin: 0 0 5px; }
.social-publication-select { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #8fa0b8; font-size: .72rem; }
.social-publication-card p, .social-publication-card small { margin: 0; color: var(--muted, #92a1b8); }
.social-publication-targets { display: flex; flex-wrap: wrap; gap: 7px; }
.social-publication-targets a, .social-publication-targets span {
  padding: 6px 9px;
  border-radius: 9px;
  color: #c8d1df;
  background: rgba(129, 146, 183, .09);
  text-decoration: none;
  font-size: .78rem;
}
.social-publication-targets .social-metrics-unavailable { color: #aebbd0; font-style: italic; }
.social-publication-targets .social-metrics-pending { color: #93c5fd; }
.social-publication-actions { display: flex; gap: 6px; justify-content: flex-end; }
.social-status {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #b9c7dc;
  background: rgba(129, 146, 183, .12);
  font-size: .72rem;
}
.social-status[data-status="published"] { color: #78e6a0; background: rgba(34, 197, 94, .12); }
.social-status[data-status="attention"], .social-status[data-status="failed"] { color: #fdba74; background: rgba(249, 115, 22, .12); }
.social-empty { padding: 34px 16px; text-align: center; color: var(--muted, #92a1b8); }
.social-dialog .form-hint { color: var(--muted, #92a1b8); font-size: .8rem; }
.social-audit-panel { margin-top: 16px; border-top: 1px solid rgba(129, 146, 183, .13); }
.social-audit-panel summary { padding: 14px 2px 4px; color: #aebbd0; cursor: pointer; font-weight: 700; }
.social-audit-list { display: grid; gap: 6px; margin-top: 10px; }
.social-audit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 11px; border-radius: 10px; background: rgba(8, 15, 27, .45); }
.social-audit-row strong, .social-audit-row small { display: block; }
.social-audit-row small, .social-audit-row time { color: #8494aa; font-size: .72rem; }

@media (max-width: 1100px) {
  .social-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-layout { grid-template-columns: 1fr; }
  .social-connections { order: -1; }
  .social-bulk-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){.social-variant-workbench{grid-template-columns:1fr}.social-native-preview{max-width:520px}}

@media (max-width: 760px) {
  .social-hero, .social-section-heading { align-items: stretch; flex-direction: column; }
  .social-kpis { grid-template-columns: 1fr 1fr; }
  .social-schedule-row { grid-template-columns: 1fr; }
  .social-publication-card { grid-template-columns: 1fr; }
  .social-publication-actions { justify-content: flex-start; }
  .social-bulk-toolbar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .social-kpis { grid-template-columns: 1fr; }
}