:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: #11141b;
  --panel-2: #171b24;
  --line: #282e3b;
  --muted: #9098aa;
  --text: #f2f5fb;
  --accent: #6f8cff;
  --accent-2: #9d7cff;
  --success: #59d69a;
  --warning: #ffb45f;
  --danger: #ff6f7d;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% -10%, rgba(111, 140, 255, .14), transparent 31rem),
    var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px clamp(18px, 4vw, 52px);
  background: rgba(9, 11, 16, .88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.identity, .top-actions { display: flex; align-items: center; gap: 14px; }
.identity strong { display: block; font-size: 1.05rem; letter-spacing: .01em; }
.identity span:not(.mark) { display: block; color: var(--muted); font-size: .82rem; }

.mark {
  width: 42px;
  height: 42px;
  display: block;
  flex: 0 0 42px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(111,140,255,.48);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(111,140,255,.18), rgba(157,124,255,.05));
}
.mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

main { width: min(1500px, calc(100% - 36px)); margin: 28px auto 64px; }

.site-footer {
  width: min(1500px, calc(100% - 36px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -30px auto 28px;
  padding: 18px 2px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: .8rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer a { color: #bbc7ff; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); text-decoration: underline; }

.access-panel {
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(26px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(111,140,255,.09), transparent 42%), var(--panel);
}
.access-panel h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.access-panel p { margin: 0; color: var(--muted); }
.access-form { display: flex; gap: 10px; width: min(100%, 520px); }
.access-form input { flex: 1; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.hidden { display: none !important; }
.platform-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.platform-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(17,20,27,.86);
}
.platform-tab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}
.platform-tab span { font-weight: 820; font-size: 1rem; }
.platform-tab small { font-size: .75rem; }
.platform-tab.active { color: var(--text); border-color: #394258; background: #202633; }
.platform-tab[data-platform="instagram"].active {
  border-color: rgba(231,73,132,.42);
  background: linear-gradient(135deg, rgba(231,73,132,.14), rgba(132,81,226,.12));
}
.platform-tab[data-platform="studio"].active {
  border-color: rgba(89,214,154,.4);
  background: linear-gradient(135deg, rgba(89,214,154,.13), rgba(111,140,255,.1));
}
.platform-tab[data-platform="youtube"].active {
  border-color: rgba(255,74,74,.42);
  background: linear-gradient(135deg, rgba(255,74,74,.14), rgba(111,140,255,.08));
}
.platform-tab[data-platform="telegram"].active {
  border-color: rgba(64,170,240,.42);
  background: linear-gradient(135deg, rgba(64,170,240,.14), rgba(111,140,255,.08));
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.summary-grid article {
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.summary-grid span { color: var(--muted); }
.summary-grid strong { font-size: 2.35rem; line-height: 1; }
.summary-grid .attention strong { color: var(--warning); }

.intelligence-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; }
.brief-panel, .batch-panel, .inbox-panel { padding: clamp(18px, 2.6vw, 30px); }
.daily-brief { display: grid; gap: 14px; }
.brief-policy { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid rgba(111,140,255,.36); border-radius: 13px; background: rgba(111,140,255,.08); }
.brief-policy strong { font-size: 1.12rem; }
.brief-policy span, .brief-stamp { color: var(--muted); font-size: .78rem; }
.brief-recommendations { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.brief-recommendations li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 11px 13px; border: 1px solid #2d3442; border-radius: 11px; background: #0c0f15; font-size: .82rem; }
.brief-recommendations li strong { color: var(--accent); }
.brief-recommendations li.priority-high strong { color: var(--warning); }
.brief-stamp { margin: 0; }
.batch-list { display: grid; gap: 10px; max-height: 520px; overflow: auto; }
.approval-batch { display: grid; gap: 12px; padding: 14px; border: 1px solid #2d3442; border-radius: 12px; background: #0c0f15; }
.approval-batch > div span { display: block; color: var(--muted); font-size: .76rem; }
.approval-batch ol { display: grid; gap: 7px; margin: 0; padding-left: 22px; }
.approval-batch li { color: var(--muted); font-size: .76rem; }
.approval-batch li b { color: var(--text); margin-right: 8px; }
.approval-batch li p { margin: 2px 0 0; color: #b7becc; }
.batch-schedule { display: inline-block; width: auto; min-width: 190px; margin: 3px 0; padding: 7px 8px; font-size: .76rem; }

.control-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.composer-panel, .connection-panel, .queue-panel { padding: clamp(18px, 2.6vw, 30px); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-heading h2 { margin: 0; font-size: 1.35rem; }
.eyebrow { margin: 0 0 4px; color: var(--accent); font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.safety-label { color: var(--success); border: 1px solid rgba(89,214,154,.35); background: rgba(89,214,154,.08); padding: 5px 9px; border-radius: 999px; font-size: .78rem; }

form { display: grid; gap: 18px; }
label { display: grid; gap: 7px; color: #cbd1de; font-size: .88rem; font-weight: 620; }
input, textarea, select {
  width: 100%;
  color: var(--text);
  background: #0c0f15;
  border: 1px solid #303747;
  border-radius: 11px;
  padding: 11px 12px;
  outline: none;
}
textarea { resize: vertical; min-height: 180px; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111,140,255,.12); }
.field-grid { display: grid; gap: 12px; }
.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-help { color: var(--muted); font-size: .78rem; font-weight: 400; }
code { color: #bbc7ff; }

.composer-bottom { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.composer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.inline-options { display: flex; align-items: end; gap: 18px; }
.check { display: flex; grid: none; align-items: center; gap: 9px; min-height: 42px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 10px 15px;
  color: var(--text);
  font-weight: 720;
}
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 28px rgba(111,140,255,.2); }
.button.secondary { background: #161a22; border-color: #343b4b; }
.button.danger { color: #ffb0b7; background: rgba(255,111,125,.08); border-color: rgba(255,111,125,.35); }
.button.compact { min-height: 36px; padding: 7px 11px; font-size: .85rem; }
.button.full { width: 100%; margin-top: 10px; }
.button:disabled { opacity: .45; cursor: not-allowed; }
a.button { text-decoration: none; }

.connection-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; }
.connection-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(255,111,125,.1); }
.connection-chip.connected i { background: var(--success); box-shadow: 0 0 0 4px rgba(89,214,154,.1); }
.connection-details { min-height: 100px; color: var(--muted); }
.connection-details strong { display: block; color: var(--text); font-size: 1.05rem; }
.connection-details dl { margin: 12px 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; }
.connection-details dt { color: var(--muted); }
.connection-details dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.capability-details { margin-top: 14px; color: var(--muted); }
.capability-details > p, .capability-details > small { margin: 0; font-size: .76rem; }
.capability-map { margin-top: 0; padding: 13px; border: 1px solid #2d3442; border-radius: 11px; background: #0c0f15; }
.capability-map summary { font-weight: 720; color: var(--text); }
.capability-map ul { display: grid; gap: 7px; margin: 12px 0; padding: 0; list-style: none; }
.capability-map li { display: flex; justify-content: space-between; gap: 12px; font-size: .73rem; }
.capability-map li span { color: #cbd1de; }
.capability-map li b { text-align: right; color: var(--muted); }
.capability-map li.available b { color: var(--success); }
.capability-map li.limited b { color: var(--warning); }
.capability-map li.unavailable b { color: var(--danger); }
.capability-warning { margin: 11px 0; padding: 9px 10px; border: 1px solid rgba(255,180,95,.35); border-radius: 9px; color: var(--warning); background: rgba(255,180,95,.07); font-size: .74rem; }
.intelligence-stamp { margin: 9px 0 0; color: var(--muted); font-size: .72rem; }
details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
summary { cursor: pointer; color: #cbd1de; font-size: .9rem; }
.token-form { margin-top: 14px; }
.security-note { margin: 18px 0 0; color: var(--muted); font-size: .78rem; }

.queue-heading { align-items: center; }
.filters { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #0c0f15; }
.filter { border: 0; border-radius: 8px; color: var(--muted); background: transparent; padding: 7px 10px; font-size: .83rem; }
.filter.active { color: var(--text); background: #202633; }
.queue-list { display: grid; gap: 10px; }
.job {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 190px;
  gap: 20px;
  align-items: start;
  padding: 18px;
  border: 1px solid #252b38;
  border-radius: 14px;
  background: var(--panel-2);
}
.job-id { font-weight: 800; letter-spacing: .025em; }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { border: 1px solid #343b4b; border-radius: 999px; padding: 3px 7px; color: var(--muted); font-size: .73rem; }
.status { display: inline-flex; align-items: center; gap: 7px; color: #cfd5e2; font-size: .8rem; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status.scheduled::before, .status.publishing::before, .status.processing::before { background: var(--accent); }
.status.published::before { background: var(--success); }
.status.deleting::before { background: var(--accent-2); }
.status.deleted::before { background: var(--muted); }
.status.remote_missing::before { background: var(--warning); }
.status.failed::before, .status.needs_review::before { background: var(--warning); }
.status.delete_failed::before, .status.delete_needs_review::before { background: var(--warning); }
.status.cancelled::before { background: var(--danger); }
.job-copy { display: grid; gap: 9px; }
.job-part { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.job-part + .job-part { border-top: 1px dashed #343b4b; padding-top: 9px; }
.job-warning { color: var(--warning); font-size: .82rem; }
.ig-diagnostic { margin-top: .7rem; padding: .75rem .85rem; border: 1px solid color-mix(in srgb, var(--danger), transparent 55%); border-radius: .75rem; background: color-mix(in srgb, var(--danger), transparent 92%); font-size: .78rem; }
.ig-diagnostic.ready { border-color: color-mix(in srgb, var(--success), transparent 55%); background: color-mix(in srgb, var(--success), transparent 92%); }
.ig-diagnostic strong { color: var(--text); }
.ig-diagnostic ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.ig-diagnostic small { display: block; margin-top: .45rem; color: var(--muted); line-height: 1.4; }
.job-side { display: grid; gap: 10px; justify-items: stretch; }
.job-time { color: var(--muted); font-size: .82rem; }
.job-actions { display: grid; gap: 7px; }
.job-link { color: #aabaff; text-decoration: none; font-size: .82rem; }
.job-link:hover { text-decoration: underline; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 5px; }
.metrics span { text-align: center; color: var(--muted); font-size: .68rem; }
.metrics strong { display: block; color: var(--text); font-size: .9rem; }

.empty-state { padding: 48px 16px; text-align: center; color: var(--muted); border: 1px dashed #303747; border-radius: 14px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; }
.analytics-panel, .log-panel { padding: clamp(18px, 2.6vw, 30px); }
.analytics-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.analytics-card { padding: 12px; border: 1px solid #303747; border-radius: 12px; background: #0c0f15; }
.analytics-card span { display: block; color: var(--muted); font-size: .72rem; }
.analytics-card strong { display: block; margin-top: 5px; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.analytics-stamp { margin: 14px 0 10px; color: var(--muted); font-size: .78rem; }
.branch-section { margin-top: 22px; }
.branch-section h3 { margin: 0 0 3px; font-size: 1rem; }
.branch-section > p, .archive-section > p { margin: 0 0 12px; color: var(--muted); font-size: .78rem; }
.analytics-branches { display: grid; gap: 8px; }
.analytics-branch { margin: 0; padding: 0; border: 1px solid #2b3240; border-radius: 12px; background: #0c0f15; overflow: clip; }
.analytics-branch > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; border: 0; }
.analytics-branch > summary > span:first-child { min-width: 0; }
.analytics-branch > summary strong { display: block; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 650px; }
.analytics-branch > summary small { display: block; color: var(--muted); font-size: .7rem; }
.branch-badges { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.branch-badges b { color: var(--text); font-size: .78rem; }
.branch-badges i { color: var(--muted); font-size: .67rem; font-style: normal; }
.branch-tree { display: grid; gap: 7px; padding: 4px 12px 14px; border-top: 1px solid #242a35; }
.branch-node { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 10px 12px; border-left: 2px solid #384157; border-radius: 8px; background: #121620; font-size: .76rem; }
.branch-node.audience { border-left-color: var(--accent-2); background: rgba(157,124,255,.06); }
.branch-node.archived { opacity: .7; }
.branch-node.depth-1 { margin-left: 16px; }
.branch-node.depth-2 { margin-left: 32px; }
.branch-node.depth-3 { margin-left: 48px; }
.branch-node.depth-4, .branch-node.depth-5, .branch-node.depth-6, .branch-node.depth-7, .branch-node.depth-8 { margin-left: 64px; }
.branch-node-copy { min-width: 0; }
.branch-node-copy > strong { color: var(--accent); }
.branch-node-copy p { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.branch-node-copy p a { color: var(--text); }
.branch-node-copy span, .branch-node-metrics, .branch-empty { color: var(--muted); font-size: .7rem; }
.branch-node-metrics { white-space: nowrap; text-align: right; }
.branch-empty { margin: 6px 0 0 16px; }
.archive-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.archive-section > summary { color: #cbd1de; font-weight: 720; }
.archive-section[open] > summary { margin-bottom: 8px; }
.inbox-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 9px; }
.inbox-item { padding: 13px; border: 1px solid #2b3240; border-radius: 11px; background: #0c0f15; }
.inbox-item div { display: flex; justify-content: space-between; gap: 10px; }
.inbox-item strong { font-size: .78rem; }
.inbox-item span { color: var(--muted); font-size: .68rem; }
.inbox-item p { margin: 8px 0; font-size: .82rem; white-space: pre-wrap; }
.event-log { display: grid; gap: 8px; max-height: 380px; overflow: auto; margin: 0; padding: 0 2px 0 24px; }
.event-log li { padding: 8px 0 8px 2px; color: var(--muted); font-size: .76rem; }
.event-log li::marker { color: var(--accent); }
.event-log time, .event-log strong, .event-log span { margin-right: 7px; }
.event-log time { color: #788196; font-variant-numeric: tabular-nums; }
.event-log strong { color: var(--text); }
.event-log p { margin: 4px 0 0; overflow-wrap: anywhere; }
.compact-empty { padding: 18px 10px; }

.instagram-eyebrow { color: #f06a9d; }
.instagram-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr);
  gap: 28px;
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 90% 12%, rgba(143,78,229,.22), transparent 20rem),
    linear-gradient(130deg, rgba(231,73,132,.1), transparent 42%),
    var(--panel);
}
.instagram-hero h1 { margin: 0 0 10px; font-size: clamp(1.65rem, 3vw, 2.7rem); line-height: 1.12; }
.instagram-hero p { max-width: 760px; margin: 0; color: #adb5c6; }
.instagram-hero-side { display: grid; align-content: center; justify-items: start; gap: 8px; }
.instagram-hero-side strong { font-size: 1.05rem; }
.instagram-hero-side small { color: var(--muted); }
.instagram-summary article { position: relative; overflow: hidden; }
.instagram-summary article::after {
  content: "";
  position: absolute;
  right: -25px;
  top: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(231,73,132,.1);
}
.instagram-plan, .automation-panel { padding: clamp(18px, 2.6vw, 30px); }
.instagram-plan .panel-heading { margin-bottom: 16px; }
.instagram-plan .panel-heading > strong { color: #f48ab2; font-size: 1.35rem; }
.plan-bars { display: grid; gap: 12px; }
.plan-bars > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) 48px; gap: 12px; align-items: center; }
.plan-bars span, .plan-bars b { font-size: .8rem; }
.plan-bars b { color: var(--muted); text-align: right; }
.plan-track { height: 9px; overflow: hidden; border-radius: 999px; background: #242a36; }
.plan-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #f05e99, #8d68ec); transition: width .25s ease; }
.instagram-control { grid-template-columns: minmax(0, 2.2fr) minmax(300px, .8fr); }
.instagram-api-panel { background: linear-gradient(180deg, rgba(231,73,132,.05), transparent 55%), var(--panel); }
.capability-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.capability-list li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #262c38; font-size: .78rem; }
.capability-list li:last-child { border-bottom: 0; }
.capability-list li span { color: #cbd1de; }
.capability-list li b { color: var(--muted); text-align: right; }
.capability-list li.available b { color: var(--success); }
.capability-list li.unavailable b { color: var(--danger); }
.instagram-guardrail { margin-top: 16px; padding: 14px; border: 1px solid rgba(255,180,95,.3); border-radius: 12px; background: rgba(255,180,95,.06); }
.instagram-guardrail strong { color: var(--warning); }
.instagram-guardrail p { margin: 5px 0 0; color: #b8bfcc; font-size: .78rem; }
.ig-asset-list { display: grid; gap: 8px; min-height: 48px; }
.ig-asset-list > span { padding: 12px; color: var(--muted); border: 1px dashed #303747; border-radius: 11px; font-size: .78rem; }
.ig-asset {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border: 1px solid #303747;
  border-radius: 11px;
  background: #0c0f15;
}
.ig-asset-preview { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #202633; color: #bbc4d7; font-size: .65rem; }
.ig-asset-preview img, .ig-asset-preview video { width: 100%; height: 100%; object-fit: cover; }
.ig-asset strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .79rem; }
.ig-asset small { color: var(--muted); font-size: .68rem; }
.ig-asset-state { color: var(--muted); font-size: .72rem; }
.ig-asset-state.ready { color: var(--success); }
.ig-asset-state.error { color: var(--danger); }
.ig-asset-controls { display: flex; gap: 4px; }
.ig-asset-action-stack { display: grid; justify-items: end; gap: 4px; max-width: 220px; }
.ig-asset-controls button { width: 30px; height: 30px; padding: 0; border: 1px solid #343b4b; border-radius: 8px; color: #cbd1de; background: #171c25; }
.ig-asset-controls button:last-child { color: #ffabb4; }
.ig-asset-controls button:disabled { opacity: .3; cursor: not-allowed; }
.instagram-job { grid-template-columns: 150px minmax(0, 1fr) 210px; }
.instagram-job .job-copy { grid-template-columns: 78px minmax(0, 1fr); align-items: start; }
.instagram-thumb { width: 78px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 9px; background: #0b0d12; border: 1px solid #303747; }
.instagram-thumb img, .instagram-thumb video { width: 100%; height: 100%; object-fit: cover; }
.instagram-thumb-placeholder { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: .66rem; text-align: center; padding: 4px; }
.instagram-caption { min-width: 0; }
.instagram-caption p { max-height: 8.8em; overflow: auto; }
.instagram-caption small { color: var(--muted); }
.ig-metrics { grid-template-columns: repeat(7, minmax(48px, 1fr)); }
.ig-analytics-posts { display: grid; gap: 8px; margin-top: 16px; }
.ig-analytics-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 72px); gap: 9px; align-items: center; padding: 11px 13px; border: 1px solid #2b3240; border-radius: 11px; background: #0c0f15; }
.ig-analytics-row > div:first-child { min-width: 0; }
.ig-analytics-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.ig-analytics-row small, .ig-analytics-row span { color: var(--muted); font-size: .68rem; }
.ig-analytics-row span { text-align: right; }
.ig-analytics-row span b { display: block; color: var(--text); font-size: .82rem; }
.instagram-bottom-grid { grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); }
.keyword-map { margin: 18px 0 12px; padding: 14px; border: 1px solid #303747; border-radius: 12px; background: #0c0f15; }
.keyword-map p { margin: 6px 0; color: #f4a1c0; }
.keyword-map small { color: var(--muted); }
.keyword-receipts { display: grid; gap: 7px; max-height: 280px; overflow: auto; }
.keyword-receipt { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 9px 11px; border: 1px solid #2b3240; border-radius: 9px; background: #0c0f15; font-size: .72rem; }
.keyword-receipt b { color: #f48ab2; }
.keyword-receipt span, .keyword-receipt time { color: var(--muted); }
.make-pending { color: var(--warning); }

/* Content Studio: one calm, guided workflow shared by Codex, ChatGPT, Claude and automation clients. */
.studio-eyebrow { color: var(--success); }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-workbench {
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 42px);
  background: radial-gradient(circle at 88% 0, rgba(89,214,154,.15), transparent 24rem),
    linear-gradient(140deg, rgba(111,140,255,.08), transparent 58%), var(--panel);
}
.studio-workbench-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 34px; align-items: end; }
.studio-workbench h1 { max-width: 850px; margin: 0; font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.studio-workbench-head > div:first-child > p:last-child { max-width: 780px; margin: 16px 0 0; color: #b7bfcd; }
.studio-project-control { display: grid; gap: 11px; padding: 16px; border: 1px solid #354051; border-radius: 15px; background: rgba(8,11,16,.78); }
.studio-project-control label { font-size: .76rem; }
.studio-overview-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 26px; border: 1px solid #303847; border-radius: 14px; background: #303847; }
.studio-overview-strip > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #0d1016; }
.studio-overview-strip span { color: var(--muted); font-size: .76rem; }
.studio-overview-strip strong { font-size: 1.35rem; }
.studio-overview-strip .attention strong { color: var(--warning); }
.studio-steps {
  position: sticky;
  top: 88px;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(12,15,21,.94);
  box-shadow: 0 16px 36px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
}
.studio-steps button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; text-align: left; }
.studio-steps button b { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #3a4352; border-radius: 50%; color: #b9c1cf; background: #161a22; }
.studio-steps button span { min-width: 0; font-size: .84rem; font-weight: 760; }
.studio-steps button small { display: block; overflow: hidden; margin-top: 1px; color: #70798a; font-size: .64rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.studio-steps button:hover { color: var(--text); background: #151a22; }
.studio-steps button.active { color: var(--text); border-color: rgba(89,214,154,.36); background: linear-gradient(135deg, rgba(89,214,154,.14), rgba(111,140,255,.08)); }
.studio-steps button.active b { color: #07130e; border-color: var(--success); background: var(--success); }
.studio-step-panel { display: none; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
.studio-step-panel.active { display: grid; animation: studio-enter .16s ease-out; }
.studio-step-panel.studio-step-stack { grid-template-columns: minmax(0, 1fr); }
@keyframes studio-enter { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.studio-primary-card, .studio-side-card, .studio-assets-panel, .studio-connectors-panel,
.studio-settings-card, .studio-data-panel, .studio-integration-panel { padding: clamp(20px, 2.8vw, 32px); }
.studio-section-intro { max-width: 760px; margin: -8px 0 22px; color: #aeb7c7; }
.studio-simple-form textarea, .studio-import-form textarea, .studio-settings-card textarea { min-height: 86px; }
.studio-simple-form > label > textarea { min-height: 220px; }
.studio-form-actions { display: flex; justify-content: flex-end; }
.studio-inline-details { padding: 12px 14px; border: 1px solid #2f3745; border-radius: 12px; background: #0c0f15; }
.studio-inline-details summary, .studio-upload-box > summary { color: #c9d0dc; font-weight: 700; cursor: pointer; }
.studio-inline-details > label, .studio-inline-details > div, .studio-upload-box > form { margin-top: 13px; }
.studio-source-list { display: grid; gap: 8px; }
.studio-source-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #2b3340; border-radius: 11px; background: #0c0f15; }
.studio-source-row div { min-width: 0; }
.studio-source-row strong, .studio-source-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-source-row strong { font-size: .8rem; }
.studio-source-row span, .studio-source-row time { color: var(--muted); font-size: .68rem; }
.studio-ai-path { display: grid; gap: 12px; }
.studio-ai-callout { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 16px; border: 1px solid #303949; border-radius: 14px; background: #0c0f15; }
.studio-ai-callout > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #07130e; background: var(--success); font-weight: 850; }
.studio-ai-callout strong { display: block; }
.studio-ai-callout p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.studio-import-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid #29313e; }
.studio-cadence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.studio-cadence-item { display: grid; gap: 7px; min-width: 0; padding: 12px; border: 1px solid #2b3340; border-radius: 11px; background: #0c0f15; }
.studio-cadence-item > span { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.studio-cadence-item > b { font-size: 1.08rem; }
.studio-cadence-track { height: 5px; overflow: hidden; border-radius: 99px; background: #252c39; }
.studio-cadence-track i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), var(--accent)); }
.studio-upload-box { padding: 14px; border: 1px dashed #364052; border-radius: 13px; background: rgba(12,15,21,.5); }
.studio-asset-form { grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1fr) 155px 90px auto; align-items: end; }
.studio-upload-progress { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 42px; margin-top: 14px; padding: 0 13px; border: 1px solid #304050; border-radius: 11px; background: #0c0f15; }
.studio-upload-progress i { position: absolute; inset: 0 auto 0 0; width: 0; opacity: .18; background: linear-gradient(90deg, var(--success), var(--accent)); transition: width .2s ease; }
.studio-upload-progress span { position: relative; font-size: .8rem; }
.studio-assets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.studio-asset-pill { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; max-width: 310px; padding: 8px 10px; border: 1px solid #2f3746; border-radius: 10px; background: #0c0f15; }
.studio-asset-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.studio-asset-pill strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .73rem; }
.studio-asset-pill small { display: block; color: var(--muted); font-size: .65rem; }
.studio-connectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.studio-connector { min-width: 0; padding: 20px; border: 1px solid #2c3543; border-radius: 15px; background: #0c0f15; }
.studio-connector header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.studio-connector header strong, .studio-connector header small { display: block; }
.studio-connector header strong { font-size: 1.08rem; }
.studio-connector header small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.connector-toggle-state { padding: 4px 8px; border: 1px solid #394252; border-radius: 999px; color: var(--muted); font-size: .66rem; }
.connector-toggle-state.ready { color: var(--success); border-color: rgba(89,214,154,.4); background: rgba(89,214,154,.06); }
.studio-connector form { gap: 11px; }
.connector-hint { min-height: 2.8em; margin: 8px 0 16px; color: #9da6b6; font-size: .75rem; }
.connector-mode-panel { display: grid; gap: 11px; padding: 13px; border: 1px solid #2b3442; border-radius: 11px; background: #11151c; }
.connector-mode-panel > p { margin: 0; color: var(--muted); font-size: .76rem; }
.connector-secret-fields { display: grid; gap: 10px; }
.google-json-import { display: grid; gap: 10px; padding: 13px; border: 1px solid #324052; border-radius: 11px; background: rgba(89,214,154,.045); }
.google-json-import input[type="file"] { padding: 9px; font-size: .72rem; }
.connector-enabled { margin-top: 3px; }
.studio-connector .credential-state, .studio-connector .connector-readiness { margin: 0; font-size: .72rem; }
.studio-connector .credential-state { color: var(--muted); }
.studio-connector .credential-state.ready, .studio-connector .connector-readiness.ready { color: var(--success); }
.studio-connector .connector-readiness { font-weight: 720; }
.studio-connector .connector-readiness.blocked { color: var(--warning); }
.connector-external-mode { margin-top: 16px; padding-top: 16px; border-top: 1px solid #29313d; }
.telegram-destinations, .telegram-destination-list { display: grid; gap: 10px; }
.telegram-destination { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; align-items: start; padding: 13px; border: 1px solid #313b49; border-radius: 12px; background: #11151c; }
.telegram-destination.disabled { opacity: .62; }
.telegram-destination-main strong, .telegram-destination-main span, .telegram-destination-main small { display: block; overflow-wrap: anywhere; }
.telegram-destination-main span { color: #c5ccd8; font-size: .77rem; }
.telegram-destination-main small { color: var(--muted); font-size: .66rem; }
.destination-state { color: var(--warning); font-size: .68rem; font-weight: 720; }
.destination-state.ready { color: var(--success); }
.destination-state.failed, .destination-error { color: var(--danger); }
.telegram-destination-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.destination-error { grid-column: 1 / -1; margin: 0; font-size: .7rem; }
.telegram-destination-form { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 7px; padding: 14px; border: 1px dashed #3a4658; border-radius: 12px; }
.telegram-destination-form .check, .telegram-form-actions { grid-column: 1 / -1; }
.telegram-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.security-note { color: var(--muted); font-size: .72rem; }
.studio-queue-filters { display: flex; gap: 8px; }
.studio-queue-filters select { width: auto; min-width: 150px; }
.studio-safety-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; margin-bottom: 16px; padding: 13px 15px; border: 1px solid rgba(89,214,154,.3); border-radius: 12px; background: rgba(89,214,154,.055); }
.studio-safety-banner span { color: var(--muted); font-size: .76rem; }
.studio-queue { display: grid; gap: 10px; }
.studio-item { display: grid; grid-template-columns: 160px minmax(0, 1fr) 220px; gap: 18px; align-items: start; padding: 17px; border: 1px solid #293240; border-radius: 14px; background: var(--panel-2); }
.studio-item-copy { min-width: 0; }
.studio-item-copy h3 { margin: 0 0 6px; font-size: 1rem; }
.studio-item-copy > p { max-height: 7.2em; overflow: auto; margin: 0; color: #c6cddb; white-space: pre-wrap; font-size: .82rem; }
.studio-item-side { display: grid; gap: 8px; }
.studio-item-side time { color: var(--muted); font-size: .72rem; text-align: right; }
.studio-item-actions { display: grid; gap: 7px; }
.studio-item-actions input { padding: 8px; font-size: .76rem; }
.studio-item details { grid-column: 2 / -1; margin: 0; }
.studio-edit-form { margin-top: 12px; padding: 14px; border: 1px solid #2c3441; border-radius: 12px; background: #0c0f15; }
.studio-edit-form textarea { min-height: 90px; }
.studio-review-card { padding: 10px; border: 1px solid rgba(255,180,95,.38); border-radius: 10px; color: var(--warning); background: rgba(255,180,95,.06); font-size: .72rem; }
.studio-asset-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.telegram-target-picker { display: grid; gap: 6px; margin: 0; padding: 12px; border: 1px solid #313a48; border-radius: 11px; }
.telegram-target-picker legend { padding: 0 6px; color: #cbd2dd; font-size: .8rem; font-weight: 720; }
.telegram-delivery-list { display: grid; gap: 7px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #2d3542; }
.telegram-delivery-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px 10px; align-items: center; padding: 9px 10px; border: 1px solid #303947; border-radius: 9px; background: #0c0f15; font-size: .72rem; }
.telegram-delivery-row small, .telegram-delivery-actions { grid-column: 1 / -1; }
.telegram-delivery-row a { color: #b8c6ff; }
.telegram-delivery-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.delivery-published { color: var(--success); }
.delivery-failed, .delivery-needs_review { color: var(--warning); }
.studio-results-grid, .studio-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.studio-results-grid > .panel { padding: clamp(20px, 2.8vw, 30px); }
.studio-analytics-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.studio-analytics-summary div { padding: 12px; border: 1px solid #2c3441; border-radius: 11px; background: #0c0f15; }
.studio-analytics-summary strong { display: block; font-size: 1.2rem; }
.studio-analytics-summary span { color: var(--muted); font-size: .66rem; }
.studio-channel-analytics, .studio-research-list { display: grid; gap: 7px; margin-top: 13px; }
.studio-channel-row, .studio-research-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 11px; border: 1px solid #2a3240; border-radius: 9px; background: #0c0f15; font-size: .74rem; }
.studio-channel-row span, .studio-research-row span { color: var(--muted); }
.studio-research { margin-top: 16px; }
.studio-knowledge-form { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: end; }
.studio-knowledge-results { display: grid; gap: 8px; margin-top: 16px; }
.studio-knowledge-row { min-width: 0; padding: 13px; border: 1px solid #2c3441; border-radius: 11px; background: #0c0f15; }
.studio-knowledge-row header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.studio-knowledge-row header > div { min-width: 0; }
.studio-knowledge-row h3 { margin: 0; font-size: .88rem; }
.studio-knowledge-row h3, .studio-knowledge-row p, .studio-knowledge-row small { overflow-wrap: anywhere; }
.studio-knowledge-row p { margin: 7px 0 0; color: #bcc5d3; white-space: pre-wrap; font-size: .76rem; }
.studio-knowledge-row small { display: block; margin-top: 7px; color: var(--muted); font-size: .66rem; }
.studio-knowledge-body { max-height: 320px; overflow: auto; margin-top: 10px; padding: 11px; border-left: 2px solid var(--success); color: #d4dae4; white-space: pre-wrap; font: .73rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.studio-data-panel > p { color: #b8c0cf; font-size: .8rem; line-height: 1.55; }
.channel-workspace-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: clamp(24px, 3vw, 38px); }
.channel-workspace-hero h1 { margin: 4px 0 10px; font-size: clamp(1.75rem, 3vw, 2.8rem); line-height: 1.08; }
.channel-workspace-hero p:last-child { max-width: 760px; margin: 0; color: #b7bfcd; }
.youtube-eyebrow { color: #ff7373; }
.telegram-eyebrow { color: #62baf1; }
.channel-workspace-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; min-width: min(100%, 330px); }
.channel-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 18px; }
.channel-status-panel, .channel-guide-panel { padding: clamp(18px, 2.6vw, 28px); }
.channel-guide-panel ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: #c1c9d5; line-height: 1.45; }
.channel-health { display: grid; gap: 10px; }
.channel-health-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 13px; border: 1px solid #303947; border-radius: 10px; background: #0c0f15; }
.channel-health-row span { color: var(--muted); }
.channel-health-row strong { text-align: right; }
.channel-destination-summary { display: grid; gap: 9px; }
.channel-destination-summary article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 12px; border: 1px solid #303947; border-radius: 10px; background: #0c0f15; }
.channel-destination-summary small { grid-column: 1 / -1; color: var(--muted); }
.youtube-analytics-panel { padding: clamp(20px, 2.8vw, 30px); }
.youtube-analytics-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 9px; }
.youtube-analytics-actions label { display: grid; gap: 5px; color: var(--muted); font-size: .68rem; }
.youtube-analytics-actions select { min-width: 120px; padding: 9px 34px 9px 11px; }
.youtube-channel-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.youtube-channel-totals article, .youtube-period-metrics article { padding: 14px; border: 1px solid #303947; border-radius: 12px; background: #0c0f15; }
.youtube-channel-totals span, .youtube-period-metrics span { display: block; color: var(--muted); font-size: .7rem; }
.youtube-channel-totals strong, .youtube-period-metrics strong { display: block; margin-top: 5px; font-size: clamp(1.2rem, 2.2vw, 1.85rem); line-height: 1.05; }
.youtube-channel-totals small, .youtube-period-metrics small { display: block; margin-top: 5px; color: #7f8999; font-size: .62rem; }
.youtube-period-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 22px 0 10px; }
.youtube-period-head div { display: grid; gap: 3px; }
.youtube-period-head span, .youtube-period-head small { color: var(--muted); font-size: .7rem; }
.youtube-period-metrics { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.youtube-period-metrics article { min-width: 110px; }
.youtube-period-metrics strong { font-size: 1.15rem; }
.youtube-analytics-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 18px; margin-top: 20px; }
.youtube-analytics-layout > section { min-width: 0; padding: 16px; border: 1px solid #293240; border-radius: 13px; background: var(--panel-2); }
.youtube-analytics-layout h3 { margin: 0 0 14px; font-size: .88rem; }
.youtube-analytics-chart { display: flex; align-items: end; gap: 3px; height: 190px; padding: 10px 4px 0; border-bottom: 1px solid #303947; }
.youtube-analytics-chart > span { display: flex; flex: 1 1 0; align-items: end; height: 100%; min-width: 3px; }
.youtube-analytics-chart i { display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #ff7373, #ff4f6d); opacity: .9; }
.youtube-top-videos { display: grid; gap: 7px; }
.youtube-top-videos a { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid #303947; border-radius: 10px; color: inherit; background: #0c0f15; text-decoration: none; }
.youtube-top-videos a:hover { border-color: rgba(255,115,115,.55); }
.youtube-top-videos b { color: #ff8585; font-size: .72rem; }
.youtube-top-videos span { min-width: 0; }
.youtube-top-videos strong, .youtube-top-videos small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-top-videos strong { font-size: .74rem; }
.youtube-top-videos small { margin-top: 3px; color: var(--muted); font-size: .63rem; }
.youtube-top-videos em { color: var(--muted); font-style: normal; }
.youtube-analytics-warning, .youtube-analytics-prompt { display: grid; gap: 5px; margin-top: 13px; padding: 13px 15px; border: 1px solid rgba(255,180,95,.36); border-radius: 11px; color: var(--warning); background: rgba(255,180,95,.055); }
.youtube-analytics-prompt { border-color: rgba(110,133,255,.35); color: #c6d0ff; background: rgba(110,133,255,.055); }
.youtube-analytics-warning span, .youtube-analytics-prompt span { font-size: .72rem; line-height: 1.45; }
.youtube-analytics-note { margin: 12px 0 0; color: var(--muted); font-size: .66rem; }
.youtube-subtitle-picker { display: grid; gap: 10px; margin-top: 12px; padding: 13px; border: 1px solid #313a48; border-radius: 11px; }
.youtube-subtitle-picker > legend { padding: 0 6px; color: #cbd2dd; font-size: .8rem; font-weight: 720; }
.youtube-subtitle-row { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(140px, .65fr) minmax(210px, 1fr); gap: 10px; align-items: end; padding: 11px; border: 1px solid #2a3341; border-radius: 10px; background: #0c0f15; }
.youtube-subtitle-row div { align-self: center; }
.youtube-subtitle-row strong, .youtube-subtitle-row small { display: block; }
.youtube-subtitle-row small { margin-top: 3px; color: var(--muted); font-size: .64rem; overflow-wrap: anywhere; }
.studio-upload-help { margin: 10px 0 0; }
.studio-data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 10px; }
.studio-data-panel > code { display: block; overflow: auto; padding: 11px; border: 1px solid #2c3441; border-radius: 10px; background: #0c0f15; white-space: nowrap; }
.studio-data-panel details { margin-top: 15px; }
.studio-data-panel details form { margin-top: 12px; }
.integration-endpoint { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: center; margin-bottom: 11px; padding: 13px; border: 1px solid #2c3441; border-radius: 12px; background: #0c0f15; }
.integration-endpoint span { grid-column: 1 / -1; color: var(--muted); font-size: .73rem; }
.integration-endpoint code { overflow: auto; white-space: nowrap; }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); transform: translateY(120px); opacity: 0; transition: .22s ease; padding: 13px 16px; border: 1px solid #3a4355; border-radius: 12px; background: #171c26; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { border-color: rgba(255,111,125,.5); }
.action-confirm { width: min(500px, calc(100vw - 32px)); padding: 0; color: var(--text); border: 1px solid #3a4355; border-radius: 18px; background: #121720; box-shadow: 0 28px 90px rgba(0,0,0,.58); }
.action-confirm::backdrop { background: rgba(3,6,12,.76); backdrop-filter: blur(4px); }
.action-confirm-card { display: grid; gap: 22px; padding: 24px; }
.action-confirm-card h2 { margin: 5px 0 9px; font-size: 1.25rem; }
.action-confirm-card > div > p:last-child { margin: 0; color: #c6ceda; line-height: 1.55; }
.action-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.action-confirm-actions .button { min-width: 128px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .field-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-grid { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .intelligence-grid { grid-template-columns: 1fr; }
  .connection-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .connection-panel .panel-heading, .connection-panel .connection-details, .connection-panel .capability-details, .connection-panel details, .connection-panel .security-note { grid-column: 1 / -1; }
  .job { grid-template-columns: 150px minmax(0, 1fr); }
  .job-side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: end; }
  .job-actions { display: flex; }
  .instagram-hero, .instagram-control, .instagram-bottom-grid { grid-template-columns: 1fr; }
  .instagram-job { grid-template-columns: 140px minmax(0, 1fr); }
  .studio-hero, .studio-integration-grid, .studio-knowledge-grid, .studio-bottom-grid,
  .studio-workbench-head, .studio-step-panel, .studio-results-grid, .studio-settings-grid, .channel-workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .platform-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-cadence { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-connectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-asset-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-item { grid-template-columns: 150px minmax(0, 1fr); }
  .studio-item-side { grid-column: 1 / -1; }
  .studio-item details { grid-column: 1 / -1; }
  .youtube-analytics-layout { grid-template-columns: 1fr; }
  .youtube-subtitle-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .youtube-subtitle-row > div { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .topbar { position: static; align-items: flex-start; gap: 12px; }
  .top-actions { flex-direction: column; align-items: flex-end; }
  main { width: min(100% - 24px, 1500px); margin-top: 14px; }
  .access-panel, .access-form, .composer-bottom, .inline-options { flex-direction: column; align-items: stretch; }
  .access-panel { align-items: stretch; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-summary { grid-template-columns: repeat(3, 1fr); }
  .analytics-post { flex-direction: column; gap: 5px; }
  .brief-policy, .analytics-branch > summary { align-items: flex-start; flex-direction: column; }
  .branch-badges { align-items: flex-start; }
  .branch-node { grid-template-columns: 1fr; }
  .branch-node-metrics { text-align: left; }
  .field-grid.four, .field-grid.three, .field-grid.two { grid-template-columns: 1fr; }
  .connection-panel { display: block; }
  .connection-panel .button { margin-top: 9px; }
  .queue-heading { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; overflow-x: auto; }
  .job { grid-template-columns: 1fr; }
  .job-side { grid-column: auto; grid-template-columns: 1fr; }
  .job-actions { display: grid; }
  .platform-tabs { grid-template-columns: 1fr; }
  .platform-tab { align-items: flex-start; flex-direction: column; gap: 2px; }
  .instagram-hero { gap: 18px; }
  .plan-bars > div { grid-template-columns: 70px minmax(0, 1fr) 42px; }
  .instagram-job { grid-template-columns: 1fr; }
  .instagram-job .job-copy { grid-template-columns: 62px minmax(0, 1fr); }
  .instagram-thumb { width: 62px; }
  .ig-metrics { grid-template-columns: repeat(4, 1fr); }
  .ig-analytics-row { grid-template-columns: minmax(0, 1fr) repeat(2, 60px); }
  .ig-analytics-row span:nth-last-child(-n+2) { display: none; }
  .studio-workbench { padding: 19px; }
  .studio-overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-steps { top: 8px; grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
  .studio-steps button { grid-template-columns: 30px minmax(0, 1fr); padding: 9px; }
  .studio-steps button b { width: 28px; height: 28px; }
  .studio-ai-callout { grid-template-columns: 34px minmax(0, 1fr); }
  .studio-ai-callout > span { width: 32px; height: 32px; }
  .studio-ai-callout .button { grid-column: 1 / -1; }
  .studio-cadence, .studio-connectors, .studio-asset-form, .studio-analytics-summary, .telegram-destination-form { grid-template-columns: 1fr; }
  .telegram-destination-form .check, .telegram-form-actions { grid-column: auto; }
  .studio-knowledge-form { grid-template-columns: 1fr; }
  .studio-knowledge-row header { flex-direction: column; }
  .studio-item { grid-template-columns: 1fr; }
  .studio-item details, .studio-item-side { grid-column: auto; }
  .studio-item-side time { text-align: left; }
  .studio-queue-filters { width: 100%; overflow-x: auto; }
  .studio-queue-filters select { min-width: 145px; }
  .studio-safety-banner { grid-template-columns: 1fr; }
  .channel-workspace-hero { align-items: stretch; flex-direction: column; }
  .channel-workspace-actions { justify-content: stretch; min-width: 0; }
  .channel-workspace-actions .button { flex: 1 1 100%; }
  .youtube-analytics-actions { width: 100%; justify-content: stretch; }
  .youtube-analytics-actions label, .youtube-analytics-actions .button { flex: 1 1 100%; }
  .youtube-channel-totals { grid-template-columns: 1fr; }
  .youtube-period-head { align-items: flex-start; flex-direction: column; }
  .youtube-subtitle-row { grid-template-columns: 1fr; }
  .youtube-subtitle-row > div { grid-column: auto; }
}