.v2-window {
  /* 允许弹窗遮罩覆盖主内容，同时让左侧栏的设置入口保持可操作。 */
  z-index: auto;
}

/* Ready-to-publish content template library */
.ready-template-panel{padding:0!important;background:#f5f6f3!important}.ready-template-shell{min-height:100%;padding:30px 34px 54px}.ready-template-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}.ready-template-hero h2{margin:5px 0 7px;color:#111318;font-size:30px;letter-spacing:-.055em}.ready-template-hero p{max-width:620px;margin:0;color:rgba(17,19,24,.56);font-size:13px;line-height:1.65}.ready-template-hero>div:last-child{display:flex;gap:10px}.ready-template-primary,.ready-template-secondary{min-height:42px;padding:0 16px;border-radius:11px;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.ready-template-primary{border:1px solid #6da64c;background:#6da64c;color:#fff;box-shadow:0 8px 18px rgba(91,144,57,.18)}.ready-template-secondary{border:1px solid rgba(17,19,24,.12);background:#fff;color:#44484e}.ready-template-profile-note{display:flex;align-items:center;gap:11px;margin-bottom:18px;padding:13px 15px;border:1px solid rgba(102,164,65,.18);border-radius:13px;background:#f0f8eb;color:#4e7736}.ready-template-profile-note>span{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;background:#6da64c;color:#fff}.ready-template-profile-note p{flex:1;margin:0;font-size:11px;line-height:1.55}.ready-template-profile-note b{font-size:10px;white-space:nowrap}.ready-template-view-tabs{display:flex;gap:6px;margin-bottom:16px;padding:5px;border:1px solid rgba(17,19,24,.08);border-radius:13px;background:#fff}.ready-template-view-tabs button{min-height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#74787e;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.ready-template-view-tabs button.is-active{background:#111318;color:#fff;box-shadow:0 4px 12px rgba(17,19,24,.14)}.ready-template-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;margin-bottom:13px}.ready-template-toolbar label{display:flex;align-items:center;gap:8px;height:44px;padding:0 13px;border:1px solid rgba(17,19,24,.1);border-radius:12px;background:#fff}.ready-template-toolbar label>span{color:#9a9da2;font-size:18px}.ready-template-toolbar input,.ready-template-toolbar select{width:100%;border:0;outline:0;background:transparent;color:#272a2f;font:inherit;font-size:11px}.ready-template-toolbar select{padding:0 12px;border:1px solid rgba(17,19,24,.1);border-radius:12px;background:#fff}.ready-template-filter-block{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:flex-start;gap:10px;margin-bottom:10px}.ready-template-filter-block>span{padding-top:8px;color:#8a8e94;font-size:9px;font-weight:850}.ready-template-filter-block>div{display:flex;flex-wrap:wrap;gap:6px}.ready-template-filter-block button{min-height:30px;padding:0 10px;border:1px solid rgba(17,19,24,.09);border-radius:9px;background:rgba(255,255,255,.7);color:#696d73;font:inherit;font-size:9px;font-weight:780;cursor:pointer}.ready-template-filter-block button.is-active{border-color:rgba(102,164,65,.35);background:#ecf6e7;color:#4b7831}.ready-template-result-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;color:#6e7278;font-size:10px}.ready-template-result-head strong{color:#111318;font-size:15px}.ready-template-result-head small{color:#a0a3a7}.ready-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ready-template-card{display:flex;min-width:0;min-height:250px;flex-direction:column;padding:17px;border:1px solid rgba(17,19,24,.09);border-radius:17px;background:#fff;box-shadow:0 5px 18px rgba(17,19,24,.035);transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease}.ready-template-card:hover{border-color:rgba(100,155,67,.36);box-shadow:0 13px 30px rgba(59,96,36,.09);transform:translateY(-2px)}.ready-template-card.is-private{border-style:dashed}.ready-template-card>header{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:center;gap:9px}.ready-template-platform{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#111318;color:#fff;font-size:9px;font-weight:900}.ready-template-platform.instagram{background:linear-gradient(135deg,#8a3ab9,#e95950,#fccc63)}.ready-template-platform.facebook{background:#1877f2}.ready-template-platform.tiktok{background:#111;box-shadow:inset 2px 0 #25f4ee,inset -2px 0 #fe2c55}.ready-template-platform.linkedin{background:#0a66c2}.ready-template-card>header>div{display:grid;gap:2px;min-width:0}.ready-template-card>header strong{overflow:hidden;color:#26292d;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.ready-template-card>header small{color:#979a9f;font-size:8px}.ready-template-favorite{display:grid;width:28px;height:28px;place-items:center;padding:0;border:0;border-radius:9px;background:#f5f5f4;color:#aaa;font:inherit;font-size:16px;cursor:pointer}.ready-template-favorite.is-active{background:#fff0f1;color:#e25564}.ready-template-tags{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 10px}.ready-template-tags span{padding:4px 7px;border-radius:999px;background:#f1f3ef;color:#747971;font-size:8px;font-weight:750}.ready-template-card h3{margin:0 0 8px;color:#111318;font-size:14px;letter-spacing:-.025em}.ready-template-card>p{display:-webkit-box;overflow:hidden;flex:1;margin:0;color:#62666c;font-size:10px;line-height:1.75;-webkit-box-orient:vertical;-webkit-line-clamp:3}.ready-template-card>footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(17,19,24,.07)}.ready-template-card>footer small{color:#a0a3a7;font-size:8px}.ready-template-card>footer button{border:0;background:transparent;color:#5b8b3e;font:inherit;font-size:9px;font-weight:850;cursor:pointer}.ready-template-empty{display:grid;justify-items:center;padding:70px 20px;color:#92969c;text-align:center}.ready-template-empty>span{font-size:30px}.ready-template-empty h3{margin:10px 0 5px;color:#32353a}.ready-template-empty p{margin:0;font-size:11px}.ready-template-admin{border:1px solid rgba(17,19,24,.08);border-radius:17px;background:#fff;overflow:hidden}.ready-template-admin>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(17,19,24,.08)}.ready-template-admin>header span{color:#6da64c;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.ready-template-admin>header h3{margin:4px 0;color:#111318;font-size:19px}.ready-template-admin>header p{margin:0;color:#8c9095;font-size:10px}.ready-template-admin>header button{min-height:36px;padding:0 13px;border:0;border-radius:10px;background:#111318;color:#fff;font:inherit;font-size:9px;font-weight:850}.ready-template-admin-table{overflow:auto}.ready-template-admin-row{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(150px,1fr) 90px 90px 130px;align-items:center;gap:12px;min-width:780px;padding:13px 20px;border-bottom:1px solid rgba(17,19,24,.06);color:#55595e;font-size:10px}.ready-template-admin-row.is-head{background:#f7f8f6;color:#8f9398;font-size:8px;font-weight:850;text-transform:uppercase}.ready-template-admin-row>span{display:grid;gap:3px}.ready-template-admin-row strong,.ready-template-admin-row b{color:#202328}.ready-template-admin-row small{color:#9b9ea3;font-size:8px}.ready-template-admin-row em{width:max-content;padding:4px 7px;border-radius:999px;background:#f0f1ef;color:#85898e;font-size:8px;font-style:normal;font-weight:800}.ready-template-admin-row em.is-active{background:#ebf6e7;color:#4f8233}.ready-template-admin-row>span:last-child{display:flex;gap:5px}.ready-template-admin-row button{min-height:28px;padding:0 8px;border:1px solid rgba(17,19,24,.1);border-radius:8px;background:#fff;color:#62666c;font:inherit;font-size:8px;font-weight:800}.ready-template-preview-backdrop{padding:16px;background:rgba(17,19,24,.38);backdrop-filter:blur(9px)}.ready-template-preview-modal{width:min(1120px,calc(100vw - 32px));height:min(820px,calc(100vh - 32px));max-height:calc(100vh - 32px);grid-template-rows:auto minmax(0,1fr) auto;border-radius:22px;background:#f7f8f6}.ready-template-preview-head{padding:22px 27px 18px;background:#fff}.ready-template-preview-head h2{margin-bottom:4px}.ready-template-preview-head p{margin:0;color:#8a8e94;font-size:10px}.ready-template-preview-body{display:grid;min-height:0;grid-template-columns:minmax(0,1.35fr) minmax(300px,.72fr)}.ready-template-preview-copy,.ready-template-preview-side{min-width:0;overflow:auto;padding:22px 26px}.ready-template-preview-side{border-left:1px solid rgba(17,19,24,.08);background:rgba(255,255,255,.55)}.ready-template-version-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.ready-template-version-tabs button{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid rgba(17,19,24,.1);border-radius:9px;background:#fff;color:#686c72;font:inherit;font-size:8px;font-weight:800}.ready-template-version-tabs button .channel-logo{width:20px;height:20px;font-size:7px}.ready-template-version-tabs button.is-active{border-color:#6da64c;background:#eef7e9;color:#4d7b33}.ready-template-preview-copy>article{padding:28px;border:1px solid rgba(17,19,24,.08);border-radius:17px;background:#fff;box-shadow:0 9px 28px rgba(17,19,24,.045)}.ready-template-preview-copy>article>div{display:flex;flex-wrap:wrap;gap:6px}.ready-template-preview-copy>article>div span{padding:4px 7px;border-radius:999px;background:#f1f3ef;color:#7b8079;font-size:8px}.ready-template-preview-copy>article h3{margin:22px 0 15px;color:#111318;font-size:23px;letter-spacing:-.04em}.ready-template-preview-copy>article p{margin:0;color:#33373c;font-size:13px;line-height:1.9}.ready-template-preview-copy>article>strong{display:block;margin-top:20px;color:#56833a;font-size:11px;line-height:1.7}.ready-template-preview-side>section{margin-bottom:15px;padding:16px;border:1px solid rgba(17,19,24,.08);border-radius:14px;background:#fff}.ready-template-preview-side>section>span{color:#25282d;font-size:10px;font-weight:900}.ready-template-preview-side>section>p{margin:7px 0 12px;color:#85898f;font-size:9px;line-height:1.6}.ready-template-platform-checks{display:grid;gap:7px}.ready-template-platform-checks label{display:flex;align-items:center;min-height:38px;padding:0 10px;border:1px solid rgba(17,19,24,.08);border-radius:9px;cursor:pointer}.ready-template-platform-checks label.is-selected{border-color:rgba(102,164,65,.35);background:#eef7e9}.ready-template-platform-checks input{margin-right:8px;accent-color:#6da64c}.ready-template-platform-checks label>span{display:flex;align-items:center;gap:8px}.ready-template-platform-checks .channel-logo{width:22px;height:22px;font-size:7px}.ready-template-platform-checks b{font-size:9px}.ready-template-image-placeholder{display:grid;min-height:94px;place-content:center;border:1px dashed rgba(17,19,24,.18);border-radius:11px;background:linear-gradient(145deg,#ebeee7,#f9faf8);color:#7b8077;text-align:center}.ready-template-image-placeholder b{font-size:9px;letter-spacing:.16em}.ready-template-image-placeholder small{margin-top:5px;font-size:8px}.ready-template-data-note dl{display:grid;gap:7px;margin:10px 0 0}.ready-template-data-note dl>div{display:flex;justify-content:space-between}.ready-template-data-note dt,.ready-template-data-note dd{margin:0;font-size:8px}.ready-template-data-note dt{color:#969a9f}.ready-template-data-note dd{color:#3b3e43;font-weight:800}.ready-template-preview-foot{align-items:center!important;gap:10px!important;padding:15px 26px!important;background:#fff}.ready-template-preview-foot>span{flex:1;color:#969a9f;font-size:8px}.ready-template-ai-button,.ready-template-use-button{min-height:42px;padding:0 16px;border-radius:11px;font:inherit;font-size:10px;font-weight:900;cursor:pointer}.ready-template-ai-button{border:1px solid rgba(17,19,24,.12);background:#fff;color:#555a60}.ready-template-use-button{min-width:150px;border:1px solid #6da64c;background:#6da64c;color:#fff;box-shadow:0 8px 20px rgba(91,144,57,.18)}.single-composer-template-notice{display:flex;align-items:center;gap:10px;margin:0 28px 12px;padding:10px 12px;border:1px solid rgba(102,164,65,.22);border-radius:11px;background:#eff8ea;color:#4d7834}.single-composer-template-notice>span{display:grid;width:25px;height:25px;place-items:center;border-radius:8px;background:#6da64c;color:#fff;font-size:10px;font-weight:900}.single-composer-template-notice>div{display:grid;gap:2px}.single-composer-template-notice strong{font-size:9px}.single-composer-template-notice small{font-size:8px}.single-composer-content-actions{display:flex;align-items:center;gap:9px}.single-composer-content-actions button{min-height:28px;padding:0 9px;border:1px solid rgba(17,19,24,.1);border-radius:8px;background:#fff;color:#6c7075;font:inherit;font-size:8px;font-weight:800}.single-composer-content-actions>span{color:#8d9196;font-size:9px}.single-composer-media-suggestion{margin:10px 0 0;padding:9px 11px;border-radius:9px;background:#f1f5ee;color:#737970;font-size:8px;line-height:1.55}.single-composer-media-suggestion strong{color:#4f7838}
@media(max-width:1080px){.ready-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ready-template-preview-body{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:760px){.ready-template-shell{padding:20px 16px 40px}.ready-template-hero{flex-direction:column}.ready-template-hero>div:last-child{width:100%}.ready-template-hero button{flex:1}.ready-template-toolbar{grid-template-columns:1fr}.ready-template-filter-block{grid-template-columns:1fr}.ready-template-grid{grid-template-columns:1fr}.ready-template-profile-note{align-items:flex-start}.ready-template-profile-note>b{display:none}.ready-template-preview-modal{width:100%;height:100%;max-height:none;border-radius:0}.ready-template-preview-body{grid-template-columns:1fr}.ready-template-preview-side{border-top:1px solid rgba(17,19,24,.08);border-left:0}.ready-template-preview-foot{flex-wrap:wrap}.ready-template-preview-foot>span{order:3;flex-basis:100%;text-align:center}.ready-template-ai-button,.ready-template-use-button{flex:1}.single-composer-template-notice{margin-right:16px;margin-left:16px}}

.sidebar-reward-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 13px;
  border: 1px solid rgba(119, 169, 76, .18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(232, 247, 217, .9), rgba(255, 245, 215, .9));
  color: #283528;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.sidebar-reward-entry:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(68, 101, 49, .1); }
.sidebar-reward-entry > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sidebar-reward-entry strong { font-size: 13px; }
.sidebar-reward-entry small { color: rgba(40, 53, 40, .5); font-size: 10px; }
.sidebar-reward-entry b { font-size: 15px; }
.sidebar-reward-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #111318; color: #dff4c8; }
.sidebar-reward-icon svg { width: 18px; height: 18px; }
.sidebar-reward-entry + .sidebar-footer { margin-top: 12px; }

.nav-item-button {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-assistant-host {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #fbfcf9;
}

.ai-assistant-host[hidden] { display: none !important; }
.publish-workflow-main[hidden] { display: none !important; }

.ai-assistant-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fbfcf9;
}

/* AI 助手嵌入态始终沿用桌面双栏，不被社媒页的窄屏单栏规则拆开。 */
.v2-app:has(.ai-assistant-host:not([hidden])) {
  grid-template-columns: var(--v2-sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.v2-app:has(.ai-assistant-host:not([hidden])) .v2-sidebar,
.v2-app:has(.ai-assistant-host:not([hidden])) .ai-assistant-host {
  width: auto;
  height: auto;
  min-height: 0;
}

.v2-app:has(.ai-assistant-host:not([hidden])) .v2-sidebar { grid-column: 1; grid-row: 1; }
.v2-app:has(.ai-assistant-host:not([hidden])) .ai-assistant-host { grid-column: 2; grid-row: 1; }

/* 社媒3只在原社媒工作流的基础上收束多账号发布语义。 */
.social3-account-rule {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #79b96a;
  border-radius: 0 8px 8px 0;
  background: #f0faeb;
  color: #5d7d61;
  font-size: 11px;
  line-height: 1.5;
}

.social3-account-result-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.social3-account-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(25, 45, 29, .08);
  border-radius: 9px;
  background: #f8fbf8;
  color: #506055;
  font-size: 11px;
}

.social3-account-result .result-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a9b4aa;
}

.social3-account-result.is-ready .result-dot { background: #65ae62; }
.social3-account-result.is-blocked .result-dot { background: #dc9a45; }
.social3-account-result small { margin-left: auto; color: #99a69b; font-size: 9px; }
.social3-copy-button { margin-left: 8px; color: #5c9c60; font-size: 10px; font-weight: 800; }
.social3-target-hint { display: block; margin-top: 3px; color: rgba(17, 19, 24, .36); font-size: 9px; font-style: normal; }

.v2-app {
  height: calc(100vh - 36px);
}

.v2-sidebar,
.publish-workflow-main {
  min-height: 0;
}

.publish-workflow-main {
  background:
    radial-gradient(circle at 12% 8%, rgba(155, 207, 108, 0.16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(91, 141, 239, 0.12), transparent 26%),
    linear-gradient(180deg, #f7f8fa 0%, #eef2f6 100%);
  overflow: auto;
}

.publish-shell {
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 34px;
}

.publish-hero,
.dashboard-grid,
.task-overview-row,
.workflow-layout,
.stage-toolbar,
.section-head,
.inline-actions,
.hero-actions,
.assistant-actions,
.visual-toolbar,
.brand-strip,
.metric-strip,
.stage-actions,
.ops-calendar-toolbar,
.calendar-toolbar-right,
.date-nav,
.ops-channel-actions,
.composer-tools,
.composer-foot,
.account-chips,
.preview-status {
  display: flex;
  align-items: center;
}

.publish-hero {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.module-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 38px rgba(18, 20, 23, 0.055);
  backdrop-filter: blur(22px);
}

.module-tabs button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(17, 19, 24, 0.52);
  font-size: 13px;
  font-weight: 850;
}

.module-tabs button.is-active {
  background: #111318;
  color: #fff;
  box-shadow: 0 12px 24px rgba(17, 19, 24, 0.16);
}

.module-tabs-row { display: flex; align-items: center; gap: 12px; }
.module-tabs-row .module-tabs { flex: 1; min-width: 0; }
.module-tabs-reset { flex: 0 0 auto; white-space: nowrap; }

.module-panel {
  display: none;
}

.module-panel.is-active {
  display: block;
}

.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;
}

.work-panel {
  padding-bottom: 44px;
}

.work-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.work-shortcut-card {
  position: relative;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 46px rgba(18, 20, 23, 0.06);
  color: #111318;
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.work-shortcut-card:hover {
  transform: translateY(-3px);
  border-color: rgba(110, 169, 71, 0.25);
  box-shadow: 0 24px 54px rgba(18, 20, 23, 0.09);
}

.work-shortcut-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(155, 207, 108, 0.18);
  color: #568d35;
  font-size: 18px;
}

.work-shortcut-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-shortcut-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  max-width: 72%;
  margin-top: 18px;
}

.work-shortcut-copy strong {
  font-size: 19px;
  letter-spacing: -0.025em;
}

.work-shortcut-copy small {
  color: rgba(17, 19, 24, 0.48);
  font-size: 12px;
  line-height: 1.55;
}

.work-shortcut-arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.48);
  font-size: 15px;
}

.work-calendar-preview,
.work-create-preview {
  position: absolute;
  right: 18px;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.work-calendar-preview {
  padding: 8px;
  border: 1px solid rgba(17, 19, 24, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 24px rgba(17, 19, 24, 0.06);
}

.work-calendar-preview b,
.work-calendar-preview i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: rgba(17, 19, 24, 0.42);
  font-size: 9px;
  font-style: normal;
}

.work-calendar-preview b,
.work-calendar-preview i.is-active {
  background: #78bd50;
  color: #fff;
}

.work-shortcut-create {
  background:
    radial-gradient(circle at 100% 100%, rgba(155, 207, 108, 0.24), transparent 48%),
    rgba(255, 255, 255, 0.88);
}

.work-create-preview {
  display: grid;
  grid-template-columns: repeat(2, auto);
  padding: 10px;
  border: 1px solid rgba(110, 169, 71, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(72, 116, 43, 0.08);
}

.work-create-preview i {
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(155, 207, 108, 0.18);
  color: #568d35;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.work-create-preview i:nth-child(2) {
  background: #eef4ff;
  color: #4f78cf;
}

.work-create-preview b {
  grid-column: 1 / -1;
  width: 112px;
  height: 3px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.08);
}

.work-create-preview b:nth-of-type(2) { width: 82px; }
.work-create-preview b:nth-of-type(3) { width: 96px; }

.work-composer-card {
  padding: 26px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 60px rgba(18, 20, 23, 0.075);
}

.work-composer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.work-composer-head h2 {
  margin: 7px 0 6px;
  color: #111318;
  font-size: 25px;
  letter-spacing: -0.035em;
}

.work-composer-head p {
  margin: 0;
  color: rgba(17, 19, 24, 0.48);
  font-size: 13px;
}

.work-mode-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 14px;
  background: rgba(17, 19, 24, 0.035);
}

.work-mode-switch button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(17, 19, 24, 0.48);
  font-size: 12px;
  font-weight: 850;
}

.work-mode-switch button.is-active {
  background: #fff;
  color: #568d35;
  box-shadow: 0 7px 18px rgba(17, 19, 24, 0.09);
}

.work-mode-switch button[data-work-mode="optimize"].is-active {
  color: #4f78cf;
}

.work-attachment-list {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.work-attachment-list:empty {
  display: none;
}

.work-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(17, 19, 24, 0.05);
  border-radius: 10px;
  background: #fff0ed;
  color: #8d4942;
  font-size: 11px;
  font-weight: 760;
}

.work-attachment-chip[data-file-kind="doc"] {
  background: #eef4ff;
  color: #486cad;
}

.work-attachment-chip[data-file-kind="data"] {
  background: #fff4e8;
  color: #9a6432;
}

.work-attachment-chip[data-file-kind="image"] {
  background: #eff8e9;
  color: #568d35;
}

.work-attachment-chip b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 7px;
}

.work-attachment-chip button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  opacity: 0.48;
  font-size: 16px;
}

.work-attachment-chip button:hover {
  background: rgba(17, 19, 24, 0.06);
  opacity: 1;
}

.work-prompt-wrap {
  display: block;
}

.work-prompt-wrap textarea {
  width: 100%;
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 18px;
  outline: none;
  background: rgba(247, 249, 245, 0.72);
  color: #111318;
  font: inherit;
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.work-prompt-wrap textarea:focus {
  border-color: rgba(110, 169, 71, 0.62);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(155, 207, 108, 0.12);
}

.work-prompt-wrap textarea::placeholder {
  color: rgba(17, 19, 24, 0.32);
}

.work-composer-footer,
.work-composer-tools,
.work-send-tools {
  display: flex;
  align-items: center;
}

.work-composer-footer {
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}

.work-composer-tools,
.work-send-tools {
  gap: 9px;
}

.work-tool-btn,
.work-model-select,
.work-send-btn {
  min-height: 40px;
  border-radius: 12px;
}

.work-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  background: #fff;
  color: rgba(17, 19, 24, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.work-tool-btn:hover {
  border-color: rgba(110, 169, 71, 0.34);
  color: #568d35;
}

.work-tool-ai {
  border-color: rgba(110, 169, 71, 0.22);
  background: rgba(155, 207, 108, 0.1);
  color: #568d35;
}

.work-model-select {
  display: flex;
  align-items: center;
  padding-left: 12px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  background: #fff;
}

.work-model-mark {
  color: #6cad45;
  font-size: 13px;
}

.work-model-select select {
  min-height: 38px;
  padding: 0 30px 0 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(17, 19, 24, 0.72);
  font: inherit;
  font-size: 12px;
  font-weight: 780;
}

.work-send-btn {
  width: 44px;
  padding: 0;
  border: 0;
  background: #6fb247;
  color: #fff;
  box-shadow: 0 12px 24px rgba(91, 151, 55, 0.22);
  font-size: 22px;
  font-weight: 500;
}

.work-send-btn:hover {
  background: #5f9f3b;
  transform: translateY(-1px);
}

.work-output-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(110, 169, 71, 0.2);
  border-radius: 20px;
  background: rgba(246, 252, 241, 0.94);
  box-shadow: 0 14px 36px rgba(72, 116, 43, 0.07);
}

.work-output-card[hidden] {
  display: none;
}

.work-output-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4f8330;
}

.work-output-card p {
  grid-column: 1 / 2;
  margin: 0;
  color: rgba(17, 19, 24, 0.67);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.work-output-card > button {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: #111318;
  color: #fff;
  font-size: 12px;
  font-weight: 820;
}

@media (max-width: 1080px) {
  .work-shortcuts {
    grid-template-columns: 1fr;
  }

  .work-shortcut-card {
    min-height: 150px;
  }
}

.empty-dashboard {
  padding: 26px 0 54px;
}

.empty-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.empty-dashboard-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #8d93a1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.empty-dashboard-heading h2 {
  margin: 0;
  color: #16181d;
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: -.04em;
}

.empty-dashboard-heading p {
  margin: 9px 0 0;
  color: #767b87;
  font-size: 14px;
}

.empty-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e6e7eb;
  border-radius: 999px;
  color: #858a95;
  background: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.empty-dashboard-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9dce2;
}

.empty-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.empty-module-card {
  position: relative;
  display: flex;
  min-height: 244px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #e1e3e8;
  border-radius: 18px;
  flex-direction: column;
  text-align: left;
  color: #1e2025;
  background: rgba(255,255,255,.7);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.empty-module-card:hover {
  border-color: #b9a8ff;
  background: #fff;
  box-shadow: 0 16px 40px rgba(44, 38, 71, .09);
  transform: translateY(-3px);
}

.empty-module-card:focus-visible {
  outline: 3px solid rgba(98, 72, 214, .22);
  outline-offset: 2px;
}

.empty-module-card-featured {
  border-color: #cfc3ff;
  background: linear-gradient(145deg, #fbfaff 0%, #f4f0ff 100%);
}

.empty-module-icon {
  display: inline-grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid #e2e2e7;
  border-radius: 10px;
  color: #6753c6;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.empty-module-copy {
  display: flex;
  margin-top: 15px;
  flex-direction: column;
  gap: 5px;
}

.empty-module-copy strong { font-size: 16px; letter-spacing: -.01em; }
.empty-module-copy small { color: #858995; font-size: 12px; line-height: 1.55; }

.empty-module-canvas {
  position: relative;
  display: flex;
  height: 58px;
  margin: 17px 0 14px;
  border: 1px dashed #d8d9df;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  color: #b6b8c0;
  background: rgba(247,247,249,.62);
}

.empty-module-canvas > b { font-size: 19px; font-weight: 400; }
.empty-module-canvas:not(.empty-module-lines):not(.empty-module-calendar):not(.empty-module-stack):not(.empty-module-channels):not(.empty-module-chart) i { display: none; }

.empty-module-lines { align-items: flex-start; padding: 14px; flex-direction: column; gap: 7px; }
.empty-module-lines i { width: 76%; height: 4px; border-radius: 9px; background: #e3e4e8; }
.empty-module-lines i:nth-child(2) { width: 92%; }
.empty-module-lines i:nth-child(3) { width: 52%; }

.empty-module-calendar { display: grid; padding: 11px 14px; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.empty-module-calendar i { height: 26px; border: 1px solid #e1e2e6; border-radius: 5px; background: #fff; }

.empty-module-stack { padding: 11px; flex-direction: column; gap: 5px; }
.empty-module-stack i { width: 100%; height: 9px; border-radius: 4px; background: #e7e8eb; }

.empty-module-channels { gap: 8px; }
.empty-module-channels i { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dedfe4; border-radius: 50%; color: #8a8d96; background: #fff; font-size: 9px; font-style: normal; font-weight: 800; }
.empty-module-channels b { margin-left: 5px; }

.empty-module-chart { padding: 11px 18px; align-items: flex-end; gap: 8px; }
.empty-module-chart i { width: 16%; border-radius: 4px 4px 2px 2px; background: #dedfe4; }
.empty-module-chart i:nth-child(1) { height: 32%; }
.empty-module-chart i:nth-child(2) { height: 58%; }
.empty-module-chart i:nth-child(3) { height: 43%; }
.empty-module-chart i:nth-child(4) { height: 78%; background: #d4ccf5; }

.empty-module-action {
  display: flex;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  color: #737782;
  font-size: 11px;
  font-weight: 700;
}
.empty-module-action b { color: #6955c5; font-size: 16px; transition: transform .2s ease; }
.empty-module-card:hover .empty-module-action b { transform: translateX(3px); }

.empty-module-card.is-next {
  border-color: #8e78ef;
  box-shadow: 0 12px 32px rgba(91, 68, 190, .12);
}

.empty-module-card:not(.is-next):not(.is-complete) {
  background: rgba(255, 255, 255, .46);
}

.dashboard-next-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: #6b55ce;
  font-size: 10px;
  font-weight: 800;
}

.empty-module-card.is-complete {
  min-height: 244px;
  border-style: solid;
  border-color: #e2e4e8;
  background: #fff;
}

.empty-module-card.is-complete .empty-module-copy {
  margin-top: 15px;
}

.dashboard-data-canvas {
  padding: 10px 12px;
  border-style: solid;
  border-color: #e8e8ec;
  justify-content: space-between;
  color: #1d2025;
  background: #f8f8fa;
}

.dashboard-data-canvas > strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 25px;
  letter-spacing: -.04em;
}

.dashboard-data-canvas > strong small,
.dashboard-data-note {
  color: #8b8f99;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}

.dashboard-data-canvas .dashboard-account-row,
.dashboard-data-canvas .dashboard-mini-schedule,
.dashboard-data-canvas .dashboard-content-stats {
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.dashboard-data-canvas .dashboard-content-stats {
  gap: 8px;
}

.dashboard-card-label,
.dashboard-card-state {
  color: #888d98;
  font-size: 11px;
  font-weight: 700;
}

.dashboard-card-state {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #39805e;
}

.dashboard-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38b878;
  box-shadow: 0 0 0 4px rgba(56, 184, 120, .12);
}

.dashboard-data-main {
  display: block;
  margin-top: 28px;
  color: #1a1c21;
  font-size: 34px;
  letter-spacing: -.04em;
}

.dashboard-data-main small {
  color: #6f7480;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

.dashboard-data-sub {
  margin-top: 11px;
  color: #969aa3;
  font-size: 11px;
}

.dashboard-account-row,
.dashboard-mini-schedule,
.dashboard-content-stats {
  display: flex;
  min-height: 44px;
  margin-top: 15px;
  padding: 9px 11px;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  background: #f6f7f8;
}

.dashboard-account-row i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #e0e1e5;
  border-radius: 50%;
  color: #777b85;
  background: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-account-row b {
  margin-left: auto;
  color: #4f8568;
  font-size: 10px;
}

.dashboard-mini-schedule i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7962dc;
}

.dashboard-mini-schedule b { color: #686d77; font-size: 10px; }

.dashboard-content-stats { justify-content: space-between; }
.dashboard-content-stats i { color: #8b8f98; font-size: 9px; font-style: normal; }
.dashboard-content-stats b { margin-left: 3px; color: #363940; font-size: 11px; }

.empty-dashboard-footer {
  display: flex;
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid #e7e8eb;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  color: #7b7f89;
  background: rgba(255,255,255,.55);
  font-size: 12px;
}
.empty-dashboard-footer button { padding: 0; border: 0; color: #654fc7; background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.empty-dashboard-footer small { margin-left: auto; color: #a0a3aa; }

/* The analytics dashboard keeps one stable layout while guide states become data. */
.analytics-dashboard {
  padding: 28px 0 54px;
}

.analytics-dashboard-header {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.analytics-dashboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-metrics-block {
  margin-bottom: 14px;
}

.dashboard-metrics-block .analytics-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-metrics-block .analytics-metric-card {
  position: relative;
  min-height: 126px;
  padding: 18px;
}

.dashboard-metrics-block .analytics-metric-card > span {
  display: block;
  color: #7f8490;
  font-size: 10px;
  font-weight: 700;
}

.dashboard-metrics-block .analytics-metric-card > strong {
  display: block;
  margin-top: 12px;
  color: #202329;
  font-size: 25px;
  letter-spacing: -.04em;
}

.dashboard-metrics-block .analytics-metric-card > small {
  position: absolute;
  top: 18px;
  right: 16px;
  color: #39805e;
  font-size: 9px;
  font-weight: 800;
}

.dashboard-metrics-block .analytics-metric-card > p {
  margin: 8px 0 0;
  color: #a0a3ab;
  font-size: 9px;
}

.analytics-dashboard-grid {
  align-items: stretch;
}

.analytics-dashboard-grid > .analytics-card {
  min-height: 274px;
}

.analytics-dashboard-grid > .dashboard-schedule-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.dashboard-guide {
  display: flex;
  min-height: 180px;
  padding: 26px;
  border: 1px dashed #d9dbe1;
  border-radius: 14px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  color: #777c87;
  background: linear-gradient(145deg, rgba(250,250,252,.8), rgba(246,245,251,.64));
}

.dashboard-guide[hidden],
.dashboard-data-region[hidden] {
  display: none !important;
}

.dashboard-guide-horizontal {
  min-height: 118px;
  padding: 22px 26px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.dashboard-guide-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dedfe5;
  border-radius: 11px;
  color: #6b55ce;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}

.dashboard-guide strong {
  display: block;
  margin-top: 14px;
  color: #30333a;
  font-size: 14px;
}

.dashboard-guide-horizontal strong {
  margin-top: 0;
}

.dashboard-guide p {
  max-width: 470px;
  margin: 6px 0 18px;
  font-size: 11px;
  line-height: 1.6;
}

.dashboard-guide-horizontal p {
  margin: 5px 0 0;
}

.dashboard-guide button {
  padding: 0;
  border: 0;
  color: #654fc7;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-guide-horizontal button {
  margin-left: auto;
  padding: 9px 13px;
  border: 1px solid #d8d0f5;
  border-radius: 9px;
  background: #fff;
  white-space: nowrap;
}

.dashboard-platform-guide {
  min-height: 180px;
  padding: 20px;
  justify-content: flex-start;
}

.dashboard-platform-guide > div:first-child strong {
  margin-top: 0;
}

.dashboard-platform-guide > div:first-child p {
  margin-bottom: 12px;
}

.dashboard-platform-options {
  display: grid;
  width: 100%;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-platform-options button {
  display: flex;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #e5e6ea;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  color: #292c32;
  background: #fff;
  text-align: left;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dashboard-platform-options button:hover {
  border-color: #bfb1ef;
  box-shadow: 0 6px 16px rgba(63, 51, 116, .08);
  transform: translateY(-1px);
}

.dashboard-platform-options button > i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #24262b;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-platform-options button > i.instagram { background: #b856a3; }
.dashboard-platform-options button > i.facebook { background: #4d70cf; }
.dashboard-platform-options button > i.tiktok { background: #111318; }
.dashboard-platform-options button > i.youtube { background: #e33d35; }
.dashboard-platform-options button > i.threads { background: #33363c; }
.dashboard-platform-options button > i.linkedin { background: #2474ad; }
.dashboard-platform-options button > span { display: flex; flex-direction: column; }
.dashboard-platform-options button > span strong { margin: 0; font-size: 10px; }
.dashboard-platform-options button > span small { color: #999da6; font-size: 8px; }
.dashboard-platform-options button > b { margin-left: auto; color: #6752c8; font-size: 0; }
.dashboard-platform-options button > b::after { content: "→"; font-size: 11px; }

.dashboard-platform-note {
  margin-top: 10px;
  color: #a0a3ab;
  font-size: 8px;
  line-height: 1.5;
}

.dashboard-block.needs-data .analytics-card-head {
  margin-bottom: 14px;
}

.dashboard-block.has-data {
  border-color: #e1e3e8;
}

.dashboard-trend-data {
  padding-top: 8px;
}

.dashboard-chart-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.dashboard-chart-total strong {
  color: #22252b;
  font-size: 28px;
}

.dashboard-chart-total span,
.dashboard-chart-axis {
  color: #9498a2;
  font-size: 10px;
}

.dashboard-line-visual {
  display: flex;
  height: 105px;
  margin-top: 20px;
  padding: 0 10px;
  border-bottom: 1px solid #e6e7eb;
  align-items: flex-end;
  justify-content: space-between;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 25px, #f0f1f3 26px);
}

.dashboard-line-visual i {
  width: 8%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #8a72e6, #d9d1f6);
}
.dashboard-line-visual i:nth-child(1) { height: 28%; }
.dashboard-line-visual i:nth-child(2) { height: 44%; }
.dashboard-line-visual i:nth-child(3) { height: 39%; }
.dashboard-line-visual i:nth-child(4) { height: 61%; }
.dashboard-line-visual i:nth-child(5) { height: 54%; }
.dashboard-line-visual i:nth-child(6) { height: 76%; }
.dashboard-line-visual i:nth-child(7) { height: 92%; }

.dashboard-chart-axis {
  display: flex;
  margin-top: 7px;
  justify-content: space-between;
}

.dashboard-channel-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-channel-list > div {
  display: flex;
  padding: 10px;
  border: 1px solid #ececef;
  border-radius: 10px;
  align-items: center;
  gap: 9px;
  background: #fafafa;
}

.dashboard-channel-list i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #24262b;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.dashboard-channel-list i.instagram { background: #b856a3; }
.dashboard-channel-list i.facebook { background: #4d70cf; }
.dashboard-channel-list span { display: flex; min-width: 0; flex-direction: column; }
.dashboard-channel-list span strong { font-size: 11px; }
.dashboard-channel-list span small { color: #999da6; font-size: 9px; }
.dashboard-channel-list b { margin-left: auto; color: #448467; font-size: 9px; }
.dashboard-channel-list > div.is-disconnected { border-style: dashed; background: #fff; }
.dashboard-channel-list > div.is-disconnected > i { filter: grayscale(1); opacity: .48; }
.dashboard-channel-list > div.is-disconnected span small { color: #b0b3ba; }
.dashboard-channel-list > div > button {
  margin-left: auto;
  padding: 5px 7px;
  border: 1px solid #d9d1f4;
  border-radius: 7px;
  color: #6652c6;
  background: #fff;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-top-content {
  display: grid;
  padding: 16px;
  border: 1px solid #e8e9ed;
  border-radius: 12px;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  background: #fafafa;
}
.dashboard-content-rank { color: #aaaeb7; font-size: 11px; font-weight: 800; }
.dashboard-top-content > div { display: flex; flex-direction: column; gap: 5px; }
.dashboard-top-content > div strong { font-size: 12px; }
.dashboard-top-content > div small { color: #969aa4; font-size: 9px; }
.dashboard-top-content > p { display: flex; margin: 0; flex-direction: column; }
.dashboard-top-content > p strong { font-size: 14px; }
.dashboard-top-content > p span { color: #9a9ea7; font-size: 8px; }

.dashboard-audience-data > strong { display: block; font-size: 28px; }
.dashboard-audience-data > span { color: #858a95; font-size: 10px; }
.dashboard-audience-data > p { color: #737884; font-size: 11px; line-height: 1.65; }
.dashboard-audience-data > div { height: 7px; margin-top: 20px; border-radius: 999px; background: #ececf0; }
.dashboard-audience-data > div i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: #7963da; }
.dashboard-audience-data > div small { display: block; margin-top: 8px; color: #989ca5; font-size: 9px; }

.dashboard-insight-data { display: flex; gap: 9px; flex-direction: column; }
.dashboard-insight-data article { display: flex; padding: 11px; border-radius: 10px; gap: 10px; background: #f7f7f9; }
.dashboard-insight-data article > b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #6854c7; background: #ebe7fb; font-size: 9px; }
.dashboard-insight-data article strong { font-size: 11px; }
.dashboard-insight-data article p { margin: 4px 0 0; color: #858995; font-size: 9px; }

.analytics-action-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.analytics-action-list > button { position: relative; display: grid; min-height: 104px; padding: 16px 17px 14px; overflow: hidden; border: 1px solid #e7e3f1; border-radius: 14px; grid-template-columns: 34px 1fr auto; grid-template-rows: auto 1fr; align-items: start; gap: 3px 11px; background: linear-gradient(145deg, #fcfbff 0%, #f8f6fd 100%); color: #24242c; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.analytics-action-list > button::after { position: absolute; right: -18px; bottom: -24px; width: 80px; height: 80px; border-radius: 50%; background: rgba(122, 98, 218, .07); content: ""; }
.analytics-action-list > button:hover { border-color: #b8a9e8; box-shadow: 0 8px 22px rgba(77, 61, 143, .1); transform: translateY(-2px); }
.analytics-action-list > button > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #ddd5fa; border-radius: 10px; color: #7159ce; background: #f0ecff; font-size: 16px; font-weight: 800; grid-row: 1 / span 2; }
.analytics-action-list > button strong, .analytics-action-list > button small { display: block; }
.analytics-action-list > button strong { padding-top: 2px; font-size: 12px; letter-spacing: -.1px; }
.analytics-action-list > button small { margin-top: 7px; color: #8c8d98; font-size: 10px; }
.analytics-action-list > button b { z-index: 1; align-self: start; color: #7159ce; font-size: 15px; font-weight: 500; }

@media (max-width: 720px) {
  .analytics-action-list { grid-template-columns: 1fr; }
}

/* Single composer v2 — quieter AI, platform-aware preview */
.composer-v2 { width: min(1280px, calc(100vw - 32px)); max-height: calc(100vh - 24px); background:#fff; }
.composer-v2 .single-composer-head { min-height:64px; padding:14px 24px; background:#fff; border-bottom:1px solid rgba(17,19,24,.08); }
.composer-v2 .single-composer-head h2 { font-size:20px; }
.composer-v2 .single-composer-body { grid-template-columns:minmax(560px,1fr) 420px; min-height:0; max-height:calc(100vh - 142px); background:#f7f8f6; }
.single-composer-main { min-width:0; padding:20px 24px 32px; overflow:auto; }
.single-composer-side { min-width:0; padding:20px; overflow:auto; border-left:1px solid rgba(17,19,24,.08); background:#f2f4f0; }
.composer-v2 .single-composer-account-block,.composer-editor-card,.composer-comment-card { margin:0 0 16px; padding:16px; border:1px solid rgba(17,19,24,.09); border-radius:16px; background:#fff; }
.composer-v2 .composer-account-options { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.composer-v2 .composer-account-option { flex:0 0 190px; min-height:52px; background:#fff; }
.composer-v2 .single-composer-section-head { margin-bottom:12px; }
.composer-v2 .single-composer-section-head h3 { font-size:16px; letter-spacing:-.01em; }
.composer-limit-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.composer-limit-item { display:flex; align-items:center; gap:7px; min-width:168px; padding:7px 9px; border-radius:10px; background:#f4f5f3; }
.composer-limit-logo { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:#111318; color:#fff; font-size:10px; font-weight:900; }
.composer-limit-logo.instagram { background:linear-gradient(145deg,#f47769,#cb3f87); }.composer-limit-logo.facebook{background:#2478e8}
.composer-limit-item>span:nth-child(2){display:grid;gap:1px}.composer-limit-item strong{font-size:10px}.composer-limit-item small{color:rgba(17,19,24,.45);font-size:8px}.composer-limit-item em{margin-left:auto;color:rgba(17,19,24,.46);font-size:9px;font-style:normal}
.composer-v2 .single-composer-textarea { min-height:190px; padding:16px; border-radius:12px; background:#fbfbfa; font-size:14px; }
.composer-ai-heading { display:flex; align-items:center; gap:8px; min-width:170px; }.composer-ai-heading>span:last-child{display:grid}.composer-ai-heading strong{font-size:11px}.composer-ai-heading small{color:rgba(17,19,24,.43);font-size:9px}.composer-ai-spark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#e2efd9;color:#548932}
.composer-v2 .single-composer-ai-quick-actions { display:flex; justify-content:flex-end; gap:5px; }.composer-v2 .single-composer-ai-quick-actions button{min-height:30px;padding:0 10px;border-radius:8px;font-size:10px;background:#fff}
.composer-ai-chat { grid-column:1/-1; display:grid; grid-template-columns:1fr 34px; gap:7px; }.composer-v2 .single-composer-instruction{min-height:38px;height:38px;padding:9px 11px;border-radius:9px;font-size:11px;line-height:18px}.composer-ai-chat button{border:0;border-radius:9px;background:#6ca64a;color:white;font-size:17px}
.composer-v2 .single-composer-images { margin:0 0 16px; padding:16px; border:1px solid rgba(17,19,24,.09); border-radius:16px; background:#fff; }.composer-v2 .single-composer-image-preview,.composer-v2 .single-composer-image-action,.composer-v2 .single-composer-image-add{width:76px;height:76px;border-radius:12px}
.composer-comment-card>textarea { width:100%; min-height:70px; padding:12px; resize:vertical; border:1px solid rgba(17,19,24,.1); border-radius:11px; outline:none; background:#fbfbfa; font:inherit; font-size:12px; }
.composer-comment-schedule { display:flex; align-items:center; gap:8px; margin-top:10px; color:rgba(17,19,24,.62); font-size:11px; font-weight:700; }.composer-comment-schedule input[type=datetime-local]{margin-left:auto;padding:7px 9px;border:1px solid rgba(17,19,24,.1);border-radius:9px;background:#f7f7f6;color:#111318}
.composer-preview-section { margin-bottom:16px; }.composer-preview-stack{display:grid;gap:10px}
.composer-platform-preview { padding:14px; border:1px solid rgba(17,19,24,.09); border-radius:15px; background:#fff; box-shadow:0 6px 18px rgba(17,19,24,.03); }.composer-platform-preview header,.composer-preview-profile{display:flex;align-items:center;gap:8px}.composer-platform-preview header>span:nth-child(2),.composer-preview-profile>span:last-child{display:grid}.composer-platform-preview header strong{font-size:11px}.composer-platform-preview header small,.composer-preview-profile small{color:rgba(17,19,24,.42);font-size:8px}.composer-platform-preview header em{margin-left:auto;color:rgba(17,19,24,.42);font-size:8px;font-style:normal}.composer-preview-logo,.composer-preview-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#111318;color:#fff;font-size:10px;font-weight:900}.composer-platform-preview.instagram .composer-preview-logo{background:linear-gradient(145deg,#f47769,#cb3f87)}.composer-platform-preview.facebook .composer-preview-logo{background:#2478e8}
.composer-preview-profile{margin-top:13px}.composer-preview-avatar{width:25px;height:25px;background:#dfe9d8;color:#48712f}.composer-preview-profile strong{font-size:10px}.composer-platform-preview>p{margin:10px 0;white-space:pre-wrap;color:#25272b;font-size:11px;line-height:1.55;max-height:84px;overflow:auto}.composer-platform-preview footer{display:flex;justify-content:space-between;padding-top:9px;border-top:1px solid rgba(17,19,24,.06);color:rgba(17,19,24,.42)}
.composer-preview-media{display:grid;align-content:end;height:92px;margin:10px 0;padding:10px;border-radius:10px;background:linear-gradient(145deg,#101b34,#34458c);color:#fff}.composer-preview-media span{font-size:11px;font-weight:900}.composer-preview-media small{font-size:8px;opacity:.6}.composer-preview-reply{margin:9px 0;padding:8px;border-left:2px solid #7cae5c;background:#f5f8f3}.composer-preview-reply>span{font-size:8px;font-weight:800;color:#5a883c}.composer-preview-reply p{margin:3px 0 0;font-size:9px}
.composer-v2 .single-composer-publish-panel { padding:14px; border:1px solid rgba(17,19,24,.09); border-radius:15px; background:#fff; }.composer-v2 .single-composer-publish-options.compact{grid-template-columns:repeat(3,1fr);gap:6px}.composer-v2 .single-composer-publish-option{align-items:center;gap:7px;min-height:50px;padding:9px;border-radius:10px;background:#fafafa}.composer-v2 .single-composer-publish-option strong{font-size:11px}.composer-v2 .single-composer-publish-option small{font-size:8px}.composer-v2 .single-composer-radio{width:15px;height:15px}.composer-v2 .single-composer-publish-option.is-selected .single-composer-radio{border-width:4px}.composer-v2 .single-composer-publish-option.is-selected{border-color:#91b77b;background:#f3f8ef}
.composer-v2 .single-composer-calendar-day{width:31px;height:31px;border-radius:9px}.composer-v2 .single-composer-calendar-head strong{font-size:16px}.composer-v2 .single-composer-foot{min-height:64px;padding:10px 24px;background:#fff;border-top:1px solid rgba(17,19,24,.08)}.composer-foot-status{margin-right:auto;color:rgba(17,19,24,.45);font-size:11px}.composer-v2 .single-composer-confirm-button{background:#111318}
@media(max-width:960px){.composer-v2 .single-composer-body{grid-template-columns:1fr}.single-composer-side{border-left:0;border-top:1px solid rgba(17,19,24,.08)}.composer-v2{width:calc(100vw - 16px)}}

/* Native platform previews and collapsible publishing controls */
.composer-v2 .single-composer-body{grid-template-columns:minmax(520px,1fr) 500px}
.composer-v2 .single-composer-side{padding:16px 20px 28px}
.composer-v2 .single-composer-publish-panel{margin-bottom:14px;padding:10px 12px}
.composer-publish-inline{display:flex;align-items:center;gap:12px}.composer-publish-inline>span{display:grid;min-width:94px}.composer-publish-inline>span strong{font-size:11px}.composer-publish-inline>span small{color:rgba(17,19,24,.4);font-size:8px}
.composer-v2 .single-composer-publish-options.compact{display:flex;flex:1;justify-content:flex-end;gap:4px}.composer-v2 .single-composer-publish-option{display:block;width:auto;min-width:54px;min-height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:rgba(17,19,24,.55);font-size:10px;font-weight:800;text-align:center}.composer-v2 .single-composer-publish-option:hover{background:#f3f4f2;color:#111318}.composer-v2 .single-composer-publish-option.is-selected{border:0;background:#111318;color:#fff}
.composer-schedule-disclosure{margin-top:8px;border-top:1px solid rgba(17,19,24,.07)}.composer-schedule-disclosure summary{display:flex;align-items:center;justify-content:space-between;padding:9px 2px 0;cursor:pointer;list-style:none;color:#426d2d;font-size:10px;font-weight:800}.composer-schedule-disclosure summary::-webkit-details-marker{display:none}.composer-schedule-disclosure summary small{color:rgba(17,19,24,.38);font-size:8px}.composer-schedule-disclosure .single-composer-schedule-fields{margin-top:9px;padding:10px;border-radius:12px;background:#f7f8f6}
.composer-preview-section>.single-composer-section-head{margin:0 0 10px}.composer-preview-stack{gap:14px}
.composer-platform-preview{padding:0;overflow:hidden;border-radius:12px;box-shadow:0 8px 24px rgba(17,19,24,.05)}
.composer-native-bar{min-height:38px;padding:7px 12px;border-bottom:1px solid #eff0f1;background:#fafafa}.composer-native-bar .composer-preview-logo{width:22px;height:22px;border-radius:7px;font-size:8px}.composer-native-bar strong{font-size:10px}.composer-native-bar em{font-size:8px}
.composer-native-post{padding:14px 16px;background:#fff}.composer-preview-profile{margin:0}.composer-preview-profile>b{margin-left:auto;color:#5d6065;font-size:10px;letter-spacing:1px}.composer-preview-profile i{display:inline-grid;place-items:center;width:12px;height:12px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:7px;font-style:normal}
.composer-platform-preview .composer-native-post>p{max-height:none;margin:11px 0 12px;overflow:visible;color:#0f1419;font-size:13px;line-height:1.48}
.composer-platform-preview footer{min-height:32px;padding:9px 8px 0;border-top:0;color:#536471;font-size:13px}.composer-platform-preview footer span{display:inline-flex;align-items:center;gap:3px}.composer-platform-preview footer small{font-size:9px}.composer-platform-preview footer .push{margin-left:auto}
.composer-platform-preview.x{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.composer-platform-preview.x .composer-native-post{padding:14px 18px}.composer-platform-preview.x .composer-preview-avatar{border-radius:50%;background:#111;color:#fff}.composer-platform-preview.x .composer-preview-profile strong{font-size:12px}.composer-platform-preview.x .composer-preview-profile small{font-size:10px}.composer-platform-preview.x footer{justify-content:space-between;border-top:1px solid #eff3f4}
.composer-platform-preview.instagram{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.composer-platform-preview.instagram .composer-native-post{padding:0}.composer-platform-preview.instagram .composer-preview-profile{padding:11px 14px}.composer-platform-preview.instagram .composer-preview-avatar{border-radius:50%;outline:2px solid #e14576;outline-offset:2px}.composer-platform-preview.instagram .composer-native-post>p{display:none}.composer-platform-preview.instagram .composer-preview-media{height:auto;aspect-ratio:1/1;margin:0;border-radius:0;padding:24px;background:radial-gradient(circle at 75% 24%,rgba(91,186,238,.85),transparent 21%),radial-gradient(circle at 30% 75%,rgba(111,78,236,.9),transparent 34%),linear-gradient(145deg,#081222,#16204b)}.composer-platform-preview.instagram footer{padding:11px 14px 4px}.instagram-caption{padding:4px 14px 12px;color:#262626;font-size:11px;line-height:1.45}.instagram-caption strong{margin-right:4px}.composer-platform-preview.instagram .composer-preview-reply{margin:0 14px 12px}
.composer-platform-preview.facebook{font-family:Helvetica,Arial,sans-serif}.composer-platform-preview.facebook .composer-native-post{padding:12px 0 0}.composer-platform-preview.facebook .composer-preview-profile{padding:0 14px}.composer-platform-preview.facebook .composer-preview-avatar{border-radius:50%;background:#1877f2;color:#fff}.composer-platform-preview.facebook .composer-native-post>p{padding:0 14px;color:#050505}.composer-platform-preview.facebook .composer-preview-media{margin:0;border-radius:0;height:190px}.composer-platform-preview.facebook .facebook-stats{justify-content:space-between;margin:0 14px;padding:10px 0;border-bottom:1px solid #e4e6eb}.composer-platform-preview.facebook .facebook-stats small{color:#65676b;font-size:10px}.composer-platform-preview.facebook .facebook-actions{justify-content:space-around;padding:8px 0;color:#65676b;font-size:11px;font-weight:700}.composer-platform-preview.facebook .composer-preview-reply{margin:0 14px 10px}
@media(max-width:1050px){.composer-v2 .single-composer-body{grid-template-columns:minmax(480px,1fr) 440px}}@media(max-width:880px){.composer-v2 .single-composer-body{grid-template-columns:1fr}.single-composer-side{border-left:0;border-top:1px solid rgba(17,19,24,.08)}}
.composer-platform-preview.instagram .composer-preview-media.is-empty{place-content:center;text-align:center;background:#f3f3f3;color:#8e8e8e}.composer-platform-preview.instagram .composer-preview-media.is-empty span{font-size:24px}.composer-platform-preview.instagram .composer-preview-media.is-empty small{margin-top:8px;font-size:10px;opacity:1}

/* Independent content versions per selected platform */
.composer-version-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:14px}
.composer-version-tab{display:flex;align-items:center;gap:8px;min-width:0;min-height:50px;padding:7px 9px;border:1px solid rgba(17,19,24,.1);border-radius:11px;background:#f8f8f7;color:rgba(17,19,24,.55);text-align:left;cursor:pointer}.composer-version-tab:hover{border-color:rgba(17,19,24,.22);color:#111318}.composer-version-tab.is-active{border-color:#111318;background:#111318;color:#fff;box-shadow:0 7px 16px rgba(17,19,24,.12)}
.composer-version-tab>span:nth-child(2){display:grid;min-width:0;gap:2px}.composer-version-tab strong{font-size:10px}.composer-version-tab small{overflow:hidden;color:currentColor;font-size:8px;opacity:.58;text-overflow:ellipsis;white-space:nowrap}.composer-version-tab em{margin-left:auto;color:currentColor;font-size:8px;font-style:normal;opacity:.58}.composer-version-tab.is-active .composer-limit-logo{background:#fff;color:#111318}.composer-version-tab.is-active .composer-limit-logo.instagram,.composer-version-tab.is-active .composer-limit-logo.facebook{background:#fff;color:#111318}
.composer-active-editor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:8px}.composer-active-editor-head>span{display:grid;gap:2px}.composer-active-editor-head strong{font-size:12px}.composer-active-editor-head small{color:rgba(17,19,24,.42);font-size:9px}.composer-active-editor-head em{color:rgba(17,19,24,.48);font-size:9px;font-style:normal;font-weight:800}
@media(max-width:620px){.composer-version-tabs{grid-template-columns:1fr}.composer-version-tab{min-height:44px}}

.composer-publish-confirm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(17,19,24,.07)}.composer-publish-confirm-row>span{color:rgba(17,19,24,.42);font-size:8px}.composer-publish-confirm-row>button{min-height:34px;padding:0 14px;border:0;border-radius:9px;background:#111318;color:#fff;font-size:10px;font-weight:850;cursor:pointer}.composer-publish-confirm-row>button:hover{background:#2a2d32}.composer-v2 .composer-foot-status{color:#9a6b20}

/* Preview above, publishing controls anchored to the lower-right. */
.composer-v2 .single-composer-side{display:flex;flex-direction:column;overflow:hidden}
.composer-v2 .composer-preview-section{order:1;flex:1;min-height:0;margin-bottom:12px;overflow-y:auto;padding-right:3px}
.composer-v2 .single-composer-publish-panel{order:2;flex:0 0 auto;position:relative;z-index:2;margin:0;box-shadow:0 -10px 24px rgba(242,244,240,.94)}
@media(max-width:880px){.composer-v2 .single-composer-side{display:block;overflow:auto}.composer-v2 .composer-preview-section{overflow:visible}.composer-v2 .single-composer-publish-panel{position:sticky;bottom:0}}
.composer-v2 .single-composer-main>.single-composer-publish-panel{position:relative;order:initial;z-index:1;margin:0;padding:14px 16px;border-radius:16px;box-shadow:none;background:#fff}
.composer-v2 .single-composer-side>.composer-preview-section{margin-bottom:0}

.composer-version-tab{position:relative;padding:0;cursor:default}.composer-version-check{position:absolute;z-index:2;top:5px;right:5px;display:grid;place-items:center;width:18px;height:18px;padding:0;border:1px solid rgba(17,19,24,.16);border-radius:6px;background:#fff;color:rgba(17,19,24,.48);font-size:9px;font-weight:900;cursor:pointer}.composer-version-tab.is-selected .composer-version-check{border-color:#6da64c;background:#6da64c;color:#fff}.composer-version-tab.is-active .composer-version-check{border-color:rgba(255,255,255,.5);background:#fff;color:#111318}.composer-version-main{display:flex;align-items:center;gap:8px;width:100%;min-height:50px;padding:7px 28px 7px 9px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.composer-version-main>span:nth-child(2){display:grid;min-width:0;gap:2px}.composer-version-main strong{font-size:10px}.composer-version-main small{overflow:hidden;color:currentColor;font-size:8px;opacity:.58;text-overflow:ellipsis;white-space:nowrap}.composer-version-main em{margin-left:auto;color:currentColor;font-size:8px;font-style:normal;opacity:.58}.composer-version-tab:not(.is-selected){border-style:dashed;opacity:.72}.composer-version-tab:not(.is-selected):hover{opacity:1}
.composer-publish-datetime{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(17,19,24,.07);color:rgba(17,19,24,.62);font-size:10px;font-weight:750}.composer-publish-datetime input{min-width:190px;padding:7px 9px;border:1px solid rgba(17,19,24,.1);border-radius:9px;background:#f7f7f6;color:#111318;font:inherit;font-size:10px}

.composer-media-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.composer-media-head .single-composer-section-head{flex:1;margin:0}.composer-media-tabs{display:flex;padding:3px;border:1px solid rgba(17,19,24,.1);border-radius:10px;background:#f1f2f0}.composer-media-tabs button{min-width:58px;min-height:30px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:rgba(17,19,24,.45);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.composer-media-tabs button.is-active{background:#fff;color:#111318;box-shadow:0 2px 7px rgba(17,19,24,.1)}
.composer-media-upload-wrap{position:relative}.composer-v2 .composer-media-upload{display:flex;flex-direction:column;width:86px;gap:3px;font-size:20px}.composer-v2 .composer-media-upload small{font-size:9px;font-weight:750}.composer-media-source-menu{position:absolute;z-index:12;left:0;bottom:calc(100% + 8px);width:230px;padding:6px;border:1px solid rgba(17,19,24,.1);border-radius:14px;background:#fff;box-shadow:0 16px 38px rgba(17,19,24,.16)}.composer-media-source-menu[hidden]{display:none}.composer-media-source-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:11px;border:0;border-radius:10px;background:transparent;color:#25272b;text-align:left;cursor:pointer}.composer-media-source-menu button:hover{background:#f3f4f2}.composer-media-source-menu button>span:first-child{display:grid;place-items:center;width:28px;height:28px;font-size:20px}.composer-media-source-menu button>span:last-child{display:grid;gap:2px}.composer-media-source-menu strong{font-size:11px}.composer-media-source-menu small{color:rgba(17,19,24,.43);font-size:8px}.composer-media-tip{margin:9px 0 0;color:rgba(17,19,24,.42);font-size:9px}.single-composer-image-preview.is-video,.composer-preview-media.is-video{background:linear-gradient(145deg,#121212,#353535)}.single-composer-image-preview.is-video .single-composer-image-glow{display:none}

.dashboard-schedule-data {
  display: flex;
  padding: 16px;
  border: 1px solid #e8e9ed;
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  background: #fafafa;
}
.dashboard-schedule-data time { display: flex; flex-direction: column; }
.dashboard-schedule-data time strong { font-size: 20px; }
.dashboard-schedule-data time small { color: #969aa4; font-size: 9px; }
.dashboard-schedule-data > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.dashboard-schedule-data > div strong { font-size: 11px; }
.dashboard-schedule-data > div span { color: #969aa4; font-size: 9px; }
.dashboard-schedule-data > b { margin-left: auto; color: #6652c6; font-size: 9px; }

@media (max-width: 980px) {
  .dashboard-metrics-block .analytics-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .analytics-dashboard-header,
  .analytics-dashboard-actions,
  .dashboard-guide-horizontal { align-items: flex-start; flex-direction: column; }
  .dashboard-guide-horizontal button { margin-left: 0; }
  .dashboard-metrics-block .analytics-metric-grid { grid-template-columns: 1fr; }
  .dashboard-top-content { grid-template-columns: auto 1fr; }
  .dashboard-platform-options { grid-template-columns: 1fr; }
  .dashboard-channel-list { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .empty-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .empty-dashboard-heading { align-items: flex-start; flex-direction: column; }
  .empty-dashboard-grid { grid-template-columns: 1fr; }
  .empty-module-card { min-height: 226px; }
  .empty-dashboard-footer { align-items: flex-start; flex-direction: column; }
  .empty-dashboard-footer small { margin-left: 0; }
  .work-composer-card {
    padding: 18px;
  }

  .work-composer-head,
  .work-composer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .work-mode-switch,
  .work-send-tools {
    align-self: stretch;
  }

  .work-mode-switch button,
  .work-model-select {
    flex: 1;
  }

  .work-composer-tools {
    flex-wrap: wrap;
  }

  .work-output-card {
    grid-template-columns: 1fr;
  }

  .work-output-card > button {
    grid-column: 1;
    grid-row: auto;
  }
}

.page-kicker,
.card-kicker {
  color: rgba(17, 19, 24, 0.42);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.publish-hero h1 {
  margin: 8px 0 8px;
  color: #111318;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.publish-hero p,
.rail-top p,
.dash-card p,
.ai-card p,
.assistant-card p,
.result-card p {
  margin: 0;
  color: rgba(17, 19, 24, 0.58);
  font-size: 14px;
  line-height: 1.7;
}

.hero-actions,
.inline-actions,
.assistant-actions,
.visual-toolbar,
.brand-strip,
.stage-actions,
.date-nav,
.ops-channel-actions,
.composer-tools,
.composer-foot,
.account-chips,
.preview-status {
  gap: 10px;
  flex-wrap: wrap;
}

.primary-btn,
.ghost-btn,
.status-tag,
.assistant-actions button,
.material-grid button,
.idea-link-btn,
.square-btn,
.view-switch button,
.channel-row,
.composer-tool,
.account-chip,
.modal-close {
  min-height: 38px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 780;
}

.primary-btn {
  padding: 0 16px;
  border: 0;
  background: #111318;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(17, 19, 24, 0.14);
}

.ghost-btn {
  padding: 0 14px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.7);
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(17, 19, 24, 0.5);
}

.status-tag.success {
  background: rgba(155, 207, 108, 0.18);
  color: #47732a;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(160px, 0.65fr));
  gap: 16px;
  margin-bottom: 16px;
}

.dash-card,
.overview-card,
.workflow-rail,
.workflow-stage,
.assistant-card,
.form-card,
.ai-card,
.variant-card,
.quality-panel,
.result-card,
.ops-calendar-section,
.ops-channel-panel,
.ops-calendar-card,
.publish-modal {
  border: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(18, 20, 23, 0.055);
  backdrop-filter: blur(24px);
}

.dash-card {
  min-height: 128px;
  padding: 18px;
  border-radius: 22px;
  display: grid;
  align-content: space-between;
  gap: 12px;
}

.dash-primary {
  min-height: 150px;
  color: #111318;
  background:
    radial-gradient(circle at 90% 12%, rgba(155, 207, 108, 0.56), transparent 26%),
    linear-gradient(135deg, #ffffff, #eef6e5);
}

.dash-card h2,
.overview-card h2,
.workflow-rail h2,
.stage-toolbar h2,
.form-card h3,
.ai-card h3,
.variant-card h3,
.quality-panel h3,
.result-card h3,
.assistant-card h3 {
  margin: 0;
}

.dash-card strong {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dash-card span,
.mini-list span,
.metric-strip span {
  color: rgba(17, 19, 24, 0.52);
  font-size: 13px;
}

.task-overview-row {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.28fr);
  gap: 16px;
  margin-bottom: 18px;
}

.public-performance-card {
  background: #f3f2ef;
  box-shadow: none;
}

.public-performance-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.section-number {
  padding-top: 4px;
  color: #00836f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.public-performance-head h2 {
  margin: 0;
  color: #15191a;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.public-performance-head p {
  margin: 34px 0 0;
  color: rgba(21, 25, 26, 0.58);
  font-size: 15px;
  line-height: 1.7;
}

.public-performance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 38px;
  overflow: hidden;
  border: 1px solid rgba(21, 25, 26, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.56);
}

.public-performance-metrics div {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px 24px;
  border-right: 1px solid rgba(21, 25, 26, 0.12);
}

.public-performance-metrics div:last-child {
  border-right: 0;
}

.public-performance-metrics strong {
  color: #15191a;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.public-performance-metrics span {
  color: rgba(21, 25, 26, 0.52);
  font-size: 12px;
}

.ops-calendar-section {
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 26px;
}

.ops-channel-panel h3 {
  margin: 0;
  color: #111318;
  letter-spacing: -0.035em;
}

.ops-agent-card p,
.publish-modal p,
.composer-muted {
  margin: 6px 0 0;
  color: rgba(17, 19, 24, 0.56);
  font-size: 13px;
  line-height: 1.6;
}

.ops-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.ops-channel-panel,
.ops-calendar-card {
  border-radius: 22px;
  padding: 16px;
}

.ops-channel-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.ops-channel-list {
  display: grid;
  gap: 8px;
}

.channel-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.62);
  color: #111318;
  text-align: left;
}

.channel-row.is-active {
  border-color: rgba(155, 207, 108, 0.78);
  background: rgba(155, 207, 108, 0.16);
}

.channel-logo {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #111318;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.channel-logo.x { background: #111318; }
.channel-logo.linkedin { background: #0a66c2; }
.channel-logo.instagram { background: linear-gradient(135deg, #ff7a59, #c13584); }
.channel-logo.tiktok { background: #0d1117; }
.channel-logo.facebook { background: #1877f2; }
.channel-logo.youtube { background: #ff0033; }

.channel-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.channel-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-meta small,
.post-card small {
  color: rgba(17, 19, 24, 0.48);
  font-size: 11px;
}

.ops-agent-card {
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(155, 207, 108, 0.28), transparent 34%),
    rgba(17, 19, 24, 0.035);
}

.ops-agent-card button {
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: #111318;
  color: #fff;
  font-weight: 820;
}

.ops-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.calendar-toolbar-right {
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.calendar-selection-tools,
.calendar-selection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-selection-tools {
  margin-left: 0;
}

.calendar-create-menu {
  position: relative;
  flex: 0 0 auto;
}

.calendar-create-trigger {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: #111318;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.calendar-create-trigger span {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.62);
}

.calendar-create-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: 190px;
  padding: 6px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 19, 24, 0.16);
}

.calendar-create-popover button {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #111318;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.calendar-create-popover button:hover {
  background: #f1f2ef;
}

.calendar-create-popover button > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef4eb;
  color: #52783f;
  font-size: 9px;
  font-weight: 900;
}

.calendar-create-popover strong {
  font-size: 11px;
}

.calendar-platform-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.68);
}

.calendar-platform-filter-label {
  padding: 0 5px 0 7px;
  color: rgba(17, 19, 24, 0.48);
  font-size: 10px;
  font-weight: 820;
  white-space: nowrap;
}

.calendar-platform-filter-list {
  display: flex;
  align-items: center;
  gap: 3px;
}

.calendar-platform-filter-option {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(17, 19, 24, 0.58);
  font-size: 10px;
  font-weight: 780;
  white-space: nowrap;
}

.calendar-platform-filter-option:hover {
  background: rgba(17, 19, 24, 0.05);
  color: #111318;
}

.calendar-platform-filter-option.is-active {
  background: #111318;
  color: #fff;
}

.calendar-account-filter-picker {
  position: relative;
  margin-left: 2px;
  padding-left: 5px;
  border-left: 1px solid rgba(17, 19, 24, 0.08);
}

.calendar-account-filter-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 3px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #111318;
  text-align: left;
}

.calendar-account-filter-trigger:hover,
.calendar-account-filter-trigger.is-open {
  background: rgba(155, 207, 108, 0.15);
}

.calendar-account-filter-trigger > span:nth-child(2) {
  display: grid;
  gap: 1px;
  min-width: 68px;
}

.calendar-account-filter-trigger small {
  color: rgba(17, 19, 24, 0.4);
  font-size: 8px;
  font-weight: 760;
}

.calendar-account-filter-trigger strong {
  color: rgba(17, 19, 24, 0.72);
  font-size: 9px;
  white-space: nowrap;
}

.calendar-account-filter-trigger b {
  color: rgba(17, 19, 24, 0.36);
  font-size: 10px;
  transition: transform 160ms ease;
}

.calendar-account-filter-trigger.is-open b {
  transform: rotate(180deg);
}

.calendar-account-filter-avatars {
  display: flex;
  padding-left: 4px;
}

.calendar-account-filter-avatars i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -5px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #111318;
  color: #fff;
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
}

.calendar-account-filter-avatars i.instagram,
.calendar-account-avatar.instagram {
  background: linear-gradient(135deg, #ff7a59, #c13584);
}

.calendar-account-filter-avatars i.facebook,
.calendar-account-avatar.facebook {
  background: #1877f2;
}

.calendar-account-filter-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  width: 350px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 19, 24, 0.2);
}

.calendar-account-filter-head,
.calendar-account-filter-scope,
.calendar-account-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-account-filter-head {
  padding: 18px 18px 14px;
}

.calendar-account-filter-head > div {
  display: grid;
  gap: 3px;
}

.calendar-account-filter-head strong {
  color: #111318;
  font-size: 14px;
}

.calendar-account-filter-head small,
.calendar-account-filter-scope small {
  color: rgba(17, 19, 24, 0.44);
  font-size: 10px;
}

.calendar-account-filter-head > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(155, 207, 108, 0.18);
  color: #568d35;
  font-size: 10px;
  font-weight: 880;
}

.calendar-account-filter-scope {
  padding: 9px 18px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
  background: #f7f8f6;
}

.calendar-account-filter-scope > span {
  color: rgba(17, 19, 24, 0.68);
  font-size: 11px;
  font-weight: 820;
}

.calendar-account-filter-options {
  display: grid;
  max-height: 290px;
  padding: 8px;
  overflow-y: auto;
}

.calendar-account-filter-option {
  display: grid;
  grid-template-columns: 20px 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
}

.calendar-account-filter-option:hover,
.calendar-account-filter-option.is-selected {
  background: rgba(155, 207, 108, 0.12);
}

.calendar-account-checkbox {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(17, 19, 24, 0.18);
  border-radius: 6px;
  background: #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.calendar-account-filter-option.is-selected .calendar-account-checkbox {
  border-color: #78b950;
  background: #78b950;
}

.calendar-account-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #111318;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.calendar-account-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-account-copy strong,
.calendar-account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-account-copy strong {
  color: #111318;
  font-size: 11px;
}

.calendar-account-copy small {
  color: rgba(17, 19, 24, 0.45);
  font-size: 9px;
}

.calendar-account-filter-foot {
  padding: 12px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
  background: #fafafa;
}

.calendar-account-filter-foot > div {
  display: flex;
  gap: 5px;
}

.calendar-account-filter-foot button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 9px;
  background: #fff;
  color: rgba(17, 19, 24, 0.62);
  font-size: 9px;
  font-weight: 800;
}

.calendar-account-filter-foot button.is-primary {
  border-color: #111318;
  background: #111318;
  color: #fff;
}

.calendar-selection-actions[hidden] {
  display: none;
}

.calendar-selection-actions > span {
  color: #47732a;
  font-size: 11px;
  font-weight: 820;
  white-space: nowrap;
}

[data-toggle-calendar-selection].is-selected {
  border-color: rgba(110, 169, 71, 0.65);
  background: rgba(155, 207, 108, 0.15);
  color: #47732a;
}

.vietnam-holiday-strip {
  display: none;
}

.vietnam-holiday-strip-head {
  display: grid;
  gap: 3px;
  white-space: nowrap;
}

.vietnam-holiday-strip-head strong {
  color: #a23e30;
  font-size: 12px;
}

.vietnam-holiday-strip-head span {
  color: rgba(17, 19, 24, 0.45);
  font-size: 10px;
}

.vietnam-holiday-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.vietnam-holiday-chip {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 150px;
  padding: 7px 9px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
}

.vietnam-holiday-chip.is-current {
  border-color: rgba(210, 73, 55, 0.4);
  background: rgba(255, 231, 224, 0.86);
}

.vietnam-holiday-chip b {
  color: #111318;
  font-size: 11px;
}

.vietnam-holiday-chip small {
  overflow: hidden;
  color: rgba(17, 19, 24, 0.5);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.square-btn,
.view-switch button {
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.68);
  color: rgba(17, 19, 24, 0.68);
}

.square-btn {
  width: 38px;
  padding: 0;
  font-size: 20px;
}

.ghost-btn.small {
  min-height: 34px;
  padding: 0 12px;
}

.view-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 14px;
  background: rgba(17, 19, 24, 0.05);
}

.view-switch button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
}

.view-switch button.is-active {
  background: #111318;
  color: #fff;
}

.ops-calendar-scroll {
  overflow: auto;
}

.calendar-grid {
  display: grid;
  min-width: 840px;
  border: 1px solid rgba(17, 19, 24, 0.06);
  border-radius: 18px;
  overflow: hidden;
}

.calendar-corner,
.day-head,
.time-label,
.calendar-cell {
  border-right: 1px solid rgba(17, 19, 24, 0.055);
  border-bottom: 1px solid rgba(17, 19, 24, 0.055);
}

.calendar-corner,
.day-head {
  min-height: 58px;
  background: rgba(17, 19, 24, 0.035);
}

.day-head {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
}

.day-head span {
  color: rgba(17, 19, 24, 0.45);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.day-head strong {
  font-size: 13px;
}

.day-head.today {
  background: rgba(155, 207, 108, 0.18);
}

.day-head.has-vietnam-holiday {
  min-height: 58px;
}

.calendar-holiday-label,
.month-holiday-label {
  display: block;
  color: #8f6df6;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
  white-space: normal;
}

.calendar-holiday-label {
  margin-top: 4px;
}

.month-holiday-label {
  max-width: 100%;
  margin-top: 6px;
}

.time-label {
  min-height: 96px;
  padding: 12px 10px;
  background: rgba(17, 19, 24, 0.02);
  color: rgba(17, 19, 24, 0.42);
  font-size: 11px;
  font-weight: 850;
}

.calendar-cell {
  min-height: 96px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.calendar-cell.is-drop-hover {
  background: rgba(155, 207, 108, 0.18);
}

.calendar-cell.has-vietnam-holiday {
  background: rgba(255, 255, 255, 0.42);
}

.calendar-cell[role="button"] {
  cursor: pointer;
}

.calendar-cell.is-calendar-selected {
  position: relative;
  background: rgba(155, 207, 108, 0.2);
  box-shadow: inset 0 0 0 2px rgba(92, 150, 56, 0.72);
}

.calendar-cell.is-calendar-selected::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5c9638;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.post-card {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 9px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 14px;
  background: #fff;
  color: #111318;
  text-align: left;
  cursor: grab;
  box-shadow: 0 10px 20px rgba(17, 19, 24, 0.05);
}

.post-card .channel-logo {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 10px;
}

.post-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.post-card.draft {
  border-style: dashed;
  opacity: 0.78;
}

.month-grid {
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  min-width: 920px;
}

.month-cell {
  min-height: 132px;
}

.month-cell.is-empty {
  background: rgba(17, 19, 24, 0.018);
}

.month-cell.has-vietnam-holiday {
  background: rgba(255, 255, 255, 0.42);
}

.month-date {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: rgba(17, 19, 24, 0.5);
  font-size: 11px;
  font-weight: 850;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 19, 24, 0.34);
  backdrop-filter: blur(14px);
}

.publish-modal {
  width: min(960px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  overflow: hidden;
  border-radius: 26px;
}

.publish-modal.small {
  width: min(640px, 100%);
}

.modal-head,
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.06);
}

.composer-foot {
  border-top: 1px solid rgba(17, 19, 24, 0.06);
  border-bottom: 0;
  justify-content: flex-end;
}

.modal-head h2 {
  margin: 0;
  letter-spacing: -0.035em;
}

.modal-close {
  width: 38px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(17, 19, 24, 0.04);
  color: rgba(17, 19, 24, 0.62);
  font-size: 20px;
}

.modal-body,
.composer-body {
  padding: 18px;
  overflow: auto;
}

.action-confirm-body {
  min-height: 118px;
}

.action-confirm-body p {
  margin: 0;
  color: #111318;
  font-size: 14px;
  line-height: 1.65;
}

.action-confirm-note {
  margin-top: 12px;
  color: rgba(17, 19, 24, 0.48);
  font-size: 12px;
}

.content-management-edit-modal {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(17, 19, 24, 0.18);
}

.content-management-edit-body {
  display: grid;
  gap: 16px;
}

.content-management-edit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(17, 19, 24, 0.48);
  font-size: 11px;
  font-weight: 760;
}

.content-management-edit-body textarea {
  min-height: 220px;
  resize: vertical;
}

.content-management-edit-body .field em {
  margin-left: 5px;
  color: rgba(17, 19, 24, 0.4);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.content-management-edit-hint {
  margin: -3px 0 0;
  color: rgba(17, 19, 24, 0.48);
  font-size: 11px;
  line-height: 1.6;
}

.content-management-edit-foot {
  gap: 8px;
}

.composer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.composer-main {
  display: grid;
  gap: 14px;
}

.account-chip,
.composer-tool {
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.68);
  color: rgba(17, 19, 24, 0.66);
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.account-chip.is-selected {
  border-color: rgba(155, 207, 108, 0.82);
  background: rgba(155, 207, 108, 0.16);
  color: #111318;
}

.account-chip .channel-logo {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  font-size: 9px;
}

.composer-tool {
  padding: 0 11px;
}

.composer-preview-card {
  padding: 14px;
  border-radius: 20px;
  background: #111318;
  color: #fff;
}

.composer-post-preview {
  min-height: 320px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.preview-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-author-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #9bcf6c;
  color: #111318;
  font-weight: 900;
}

.composer-preview-text {
  white-space: pre-wrap;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.65;
}

.preview-media-box {
  min-height: 118px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 72% 18%, rgba(155, 207, 108, 0.58), transparent 28%),
    rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.preview-status {
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* Single-post composer */
.single-composer-modal {
  width: min(1480px, 100%);
  max-height: min(900px, calc(100vh - 28px));
  border-radius: 22px;
  background: #f2f2f2;
  box-shadow: 0 28px 90px rgba(17, 19, 24, 0.22);
}

.single-composer-head {
  min-height: 74px;
  padding: 18px 32px;
  background: #f5f5f5;
}

.single-composer-head .card-kicker {
  display: none;
}

.single-composer-head h2 {
  color: #111318;
  font-size: 25px;
}

.single-composer-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.96fr) minmax(310px, 0.86fr);
  min-height: 700px;
  max-height: calc(100vh - 174px);
  overflow: auto;
  background: #ededed;
}

.single-composer-panel {
  min-width: 0;
  padding: 30px 32px;
  border-right: 1px solid rgba(17, 19, 24, 0.09);
  background: #f2f2f2;
}

.single-composer-panel:last-child {
  border-right: 0;
}

.single-composer-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.single-composer-section-head h3 {
  margin: 0;
  color: #111318;
  font-size: 24px;
  letter-spacing: -0.035em;
}

.single-composer-section-head > span {
  color: rgba(17, 19, 24, 0.46);
  font-size: 12px;
  font-weight: 780;
}

.single-composer-account-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 12px;
  color: rgba(17, 19, 24, 0.5);
  font-size: 11px;
  font-weight: 760;
}

.single-composer-account-row > span {
  display: grid;
  gap: 3px;
}

.single-composer-account-row > span small {
  color: rgba(17, 19, 24, 0.36);
  font-size: 9px;
  font-weight: 620;
  white-space: nowrap;
}

.single-composer-account-block {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.48);
}

.single-composer-account-block .single-composer-account-row {
  margin-bottom: 0;
}

.composer-account-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.composer-account-picker-head > span {
  display: grid;
  gap: 3px;
  color: rgba(17, 19, 24, 0.58);
  font-size: 11px;
  font-weight: 800;
}

.composer-account-picker-head > span small {
  color: rgba(17, 19, 24, 0.38);
  font-size: 9px;
  font-weight: 620;
}

.composer-account-picker-head > strong {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(17, 19, 24, 0.06);
  color: rgba(17, 19, 24, 0.56);
  font-size: 9px;
  font-weight: 820;
}

.composer-account-platform-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.composer-account-platform-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 7px 4px 5px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(17, 19, 24, 0.48);
  font-size: 9px;
  font-weight: 780;
}

.composer-account-platform-tab:hover {
  border-color: rgba(17, 19, 24, 0.22);
  color: #111318;
}

.composer-account-platform-tab.is-active {
  border-color: #111318;
  background: #111318;
  color: #fff;
  box-shadow: 0 8px 16px rgba(17, 19, 24, 0.12);
}

.composer-account-platform-tab .channel-logo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 8px;
}

.composer-account-platform-tab > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-account-platform-tab > small {
  margin-left: auto;
  color: currentColor;
  font-size: 8px;
  opacity: 0.62;
}

.composer-account-scope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 1px;
  color: rgba(17, 19, 24, 0.66);
  font-size: 9px;
  font-weight: 780;
}

.composer-account-scope-head small {
  color: rgba(17, 19, 24, 0.36);
  font-size: 8px;
  font-weight: 650;
}

.composer-account-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.composer-account-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(17, 19, 24, 0.16);
  border-radius: 11px;
  background: #f7f7f7;
  color: rgba(17, 19, 24, 0.58);
  text-align: left;
}

.composer-account-option:hover {
  border-color: rgba(110, 169, 71, 0.48);
}

.composer-account-option.is-selected {
  border-color: rgba(110, 169, 71, 0.68);
  background: rgba(155, 207, 108, 0.1);
  color: #355e1e;
  box-shadow: 0 0 0 2px rgba(155, 207, 108, 0.08);
}

.composer-account-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(17, 19, 24, 0.18);
  border-radius: 6px;
  background: #fff;
  color: transparent;
  font-size: 9px;
  font-weight: 900;
}

.composer-account-option.is-selected .composer-account-check {
  border-color: #5c9638;
  background: #6dac46;
  color: #fff;
}

.composer-account-option .channel-logo,
.composer-copy-tab .channel-logo {
  width: 21px;
  height: 21px;
  border-radius: 7px;
  font-size: 8px;
}

.composer-account-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #111318;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.composer-account-avatar.instagram {
  background: linear-gradient(145deg, #f47769, #cb3f87);
}

.composer-account-avatar.facebook {
  background: #2478e8;
}

.composer-account-option > span:nth-of-type(3) {
  display: grid;
  flex: 1;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}

.composer-account-option strong {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-account-option small {
  display: block;
  max-width: 92px;
  overflow: hidden;
  color: rgba(17, 19, 24, 0.42);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-composer-copy-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
}

.single-composer-copy-switch > span {
  display: grid;
  gap: 3px;
  color: rgba(17, 19, 24, 0.5);
  font-size: 11px;
  font-weight: 760;
}

.single-composer-copy-switch > span small {
  color: rgba(17, 19, 24, 0.36);
  font-size: 9px;
  font-weight: 620;
  white-space: nowrap;
}

.composer-copy-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.composer-copy-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 3px 10px 3px 5px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 10px;
  background: #fff;
  color: rgba(17, 19, 24, 0.48);
  font-size: 10px;
  font-weight: 760;
}

.composer-copy-tab:hover {
  border-color: rgba(17, 19, 24, 0.2);
  color: #111318;
}

.composer-copy-tab.is-active {
  border-color: #111318;
  background: #111318;
  color: #fff;
  box-shadow: 0 8px 18px rgba(17, 19, 24, 0.14);
}

.single-composer-platform-note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 7px 2px 0;
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
  font-weight: 650;
}

.single-composer-platform-note strong {
  color: #111318;
  font-weight: 850;
}

.single-composer-textarea,
.single-composer-instruction {
  width: 100%;
  border: 1px solid rgba(17, 19, 24, 0.11);
  border-radius: 18px;
  outline: none;
  background: #f7f7f7;
  color: #111318;
  font: inherit;
  line-height: 1.7;
  resize: none;
}

.single-composer-textarea {
  min-height: 398px;
  padding: 22px;
  font-size: 17px;
}

.single-composer-textarea:focus,
.single-composer-instruction:focus {
  border-color: rgba(155, 207, 108, 0.9);
  box-shadow: 0 0 0 4px rgba(155, 207, 108, 0.14);
}

.single-composer-images {
  margin-top: 28px;
}

.single-composer-images .single-composer-section-head {
  margin-bottom: 12px;
}

.single-composer-images .single-composer-section-head h3 {
  font-size: 20px;
}

.single-composer-image-strip {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.single-composer-image-preview,
.single-composer-image-action,
.single-composer-image-add {
  width: 112px;
  height: 112px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 18px;
}

.single-composer-image-preview {
  position: relative;
  display: grid;
  align-content: end;
  gap: 3px;
  padding: 15px;
  background:
    radial-gradient(circle at 76% 22%, rgba(91, 186, 238, 0.8), transparent 23%),
    radial-gradient(circle at 34% 78%, rgba(111, 78, 236, 0.88), transparent 32%),
    linear-gradient(145deg, #081222, #0d162b 58%, #131c45);
  color: #fff;
}

.single-composer-image-preview strong,
.single-composer-image-preview small {
  position: relative;
  z-index: 1;
}

.single-composer-image-preview strong {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.single-composer-image-preview small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
}

.single-composer-image-glow {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 20px 9px rgba(255, 255, 255, 0.42);
}

.single-composer-image-action,
.single-composer-image-add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: #dedede;
  color: rgba(17, 19, 24, 0.62);
  cursor: pointer;
}

.single-composer-image-action span {
  font-size: 22px;
}

.single-composer-image-action small {
  font-size: 11px;
  font-weight: 780;
}

.single-composer-image-add {
  width: 82px;
  font-size: 30px;
  font-weight: 300;
}

.single-composer-ai-panel {
  background: #f4f4f4;
}

.single-composer-ai-block {
  display: grid;
  gap: 9px;
}

.single-composer-ai-block h4 {
  margin: 0;
  color: #111318;
  font-size: 17px;
}

.single-composer-ai-block p {
  margin: 0;
  color: rgba(17, 19, 24, 0.42);
  font-size: 12px;
  line-height: 1.55;
}

.single-composer-ai-button,
.single-composer-optimize-button {
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.single-composer-ai-button {
  background: #dedede;
  color: #111318;
}

.single-composer-optimize-button {
  background: #91ce8b;
  color: #fff;
  box-shadow: 0 12px 22px rgba(105, 174, 98, 0.2);
}

.single-composer-ai-button span,
.single-composer-optimize-button span {
  margin-left: 5px;
}

.single-composer-ai-divider {
  height: 1px;
  margin: 28px 0;
  background: rgba(17, 19, 24, 0.1);
}

.single-composer-instruction {
  min-height: 184px;
  padding: 16px;
  background: #f8f8f8;
  font-size: 13px;
}

.single-composer-ai-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.single-composer-ai-quick-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 0 9px;
  border: 1px solid rgba(17, 19, 24, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(17, 19, 24, 0.72);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.single-composer-ai-quick-actions button:hover,
.single-composer-ai-quick-actions button.is-active {
  transform: translateY(-1px);
  border-color: rgba(82, 143, 47, 0.28);
  background: rgba(155, 207, 108, 0.18);
  color: #4f812f;
}

.single-composer-ai-quick-actions button span {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
}

.single-composer-publish-panel {
  background: #f1f1f1;
}

.single-composer-publish-options {
  display: grid;
  gap: 12px;
}

.single-composer-publish-option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  min-height: 83px;
  padding: 18px;
  border: 1px solid rgba(17, 19, 24, 0.11);
  border-radius: 18px;
  background: #f4f4f4;
  color: #111318;
  text-align: left;
  cursor: pointer;
}

.single-composer-publish-option.is-selected {
  border-color: #85c57a;
  background: #e1eadf;
}

.single-composer-publish-option > span:last-child {
  display: grid;
  gap: 5px;
}

.single-composer-publish-option strong {
  font-size: 16px;
}

.single-composer-publish-option small {
  color: rgba(17, 19, 24, 0.42);
  font-size: 11px;
  line-height: 1.45;
}

.single-composer-radio {
  position: relative;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(17, 19, 24, 0.18);
  border-radius: 50%;
  background: #f4f4f4;
}

.single-composer-publish-option.is-selected .single-composer-radio {
  border: 7px solid #111318;
}

.single-composer-schedule-fields {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.single-composer-calendar {
  padding: 4px 4px 0;
}

.single-composer-calendar-head,
.single-composer-calendar-weekdays,
.single-composer-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
}

.single-composer-calendar-head {
  grid-template-columns: 1fr auto;
  gap: 16px;
  margin-bottom: 15px;
}

.single-composer-calendar-head strong {
  font-size: 21px;
  letter-spacing: -0.03em;
}

.single-composer-calendar-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(17, 19, 24, 0.32);
}

.single-composer-calendar-head button {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: rgba(17, 19, 24, 0.48);
  cursor: pointer;
  font-size: 18px;
}

.single-composer-calendar-weekdays {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
  color: rgba(17, 19, 24, 0.35);
  font-size: 10px;
  text-align: center;
}

.single-composer-calendar-grid {
  row-gap: 6px;
  padding-top: 11px;
}

.single-composer-calendar-day {
  width: 36px;
  height: 36px;
  justify-self: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(17, 19, 24, 0.7);
  cursor: pointer;
  font-size: 12px;
}

.single-composer-calendar-day:hover {
  background: rgba(155, 207, 108, 0.18);
}

.single-composer-calendar-day.is-selected {
  background: #111318;
  color: #fff;
  font-weight: 850;
}

.single-composer-calendar-empty {
  height: 36px;
}

.single-composer-time-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.single-composer-time-control input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 14px;
  background: #f7f7f7;
  color: #111318;
  font: inherit;
  font-size: 16px;
  text-align: center;
}

.single-composer-time-control > span {
  color: rgba(17, 19, 24, 0.42);
  font-size: 18px;
  font-weight: 820;
}

.single-composer-foot {
  min-height: 72px;
  padding: 14px 32px;
  background: #f5f5f5;
}

.single-composer-confirm-button {
  min-width: 132px;
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 13px;
  background: #55a94d;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.platform-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.platform-choice {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.68);
  color: #111318;
  font-weight: 800;
}

.toast-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: grid;
  gap: 10px;
}

.toast {
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #111318;
  color: #fff;
  box-shadow: 0 16px 36px rgba(17, 19, 24, 0.2);
  font-size: 13px;
  font-weight: 780;
}

.toast.success {
  background: #2f7d3b;
}

.toast.error {
  background: #b5472b;
}

.overview-card {
  padding: 18px;
  border-radius: 22px;
}

.section-head,
.stage-toolbar {
  justify-content: space-between;
  gap: 18px;
}

.mini-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.mini-list div {
  min-height: 44px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17, 19, 24, 0.035);
}

.metric-strip {
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.metric-strip span {
  min-height: 58px;
  min-width: 120px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(17, 19, 24, 0.035);
}

.metric-strip strong {
  color: #111318;
  font-size: 22px;
}

.workflow-layout {
  align-items: flex-start;
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr) 260px;
  gap: 18px;
}

.workflow-rail,
.workflow-stage,
.assistant-card {
  border-radius: 24px;
}

.workflow-rail {
  position: sticky;
  top: 24px;
  padding: 18px;
}

.rail-top {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.step-list {
  display: grid;
  gap: 8px;
}

.step-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(17, 19, 24, 0.06);
  background: rgba(255, 255, 255, 0.56);
  color: rgba(17, 19, 24, 0.64);
  text-align: left;
}

.step-index {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(17, 19, 24, 0.055);
  font-size: 12px;
  font-weight: 850;
}

.step-copy {
  display: grid;
  gap: 3px;
}

.step-copy strong {
  color: #111318;
  font-size: 13px;
}

.step-copy span {
  font-size: 11px;
}

.step-state {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.18);
}

.step-item.is-active {
  border-color: rgba(155, 207, 108, 0.66);
  background: rgba(155, 207, 108, 0.16);
}

.step-item.is-complete .step-state {
  background: #67ad45;
}

.rail-footer {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(17, 19, 24, 0.035);
  color: rgba(17, 19, 24, 0.52);
  font-size: 12px;
  font-weight: 700;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #67ad45;
}

.workflow-stage {
  min-height: 760px;
  padding: 20px;
}

.stage-toolbar {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.06);
  margin-bottom: 18px;
}

.workflow-step {
  display: none;
}

.workflow-step.is-active {
  display: block;
}

.workflow-step.is-active + .workflow-step.is-active {
  margin-top: 18px;
}

.two-column,
.editor-layout,
.visual-grid,
.result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.form-card,
.ai-card,
.variant-card,
.quality-panel,
.result-card {
  border-radius: 20px;
  padding: 18px;
}

.form-card {
  display: grid;
  gap: 16px;
}

.choice-grid,
.platform-grid,
.field-grid,
.material-grid,
.preview-grid,
.visual-result-grid {
  display: grid;
  gap: 12px;
}

.choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-card,
.platform-card {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  color: #111318;
}

.choice-card span,
.platform-card span {
  color: rgba(17, 19, 24, 0.52);
  font-size: 12px;
  line-height: 1.5;
}

.choice-card.is-selected,
.platform-card.is-selected {
  border-color: rgba(155, 207, 108, 0.82);
  background: linear-gradient(135deg, rgba(155, 207, 108, 0.2), rgba(255, 255, 255, 0.88));
  box-shadow: inset 0 0 0 1px rgba(155, 207, 108, 0.22);
}

.field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: rgba(17, 19, 24, 0.52);
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field select,
.field textarea,
.large-editor {
  width: 100%;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: #111318;
  outline: 0;
}

.field input,
.field select {
  min-height: 42px;
  padding: 0 12px;
}

.field textarea,
.large-editor {
  padding: 12px;
  resize: vertical;
  line-height: 1.6;
}

.recommendation-bar,
.empty-state {
  padding: 14px;
  border-radius: 16px;
  background: rgba(155, 207, 108, 0.14);
  color: rgba(17, 19, 24, 0.68);
  font-size: 13px;
  line-height: 1.6;
}

.material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.material-grid button {
  border: 1px dashed rgba(17, 19, 24, 0.16);
  background: rgba(255, 255, 255, 0.62);
  color: rgba(17, 19, 24, 0.62);
}

.ai-card,
.assistant-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(155, 207, 108, 0.28), transparent 34%),
    rgba(255, 255, 255, 0.78);
}

.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ai-head span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #111318;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.ai-card button,
.assistant-actions button {
  width: 100%;
  margin-top: 14px;
  border: 0;
  background: #111318;
  color: #ffffff;
}

.variant-card,
.quality-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.variant-item,
.quality-item,
.final-check,
.visual-item,
.preview-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.62);
}

.variant-item {
  display: grid;
  gap: 8px;
}

.variant-item button {
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: rgba(17, 19, 24, 0.08);
  color: rgba(17, 19, 24, 0.7);
  font-size: 12px;
  font-weight: 800;
}

.quality-item,
.final-check {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: rgba(17, 19, 24, 0.62);
  font-size: 13px;
  line-height: 1.5;
}

.quality-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #67ad45;
}

.quality-dot.warn {
  background: #ff9f43;
}

.score-ring {
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(#9bcf6c 0 86%, rgba(17, 19, 24, 0.08) 86% 100%);
}

.score-ring strong {
  font-size: 34px;
  letter-spacing: -0.05em;
}

.score-ring span {
  margin-top: -28px;
  color: rgba(17, 19, 24, 0.45);
  font-size: 12px;
  font-weight: 800;
}

.brand-strip {
  gap: 8px;
}

.brand-strip span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.055);
  color: rgba(17, 19, 24, 0.55);
  font-size: 12px;
  font-weight: 760;
}

.visual-result-grid,
.preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.visual-thumb {
  height: 160px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(17, 19, 24, 0.86), rgba(17, 19, 24, 0.12)),
    radial-gradient(circle at 80% 12%, rgba(155, 207, 108, 0.85), transparent 24%);
}

.preview-card {
  min-height: 300px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.preview-phone {
  min-height: 220px;
  padding: 14px;
  border-radius: 22px;
  background: #111318;
  color: #ffffff;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.06);
}

.preview-post {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.schedule-mode {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wide {
  width: 100%;
}

.result-layout {
  grid-template-columns: 1fr 1fr;
}

.result-card.success {
  background:
    radial-gradient(circle at 90% 10%, rgba(155, 207, 108, 0.36), transparent 32%),
    rgba(255, 255, 255, 0.86);
}

.result-card a {
  color: #2c7f38;
  word-break: break-all;
}

.assistant-drawer {
  position: sticky;
  top: 24px;
}

.assistant-card {
  padding: 18px;
}

@media (max-width: 1320px) {
  .workflow-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .assistant-drawer {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 1080px) {
  .publish-shell {
    padding: 22px;
  }

  .publish-hero,
  .task-overview-row,
  .workflow-layout,
  .ops-calendar-layout,
  .composer-body,
  .single-composer-body,
  .two-column,
  .editor-layout,
  .visual-grid,
  .result-layout {
    grid-template-columns: 1fr;
  }

  .publish-hero,
  .section-head,
  .stage-toolbar,
  .ops-calendar-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-toolbar-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .calendar-platform-filter {
    max-width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }

  .calendar-account-filter-picker {
    margin-left: auto;
  }

  .calendar-account-filter-popover {
    position: fixed;
    top: 120px;
    right: 14px;
    left: 14px;
    width: auto;
  }

  .dashboard-grid,
  .public-performance-metrics,
  .platform-grid,
  .platform-choice-grid,
  .visual-result-grid,
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-rail {
    position: static;
  }

  .single-composer-modal {
    max-height: calc(100vh - 20px);
  }

  .single-composer-body {
    max-height: calc(100vh - 100px);
  }
}

@media (max-width: 720px) {
  .dashboard-grid,
  .public-performance-metrics,
  .choice-grid,
  .platform-grid,
  .platform-choice-grid,
  .field-grid,
  .material-grid,
  .visual-result-grid,
  .preview-grid,
  .schedule-mode,
  .single-composer-body {
    grid-template-columns: 1fr;
  }

  .single-composer-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 19, 24, 0.09);
  }

  .single-composer-head,
  .single-composer-foot {
    padding-right: 18px;
    padding-left: 18px;
  }

  .single-composer-panel {
    padding: 22px 18px;
  }

  .single-composer-account-row,
  .single-composer-copy-switch {
    grid-template-columns: 1fr;
  }

  .composer-copy-tabs {
    justify-content: flex-start;
  }

  .composer-account-options {
    grid-template-columns: 1fr;
  }
}

/* Creation flow: step-first workspace inspired by the product information flow. */
.creation-flow-shell {
  width: min(1320px, 100%);
  margin: 0 auto;
  color: #111318;
}

.creation-flow-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 18px 0 16px;
  border-top: 1px solid rgba(17, 19, 24, 0.08);
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
  background: rgba(255, 255, 255, 0.54);
}

.creation-flow-stepper button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 20px 0 0;
  border: 0;
  background: transparent;
  color: rgba(17, 19, 24, 0.36);
  text-align: left;
  cursor: pointer;
}

.creation-flow-stepper button:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 10px;
  left: 48px;
  height: 1px;
  background: rgba(17, 19, 24, 0.12);
}

.creation-flow-stepper button b {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 19, 24, 0.14);
  border-radius: 50%;
  background: #fff;
  color: rgba(17, 19, 24, 0.45);
  font-size: 10px;
  font-weight: 850;
}

.creation-flow-stepper button span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: inherit;
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-flow-stepper button.is-active {
  color: #111318;
}

.creation-flow-stepper button.is-active b {
  border-color: #111318;
  background: #111318;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(17, 19, 24, 0.08);
}

.creation-flow-stepper button.is-complete {
  color: #4a7b2b;
}

.creation-flow-stepper button.is-complete::after {
  background: rgba(155, 207, 108, 0.84);
}

.creation-flow-stepper button.is-complete b {
  border-color: #9bcf6c;
  background: #b9f05e;
  color: #26371e;
  font-size: 15px;
}

.creation-flow-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 52px 0 32px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
}

.creation-flow-kicker {
  margin-bottom: 10px;
  color: #708366;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.creation-flow-heading h2 {
  margin: 0;
  color: #111318;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.065em;
}

.creation-flow-heading p {
  max-width: 360px;
  margin: 0 10px 7px 0;
  color: rgba(17, 19, 24, 0.56);
  font-size: 12px;
  line-height: 1.7;
  text-align: right;
}

.creation-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  max-width: none;
  margin: 0;
  align-items: start;
}

.creation-input-pane,
.creation-result-pane {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.creation-input-pane {
  order: 1;
  padding: 28px 32px 32px 0;
}

.creation-result-pane {
  order: 2;
  min-height: 620px;
  padding: 28px 0 32px 32px;
  border-left: 1px solid rgba(17, 19, 24, 0.1);
}

.creation-input-head,
.creation-result-head {
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
}

.creation-input-head h2,
.creation-title-stack h2 {
  margin: 0 0 6px;
  color: #111318;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.creation-input-head p,
.creation-title-stack p {
  color: rgba(17, 19, 24, 0.52);
}

.creation-input-scroll {
  display: block;
  overflow: visible;
  padding: 0;
}

.input-section {
  padding: 28px 0 26px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
}

.input-section[hidden] {
  display: none;
}

.input-section-head {
  margin-bottom: 20px;
}

.input-step-number {
  min-width: 56px;
  color: #708366;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.input-section-head h3 {
  font-size: 17px;
}

.studio-field input,
.studio-field textarea,
.studio-field select {
  border-color: rgba(17, 19, 24, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.creation-profile-card {
  padding-top: 20px;
}

.creation-profile-visual {
  position: relative;
  height: 184px;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: 18px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 78% 18%, rgba(185, 240, 94, 0.72), transparent 28%),
    linear-gradient(145deg, #12171b, #304535 55%, #9bcf6c);
  color: #fff;
}

.creation-profile-visual::before,
.creation-profile-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
}

.creation-profile-visual::before {
  width: 210px;
  height: 210px;
  right: -56px;
  bottom: -118px;
}

.creation-profile-visual::after {
  width: 130px;
  height: 130px;
  top: -54px;
  left: -32px;
}

.creation-profile-visual > * {
  position: relative;
  z-index: 1;
}

.creation-profile-visual span,
.creation-profile-visual small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.creation-profile-visual strong {
  max-width: 90%;
  margin: 8px 0 5px;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.creation-profile-visual i {
  position: absolute;
  z-index: 1;
  top: 34px;
  right: 24px;
  width: 62px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(8deg);
}

.creation-profile-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.creation-profile-status span {
  color: #4a7b2b;
  font-size: 10px;
  font-weight: 800;
}

.creation-profile-status b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border: 1px solid #4a9b63;
  border-radius: 50%;
  font-size: 10px;
}

.creation-profile-status small {
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
}

.creation-profile-card h3 {
  margin: 13px 0 6px;
  color: #111318;
  font-size: 19px;
  letter-spacing: -0.04em;
}

.creation-profile-card > p {
  margin: 0;
  color: rgba(17, 19, 24, 0.58);
  font-size: 11px;
  line-height: 1.65;
}

.creation-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.creation-profile-tags span {
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(155, 207, 108, 0.13);
  color: rgba(49, 74, 39, 0.74);
  font-size: 9px;
}

.creation-profile-details {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
}

.creation-profile-details div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 19, 24, 0.08);
}

.creation-profile-details dt {
  color: rgba(17, 19, 24, 0.42);
  font-size: 9px;
}

.creation-profile-details dd {
  margin: 0;
  color: rgba(17, 19, 24, 0.76);
  font-size: 10px;
  line-height: 1.5;
}

.creation-result-pane .preview-control-bar {
  margin-top: 18px;
}

.creation-result-pane .batch-result-surface.is-empty {
  display: none;
}

.creation-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(17, 19, 24, 0.1);
  background: transparent;
}

.creation-input-footer > .ghost-btn {
  min-width: 70px;
  border-color: rgba(17, 19, 24, 0.14);
  background: #fff;
  color: rgba(17, 19, 24, 0.7);
}

.creation-flow-footer-status {
  margin-left: auto;
  color: rgba(17, 19, 24, 0.46);
  font-size: 10px;
}

.creation-footer-actions {
  display: flex;
  gap: 8px;
}

.creation-footer-actions button {
  width: auto;
  min-width: 94px;
  min-height: 40px;
}

.creation-footer-actions button[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .creation-studio {
    grid-template-columns: 1fr;
  }

  .creation-result-pane {
    min-height: 0;
    padding: 28px 0 32px;
    border-top: 1px solid rgba(17, 19, 24, 0.1);
    border-left: 0;
  }
}

.creation-flow-heading {
  min-height: 92px;
  padding-top: 30px;
  padding-bottom: 24px;
}

.creation-studio.is-complete .batch-result-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .creation-flow-stepper {
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(138px, 1fr));
    padding-left: 14px;
    padding-right: 14px;
  }

  .creation-flow-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 34px 0 24px;
  }

  .creation-flow-heading p {
    max-width: 460px;
    margin: 0;
    text-align: left;
  }

  .creation-input-pane {
    padding-right: 0;
  }

  .creation-input-footer {
    flex-wrap: wrap;
  }

  .creation-flow-footer-status {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
}

/* Final result column rule. */
.creation-studio.is-complete .batch-result-grid {
  grid-template-columns: 1fr;
}

/* Creation state switch: setup is single-column; generated results restore the two-pane workspace. */
.creation-flow-shell:not(.is-complete) .creation-flow-stepper,
.creation-flow-shell:not(.is-complete) .creation-flow-heading {
  display: grid;
}

.creation-flow-shell.is-complete .creation-flow-stepper,
.creation-flow-shell.is-complete .creation-flow-heading {
  display: none;
}

.creation-studio:not(.is-complete) {
  grid-template-columns: minmax(0, 1fr);
}

.creation-studio:not(.is-complete) .creation-result-pane {
  display: none;
}

.creation-studio:not(.is-complete) .creation-input-pane {
  width: 100%;
  padding-right: 0;
}

.creation-studio.is-complete {
  grid-template-columns: minmax(0, 1fr) 390px;
}

.creation-studio.is-complete .creation-result-pane {
  display: block;
  order: 1;
  padding: 28px 32px 32px 0;
  border-left: 0;
  border-right: 1px solid rgba(17, 19, 24, 0.1);
}

.creation-studio.is-complete .creation-input-pane {
  order: 2;
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding: 28px 0 32px 28px;
}

.creation-studio.is-complete .creation-profile-card {
  display: none;
}

.creation-studio.is-complete .creation-input-scroll {
  display: block;
}

.creation-studio.is-complete .input-section[hidden] {
  display: block !important;
}

@media (max-width: 980px) {
  .creation-studio.is-complete {
    grid-template-columns: 1fr;
  }

  .creation-studio.is-complete .creation-result-pane {
    padding-right: 0;
    border-right: 0;
  }

  .creation-studio.is-complete .creation-input-pane {
    max-height: none;
    padding-left: 0;
    border-top: 1px solid rgba(17, 19, 24, 0.1);
  }
}

/* Commerce image creation flow */
.commerce-image-entry-button {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(155, 207, 108, 0.42);
  border-radius: 12px;
  background: rgba(155, 207, 108, 0.12);
  color: #314a27;
  font-size: 12px;
  font-weight: 820;
  text-align: left;
  cursor: pointer;
}

.commerce-image-entry-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.commerce-image-entry-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(155, 207, 108, 0.14);
  color: #4a7b2b;
  font-size: 10px;
  font-weight: 780;
}

.commerce-image-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.commerce-image-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 23, 0.26);
  backdrop-filter: blur(4px);
}

.commerce-image-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(18, 20, 23, 0.06);
  border-radius: 20px;
  background: #f6f7f9;
  box-shadow: 0 20px 48px rgba(18, 20, 23, 0.1);
}

.commerce-image-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(18, 20, 23, 0.06);
  background: #fff;
  color: #121417;
}

.commerce-image-head h2 {
  margin: 7px 0 6px;
  color: #121417;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.045em;
}

.commerce-image-head p {
  max-width: 680px;
  margin: 0;
  color: rgba(18, 20, 23, 0.6);
  font-size: 12px;
  line-height: 1.65;
}

.commerce-image-head .commerce-image-kicker {
  color: #4a7b2b;
}

.commerce-image-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(18, 20, 23, 0.12);
  border-radius: 10px;
  background: #fff;
  color: rgba(18, 20, 23, 0.58);
  font-size: 20px;
  cursor: pointer;
}

.commerce-image-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(18, 20, 23, 0.06);
  background: #fff;
}

.commerce-image-step {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 11px;
  color: rgba(18, 20, 23, 0.4);
}

.commerce-image-step b {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.commerce-image-step small {
  font-size: 11px;
  white-space: nowrap;
}

.commerce-image-step.is-active {
  border: 1px solid rgba(155, 207, 108, 0.55);
  background: rgba(155, 207, 108, 0.12);
  color: #121417;
}

.commerce-image-step.is-complete {
  color: #4a7b2b;
  background: rgba(155, 207, 108, 0.06);
}

.commerce-image-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  gap: 16px;
  padding: 18px 28px;
}

.commerce-image-main,
.commerce-image-summary {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(18, 20, 23, 0.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(18, 20, 23, 0.06);
}

.commerce-image-main h3 {
  margin: 7px 0 7px;
  color: #121417;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.04em;
}

.commerce-image-kicker,
.commerce-image-summary-kicker {
  color: rgba(18, 20, 23, 0.6);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.commerce-image-lead {
  max-width: 720px;
  margin: 0 0 18px;
  color: rgba(18, 20, 23, 0.6);
  font-size: 12px;
  line-height: 1.65;
}

.commerce-image-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commerce-image-choice-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commerce-image-choice-grid--platforms {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commerce-image-choice {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(18, 20, 23, 0.06);
  border-radius: 14px;
  background: #fff;
  color: rgba(18, 20, 23, 0.8);
  text-align: left;
  cursor: pointer;
}

.commerce-image-choice strong {
  color: #121417;
  font-size: 12px;
}

.commerce-image-choice span {
  color: rgba(18, 20, 23, 0.6);
  font-size: 10px;
  line-height: 1.45;
}

.commerce-image-choice.is-selected {
  border-color: rgba(155, 207, 108, 0.82);
  background: linear-gradient(135deg, rgba(155, 207, 108, 0.2), rgba(255, 255, 255, 0.96));
  color: #121417;
  box-shadow: inset 0 0 0 1px rgba(155, 207, 108, 0.22);
}

.commerce-image-choice.is-selected strong,
.commerce-image-choice.is-selected span {
  color: inherit;
}

.commerce-image-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 9px;
  color: rgba(18, 20, 23, 0.8);
  font-size: 11px;
  font-weight: 850;
}

.commerce-image-section-label small {
  color: rgba(18, 20, 23, 0.5);
  font-size: 10px;
  font-weight: 600;
}

.commerce-image-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.commerce-image-field-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commerce-image-field {
  display: grid;
  gap: 7px;
  color: rgba(18, 20, 23, 0.6);
  font-size: 11px;
  font-weight: 780;
}

.commerce-image-field--wide {
  grid-column: 1 / -1;
  margin-top: 12px;
}

.commerce-image-field input,
.commerce-image-field textarea,
.commerce-image-select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(18, 20, 23, 0.06);
  border-radius: 12px;
  outline: 0;
  background: #fff;
  color: #121417;
  font: inherit;
  font-size: 12px;
}

.commerce-image-field textarea {
  resize: vertical;
}

.commerce-image-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px dashed rgba(155, 207, 108, 0.7);
  border-radius: 13px;
  background: rgba(155, 207, 108, 0.08);
  cursor: pointer;
}

.commerce-image-upload-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(155, 207, 108, 0.2);
  color: #4a7b2b;
  font-size: 20px;
}

.commerce-image-upload strong,
.commerce-image-upload small {
  display: block;
}

.commerce-image-upload strong {
  color: #121417;
  font-size: 12px;
}

.commerce-image-upload small {
  margin-top: 3px;
  color: rgba(17, 19, 24, 0.46);
  font-size: 10px;
}

.commerce-image-lock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.commerce-image-lock-grid span {
  padding: 8px 7px;
  border-radius: 9px;
  background: rgba(18, 20, 23, 0.035);
  color: rgba(18, 20, 23, 0.6);
  font-size: 10px;
  text-align: center;
}

.commerce-image-callout {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 13px;
  border-left: 3px solid #9bcf6c;
  border-radius: 10px;
  background: rgba(155, 207, 108, 0.12);
}

.commerce-image-callout strong {
  color: #314a27;
  font-size: 11px;
}

.commerce-image-callout span {
  color: rgba(49, 74, 39, 0.7);
  font-size: 10px;
  line-height: 1.5;
}

.commerce-image-summary {
  align-self: start;
  background: #fff;
  color: #121417;
}

.commerce-image-summary-kicker {
  color: #4a7b2b;
}

.commerce-image-summary h3 {
  margin: 9px 0 5px;
  color: #121417;
  font-size: 17px;
  letter-spacing: -0.03em;
}

.commerce-image-summary > p {
  margin: 0;
  color: rgba(18, 20, 23, 0.6);
  font-size: 11px;
  line-height: 1.5;
}

.commerce-image-summary dl {
  display: grid;
  gap: 11px;
  margin: 22px 0 0;
}

.commerce-image-summary dl div {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18, 20, 23, 0.06);
}

.commerce-image-summary dt {
  color: rgba(18, 20, 23, 0.42);
  font-size: 9px;
  text-transform: uppercase;
}

.commerce-image-summary dd {
  margin: 0;
  color: rgba(18, 20, 23, 0.8);
  font-size: 11px;
  line-height: 1.45;
}

.commerce-image-summary-note {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 11px;
  border-radius: 11px;
  background: rgba(155, 207, 108, 0.12);
}

.commerce-image-summary-note strong {
  color: #4a7b2b;
  font-size: 11px;
}

.commerce-image-summary-note span {
  color: rgba(49, 74, 39, 0.7);
  font-size: 10px;
  line-height: 1.5;
}

.commerce-image-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.commerce-image-plan {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 13px;
  border: 1px solid rgba(18, 20, 23, 0.06);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.commerce-image-plan span,
.commerce-image-plan small {
  color: rgba(17, 19, 24, 0.44);
  font-size: 10px;
}

.commerce-image-plan strong {
  color: #111318;
  font-size: 12px;
}

.commerce-image-plan.is-selected {
  border-color: rgba(155, 207, 108, 0.82);
  background: linear-gradient(135deg, rgba(155, 207, 108, 0.2), rgba(255, 255, 255, 0.96));
  box-shadow: inset 0 0 0 1px rgba(155, 207, 108, 0.22);
}

.commerce-image-plan.is-selected span,
.commerce-image-plan.is-selected strong,
.commerce-image-plan.is-selected small {
  color: inherit;
}

.commerce-image-preview-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 9px;
  color: rgba(17, 19, 24, 0.68);
  font-size: 11px;
  font-weight: 850;
}

.commerce-image-preview-title small {
  color: rgba(17, 19, 24, 0.4);
  font-size: 10px;
  font-weight: 600;
}

.commerce-image-preview-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.commerce-image-preview-card {
  min-height: 116px;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 12px;
  overflow: hidden;
  position: relative;
  border-radius: 13px;
  color: #fff;
}

.commerce-image-preview-card::before {
  content: "";
  position: absolute;
  width: 88px;
  height: 88px;
  top: -30px;
  right: -14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.commerce-image-preview-card > * {
  position: relative;
  z-index: 1;
}

.commerce-image-preview-card strong {
  font-size: 10px;
  opacity: 0.68;
}

.commerce-image-preview-card span {
  font-size: 14px;
  font-weight: 820;
}

.commerce-image-preview-card small {
  font-size: 10px;
  opacity: 0.7;
}

.commerce-image-preview-card--product { background: linear-gradient(135deg, #131921, #536d86); }
.commerce-image-preview-card--scene { background: linear-gradient(135deg, #59422e, #c48d54); }
.commerce-image-preview-card--proof { background: linear-gradient(135deg, #1d5147, #6eaa8c); }

.commerce-image-generation-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 11px;
  background: rgba(18, 20, 23, 0.035);
  color: rgba(18, 20, 23, 0.6);
  font-size: 11px;
}

.commerce-image-generation-status strong {
  color: #121417;
  font-size: 11px;
}

.commerce-image-generation-status.is-generating {
  background: rgba(45, 145, 231, 0.1);
  color: #236ea8;
}

.commerce-image-generation-status.is-complete {
  background: rgba(155, 207, 108, 0.18);
  color: #47732a;
}

.commerce-image-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 28px 20px;
  border-top: 1px solid rgba(18, 20, 23, 0.06);
  background: #fff;
}

.commerce-image-footer-status {
  color: rgba(18, 20, 23, 0.6);
  font-size: 11px;
}

.commerce-image-footer .ghost-btn {
  border-color: rgba(18, 20, 23, 0.12);
  background: #fff;
  color: rgba(18, 20, 23, 0.8);
  box-shadow: none;
}

.commerce-image-footer .primary-btn {
  background: #9bcf6c;
  color: #121417;
  box-shadow: none;
}

@media (max-width: 820px) {
  .commerce-image-layout {
    grid-template-columns: 1fr;
  }

  .commerce-image-stepper {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(108px, 1fr));
  }

  .commerce-image-choice-grid--platforms,
  .commerce-image-field-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .commerce-image-head,
  .commerce-image-layout,
  .commerce-image-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .commerce-image-choice-grid,
  .commerce-image-choice-grid--three,
  .commerce-image-choice-grid--platforms,
  .commerce-image-field-grid,
  .commerce-image-field-grid--three,
  .commerce-image-plan-grid,
  .commerce-image-preview-strip {
    grid-template-columns: 1fr;
  }

  .commerce-image-lock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-image-footer {
    flex-wrap: wrap;
  }

  .commerce-image-footer-status {
    order: -1;
    width: 100%;
  }
}

/* Batch content results */
.batch-result-surface {
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.batch-result-heading {
  margin: 4px 2px 16px;
}

.batch-result-heading strong {
  display: block;
  color: #111318;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.batch-result-heading p {
  margin: 6px 0 0;
  color: rgba(17, 19, 24, 0.52);
  font-size: 12px;
  line-height: 1.55;
}

.batch-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.batch-empty-state {
  min-height: 360px;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin: 20px 0 4px;
  padding: 30px 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 15% 20%, rgba(155, 207, 108, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(249, 252, 247, 0.98), rgba(246, 248, 244, 0.92));
}

.batch-empty-state::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(110, 169, 71, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(110, 169, 71, 0.035), 0 0 0 38px rgba(110, 169, 71, 0.025);
  pointer-events: none;
}

.batch-empty-state[hidden] {
  display: none;
}

.batch-empty-visual {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(110, 169, 71, 0.24);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 18px 34px rgba(79, 118, 55, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.batch-empty-visual::before,
.batch-empty-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(110, 169, 71, 0.18);
  border-radius: 50%;
}

.batch-empty-visual::before {
  width: 74px;
  height: 74px;
}

.batch-empty-visual::after {
  width: 106px;
  height: 106px;
}

.batch-empty-spark {
  z-index: 2;
  color: #5c9638;
  font-size: 36px;
  line-height: 1;
  text-shadow: 0 8px 18px rgba(92, 150, 56, 0.22);
}

.batch-empty-orbit {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9bcf6c;
  box-shadow: 0 0 0 5px rgba(155, 207, 108, 0.12);
}

.batch-empty-orbit.orbit-one {
  top: 25px;
  right: 30px;
}

.batch-empty-orbit.orbit-two {
  left: 22px;
  bottom: 31px;
  width: 5px;
  height: 5px;
  background: #86b85b;
}

.batch-empty-cursor {
  position: absolute;
  right: 27px;
  bottom: 24px;
  z-index: 3;
  color: #6a9f48;
  font-size: 20px;
  transform: rotate(-22deg);
}

.batch-empty-copy {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.batch-empty-kicker {
  color: #6d9154;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.batch-empty-copy h3 {
  margin: 8px 0 7px;
  color: #1b281d;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.045em;
}

.batch-empty-copy p {
  margin: 0;
  color: rgba(40, 61, 44, 0.64);
  font-size: 12px;
  line-height: 1.7;
}

.batch-empty-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 18px 0;
}

.batch-empty-steps span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(40, 61, 44, 0.58);
  font-size: 10px;
  font-weight: 750;
}

.batch-empty-steps b {
  color: #5c9638;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.batch-empty-action {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 11px;
}

.batch-empty-copy small {
  display: block;
  margin-top: 10px;
  color: rgba(40, 61, 44, 0.46);
  font-size: 10px;
}

@media (max-width: 720px) {
  .batch-empty-state {
    min-height: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding: 28px 20px;
    text-align: center;
  }

  .batch-empty-copy {
    max-width: 100%;
  }

  .batch-empty-steps {
    justify-content: center;
  }

  .batch-empty-action {
    width: 100%;
  }
}

.batch-content-card {
  min-height: 284px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(17, 19, 24, 0.045);
}

.batch-content-card.is-saved {
  border-color: rgba(92, 190, 94, 0.55);
  background: linear-gradient(145deg, rgba(246, 255, 246, 0.96), rgba(255, 255, 255, 0.9));
}

.batch-card-head,
.batch-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.batch-x-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.batch-x-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111318;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.batch-x-author > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.batch-x-author strong {
  color: #111318;
  font-size: 12px;
}

.batch-x-author small {
  color: rgba(17, 19, 24, 0.45);
  font-size: 10px;
}

.batch-version-label {
  color: rgba(17, 19, 24, 0.52);
  font-size: 11px;
  font-weight: 820;
}

.batch-card-head strong {
  color: #111318;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.batch-save-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #1d9bf0;
  color: #fff;
  font-size: 11px;
  font-weight: 820;
  white-space: nowrap;
}

.batch-save-btn.is-saved {
  background: rgba(17, 19, 24, 0.08);
  color: rgba(17, 19, 24, 0.6);
}

.batch-card-copy {
  margin: 0;
  color: rgba(17, 19, 24, 0.86);
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-line;
}

.batch-preview-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 9px;
}

.batch-preview-thumb {
  min-height: 94px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 2px;
  padding: 11px;
  border-radius: 13px;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.batch-preview-thumb::before,
.batch-preview-thumb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.batch-preview-thumb::before {
  width: 90px;
  height: 90px;
  top: -36px;
  right: -24px;
}

.batch-preview-thumb::after {
  width: 50px;
  height: 50px;
  top: 26px;
  left: 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
}

.preview-thumb-idea {
  background: linear-gradient(135deg, #1d9bf0, #0d4771);
}

.preview-thumb-data {
  background: linear-gradient(135deg, #6b5cff, #30266f);
}

.preview-thumb-product {
  background: linear-gradient(135deg, #111318, #47515e);
}

.batch-preview-thumb span,
.batch-preview-thumb strong,
.batch-preview-thumb small {
  position: relative;
  z-index: 1;
}

.batch-preview-thumb span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.batch-preview-thumb strong {
  font-size: 12px;
}

.batch-preview-thumb small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
}

.batch-single-image-preview {
  width: min(50%, 440px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 16px;
  background: #eef1f4;
}

.batch-single-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.single-image-mock {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 20px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #111318 0%, #202b3b 55%, #1d9bf0 150%);
}

.single-image-mock::before,
.single-image-mock::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.single-image-mock::before {
  width: 230px;
  height: 230px;
  top: -125px;
  right: -28px;
}

.single-image-mock::after {
  width: 138px;
  height: 138px;
  right: 22%;
  bottom: -86px;
  background: rgba(29, 155, 240, 0.38);
}

.mock-image-2 {
  background: linear-gradient(135deg, #24205a 0%, #6b5cff 52%, #d0caff 160%);
}

.mock-image-3 {
  background: linear-gradient(135deg, #162a25 0%, #1f8b71 55%, #e0f3e8 160%);
}

.single-image-mock span,
.single-image-mock strong,
.single-image-mock small {
  position: relative;
  z-index: 1;
}

.single-image-mock span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.single-image-mock strong {
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: -0.04em;
}

.single-image-mock small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
}

.batch-schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(17, 19, 24, 0.06);
}

.batch-schedule-row > span {
  color: rgba(17, 19, 24, 0.52);
  font-size: 11px;
  font-weight: 820;
  white-space: nowrap;
}

.batch-schedule-value {
  flex: 1;
  color: #111318;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.batch-schedule-row input {
  min-width: 0;
  flex: 1;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 8px;
  background: #fff;
  color: #111318;
  font: inherit;
  font-size: 11px;
}

.batch-schedule-row input:focus {
  border-color: rgba(29, 155, 240, 0.64);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
}

.batch-schedule-row button {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(29, 155, 240, 0.42);
  border-radius: 8px;
  background: rgba(29, 155, 240, 0.08);
  color: #1479ba;
  font-size: 10px;
  font-weight: 820;
  white-space: nowrap;
}

.batch-edit-text {
  width: 100%;
  min-height: 146px;
  padding: 11px;
  border: 1px solid rgba(29, 155, 240, 0.62);
  border-radius: 12px;
  outline: 0;
  background: #fff;
  color: #111318;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
}

.batch-image-preview {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(17, 19, 24, 0.9), rgba(17, 19, 24, 0.28)),
    radial-gradient(circle at 80% 20%, rgba(29, 155, 240, 0.78), transparent 26%);
  color: #fff;
}

.batch-image-preview span {
  font-size: 11px;
  font-weight: 820;
}

.batch-image-preview small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
}

.batch-x-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid rgba(17, 19, 24, 0.06);
}

.batch-x-action-row button {
  min-height: 26px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: rgba(17, 19, 24, 0.45);
  font-size: 11px;
}

.batch-x-action-row button[data-batch-image],
.batch-x-action-row button[data-batch-upload] {
  color: #1d9bf0;
  font-weight: 820;
}

.batch-card-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.batch-card-footer button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #111318;
  font-size: 12px;
  font-weight: 820;
}

.batch-card-footer button[data-batch-edit],
.batch-card-footer button.batch-edit-save {
  border-color: rgba(29, 155, 240, 0.54);
  color: #1479ba;
}

.batch-card-footer button.batch-save-btn {
  min-height: 34px;
  border: 1px solid rgba(29, 155, 240, 0.54);
  background: rgba(29, 155, 240, 0.08);
  color: #1479ba;
}

.batch-card-footer button.batch-save-btn.is-saved {
  border-color: rgba(17, 19, 24, 0.1);
  background: rgba(17, 19, 24, 0.06);
  color: rgba(17, 19, 24, 0.6);
}

.batch-card-footer button.batch-immediate-btn {
  border-color: #1d9bf0;
  background: #1d9bf0;
  color: #fff;
}

.batch-card-footer.edit-mode {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .batch-result-grid {
    grid-template-columns: 1fr;
  }

  .batch-preview-gallery {
    grid-template-columns: 1fr;
  }

  .batch-single-image-preview {
    width: 100%;
  }

  .batch-content-card {
    min-height: 220px;
  }

  .batch-schedule-row {
    flex-wrap: wrap;
  }

  .batch-schedule-row input {
    flex-basis: 100%;
    order: 3;
  }
}

/* Creation studio: a centered vertical workspace keeps setup and results balanced. */
.workflow-studio-panel {
  display: none;
}

.module-panel.workflow-studio-panel.is-active {
  display: block;
}

.creation-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.creation-result-pane,
.creation-input-pane {
  min-width: 0;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 22px 56px rgba(18, 20, 23, 0.07);
  backdrop-filter: blur(24px);
}

.creation-result-pane {
  order: 2;
  min-height: auto;
  padding: 22px;
}

.creation-result-head,
.creation-input-head,
.preview-control-bar,
.preview-surface-top,
.social-result-author,
.social-result-footer,
.creation-quality-strip,
.quality-strip-head,
.preview-visual-copy,
.input-section-head,
.creation-input-footer,
.creation-footer-actions {
  display: flex;
  align-items: center;
}

.creation-result-head,
.creation-input-head,
.preview-control-bar,
.preview-surface-top,
.quality-strip-head,
.creation-input-footer {
  justify-content: space-between;
  gap: 16px;
}

.creation-result-head {
  margin-bottom: 20px;
}

.creation-title-stack h2,
.creation-input-head h2 {
  margin: 6px 0 5px;
  color: #111318;
  font-size: 27px;
  letter-spacing: -0.045em;
}

.creation-title-stack p,
.creation-input-head p,
.input-section-head p,
.preview-visual-copy p {
  margin: 0;
  color: rgba(17, 19, 24, 0.52);
  font-size: 12px;
  line-height: 1.6;
}

.preview-platform-tabs,
.preview-sync-state,
.creation-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preview-pending-btn {
  min-height: 30px;
  padding: 0 12px;
  background: #2d91e7;
  box-shadow: 0 10px 22px rgba(45, 145, 231, 0.16);
  font-size: 11px;
}

.creation-status,
.score-pill,
.input-progress,
.section-count,
.result-fit-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(155, 207, 108, 0.16);
  color: #4a7b2b;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.input-progress {
  background: rgba(17, 19, 24, 0.06);
  color: rgba(17, 19, 24, 0.48);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.08em;
}

.icon-text-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.62);
  font-size: 11px;
  font-weight: 820;
}

.preview-control-bar {
  min-height: 48px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 15px;
  background: rgba(17, 19, 24, 0.035);
}

.preview-platform-tabs {
  gap: 4px;
}

.preview-platform-tab {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(17, 19, 24, 0.48);
  font-size: 11px;
  font-weight: 820;
}

.preview-platform-tab.is-active {
  background: #111318;
  color: #fff;
  box-shadow: 0 8px 18px rgba(17, 19, 24, 0.14);
}

.platform-badge {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #111318;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: none;
}

.platform-badge.linkedin { background: #0a66c2; }
.platform-badge.instagram { background: linear-gradient(135deg, #ff7a59, #c13584); }
.platform-badge.tiktok { background: #0d1117; }
.platform-badge.facebook { background: #1877f2; }

.preview-sync-state {
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.live-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #6db449;
  box-shadow: 0 0 0 4px rgba(109, 180, 73, 0.13);
}

.creation-preview-surface {
  padding: 16px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 4%, rgba(155, 207, 108, 0.18), transparent 26%),
    linear-gradient(145deg, #f7f8f8, #edf0ee);
}

.preview-surface-top {
  margin: 0 2px 12px;
  color: rgba(17, 19, 24, 0.44);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-surface-top span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.window-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #9bcf6c;
}

.preview-surface-top strong {
  color: rgba(17, 19, 24, 0.58);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.social-result-card {
  width: min(610px, 100%);
  margin: 0 auto;
  padding: 20px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(17, 19, 24, 0.08);
}

.social-result-author {
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
}

.result-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #111318;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.social-result-author > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.social-result-author strong {
  color: #111318;
  font-size: 13px;
}

.social-result-author small,
.social-result-footer {
  color: rgba(17, 19, 24, 0.44);
  font-size: 11px;
}

.result-more {
  margin-left: auto;
  color: rgba(17, 19, 24, 0.32);
  letter-spacing: 2px;
}

.social-result-content {
  display: grid;
  gap: 7px;
  padding: 18px 0 14px;
}

.social-result-content label {
  margin-top: 7px;
  color: rgba(17, 19, 24, 0.4);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-result-title,
.live-result-hook,
.live-result-body {
  width: 100%;
  border: 1px dashed transparent;
  border-radius: 9px;
  outline: 0;
  background: transparent;
  color: #111318;
  resize: vertical;
}

.live-result-title {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.live-result-hook,
.live-result-body {
  min-height: 46px;
  padding: 6px 7px;
  font-size: 13px;
  line-height: 1.65;
}

.live-result-body {
  color: rgba(17, 19, 24, 0.73);
}

.live-result-title:hover,
.live-result-hook:hover,
.live-result-body:hover,
.live-result-title:focus,
.live-result-hook:focus,
.live-result-body:focus {
  border-color: rgba(155, 207, 108, 0.85);
  background: rgba(155, 207, 108, 0.08);
}

.social-result-cta {
  display: grid;
  gap: 4px;
  margin: 6px 7px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(17, 19, 24, 0.045);
}

.social-result-cta span {
  color: rgba(17, 19, 24, 0.38);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.social-result-cta strong {
  color: rgba(17, 19, 24, 0.68);
  font-size: 12px;
  line-height: 1.5;
}

.social-result-footer {
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
}

.result-micro-toolbar {
  width: min(610px, 100%);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px auto 0;
}

.result-micro-toolbar > span {
  margin-right: 2px;
  color: rgba(17, 19, 24, 0.4);
  font-size: 10px;
  font-weight: 850;
}

.result-micro-toolbar button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.58);
  font-size: 10px;
  font-weight: 820;
}

.result-fit-tag {
  min-height: 24px;
  padding: 0 8px;
  background: rgba(17, 19, 24, 0.055);
  color: rgba(17, 19, 24, 0.52);
  font-size: 10px;
}

.preview-visual-card {
  width: min(610px, 100%);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  margin: 14px auto 0;
  padding: 12px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.preview-visual-art {
  min-height: 108px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #111318;
  color: rgba(255, 255, 255, 0.78);
}

.preview-visual-art::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(155, 207, 108, 0.42);
  border-radius: 10px;
}

.preview-visual-art strong {
  position: relative;
  z-index: 2;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.visual-node {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(155, 207, 108, 0.72);
  border-radius: 8px;
  background: #111318;
  color: #9bcf6c;
  font-size: 9px;
  font-weight: 900;
}

.node-a { top: 26px; left: 22px; }
.node-b { top: 52px; left: 78px; }
.node-c { right: 20px; bottom: 22px; }
.visual-line { position: absolute; height: 1px; background: rgba(155, 207, 108, 0.68); transform-origin: left center; }
.line-a { width: 60px; top: 48px; left: 43px; transform: rotate(28deg); }
.line-b { width: 70px; top: 69px; left: 101px; transform: rotate(28deg); }

.preview-visual-copy {
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.preview-visual-copy > div {
  display: grid;
  gap: 7px;
}

.preview-visual-copy strong {
  color: #111318;
  font-size: 13px;
}

.creation-quality-strip {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.66);
}

.quality-strip-head strong {
  display: block;
  margin-top: 4px;
  color: #111318;
  font-size: 14px;
}

.score-pill {
  background: #111318;
  color: #fff;
}

.quality-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quality-strip-grid > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 9px;
  border-radius: 11px;
  background: rgba(17, 19, 24, 0.035);
}

.quality-strip-grid strong,
.quality-strip-grid small {
  display: block;
}

.quality-strip-grid strong {
  color: rgba(17, 19, 24, 0.7);
  font-size: 11px;
}

.quality-strip-grid small {
  margin-top: 3px;
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
  line-height: 1.45;
}

.quality-check {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(109, 180, 73, 0.17);
  color: #4f8c32;
  font-size: 11px;
  font-weight: 900;
}

.quality-check.warn {
  background: rgba(255, 159, 67, 0.16);
  color: #b26816;
}

.creation-input-pane {
  order: 1;
  height: auto;
  display: block;
  overflow: visible;
}

.creation-input-head {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
}

.creation-input-scroll {
  overflow: visible;
  padding: 3px 20px 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}

.input-section {
  min-width: 0;
  padding: 18px 0 20px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
}

.input-section:last-child {
  border-bottom: 0;
}

.input-section-head {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.input-step-number {
  min-width: 24px;
  padding-top: 1px;
  color: #5e9b3e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
}

.input-section-head > div {
  min-width: 0;
  flex: 1;
}

.input-section-head h3 {
  margin: 0 0 4px;
  color: #111318;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.section-count {
  min-height: 24px;
  background: rgba(17, 19, 24, 0.055);
  color: rgba(17, 19, 24, 0.5);
  font-size: 10px;
}

.studio-choice-grid,
.studio-platform-grid,
.studio-field-grid {
  display: grid;
  gap: 8px;
}

.studio-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-choice {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
  color: #111318;
  text-align: left;
}

.studio-choice.is-selected,
.studio-platform-card.is-selected {
  border-color: rgba(110, 169, 71, 0.72);
  background: rgba(155, 207, 108, 0.15);
  box-shadow: 0 8px 20px rgba(111, 169, 71, 0.08);
}

.studio-choice strong,
.studio-platform-card strong {
  font-size: 12px;
}

.studio-choice span,
.studio-platform-card small {
  color: rgba(17, 19, 24, 0.45);
  font-size: 10px;
  line-height: 1.4;
}

.studio-platform-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-platform-card {
  min-height: 58px;
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
  color: #111318;
  text-align: left;
}

.studio-platform-card > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-platform-card i {
  color: transparent;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.studio-platform-card.is-selected i {
  color: #5c9638;
}

.studio-field {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.studio-field > span {
  color: rgba(17, 19, 24, 0.5);
  font-size: 10px;
  font-weight: 820;
}

.studio-field input,
.studio-field textarea,
.studio-field select {
  width: 100%;
  min-height: 40px;
  padding: 10px 11px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 11px;
  outline: 0;
  background: rgba(255, 255, 255, 0.68);
  color: #111318;
  font: inherit;
  font-size: 12px;
}

.studio-field textarea {
  min-height: 92px;
  line-height: 1.55;
  resize: vertical;
}

.studio-field input:focus,
.studio-field textarea:focus,
.studio-field select:focus {
  border-color: rgba(110, 169, 71, 0.72);
  box-shadow: 0 0 0 3px rgba(155, 207, 108, 0.13);
}

.studio-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-material-actions,
.style-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.studio-material-actions button,
.style-switcher button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 9px;
  background: rgba(17, 19, 24, 0.035);
  color: rgba(17, 19, 24, 0.56);
  font-size: 10px;
  font-weight: 800;
}

.style-switcher button.is-selected {
  border-color: rgba(110, 169, 71, 0.65);
  background: rgba(155, 207, 108, 0.15);
  color: #47732a;
}

.schedule-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schedule-choice-grid .studio-choice {
  min-height: 58px;
  padding: 9px;
}

.selected-schedule-summary {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(110, 169, 71, 0.24);
  border-radius: 13px;
  background: rgba(155, 207, 108, 0.08);
}

.selected-schedule-summary--step {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 14px;
}

.selected-schedule-empty {
  color: rgba(17, 19, 24, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.selected-schedule-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.selected-schedule-summary-head > div {
  display: grid;
  gap: 3px;
}

.selected-schedule-summary-head strong {
  color: #47732a;
  font-size: 12px;
}

.selected-schedule-summary-head small {
  color: rgba(17, 19, 24, 0.48);
  font-size: 10px;
}

.selected-schedule-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.selected-schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(110, 169, 71, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.68);
  font-size: 10px;
}

.selected-schedule-chip b {
  color: #5c9638;
  font-size: 9px;
}

.selected-schedule-chip small {
  color: rgba(17, 19, 24, 0.48);
}

.selected-schedule-chip-remove {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.05);
  color: rgba(17, 19, 24, 0.5);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.selected-schedule-chip-remove:hover {
  background: rgba(255, 93, 93, 0.12);
  color: #c34e4e;
}

.creation-input-footer {
  display: grid;
  gap: 11px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.84);
}

.creation-footer-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.creation-footer-actions button {
  width: 100%;
  min-height: 42px;
}

@media (max-width: 1180px) {
  .creation-studio {
    grid-template-columns: 1fr;
  }

  .creation-input-scroll {
    grid-template-columns: 1fr;
  }

  .creation-input-pane {
    height: auto;
    max-height: none;
  }

  .creation-input-scroll {
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .creation-result-pane {
    padding: 14px;
  }

  .creation-result-head,
  .preview-control-bar,
  .creation-input-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .preview-sync-state {
    white-space: normal;
  }

  .preview-visual-card,
  .quality-strip-grid,
  .studio-platform-grid,
  .studio-field-grid,
  .creation-footer-actions {
    grid-template-columns: 1fr;
  }

  .studio-choice-grid,
  .schedule-choice-grid {
    grid-template-columns: 1fr;
  }

  .creation-input-head,
  .creation-input-scroll,
  .creation-input-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Content management: generated content, schedule and reusable library. */
.content-management-panel {
  padding: 4px 0 28px;
}

.content-management-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 0 26px;
}

.content-management-hero h2 {
  margin: 8px 0 8px;
  color: #111318;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.content-management-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(17, 19, 24, 0.56);
  font-size: 14px;
  line-height: 1.7;
}

.content-management-hero .primary-btn {
  background: #2d91e7;
  box-shadow: 0 14px 28px rgba(45, 145, 231, 0.2);
}

.content-management-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  margin-bottom: 18px;
  padding: 7px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(18, 20, 23, 0.04);
}

.content-management-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(17, 19, 24, 0.5);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.content-management-tabs button:hover,
.content-management-tabs button.is-active {
  background: #111318;
  color: #fff;
}

.content-management-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.07);
  color: rgba(17, 19, 24, 0.5);
  font-size: 9px;
  line-height: 1;
}

.content-management-tabs button.is-active span,
.content-management-tabs button:hover span {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.content-management-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.content-management-list-panel {
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 50px rgba(18, 20, 23, 0.055);
  backdrop-filter: blur(24px);
}

.content-management-list-panel {
  min-width: 0;
  overflow: hidden;
}

.content-management-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
}

.content-management-list-head h3 {
  margin: 5px 0 0;
  color: #111318;
  font-size: 17px;
  letter-spacing: -0.035em;
}

.content-management-list-head select {
  min-height: 34px;
  padding: 0 30px 0 11px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(17, 19, 24, 0.62);
  font: inherit;
  font-size: 11px;
}

.content-management-list {
  min-height: 200px;
}

.content-management-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 126px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
  transition: background 160ms ease, transform 160ms ease;
}

.content-management-row:last-child {
  border-bottom: 0;
}

.content-management-row:hover {
  background: rgba(247, 250, 252, 0.9);
}

.content-management-date {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 66px;
  padding: 0 12px;
  border-right: 1px solid rgba(17, 19, 24, 0.08);
}

.content-management-date strong {
  color: #111318;
  font-size: 14px;
  line-height: 1.15;
}

.content-management-date span {
  color: #237ebd;
  font-size: 12px;
  font-weight: 820;
}

.content-management-row-main {
  min-width: 0;
}

.content-management-row-meta,
.content-management-row-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.content-management-row-meta {
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
  font-weight: 750;
}

.content-management-row-meta .channel-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 8px;
}

.content-management-row-main h3 {
  overflow: hidden;
  margin: 7px 0 8px;
  color: #111318;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-management-row-foot {
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
}

.content-management-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.content-management-status.draft {
  background: rgba(17, 19, 24, 0.06);
  color: rgba(17, 19, 24, 0.56);
}

.content-management-status.scheduled {
  background: rgba(155, 207, 108, 0.18);
  color: #4d812d;
}

.content-management-status.pending {
  background: rgba(45, 145, 231, 0.13);
  color: #1d79b9;
}

.content-management-status.sent {
  background: rgba(45, 145, 231, 0.13);
  color: #1d79b9;
}

.content-management-status.evergreen {
  background: rgba(140, 107, 220, 0.13);
  color: #7050b3;
}

.content-management-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.content-management-row-actions button {
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fff;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.content-management-row-actions button[data-content-management-edit-schedule] {
  min-width: 77px;
  border-color: #b9dcfb;
  color: #1378b9;
}

.content-management-row-actions button[data-content-management-edit-schedule]:hover {
  border-color: #86c5f6;
  background: #f8fcff;
}

.content-management-row-actions .content-management-delete-btn {
  min-width: 42px;
  border-color: #f2cccc;
  background: #fffafa;
  color: #c43e3e;
}

.content-management-row-actions .content-management-delete-btn:hover {
  border-color: #eaa6a6;
  background: #fff5f5;
}

.content-management-row-actions .content-management-more {
  min-width: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: rgba(17, 19, 24, 0.42);
  letter-spacing: 0.12em;
}

.destructive-confirm-modal {
  overflow: hidden;
}

.destructive-confirm-body {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 22px;
}

.destructive-confirm-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: rgba(205, 67, 67, 0.1);
  color: #b53b3b;
  font-size: 20px;
  font-weight: 900;
}

.destructive-confirm-body strong {
  display: block;
  margin: 2px 0 7px;
  color: #111318;
  font-size: 14px;
}

.destructive-confirm-body p {
  margin: 0;
  color: rgba(17, 19, 24, 0.58);
  font-size: 12px;
  line-height: 1.7;
}

.destructive-confirm-button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #bd4141;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.destructive-confirm-button:hover {
  background: #a93434;
}

.content-management-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 78px 24px;
  text-align: center;
}

.content-management-empty-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  margin-bottom: 4px;
  border: 1px solid rgba(45, 145, 231, 0.22);
  border-radius: 16px;
  background: rgba(45, 145, 231, 0.08);
  color: #2d91e7;
  font-size: 22px;
}

.content-management-empty h3 {
  margin: 0;
  color: #111318;
  font-size: 16px;
}

.content-management-empty p {
  max-width: 360px;
  margin: 0 0 8px;
  color: rgba(17, 19, 24, 0.5);
  font-size: 12px;
  line-height: 1.65;
}

/* Content edit / schedule modal: three-column review surface. */
.content-management-edit-backdrop {
  padding: 16px;
  background: rgba(17, 19, 24, 0.3);
  backdrop-filter: blur(12px);
}

.content-management-edit-modal--wide {
  width: min(1480px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f7f7f7;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 24px;
  box-shadow: 0 32px 100px rgba(17, 19, 24, 0.2);
}

.content-management-edit-head {
  min-height: 76px;
  padding: 18px 32px;
  background: rgba(255, 255, 255, 0.58);
}

.content-management-edit-head h2 {
  color: #111318;
  font-size: 26px;
  letter-spacing: -0.055em;
}

.content-management-edit-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.92fr) minmax(340px, 0.88fr);
}

.content-management-edit-column {
  min-width: 0;
  padding: 30px 32px 26px;
  overflow: auto;
}

.content-management-edit-column + .content-management-edit-column {
  border-left: 1px solid rgba(17, 19, 24, 0.1);
}

.content-management-content-column {
  display: flex;
  flex-direction: column;
}

.content-management-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.content-management-column-head h3 {
  margin: 0;
  color: #111318;
  font-size: 23px;
  letter-spacing: -0.045em;
}

.content-management-column-head > span {
  color: rgba(17, 19, 24, 0.48);
  font-size: 13px;
  font-weight: 760;
}

.content-management-main-textarea,
.content-management-optimize-block textarea {
  width: 100%;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 17px;
  outline: 0;
  background: rgba(255, 255, 255, 0.7);
  color: #111318;
  font: inherit;
  line-height: 1.65;
  resize: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.content-management-main-textarea {
  flex: 1 1 auto;
  min-height: 360px;
  padding: 22px;
  font-size: 17px;
}

.content-management-main-textarea:focus,
.content-management-optimize-block textarea:focus {
  border-color: rgba(45, 145, 231, 0.46);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(45, 145, 231, 0.1);
}

.content-management-media-section {
  margin-top: 30px;
}

.content-management-media-section .content-management-column-head {
  margin-bottom: 13px;
}

.content-management-media-head {
  align-items: baseline;
}

.content-management-media-head > span {
  color: rgba(17, 19, 24, 0.46);
  font-size: 12px;
  font-weight: 760;
}

.content-management-media-row {
  display: block;
}

.content-management-image-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.content-management-image-tile {
  position: relative;
  flex: 0 0 168px;
  width: 168px;
  height: 112px;
  overflow: hidden;
  border-radius: 16px;
}

.content-management-image-tile--image {
  border: 1px solid rgba(17, 19, 24, 0.12);
  background: #10141f;
  box-shadow: 0 8px 20px rgba(17, 19, 24, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.content-management-image-tile--image:hover {
  border-color: rgba(17, 19, 24, 0.28);
  box-shadow: 0 12px 26px rgba(17, 19, 24, 0.14);
  transform: translateY(-2px);
}

.content-management-image-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-management-image-tile--image::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(17, 19, 24, 0.32));
  content: "";
  pointer-events: none;
}

.content-management-image-tile--empty {
  border: 1px solid rgba(17, 19, 24, 0.12);
  background: #10141f;
}

.content-management-image-index {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  display: inline-grid;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.58);
  color: #fff;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.04em;
}

.content-management-image-remove {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.68);
  color: #fff;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.content-management-image-remove:hover {
  background: rgba(17, 19, 24, 0.9);
  transform: scale(1.06);
}

.content-management-image-generate,
.content-management-image-add {
  display: grid;
  place-content: center;
  gap: 7px;
  border: 1px dashed rgba(17, 19, 24, 0.18);
  background: rgba(17, 19, 24, 0.06);
  color: rgba(17, 19, 24, 0.58);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.content-management-image-generate:hover,
.content-management-image-add:hover {
  border-color: rgba(17, 19, 24, 0.32);
  background: rgba(17, 19, 24, 0.1);
  color: #111318;
}

.content-management-image-generate span,
.content-management-image-add span {
  display: block;
  text-align: center;
  font-weight: 400;
  line-height: 1;
}

.content-management-image-generate span {
  font-size: 25px;
}

.content-management-image-generate {
  flex: 0 0 112px;
  width: 112px;
  background: linear-gradient(145deg, rgba(17, 19, 24, 0.06), rgba(255, 255, 255, 0.5));
}

.content-management-image-add span {
  font-size: 34px;
}

.content-management-image-add {
  flex: 0 0 82px;
  width: 82px;
  background: rgba(255, 255, 255, 0.5);
}

.content-management-image-preview,
.content-management-media-action {
  height: 112px;
  border-radius: 16px;
}

.content-management-image-preview {
  width: 168px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.12);
  background: #10141f;
}

.content-management-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-management-image-art {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  gap: 4px;
  overflow: hidden;
  background: radial-gradient(circle at 67% 37%, rgba(86, 188, 255, 0.86), transparent 18%), radial-gradient(circle at 30% 70%, rgba(119, 83, 255, 0.72), transparent 27%), linear-gradient(135deg, #080b15, #172c48 58%, #111318);
  color: #fff;
  text-align: center;
}

.content-management-image-art span {
  color: #85d7ff;
  font-size: 28px;
  line-height: 1;
}

.content-management-image-art strong {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.content-management-image-art small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
}

.content-management-media-action {
  display: grid;
  width: 112px;
  place-content: center;
  gap: 7px;
  border: 1px solid rgba(17, 19, 24, 0.06);
  background: rgba(17, 19, 24, 0.06);
  color: rgba(17, 19, 24, 0.58);
  font: inherit;
  font-size: 12px;
  font-weight: 820;
}

.content-management-media-action:hover {
  background: rgba(17, 19, 24, 0.1);
}

.content-management-media-action span {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.content-management-upload-action {
  width: 82px;
  font-size: 25px;
}

.content-management-upload-action span {
  font-size: 34px;
}

.content-management-ai-column {
  background: rgba(255, 255, 255, 0.18);
}

.content-management-ai-block {
  display: grid;
  gap: 9px;
}

.content-management-ai-block strong {
  color: #111318;
  font-size: 18px;
  letter-spacing: -0.035em;
}

.content-management-ai-block p {
  margin: 0;
  color: rgba(17, 19, 24, 0.5);
  font-size: 13px;
  line-height: 1.65;
}

.content-management-regenerate-btn,
.content-management-optimize-btn {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 820;
}

.content-management-regenerate-btn {
  background: rgba(17, 19, 24, 0.06);
  color: #111318;
}

.content-management-regenerate-btn:hover {
  background: rgba(17, 19, 24, 0.11);
}

.content-management-regenerate-btn span,
.content-management-optimize-btn span {
  margin-right: 8px;
  font-size: 21px;
  vertical-align: -2px;
}

.content-management-ai-divider {
  height: 1px;
  margin: 28px 0;
  background: rgba(17, 19, 24, 0.12);
}

.content-management-optimize-block textarea {
  min-height: 184px;
  padding: 17px;
  font-size: 13px;
}

.content-management-optimize-block textarea::placeholder {
  color: rgba(17, 19, 24, 0.34);
}

.content-management-ai-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.content-management-ai-quick-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(17, 19, 24, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.72);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.content-management-ai-quick-actions button:hover,
.content-management-ai-quick-actions button.is-active {
  transform: translateY(-1px);
  border-color: rgba(82, 143, 47, 0.28);
  background: rgba(155, 207, 108, 0.17);
  color: #4f812f;
}

.content-management-ai-quick-actions button span {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

.content-management-optimize-btn {
  background: #9ed49d;
  color: #fff;
  box-shadow: 0 12px 22px rgba(83, 151, 83, 0.14);
}

.content-management-optimize-btn:hover {
  background: #89c888;
}

.content-management-publish-column {
  background: rgba(255, 255, 255, 0.12);
}

.content-management-publish-modes {
  display: grid;
  gap: 12px;
}

.content-management-publish-mode {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 18px 18px;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.42);
  color: #111318;
  text-align: left;
}

.content-management-publish-mode:hover {
  border-color: rgba(17, 19, 24, 0.24);
  background: rgba(255, 255, 255, 0.7);
}

.content-management-publish-mode.is-selected {
  border-color: rgba(112, 190, 112, 0.72);
  background: rgba(174, 221, 173, 0.18);
}

.content-management-publish-mode > span:last-child {
  display: grid;
  gap: 5px;
}

.content-management-publish-mode strong {
  font-size: 17px;
  letter-spacing: -0.025em;
}

.content-management-publish-mode small {
  color: rgba(17, 19, 24, 0.48);
  font-size: 12px;
  line-height: 1.45;
}

.content-management-radio {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(17, 19, 24, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
}

.content-management-publish-mode.is-selected .content-management-radio {
  border-color: #111318;
  background: #111318;
}

.content-management-publish-mode.is-selected .content-management-radio::after {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.content-management-calendar-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.42);
  transition: opacity 160ms ease, background 160ms ease;
}

.content-management-calendar-card.is-disabled {
  opacity: 0.42;
}

.content-management-calendar-head,
.content-management-calendar-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-management-calendar-head strong {
  color: #111318;
  font-size: 20px;
  letter-spacing: -0.045em;
}

.content-management-calendar-head > div {
  gap: 13px;
  color: rgba(17, 19, 24, 0.42);
}

.content-management-calendar-head button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: rgba(17, 19, 24, 0.42);
  font-size: 22px;
}

.content-management-calendar-week,
.content-management-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 14px;
  text-align: center;
}

.content-management-calendar-week {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
  color: rgba(17, 19, 24, 0.38);
  font-size: 11px;
}

.content-management-calendar-day {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(17, 19, 24, 0.72);
  font: inherit;
  font-size: 13px;
}

button.content-management-calendar-day:hover {
  background: rgba(17, 19, 24, 0.08);
}

.content-management-calendar-day.is-selected {
  background: #111318;
  color: #fff;
}

.content-management-calendar-day.is-blank {
  pointer-events: none;
}

.content-management-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.content-management-time-row input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 13px;
  outline: 0;
  background: rgba(255, 255, 255, 0.64);
  color: #111318;
  font: inherit;
  font-size: 16px;
}

.content-management-time-row > span {
  color: rgba(17, 19, 24, 0.46);
  font-size: 18px;
}

.content-management-edit-footer {
  min-height: 76px;
  padding: 14px 32px;
  border-top: 1px solid rgba(17, 19, 24, 0.1);
  background: rgba(255, 255, 255, 0.56);
}

.content-management-confirm-btn {
  min-width: 132px;
  background: #5db35a;
  box-shadow: 0 12px 24px rgba(83, 151, 83, 0.2);
}

.content-management-confirm-btn:hover {
  background: #4d9f4b;
}

@media (max-width: 1080px) {
  .content-management-edit-modal--wide {
    height: min(900px, calc(100vh - 20px));
    max-height: calc(100vh - 20px);
  }

  .content-management-edit-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  }

  .content-management-publish-column {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
    gap: 18px;
  }

  .content-management-publish-column .content-management-column-head {
    grid-column: 1 / -1;
  }

  .content-management-publish-column .content-management-calendar-card {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .content-management-edit-backdrop {
    padding: 0;
  }

  .content-management-edit-modal--wide {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .content-management-edit-head,
  .content-management-edit-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .content-management-edit-grid {
    display: block;
    overflow: auto;
  }

  .content-management-edit-column {
    padding: 24px 18px;
  }

  .content-management-edit-column + .content-management-edit-column {
    border-top: 1px solid rgba(17, 19, 24, 0.1);
    border-left: 0;
  }

  .content-management-main-textarea {
    min-height: 300px;
  }

  .content-management-image-gallery {
    gap: 10px;
  }

  .content-management-image-tile--image,
  .content-management-image-tile--empty {
    flex-basis: calc(50% - 5px);
    width: calc(50% - 5px);
  }

  .content-management-publish-column {
    display: block;
  }

  .content-management-publish-column .content-management-calendar-card {
    margin-top: 18px;
  }

  .content-management-edit-footer {
    justify-content: stretch;
  }

.content-management-edit-footer button {
    flex: 1;
  }

  .content-management-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-management-hero .primary-btn {
    width: 100%;
  }

  .content-management-list-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-management-list-head select {
    width: 100%;
  }

  .content-management-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 14px;
  }

  .content-management-date {
    padding: 0 8px;
  }

  .content-management-row-main h3 {
    white-space: normal;
  }

  .content-management-row-actions {
    grid-column: 2;
  }

}

/* Account management module */
.account-management-panel {
  padding: 24px 4px 52px;
}

.account-section-heading,
.account-management-actions,
.managed-account-head,
.managed-account-identity,
.channel-modal-footer,
.account-connect-actions {
  display: flex;
  align-items: center;
}

.account-section-heading {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.account-section-heading h2 {
  margin: 7px 0 4px;
  color: #111318;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.account-section-heading p {
  margin: 0;
  color: rgba(17, 19, 24, 0.58);
  font-size: 14px;
  line-height: 1.65;
}

.account-management-actions {
  gap: 10px;
  flex-shrink: 0;
}

.account-primary-btn,
.account-secondary-btn,
.account-text-btn,
.account-share-btn,
.account-connect-primary {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.account-primary-btn,
.account-secondary-btn,
.account-share-btn,
.account-connect-primary {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 780;
}

.account-primary-btn,
.account-connect-primary {
  background: #111318;
  color: #fff;
  box-shadow: 0 12px 24px rgba(17, 19, 24, 0.14);
}

.account-secondary-btn,
.account-share-btn {
  border: 1px solid rgba(17, 19, 24, 0.09);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 19, 24, 0.7);
}

.account-section-count {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(155, 207, 108, 0.18);
  color: #47732a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.account-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.managed-account-card {
  min-height: 150px;
  padding: 18px 18px 15px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(18, 20, 23, 0.055);
}

.managed-account-head {
  justify-content: space-between;
  gap: 12px;
}

.managed-account-identity {
  min-width: 0;
  gap: 12px;
}

.managed-account-identity > div {
  min-width: 0;
}

.managed-account-identity strong,
.managed-account-identity span:not(.account-platform-logo) {
  display: block;
}

.managed-account-identity strong {
  overflow: hidden;
  color: #1c273f;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managed-account-identity span:not(.account-platform-logo) {
  margin-top: 4px;
  overflow: hidden;
  color: #7a879f;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-platform-logo,
.channel-option-logo,
.account-connect-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.account-platform-logo {
  width: 34px;
  height: 34px;
}

.account-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(65, 183, 99, 0.11);
  color: #269b55;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.managed-account-capabilities {
  margin: 16px 0 12px;
  color: #52617b;
  font-size: 12px;
}

.managed-account-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(17, 19, 24, 0.08);
  color: #8a96aa;
  font-size: 10px;
}

.account-text-btn {
  padding: 3px 0;
  background: transparent;
  color: #7f8ca2;
  font-size: 11px;
}

.account-text-btn:hover {
  color: #4153e9;
}

.account-platform-logo.x,
.channel-option-logo.x,
.account-connect-logo.x { background: #111316; }
.account-platform-logo.linkedin,
.channel-option-logo.linkedin { background: #0a66c2; }
.account-platform-logo.instagram,
.channel-option-logo.instagram { background: linear-gradient(135deg, #ffb13b, #dc238d 58%, #6b2fff); }
.account-platform-logo.facebook,
.channel-option-logo.facebook { background: #287bea; }
.account-platform-logo.threads,
.channel-option-logo.threads { background: #111316; }
.account-platform-logo.reddit,
.channel-option-logo.reddit { background: #ff571b; }
.channel-option-logo.youtube { background: #f00; }
.channel-option-logo.tiktok { background: #111316; box-shadow: inset 2px 0 #26f4ee, inset -2px 0 #fe2c55; }
.channel-option-logo.pinterest { background: #bd081c; }
.channel-option-logo.discord { background: #5865f2; }
.channel-option-logo.slack { background: linear-gradient(135deg, #36c5f0 0 25%, #2eb67d 25% 50%, #ecb22e 50% 75%, #e01e5a 75%); }
.channel-option-logo.twitch { background: #6441a5; }
.channel-option-logo.mastodon { background: #6364ff; }
.channel-option-logo.bluesky { background: #138fe8; }
.channel-option-logo.telegram { background: #25a8e0; }
.channel-option-logo.medium,
.channel-option-logo.devto { background: #111316; }
.channel-option-logo.hashnode { background: #2962ff; }
.channel-option-logo.wordpress { background: #4c9bd4; }
.channel-option-logo.google-business { background: #4285f4; }

/* Account analytics module */
.account-analytics-panel {
  padding: 18px 4px 56px;
}

.account-analytics-header,
.account-analytics-controls,
.analytics-account-filter,
.analytics-card-head,
.analytics-metric-row,
.analytics-metric-foot,
.analytics-metric-switch,
.analytics-chart-summary,
.analytics-platform-row,
.analytics-content-row,
.analytics-audience-row,
.analytics-insight-badge {
  display: flex;
  align-items: center;
}

.account-analytics-header {
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.account-analytics-header h2 {
  margin: 7px 0 5px;
  color: #111318;
  font-size: 28px;
  letter-spacing: -0.045em;
}

.account-analytics-header p {
  margin: 0;
  color: rgba(17, 19, 24, 0.55);
  font-size: 13px;
  line-height: 1.6;
}

.account-analytics-controls {
  gap: 10px;
  flex-shrink: 0;
}

.analytics-account-filter {
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 28px rgba(17, 19, 24, 0.04);
}

.analytics-account-filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(17, 19, 24, 0.5);
  font-size: 11px;
  font-weight: 820;
  white-space: nowrap;
}

.analytics-account-filter button.is-active {
  background: #111318;
  color: #fff;
  box-shadow: 0 8px 18px rgba(17, 19, 24, 0.14);
}

.analytics-filter-logo {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  color: #fff;
  font-size: 7px;
  font-weight: 900;
}

.analytics-filter-logo.x { background: #111318; }
.analytics-filter-logo.instagram { background: linear-gradient(135deg, #ffb13b, #dc238d 58%, #6b2fff); }
.analytics-filter-logo.facebook { background: #287bea; }

.analytics-range-select {
  display: grid;
  gap: 3px;
  min-width: 132px;
  padding: 5px 11px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.analytics-range-select > span {
  color: rgba(17, 19, 24, 0.36);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.analytics-range-select select {
  border: 0;
  outline: 0;
  background: transparent;
  color: #111318;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.analytics-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 12px;
}

.analytics-metric-card,
.analytics-card {
  border: 1px solid rgba(17, 19, 24, 0.07);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 48px rgba(18, 20, 23, 0.055);
  backdrop-filter: blur(20px);
}

.analytics-metric-card {
  min-width: 0;
  padding: 15px;
  border-radius: 18px;
}

.analytics-metric-label {
  color: rgba(17, 19, 24, 0.46);
  font-size: 10px;
  font-weight: 820;
}

.analytics-metric-row {
  justify-content: space-between;
  gap: 7px;
  margin-top: 9px;
}

.analytics-metric-row strong {
  color: #111318;
  font-size: 24px;
  letter-spacing: -0.045em;
}

.analytics-metric-row svg {
  width: 70px;
  height: 30px;
  overflow: visible;
}

.analytics-metric-row svg path {
  fill: none;
  stroke: #73b54c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.analytics-metric-foot {
  gap: 5px;
  margin-top: 7px;
}

.analytics-metric-foot span {
  color: #518733;
  font-size: 9px;
  font-weight: 850;
}

.analytics-metric-foot small {
  min-width: 0;
  overflow: hidden;
  color: rgba(17, 19, 24, 0.35);
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-analytics-main-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.analytics-card {
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
}

.analytics-trend-card { grid-column: span 8; }
.analytics-platform-card { grid-column: span 4; }
.analytics-content-card { grid-column: span 8; }
.analytics-audience-card { grid-column: span 4; }
.analytics-insight-card { grid-column: 1 / -1; }

.analytics-card-head {
  justify-content: space-between;
  gap: 16px;
  min-height: 39px;
  margin-bottom: 16px;
}

.analytics-card-head h3 {
  margin: 5px 0 0;
  color: #111318;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.analytics-card-note {
  color: rgba(17, 19, 24, 0.36);
  font-size: 9px;
  font-weight: 700;
}

.analytics-metric-switch {
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: rgba(17, 19, 24, 0.04);
}

.analytics-metric-switch button {
  min-height: 29px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(17, 19, 24, 0.42);
  font-size: 9px;
  font-weight: 820;
}

.analytics-metric-switch button.is-active {
  background: #fff;
  color: #4f8431;
  box-shadow: 0 6px 14px rgba(17, 19, 24, 0.08);
}

.analytics-chart-summary {
  gap: 9px;
  margin-bottom: 8px;
}

.analytics-chart-summary strong {
  color: #111318;
  font-size: 26px;
  letter-spacing: -0.045em;
}

.analytics-chart-summary span {
  color: rgba(17, 19, 24, 0.4);
  font-size: 9px;
  font-weight: 700;
}

.analytics-line-chart {
  position: relative;
  height: 238px;
}

.analytics-line-chart svg {
  width: 100%;
  height: 214px;
  overflow: visible;
}

.analytics-chart-grid line {
  stroke: rgba(17, 19, 24, 0.075);
  stroke-dasharray: 4 6;
  stroke-width: 1;
}

.analytics-chart-area { fill: url(#analyticsArea); }

.analytics-chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.analytics-line-chart circle {
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.analytics-chart-labels {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  color: rgba(17, 19, 24, 0.34);
  font-size: 8px;
  font-weight: 700;
}

.analytics-platform-list {
  display: grid;
  gap: 8px;
}

.analytics-platform-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 9px;
  min-height: 74px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 15px;
  background: rgba(247, 248, 250, 0.74);
  color: #111318;
  text-align: left;
}

.analytics-platform-row:hover,
.analytics-platform-row.is-active {
  border-color: rgba(110, 169, 71, 0.42);
  background: rgba(246, 251, 242, 0.92);
}

.analytics-platform-name,
.analytics-platform-stat {
  display: grid;
  align-content: center;
  gap: 3px;
}

.analytics-platform-name strong,
.analytics-platform-stat strong {
  color: #111318;
  font-size: 11px;
}

.analytics-platform-name small,
.analytics-platform-stat small {
  color: rgba(17, 19, 24, 0.38);
  font-size: 8px;
  font-weight: 680;
}

.analytics-platform-stat {
  min-width: 42px;
  text-align: right;
}

.analytics-platform-bar {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 53px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.07);
}

.analytics-platform-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #92cf6e, #5f9f3b);
}

.analytics-text-button {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #568d35;
  font-size: 10px;
  font-weight: 820;
}

.analytics-content-list {
  display: grid;
}

.analytics-content-row {
  display: grid;
  grid-template-columns: 26px 30px minmax(0, 1fr) 65px 58px auto;
  gap: 10px;
  min-height: 65px;
  padding: 10px 4px;
  border-top: 1px solid rgba(17, 19, 24, 0.065);
}

.analytics-content-row:first-child { border-top: 0; }

.analytics-content-rank {
  color: rgba(17, 19, 24, 0.25);
  font-size: 10px;
  font-weight: 900;
}

.analytics-content-row > .account-platform-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 8px;
}

.analytics-content-copy,
.analytics-content-number {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.analytics-content-copy strong {
  overflow: hidden;
  color: #111318;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-content-copy small,
.analytics-content-number small {
  color: rgba(17, 19, 24, 0.38);
  font-size: 8px;
  font-weight: 680;
}

.analytics-content-number { text-align: right; }

.analytics-content-number strong {
  color: #111318;
  font-size: 11px;
}

.analytics-content-status {
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(155, 207, 108, 0.15);
  color: #4f8431;
  font-size: 8px;
  font-weight: 820;
  white-space: nowrap;
}

.analytics-audience-summary {
  padding: 15px;
  border-radius: 15px;
  background: radial-gradient(circle at 92% 0%, rgba(155, 207, 108, 0.26), transparent 40%), rgba(247, 250, 245, 0.86);
}

.analytics-audience-summary strong,
.analytics-audience-summary span { display: block; }

.analytics-audience-summary strong {
  color: #111318;
  font-size: 23px;
  letter-spacing: -0.04em;
}

.analytics-audience-summary span {
  margin-top: 2px;
  color: #568d35;
  font-size: 9px;
  font-weight: 820;
}

.analytics-audience-summary p {
  margin: 11px 0 0;
  color: rgba(17, 19, 24, 0.52);
  font-size: 10px;
  line-height: 1.6;
}

.analytics-audience-bars {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.analytics-audience-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  gap: 8px;
  color: rgba(17, 19, 24, 0.5);
  font-size: 9px;
  font-weight: 700;
}

.analytics-audience-row > div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.07);
}

.analytics-audience-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #83c55c, #b2dc98);
}

.analytics-audience-row strong {
  color: #111318;
  text-align: right;
}

.analytics-insight-badge {
  gap: 5px;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(155, 207, 108, 0.14);
  color: #568d35;
  font-size: 9px;
  font-weight: 820;
}

.analytics-insight-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analytics-insight-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  min-height: 110px;
  padding: 14px;
  border: 1px solid rgba(17, 19, 24, 0.065);
  border-radius: 15px;
  background: rgba(247, 249, 246, 0.74);
}

.analytics-insight-item > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #111318;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.analytics-insight-item strong {
  color: #111318;
  font-size: 11px;
}

.analytics-insight-item p {
  margin: 7px 0 0;
  color: rgba(17, 19, 24, 0.52);
  font-size: 9px;
  line-height: 1.65;
}

.analytics-empty {
  padding: 32px 16px;
  color: rgba(17, 19, 24, 0.38);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 1280px) {
  .analytics-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .account-analytics-header,
  .account-analytics-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-account-filter { overflow-x: auto; }

  .analytics-trend-card,
  .analytics-platform-card,
  .analytics-content-card,
  .analytics-audience-card { grid-column: 1 / -1; }

  .analytics-insight-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .analytics-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-card { padding: 16px; }

  .analytics-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-content-row { grid-template-columns: 24px 28px minmax(0, 1fr) auto; }
  .analytics-content-number:nth-of-type(2),
  .analytics-content-status { display: none; }
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
}

.account-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.account-modal[aria-hidden="true"],
.commerce-image-modal[aria-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.account-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 14, 26, 0.62);
  backdrop-filter: blur(5px);
}

.account-modal-dialog,
.account-connect-dialog {
  position: relative;
  z-index: 1;
}

.channel-modal-dialog {
  width: min(100%, 980px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 25px 23px 18px;
  border: 1px solid rgba(209, 192, 237, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, #17121e 0%, #1d1826 100%);
  box-shadow: 0 32px 100px rgba(12, 7, 21, 0.46);
}

.account-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 33px;
  height: 33px;
  border: 1px solid rgba(224, 209, 241, 0.18);
  border-radius: 9px;
  background: transparent;
  color: rgba(242, 234, 251, 0.72);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.account-modal-heading {
  padding-right: 52px;
}

.account-modal-heading h2 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: 23px;
  letter-spacing: -0.035em;
}

.account-modal-heading p {
  max-width: 700px;
  margin: 0;
  color: rgba(226, 215, 239, 0.72);
  font-size: 12px;
  line-height: 1.65;
}

.channel-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 21px;
}

.channel-option {
  min-height: 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(221, 205, 239, 0.17);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(236, 226, 247, 0.76);
  cursor: pointer;
  font-size: 11px;
}

.channel-option:hover,
.channel-option.active {
  border-color: #8952e9;
  background: rgba(118, 63, 200, 0.18);
  color: #fff;
}

.channel-option-logo {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  font-size: 10px;
}

.channel-modal-footer {
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(221, 205, 239, 0.12);
  color: rgba(225, 214, 239, 0.67);
  font-size: 12px;
}

.account-connect-dialog {
  width: min(100%, 360px);
}

.account-connect-dialog .account-modal-close {
  z-index: 2;
  top: 14px;
  right: 14px;
  border-color: rgba(73, 87, 122, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #53617c;
}

.account-connect-card {
  padding: 19px 20px 20px;
  border: 1px solid rgba(125, 142, 178, 0.15);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(17, 29, 61, 0.24);
  text-align: center;
}

.account-connect-logo {
  width: 28px;
  height: 28px;
  margin-bottom: 15px;
  border-radius: 8px;
}

.account-connect-card h2 {
  margin: 0;
  color: #28479e;
  font-size: 21px;
  letter-spacing: -0.04em;
}

.account-connect-card > p {
  margin: 16px 0 14px;
  color: #4d5b74;
  font-size: 12px;
}

.account-connect-checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: #59667b;
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
  list-style: none;
}

.account-connect-checklist li::before {
  content: "✓";
  margin-right: 6px;
  color: #18a46c;
  font-weight: 900;
}

.account-connect-actions {
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
}

.account-share-btn,
.account-connect-primary {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}

.account-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  max-width: min(360px, calc(100vw - 48px));
  padding: 12px 16px;
  border: 1px solid rgba(72, 90, 137, 0.2);
  border-radius: 11px;
  background: #1b2438;
  color: #fff;
  box-shadow: 0 18px 38px rgba(13, 22, 44, 0.24);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .account-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-management-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .account-management-actions button {
    flex: 1;
  }

  .account-card-grid {
    grid-template-columns: 1fr;
  }

  .channel-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-modal-footer,
  .account-connect-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Final result column rule. */
.creation-studio.is-complete .batch-result-grid {
  grid-template-columns: 1fr;
}

/* Final creation-flow overrides: keep the desktop layout in two columns. */
.creation-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  max-width: none;
  margin: 0;
  align-items: start;
}

.creation-input-pane,
.creation-result-pane {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.creation-input-pane {
  order: 1;
  height: auto;
  padding: 28px 32px 32px 0;
}

/* Let completed content settings expand with the page instead of scrolling internally. */
.creation-studio.is-complete .creation-input-pane {
  max-height: none;
  overflow: visible;
}

.creation-studio.is-complete .creation-input-scroll {
  overflow: visible;
}

.creation-result-pane {
  order: 2;
  min-height: 620px;
  padding: 28px 0 32px 32px;
  border-left: 1px solid rgba(17, 19, 24, 0.1);
}

.creation-input-head,
.creation-result-head {
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
}

.creation-input-head h2,
.creation-title-stack h2 {
  margin: 0 0 6px;
  color: #111318;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.creation-input-scroll {
  display: block;
  overflow: visible;
  padding: 0;
}

.input-section {
  padding: 28px 0 26px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.1);
}

.input-section[hidden] {
  display: none !important;
}

.input-section-head {
  margin-bottom: 20px;
}

.input-step-number {
  min-width: 56px;
  color: #708366;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.studio-field input,
.studio-field textarea,
.studio-field select {
  border-color: rgba(17, 19, 24, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.creation-result-pane .preview-control-bar {
  margin-top: 18px;
}

.creation-result-pane .batch-result-surface.is-empty {
  display: none;
}

.creation-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(17, 19, 24, 0.1);
  background: transparent;
}

.creation-input-footer > .ghost-btn {
  min-width: 70px;
  border-color: rgba(17, 19, 24, 0.14);
  background: #fff;
  color: rgba(17, 19, 24, 0.7);
}

.creation-flow-footer-status {
  margin-left: auto;
  color: rgba(17, 19, 24, 0.46);
  font-size: 10px;
}

.creation-footer-actions {
  display: flex;
  gap: 8px;
}

.creation-footer-actions button {
  width: auto;
  min-width: 94px;
  min-height: 40px;
}

.creation-footer-actions button[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .creation-studio {
    grid-template-columns: 1fr;
  }

  .creation-input-pane {
    padding-right: 0;
  }

  .creation-result-pane {
    min-height: 0;
    padding: 28px 0 32px;
    border-top: 1px solid rgba(17, 19, 24, 0.1);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .creation-flow-stepper {
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(138px, 1fr));
    padding-left: 14px;
    padding-right: 14px;
  }

  .creation-flow-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 34px 0 24px;
  }

  .creation-flow-heading p {
    max-width: 460px;
    margin: 0;
    text-align: left;
  }

  .creation-input-footer {
    flex-wrap: wrap;
  }

  .creation-flow-footer-status {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .creation-studio.is-complete .batch-result-grid {
    grid-template-columns: 1fr;
  }
}

/* Cloud-drive media picker */
.composer-v2{position:relative}.composer-media-head{justify-content:flex-start}.composer-media-head>h3{margin:0;color:#111318;font-size:16px;letter-spacing:-.01em}.composer-media-head .composer-media-tabs{margin-left:2px}
.composer-cloud-overlay{position:absolute;z-index:40;inset:0;display:grid;place-items:center;padding:18px;border-radius:22px;background:rgba(17,19,24,.32);backdrop-filter:blur(3px)}.composer-cloud-dialog{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(920px,calc(100% - 36px));height:min(700px,calc(100% - 36px));overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(17,19,24,.24)}
.composer-cloud-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 28px 16px}.composer-cloud-dialog h3{margin:0;color:#111318;font-size:22px;letter-spacing:-.03em}.composer-cloud-dialog header p{margin:8px 0 0;color:#70809a;font-size:12px}.composer-cloud-dialog header>button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:#f3f3f3;color:#9a9a9a;font-size:20px;cursor:pointer}
.composer-cloud-search{display:flex;align-items:center;gap:10px;margin:0 28px 16px;padding:0 14px;border:1px solid rgba(17,19,24,.12);border-radius:12px}.composer-cloud-search>span{color:#a4a4a4;font-size:22px}.composer-cloud-search input{width:100%;height:46px;border:0;outline:0;background:transparent;font:inherit;font-size:12px}
.composer-cloud-browser{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:0;margin:0 28px;border:1px solid rgba(17,19,24,.1);border-radius:14px;overflow:hidden}.composer-cloud-browser>nav{display:grid;align-content:start;gap:5px;padding:12px;border-right:1px solid rgba(17,19,24,.08);background:#fbfbfb}.composer-cloud-browser>nav button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#555;text-align:left;font:inherit;font-size:12px;cursor:pointer}.composer-cloud-browser>nav button.is-active{background:#edf8eb;color:#2d7d35;font-weight:800}
.composer-cloud-files{position:relative;overflow-y:auto;padding:12px}.composer-cloud-file{display:grid;grid-template-columns:38px minmax(0,1fr) 22px;align-items:center;gap:12px;width:100%;min-height:58px;padding:7px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#25272b;text-align:left;cursor:pointer}.composer-cloud-file:hover{background:#f7f8f6}.composer-cloud-file.is-selected{border-color:#8fc878;background:#f1f8ee}.composer-cloud-file>span:nth-child(2){display:grid;min-width:0;gap:3px}.composer-cloud-file strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.composer-cloud-file small{color:#999;font-size:9px}.composer-cloud-file i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#6da64c;color:#fff;font-size:9px;font-style:normal}.composer-cloud-thumb{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#e8edf5;color:#546a8e}.composer-cloud-thumb.video{background:#26292e;color:#fff}.composer-cloud-empty{padding:60px 20px;color:#999;text-align:center;font-size:12px}
.composer-cloud-dialog>footer{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 22px}.composer-cloud-dialog>footer>strong{color:#777;font-size:11px}.composer-cloud-dialog>footer>div{display:flex;gap:10px}.composer-cloud-dialog>footer button{min-width:82px;min-height:40px;padding:0 16px;border-radius:10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.composer-cloud-cancel{border:1px solid rgba(17,19,24,.12);background:#fff;color:#555}.composer-cloud-add{border:0;background:#6da64c;color:#fff}.composer-cloud-add:disabled{background:#d8ecd5;color:#fff;cursor:not-allowed}
@media(max-width:720px){.composer-cloud-browser{grid-template-columns:1fr}.composer-cloud-browser>nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(17,19,24,.08)}.composer-cloud-dialog{width:calc(100% - 16px);height:calc(100% - 16px)}.composer-cloud-overlay{padding:8px}}
.composer-publish-confirm-row>button:disabled{background:#d9dbd7;color:#999;cursor:not-allowed}
.composer-publish-account-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(17,19,24,.07)}.composer-publish-account-row>span{display:grid;gap:2px}.composer-publish-account-row strong{font-size:10px}.composer-publish-account-row small{color:rgba(17,19,24,.42);font-size:8px}.composer-publish-account-row>button{min-width:68px;min-height:29px;padding:0 10px;border:1px solid #77aa58;border-radius:8px;background:#f3f8ef;color:#538536;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-publish-account-row>button.is-selected{border-color:rgba(17,19,24,.12);background:#fff;color:rgba(17,19,24,.55)}
.composer-version-tab .composer-version-main{padding-right:10px}.composer-version-tab .composer-version-main>em{white-space:nowrap}
.composer-publish-account-row>.composer-publish-remove{display:grid;place-items:center;min-width:28px;width:28px;height:28px;min-height:28px;padding:0;border:1px solid rgba(17,19,24,.12);border-radius:50%;background:#f3f3f3;color:#777;font-size:16px;font-weight:500;line-height:1}.composer-publish-account-row>.composer-publish-remove:hover{border-color:#d98d8d;background:#fff1f1;color:#b54747}
.composer-publish-account-row>strong{flex:0 0 auto;font-size:10px}.composer-publish-tags{display:flex;flex:1;flex-wrap:wrap;justify-content:flex-end;gap:6px}.composer-publish-tags-empty{color:rgba(17,19,24,.4);font-size:9px}.composer-publish-tag{display:inline-flex;overflow:hidden;border:1px solid rgba(17,19,24,.13);border-radius:8px;background:#fff}.composer-publish-tag.is-active{border-color:#6da64c;background:#f3f8ef}.composer-publish-tag button{min-height:28px;padding:0 9px;border:0;background:transparent;color:#41444a;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-publish-tag button+button{width:28px;padding:0;border-left:1px solid rgba(17,19,24,.1);color:#8a8d91;font-size:14px}.composer-publish-tag button+button:hover{background:#fff0f0;color:#c44747}.composer-publish-tag.is-active button:first-child{color:#4c7e30}
.composer-publish-add-wrap{position:relative}.composer-publish-tags .composer-publish-add{min-height:30px;padding:0 9px;border:1px dashed rgba(17,19,24,.2);border-radius:8px;background:#fff;color:rgba(17,19,24,.55);font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-publish-tags .composer-publish-add:hover{border-color:#6da64c;color:#4f812f}.composer-publish-platform-menu{position:absolute;z-index:15;right:0;bottom:calc(100% + 7px);display:grid;gap:3px;width:160px;padding:6px;border:1px solid rgba(17,19,24,.1);border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(17,19,24,.16)}.composer-publish-platform-menu[hidden]{display:none}.composer-publish-platform-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:#41444a;font:inherit;font-size:10px;text-align:left;cursor:pointer}.composer-publish-platform-menu button:hover{background:#f4f5f3}.composer-publish-platform-menu button>span{display:grid;place-items:center;width:17px;height:17px;border:1px solid rgba(17,19,24,.16);border-radius:5px;color:#fff;font-size:8px}.composer-publish-platform-menu button.is-selected>span{border-color:#6da64c;background:#6da64c}.composer-publish-platform-menu strong{font-size:10px}
.composer-v2 .composer-ai-chat .single-composer-instruction{height:56px;min-height:56px;padding-top:12px;padding-bottom:12px}.composer-v2 .composer-ai-chat>button{min-height:56px}

/* Composer writing tools */
.composer-editor-tools{display:flex;align-items:center;gap:7px}.composer-editor-tools button,.composer-adapt-platform{min-height:30px;padding:0 11px;border:1px solid rgba(91,145,58,.28);border-radius:8px;background:#f4f9f1;color:#578b38;font:inherit;font-size:9px;font-weight:800;cursor:pointer;transition:.16s ease}.composer-editor-tools button:hover,.composer-adapt-platform:hover{border-color:#70a94e;background:#edf7e8;color:#3f7623}.composer-editor-tools em{margin-left:3px;color:rgba(17,19,24,.44);font-size:9px;font-style:normal}.composer-preview-section>.single-composer-section-head{min-height:32px}.composer-adapt-platform{flex:0 0 auto}
.composer-writing-overlay{position:absolute;z-index:50;inset:0;display:grid;place-items:center;padding:16px;border-radius:22px;background:rgba(17,19,24,.34);backdrop-filter:blur(3px)}.composer-writing-dialog{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(960px,calc(100% - 32px));height:min(720px,calc(100% - 32px));overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(17,19,24,.28)}
.composer-writing-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:25px 30px 18px}.composer-writing-dialog>header h3{margin:0;color:#111318;font-size:22px;letter-spacing:-.035em}.composer-writing-dialog>header button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#f3f3f3;color:#a3a3a3;font:inherit;font-size:22px;line-height:1;cursor:pointer}.composer-writing-dialog>header button:hover{background:#ececec;color:#555}
.composer-writing-body{overflow-y:auto;padding:18px 30px 24px}.composer-writing-body>label{display:grid;gap:12px}.composer-writing-body strong{color:#15171b;font-size:14px}.composer-writing-body em{color:#e34b3f;font-style:normal}.composer-writing-body textarea{box-sizing:border-box;width:100%;height:150px;resize:vertical;padding:16px 18px;border:1px solid rgba(17,19,24,.15);border-radius:14px;outline:0;background:#fff;color:#25272b;font:inherit;font-size:13px;line-height:1.65}.composer-writing-body textarea:focus{border-color:#70b84c;box-shadow:0 0 0 3px rgba(112,184,76,.1)}.composer-writing-body textarea::placeholder{color:#c3c5c8}
.composer-writing-field{display:grid;gap:12px;margin-top:26px}.composer-writing-platforms,.composer-writing-focuses{display:flex;flex-wrap:wrap;gap:10px}.composer-writing-platforms button{display:flex;align-items:center;gap:8px;min-width:126px;min-height:52px;padding:0 16px;border:1px solid transparent;border-radius:12px;background:#f4f4f4;color:#35383d;font:inherit;font-size:12px;cursor:pointer}.composer-writing-platforms button.is-selected{border-color:#62bd51;background:#eff9ec;color:#327227}.composer-writing-platforms .composer-limit-logo{width:22px;height:22px;font-size:10px}
.composer-writing-focuses button{min-height:46px;padding:0 17px;border:1px solid transparent;border-radius:11px;background:#f3f3f3;color:#41444a;font:inherit;font-size:11px;cursor:pointer}.composer-writing-focuses button:hover{background:#ecefeb}.composer-writing-focuses button.is-selected{border-color:#6eb952;background:#eff8ec;color:#3f7928;box-shadow:inset 0 0 0 1px rgba(110,185,82,.08)}
.composer-writing-dialog>footer{display:flex;justify-content:flex-end;padding:18px 30px 26px}.composer-writing-dialog>footer button{min-width:150px;min-height:48px;border:0;border-radius:12px;background:#6da94a;color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.composer-writing-dialog>footer button:disabled{background:#cecfcd;color:#fff;cursor:not-allowed}
@media(max-width:720px){.composer-editor-tools{flex-wrap:wrap;justify-content:flex-end}.composer-writing-overlay{padding:7px}.composer-writing-dialog{width:100%;height:100%;border-radius:16px}.composer-writing-dialog>header{padding:20px 18px 12px}.composer-writing-body{padding:15px 18px}.composer-writing-platforms button{flex:1;min-width:104px}.composer-writing-dialog>footer{padding:14px 18px 20px}.composer-writing-dialog>footer button{width:100%}}

/* Multi-turn writing conversation */
.composer-writing-dialog.is-conversation{grid-template-rows:auto minmax(0,1fr) auto;width:min(820px,calc(100% - 32px));height:min(740px,calc(100% - 32px));background:#f7f8f6}
.composer-writing-dialog.is-conversation>header{padding:20px 24px;border-bottom:1px solid rgba(17,19,24,.08);background:#fff}
.composer-writing-dialog.is-conversation>header>span{display:grid;gap:4px}.composer-writing-dialog.is-conversation>header h3{font-size:20px}.composer-writing-dialog.is-conversation>header p{margin:0;color:#8b8f97;font-size:10px}
.composer-writing-dialog.is-conversation>header>div{display:flex;align-items:center;gap:10px}.composer-writing-dialog.is-conversation>header>div>em{padding:5px 9px;border-radius:999px;background:#eef6ea;color:#558338;font-size:9px;font-style:normal;font-weight:800}
.composer-writing-chat{overflow-y:auto;padding:24px 26px 32px;scroll-behavior:smooth}
.composer-writing-message{display:flex;align-items:flex-start;gap:10px;max-width:86%;margin-bottom:20px}.composer-writing-message.is-user{flex-direction:row-reverse;margin-left:auto}.composer-writing-avatar{display:grid;flex:0 0 auto;place-items:center;width:30px;height:30px;border-radius:9px;background:#111318;color:#fff;font-size:9px;font-weight:900}.composer-writing-message.is-user .composer-writing-avatar{background:#7aac5b}
.composer-writing-message>div{min-width:0}.composer-writing-message p{margin:0;padding:12px 14px;border:1px solid rgba(17,19,24,.08);border-radius:4px 14px 14px;background:#fff;color:#32353a;font-size:11px;line-height:1.75;box-shadow:0 3px 10px rgba(17,19,24,.035)}.composer-writing-message.is-user p{border-color:#6fa34f;border-radius:14px 4px 14px 14px;background:#79ad59;color:#fff}
.composer-writing-options{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.composer-writing-options button{min-height:34px;padding:0 12px;border:1px solid rgba(93,143,61,.28);border-radius:9px;background:#fff;color:#507b36;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-writing-options button:hover{border-color:#6da64c;background:#eff7eb;color:#3f7025;transform:translateY(-1px)}
.composer-writing-chat-input{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) 42px;gap:8px!important;padding:14px 24px 20px!important;border-top:1px solid rgba(17,19,24,.08);background:#fff}.composer-writing-chat-input textarea{box-sizing:border-box;width:100%;min-height:50px;max-height:120px;resize:none;padding:11px 13px;border:1px solid rgba(17,19,24,.13);border-radius:11px;outline:0;background:#fff;color:#272a2e;font:inherit;font-size:11px;line-height:1.5}.composer-writing-chat-input textarea:focus{border-color:#76ad55;box-shadow:0 0 0 3px rgba(118,173,85,.1)}.composer-writing-chat-input>button{min-width:42px!important;width:42px;min-height:42px!important;height:42px;align-self:center;padding:0!important;border-radius:11px!important;font-size:19px!important}.composer-writing-chat-input>small{grid-column:1/-1;color:#a0a3a8;font-size:8px}
.composer-writing-final{margin:6px 40px 0;padding:18px;border:1px solid rgba(105,163,70,.28);border-radius:15px;background:#fff;box-shadow:0 12px 32px rgba(62,102,38,.08)}.composer-writing-final>header{display:flex;align-items:center;justify-content:space-between}.composer-writing-final>header>span{display:grid;gap:3px}.composer-writing-final strong{font-size:12px}.composer-writing-final small{color:#8b8f97;font-size:8px}.composer-writing-final em{padding:4px 8px;border-radius:999px;background:#eaf5e5;color:#4f8432;font-size:8px;font-style:normal;font-weight:900}.composer-writing-final pre{overflow:auto;max-height:290px;margin:16px 0;padding:16px;border-radius:11px;background:#f6f7f5;color:#303338;white-space:pre-wrap;font:inherit;font-size:10px;line-height:1.8}.composer-writing-final>div{display:flex;justify-content:flex-end;gap:8px}.composer-writing-final>div button{min-height:36px;padding:0 13px;border:1px solid rgba(17,19,24,.12);border-radius:9px;background:#fff;color:#666;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-writing-final>div button.is-primary{border-color:#6da64c;background:#6da64c;color:#fff}
.composer-writing-complete-foot{align-items:center!important;justify-content:space-between!important;padding:14px 24px 18px!important;border-top:1px solid rgba(17,19,24,.08);background:#fff}.composer-writing-complete-foot>span{color:#777c84;font-size:9px}.composer-writing-complete-foot>button{min-width:128px!important;min-height:40px!important}
@media(max-width:720px){.composer-writing-dialog.is-conversation{width:100%;height:100%}.composer-writing-chat{padding:18px 14px 24px}.composer-writing-message{max-width:95%}.composer-writing-final{margin:6px 0}.composer-writing-chat-input{padding:12px 14px 16px!important}.composer-writing-complete-foot{align-items:stretch!important;flex-direction:column;gap:10px}.composer-writing-complete-foot>button{width:100%}}

/* Account-driven platform versions and emoji picker */
.composer-target-account-head,.composer-platform-version-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.composer-target-account-head>span{display:grid;gap:3px}.composer-target-account-head strong,.composer-platform-version-head h3{margin:0;color:#111318;font-size:13px}.composer-target-account-head small,.composer-platform-version-head span{color:rgba(17,19,24,.44);font-size:9px}.composer-target-account-actions{display:flex;align-items:center;gap:6px}.composer-target-account-actions>em{padding:4px 8px;border-radius:7px;background:#f1f5ee;color:#568439;font-size:9px;font-style:normal;font-weight:800}.composer-target-account-actions>button{min-height:25px;padding:0 9px;border:1px solid rgba(17,19,24,.14);border-radius:7px;background:#fff;color:#666;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-target-account-actions>button:hover,.composer-target-account-actions>button.is-selected{border-color:#76ad55;background:#eff7eb;color:#4c7e30}
.composer-v2 .composer-account-options-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px;overflow:visible;margin-top:10px;padding:0 0 15px;border-bottom:1px solid rgba(17,19,24,.08)}.composer-v2 .composer-account-options-inline .composer-account-option{position:relative;width:100%;min-width:0;min-height:50px;padding:7px 28px 7px 8px;border-radius:11px}.composer-account-options-inline .composer-account-option>b{position:absolute;right:9px;color:rgba(17,19,24,.38);font-size:9px}.composer-account-options-inline .composer-account-option.is-selected>b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#eff1ed;color:#777;font-size:13px}.composer-account-options-inline .composer-account-option.is-selected>b:hover{background:#fff0f0;color:#b54848}.composer-platform-version-head{margin:15px 0 9px}
.composer-version-tabs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.composer-version-empty{display:grid;place-items:center;min-height:150px;padding:24px;border:1px dashed rgba(17,19,24,.16);border-radius:13px;background:#fafbf9;text-align:center}.composer-version-empty strong{font-size:13px}.composer-version-empty small{max-width:320px;margin-top:5px;color:rgba(17,19,24,.43);font-size:10px;line-height:1.55}
.composer-textarea-wrap{position:relative}.composer-textarea-wrap>.single-composer-textarea{box-sizing:border-box;width:100%;padding-right:48px;padding-bottom:44px}.composer-textarea-wrap>.composer-emoji-trigger{position:absolute;z-index:2;right:12px;bottom:12px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:#666;font:inherit;font-size:18px;cursor:pointer}.composer-textarea-wrap>.composer-emoji-trigger:hover{background:#edf2e9;color:#47762d}.composer-emoji-picker{position:absolute;z-index:18;right:10px;bottom:50px;display:grid;grid-template-columns:repeat(8,34px);gap:4px;padding:8px;border:1px solid rgba(17,19,24,.11);border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(17,19,24,.16)}.composer-emoji-picker[hidden]{display:none}.composer-emoji-picker button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;font-size:18px;cursor:pointer}.composer-emoji-picker button:hover{background:#f1f5ee}
.composer-limit-logo.tiktok,.composer-account-avatar.tiktok{background:#111}.composer-limit-logo.linkedin,.composer-account-avatar.linkedin{background:#0a66c2}.composer-limit-logo.youtube,.composer-account-avatar.youtube{background:#f03}.composer-limit-logo.threads,.composer-account-avatar.threads{background:#111}.composer-version-tab.is-active .composer-limit-logo.tiktok,.composer-version-tab.is-active .composer-limit-logo.linkedin,.composer-version-tab.is-active .composer-limit-logo.youtube,.composer-version-tab.is-active .composer-limit-logo.threads{background:#fff;color:#111318}
.composer-limit-logo.all{width:28px;background:#6da64c;font-size:8px;text-transform:uppercase}.composer-version-tab-all{border-style:dashed}.composer-version-tab-all.is-active{border-style:solid}.composer-custom-edit-prompt{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-5px 0 14px;padding:11px 12px;border:1px solid rgba(109,166,76,.25);border-radius:11px;background:#f3f8ef}.composer-custom-edit-prompt>span{display:grid;gap:3px}.composer-custom-edit-prompt strong{font-size:10px}.composer-custom-edit-prompt small{color:rgba(17,19,24,.5);font-size:9px}.composer-custom-edit-prompt>div{display:flex;flex:0 0 auto;gap:6px}.composer-custom-edit-prompt button{min-height:30px;padding:0 12px;border:1px solid rgba(17,19,24,.13);border-radius:8px;background:#fff;color:#555;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-custom-edit-prompt button.is-primary{border-color:#6da64c;background:#6da64c;color:#fff}
@media(max-width:620px){.composer-custom-edit-prompt{align-items:flex-start;flex-direction:column}.composer-custom-edit-prompt>div{width:100%}.composer-custom-edit-prompt button{flex:1}}
.composer-textarea-wrap.has-custom-edit-prompt>.single-composer-textarea{padding-top:68px}.composer-custom-edit-inline{position:absolute;z-index:4;top:10px;right:10px;left:10px;display:flex;align-items:center;gap:7px;min-height:42px;padding:6px 7px 6px 12px;border:1px solid rgba(109,166,76,.25);border-radius:10px;background:rgba(247,250,245,.96);box-shadow:0 5px 14px rgba(17,19,24,.07);backdrop-filter:blur(6px)}.composer-custom-edit-inline>span{flex:1;min-width:0;color:rgba(17,19,24,.57);font-size:9px;line-height:1.4}.composer-custom-edit-inline>span strong{color:#3f7126;font-size:10px}.composer-custom-edit-inline>button{flex:0 0 auto;min-height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#6b6e69;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-custom-edit-inline>button:hover{background:#e9eee6}.composer-custom-edit-inline>button.is-primary{background:#111318;color:#fff}.composer-custom-edit-inline>button.is-primary:hover{background:#2b2e33}
.composer-textarea-wrap.has-custom-edit-prompt>.single-composer-textarea[readonly]{background:#f7f8f6;color:rgba(17,19,24,.52);cursor:not-allowed}.composer-textarea-wrap>.composer-emoji-trigger:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
@media(max-width:620px){.composer-textarea-wrap.has-custom-edit-prompt>.single-composer-textarea{padding-top:96px}.composer-custom-edit-inline{align-items:flex-start;flex-wrap:wrap}.composer-custom-edit-inline>span{flex-basis:100%}.composer-custom-edit-inline>button{flex:1}}

/* X Thread builder */
.composer-thread-toggle{border:1px solid rgba(17,19,24,.16);border-radius:8px;background:#fff;color:#333;font:inherit;font-size:9px;font-weight:850;cursor:pointer}.composer-thread-toggle.is-active{border-color:#111318;background:#111318;color:#fff}.composer-textarea-wrap>.composer-thread-toggle{position:absolute;z-index:2;right:48px;bottom:12px;min-width:52px;height:30px;padding:0 9px}.composer-thread-builder{overflow:hidden;border:1px solid rgba(17,19,24,.11);border-radius:13px;background:#fbfbfa}.composer-thread-intro{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid rgba(17,19,24,.08);background:#f5f6f4}.composer-thread-intro>span{display:grid;gap:2px}.composer-thread-intro strong{font-size:11px}.composer-thread-intro small{color:rgba(17,19,24,.43);font-size:8px}.composer-thread-intro>div{display:flex;align-items:center;gap:7px}.composer-thread-intro>div>.composer-thread-toggle{min-height:26px;padding:0 8px}.composer-thread-intro>div>em{padding:4px 7px;border-radius:7px;background:#fff;color:#555;font-size:8px;font-style:normal;font-weight:800}.composer-thread-list{padding:14px 14px 2px}.composer-thread-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px}.composer-thread-rail{display:flex;align-items:center;flex-direction:column}.composer-thread-avatar{display:grid;flex:0 0 auto;place-items:center;width:28px;height:28px;border-radius:50%;background:#111318;color:#fff;font-size:9px;font-weight:900}.composer-thread-rail>i{width:2px;min-height:110px;flex:1;background:#d9dcd7}.composer-thread-content{min-width:0;padding-bottom:14px}.composer-thread-content>header{display:flex;align-items:center;justify-content:space-between;margin:3px 0 6px}.composer-thread-content>header strong{font-size:9px}.composer-thread-content>header span{color:rgba(17,19,24,.43);font-size:8px}.composer-thread-content textarea{box-sizing:border-box;width:100%;min-height:94px;resize:vertical;padding:11px 12px;border:1px solid rgba(17,19,24,.12);border-radius:10px;outline:0;background:#fff;color:#222;font:inherit;font-size:11px;line-height:1.55}.composer-thread-content textarea:focus{border-color:#79b35a;box-shadow:0 0 0 3px rgba(121,179,90,.08)}.composer-thread-content>footer{display:flex;justify-content:flex-end;gap:5px;margin-top:6px}.composer-thread-content>footer button{min-height:27px;padding:0 8px;border:0;border-radius:7px;background:#eef2eb;color:#52743f;font:inherit;font-size:8px;font-weight:800;cursor:pointer}.composer-thread-content>footer button.is-remove{background:transparent;color:#a35c5c}.composer-thread-media-preview{display:grid;place-items:center;min-height:70px;margin-top:7px;border-radius:9px;background:linear-gradient(145deg,#1c2420,#789865);color:#fff}.composer-thread-media-preview span{font-size:10px;font-weight:900;letter-spacing:.12em}.composer-thread-media-preview small{margin-top:3px;font-size:7px;opacity:.7}.composer-thread-add{width:calc(100% - 28px);min-height:36px;margin:0 14px 14px;border:1px dashed rgba(17,19,24,.18);border-radius:9px;background:#fff;color:#527b3a;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.composer-thread-add:hover{border-color:#79ad5a;background:#f3f8ef}.composer-thread-preview-item{position:relative;padding-bottom:13px}.composer-thread-preview-item:not(:last-child)::before{content:"";position:absolute;top:42px;bottom:2px;left:17px;width:2px;background:#d5d8d3}.composer-thread-preview-item:not(:first-child){padding-top:8px}.composer-thread-preview-item>p{margin-left:42px}.composer-thread-preview-item>.composer-preview-media{margin-left:42px}.composer-thread-preview-item>footer{margin-left:42px}
.composer-textarea-wrap:has(>.composer-thread-toggle)>.single-composer-textarea{padding-right:108px}
@media(max-width:620px){.composer-thread-list{padding-right:9px;padding-left:9px}.composer-thread-item{grid-template-columns:28px minmax(0,1fr);gap:6px}}
@media(max-width:620px){.composer-v2 .composer-account-options-inline{grid-template-columns:1fr}.composer-v2 .composer-account-options-inline .composer-account-option{width:100%}.composer-emoji-picker{left:0;right:auto;grid-template-columns:repeat(4,34px)}}

/* Batch composer: user-controlled accounts, quantity, editing and scheduling. */
@media (min-width: 1081px) {
  .work-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.work-shortcut-batch {
  background:
    radial-gradient(circle at 88% 16%, rgba(109, 166, 76, 0.22), transparent 30%),
    rgba(255, 255, 255, 0.9);
}

.work-batch-preview {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.work-batch-preview i {
  width: 25px;
  border: 1px solid rgba(81, 128, 52, 0.22);
  border-radius: 7px 7px 4px 4px;
  background: rgba(231, 245, 223, 0.86);
}

.work-batch-preview i:nth-child(1) { height: 36px; }
.work-batch-preview i:nth-child(2) { height: 48px; }
.work-batch-preview i:nth-child(3) { height: 42px; }

.work-batch-preview b {
  margin-left: 3px;
  padding: 5px 7px;
  border-radius: 7px;
  background: #111318;
  color: #fff;
  font-size: 9px;
}

.batch-chat-page {
  position: fixed;
  z-index: 220;
  inset: 0 0 0 var(--v2-sidebar-width);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  color: #111318;
}

.batch-chat-page-head {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 28px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.batch-chat-page-head > button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 10px;
  background: #fff;
  color: rgba(17, 19, 24, 0.72);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.batch-chat-page-head > div {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.batch-chat-page-head > div > span {
  color: #6da64c;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.batch-chat-page-head > div > strong {
  font-size: 17px;
}

.batch-chat-page-head > div > small {
  color: rgba(17, 19, 24, 0.43);
  font-size: 9px;
}

.batch-mode-head-spacer {
  width: 112px;
}

.batch-mode-page {
  display: block;
  overflow-y: auto;
}

.batch-mode-scroll {
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 52px 64px 88px;
}

.batch-mode-panel {
  box-sizing: border-box;
  width: min(1180px, 100%);
  display: grid;
  gap: 36px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.batch-mode-back,
.batch-template-detail-back {
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #747b87;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.batch-mode-intro {
  display: grid;
  justify-items: start;
  gap: 7px;
  margin-top: -15px;
  text-align: left;
}

.batch-mode-intro > span {
  color: #6da64c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.batch-mode-intro h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 520;
  letter-spacing: -0.025em;
}

.batch-mode-intro p {
  margin: 0;
  color: rgba(17, 19, 24, 0.46);
  font-size: 13px;
}

.batch-mode-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.batch-mode-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.batch-mode-section-head > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.batch-mode-section-head b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111318;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.batch-mode-section-head strong {
  font-size: 17px;
}

.batch-mode-section-head small {
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
}

.batch-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.batch-mode-options button {
  min-height: 150px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
  padding: 17px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 16px;
  background: #fff;
  color: #111318;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: 160ms ease;
}

.batch-mode-options button:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 166, 76, 0.55);
  background: #f3f8f0;
  box-shadow: 0 14px 34px rgba(71, 112, 48, 0.1);
}

.batch-mode-options button:disabled {
  transform: none;
  opacity: 0.46;
  border-color: rgba(17, 19, 24, 0.08);
  background: #f2f3f1;
  box-shadow: none;
  cursor: not-allowed;
}

.batch-mode-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #6da64c;
  color: #fff;
  font-size: 17px;
}

.batch-mode-options button:nth-child(2) .batch-mode-icon {
  background: #111318;
}

.batch-mode-options strong {
  margin-top: 2px;
  font-size: 16px;
}

.batch-mode-options small {
  color: rgba(17, 19, 24, 0.5);
  font-size: 11px;
  line-height: 1.65;
}

.batch-mode-options em {
  margin-top: auto;
  color: #568b39;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.batch-mode-compose-box {
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.11);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(17, 19, 24, 0.035);
}

.batch-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
  background: #f7f8f6;
}

.batch-mode-tabs button {
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(17, 19, 24, 0.54);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.batch-mode-tabs button > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8ebe6;
  color: #111318;
  font-size: 13px;
}

.batch-mode-tabs button b {
  color: #111318;
  font-size: 13px;
}

.batch-mode-tabs button small {
  font-size: 9px;
}

.batch-mode-tabs button.is-active {
  border-color: rgba(38, 149, 102, 0.2);
  background: #fff;
  color: #26855d;
  box-shadow: 0 5px 14px rgba(17, 19, 24, 0.05);
}

.batch-mode-tabs button.is-active > span {
  background: #e7f5ee;
  color: #22865c;
}

.batch-mode-prompt {
  display: grid;
  gap: 8px;
  padding: 20px 22px 12px;
}

.batch-mode-prompt > span {
  color: rgba(17, 19, 24, 0.64);
  font-size: 10px;
  font-weight: 800;
}

.batch-mode-prompt textarea {
  width: 100%;
  min-height: 112px;
  box-sizing: border-box;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111318;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
}

.batch-mode-prompt textarea::placeholder {
  color: rgba(17, 19, 24, 0.3);
}

.batch-mode-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 14px 22px;
}

.batch-mode-compose-actions p {
  margin: 0;
  color: rgba(17, 19, 24, 0.4);
  font-size: 9px;
}

.batch-mode-compose-actions button {
  min-width: 116px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #269566;
  border-radius: 12px;
  background: #269566;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.batch-mode-compose-actions button:disabled {
  border-color: #cfd4ce;
  background: #cfd4ce;
  cursor: not-allowed;
}

.batch-ready-template-section {
  display: grid;
  gap: 14px;
  background: #fff;
}

.batch-ready-template-library {
  margin-top: 8px;
  padding-top: 34px;
  border-top: 1px solid rgba(17, 19, 24, 0.09);
}

.batch-ready-template-library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 4px;
}

.batch-ready-template-library-head > div {
  display: grid;
  gap: 5px;
}

.batch-ready-template-library-head span {
  color: #269566;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.batch-ready-template-library-head h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 580;
}

.batch-ready-template-library-head p {
  margin: 0;
  color: rgba(17, 19, 24, 0.46);
  font-size: 10px;
}

.batch-ready-template-library-head > small {
  color: rgba(17, 19, 24, 0.36);
  font-size: 9px;
}

.batch-ready-template-section .batch-mode-section-head {
  margin-bottom: 0;
}

.batch-ready-template-toolbar {
  display: grid;
  gap: 8px;
}

.batch-ready-template-toolbar > div {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.batch-ready-template-toolbar > div::-webkit-scrollbar {
  display: none;
}

.batch-ready-template-toolbar button {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 14px;
  background: #f6f7f5;
  color: rgba(17, 19, 24, 0.58);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.batch-ready-template-toolbar button:hover,
.batch-ready-template-toolbar button.is-active {
  border-color: rgba(109, 166, 76, 0.32);
  background: #eaf3e5;
  color: #42652f;
}

.batch-ready-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.batch-ready-template-card {
  min-width: 0;
  min-height: 232px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 16px;
  background: #fbfcfa;
  transition: 160ms ease;
}

.batch-ready-template-card:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 166, 76, 0.38);
  box-shadow: 0 12px 26px rgba(71, 112, 48, 0.08);
}

.batch-ready-template-card > header,
.batch-ready-template-card > footer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.batch-ready-template-card > header > span:not(.batch-ready-platform) {
  overflow: hidden;
  color: rgba(17, 19, 24, 0.38);
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-ready-template-card > header > button {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #779565;
  font-size: 17px;
  cursor: pointer;
}

.batch-ready-platform {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: #111318;
  color: #fff;
  font-size: 8px;
  font-weight: 850;
}

.batch-ready-platform.instagram {
  background: linear-gradient(135deg, #7b3fd4, #dd476e 55%, #f2a044);
}

.batch-ready-platform.facebook {
  background: #1877f2;
}

.batch-ready-platform.tiktok {
  background: #17181b;
  box-shadow: inset 2px 0 #25f4ee, inset -2px 0 #fe2c55;
}

.batch-ready-platform.linkedin {
  background: #0a66c2;
}

.batch-ready-template-card > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.batch-ready-template-card > div > strong {
  color: #5b873f;
  font-size: 9px;
}

.batch-ready-template-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.batch-ready-template-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(17, 19, 24, 0.52);
  font-size: 9px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.batch-ready-template-card > footer {
  justify-content: flex-end;
  padding-top: 9px;
  border-top: 1px solid rgba(17, 19, 24, 0.06);
}

.batch-ready-template-card > footer small {
  color: rgba(17, 19, 24, 0.35);
  font-size: 8px;
}

.batch-ready-template-card > footer button {
  border: 0;
  background: transparent;
  color: #568b39;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.batch-ready-template-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #f0f6ec;
  color: #42652f;
}

.batch-ready-template-note > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #6da64c;
  color: #fff;
}

.batch-ready-template-note p {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

.batch-ready-template-note strong {
  font-size: 10px;
}

.batch-ready-template-empty {
  grid-column: 1 / -1;
  padding: 36px;
  border: 1px dashed rgba(17, 19, 24, 0.12);
  border-radius: 16px;
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
  text-align: center;
}

.batch-template-preview-layer {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 17, 20, 0.52);
  backdrop-filter: blur(8px);
}

.batch-template-preview {
  box-sizing: border-box;
  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(10, 14, 8, 0.26);
}

.batch-template-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
}

.batch-template-preview > header > div {
  display: grid;
  gap: 4px;
}

.batch-template-preview > header span {
  color: #6da64c;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.batch-template-preview > header h2 {
  margin: 0;
  font-size: 20px;
}

.batch-template-preview > header p,
.batch-template-preview > footer p {
  margin: 0;
  color: rgba(17, 19, 24, 0.44);
  font-size: 9px;
}

.batch-template-preview > header > button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 10px;
  background: #f7f8f6;
  color: rgba(17, 19, 24, 0.65);
  font-size: 18px;
  cursor: pointer;
}

.batch-template-preview-platforms {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 24px 14px;
  border-bottom: 1px solid rgba(17, 19, 24, 0.07);
}

.batch-template-preview-platforms button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 15px;
  background: #f6f7f5;
  color: rgba(17, 19, 24, 0.58);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.batch-template-preview-platforms button.is-target {
  border-color: rgba(109, 166, 76, 0.26);
}

.batch-template-preview-platforms button.is-active {
  background: #111318;
  color: #fff;
}

.batch-template-preview-body {
  overflow-y: auto;
  padding: 22px 24px 26px;
}

.batch-template-preview-body h2,
.batch-template-preview-body h3 {
  margin: 15px 0 13px;
  font-size: 21px;
  line-height: 1.35;
}

.batch-template-preview-body > div {
  color: rgba(17, 19, 24, 0.76);
  font-size: 12px;
  line-height: 1.8;
}

.batch-template-preview-body > strong {
  display: block;
  margin-top: 18px;
  color: #568b39;
  font-size: 10px;
  line-height: 1.6;
}

.batch-template-preview-body aside {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 13px;
  background: #f3f6f1;
}

.batch-template-preview-body aside b {
  color: #42652f;
  font-size: 9px;
}

.batch-template-preview-body aside p {
  margin: 5px 0 0;
  color: rgba(17, 19, 24, 0.54);
  font-size: 9px;
  line-height: 1.6;
}

.batch-template-preview > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 24px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
  background: #fbfcfa;
}

.batch-template-preview > footer > div {
  display: flex;
  gap: 8px;
}

.batch-template-preview > footer button {
  min-height: 40px;
  padding: 0 17px;
  border-radius: 12px;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.batch-template-preview > footer button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.batch-template-rewrite {
  border: 1px solid rgba(17, 19, 24, 0.12);
  background: #fff;
  color: #111318;
}

.batch-template-use {
  border: 1px solid #6da64c;
  background: #6da64c;
  color: #fff;
  box-shadow: 0 8px 18px rgba(74, 120, 49, 0.18);
}

.batch-template-detail-page {
  display: block;
  overflow-y: auto;
}

.batch-template-detail-scroll {
  padding: 52px 64px 88px;
}

.batch-template-detail-shell {
  box-sizing: border-box;
  width: min(980px, 100%);
  display: grid;
  gap: 24px;
  margin: 0 auto;
}

.batch-template-detail-shell > header {
  display: grid;
  gap: 7px;
  margin-top: -8px;
}

.batch-template-detail-shell > header > span {
  color: #269566;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.batch-template-detail-shell > header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 540;
  letter-spacing: -0.025em;
}

.batch-template-detail-shell > header p,
.batch-template-detail-actions > p {
  margin: 0;
  color: rgba(17, 19, 24, 0.48);
  font-size: 11px;
  line-height: 1.6;
}

.batch-template-detail-shell .batch-template-preview-platforms {
  padding: 0 0 16px;
}

.batch-template-detail-shell .batch-template-preview-body {
  overflow: visible;
  padding: 28px 30px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 18px;
  background: #fff;
}

.batch-template-detail-shell .batch-template-preview-body > div {
  max-width: 760px;
  font-size: 13px;
}

.batch-template-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #f1f7f3;
}

.batch-template-detail-actions > div {
  display: flex;
  gap: 9px;
  flex: 0 0 auto;
}

.batch-template-detail-actions button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.batch-template-detail-actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.batch-mode-foot {
  display: grid;
  place-items: center;
  min-height: 66px;
  border-top: 1px solid rgba(17, 19, 24, 0.08);
  background: #fff;
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
}

.batch-chat-scroll {
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.batch-chat-thread {
  box-sizing: border-box;
  width: min(1120px, calc(100% - 40px));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0 auto;
  padding: 38px 0 48px;
}

.batch-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.batch-chat-message.is-user {
  flex-direction: row-reverse;
}

.batch-chat-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 10px;
  background: #fff;
  color: #d86c43;
  font-size: 12px;
  font-weight: 900;
}

.batch-chat-message.is-user .batch-chat-avatar {
  background: #6fa46f;
  color: #fff;
}

.batch-chat-message > div {
  max-width: min(820px, calc(100% - 70px));
  display: grid;
  gap: 7px;
}

.batch-chat-message.is-user > div {
  justify-items: end;
}

.batch-chat-message strong {
  font-size: 10px;
}

.batch-chat-message p {
  margin: 0;
  padding: 15px 17px;
  border: 1px solid rgba(17, 19, 24, 0.07);
  border-radius: 5px 18px 18px 18px;
  background: #fff;
  color: #111318;
  font-size: 13px;
  line-height: 1.7;
  box-shadow: 0 8px 24px rgba(17, 19, 24, 0.025);
}

.batch-chat-message.is-user p {
  border: 0;
  border-radius: 17px 5px 17px 17px;
  background: #6fa46f;
  color: #fff;
}

.batch-chat-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -14px 0 0 45px;
}

.batch-chat-choices button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 18px;
  background: #eaebe8;
  color: rgba(17, 19, 24, 0.68);
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  cursor: pointer;
}

.batch-chat-choices button:hover {
  background: #dfe9da;
  color: #42652f;
}

.batch-chat-result-block {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.batch-chat-result-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.batch-chat-result-label span {
  font-size: 13px;
  font-weight: 850;
}

.batch-chat-result-label small {
  color: rgba(17, 19, 24, 0.43);
  font-size: 9px;
}

.batch-chat-inputbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid rgba(17, 19, 24, 0.08);
  background: rgba(255, 255, 255, 0.96);
}

.batch-chat-count {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 13px;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 15px;
  background: #f7f9f5;
}

.batch-chat-count > span {
  display: grid;
  gap: 2px;
  white-space: nowrap;
}

.batch-chat-count strong {
  font-size: 10px;
}

.batch-chat-count small {
  color: rgba(17, 19, 24, 0.4);
  font-size: 8px;
}

.batch-chat-count .batch-count-control {
  grid-template-columns: 28px 38px 28px;
}

.batch-chat-count .batch-count-control button,
.batch-chat-count .batch-count-control input {
  height: 30px;
  font-size: 10px;
}

.batch-chat-input {
  box-sizing: border-box;
  width: min(820px, 100%);
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 15px;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 19, 24, 0.05);
}

.batch-chat-input textarea {
  width: 100%;
  min-height: 24px;
  resize: none;
  border: 0;
  outline: 0;
  color: #111318;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
}

.batch-chat-input button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: #111318;
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.batch-chat-finish {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: #6da64c;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.batch-composer-modal {
  width: min(1180px, 100%);
  height: min(860px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f8f9f7;
}

.batch-composer-head {
  padding: 20px 24px 16px;
  background: #fff;
}

.batch-composer-head > div:first-child {
  display: grid;
  gap: 4px;
}

.batch-composer-head h2 {
  font-size: 24px;
}

.batch-composer-head p {
  margin: 0;
  color: rgba(17, 19, 24, 0.5);
  font-size: 11px;
}

.batch-composer-body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
}

.batch-composer-setup {
  display: grid;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.batch-composer-section {
  padding: 18px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(17, 19, 24, 0.035);
}

.batch-composer-section-head,
.batch-results-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.batch-composer-section-head > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.batch-composer-section-head b {
  color: #6da64c;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.batch-composer-section-head strong {
  font-size: 14px;
}

.batch-composer-section-head small {
  color: rgba(17, 19, 24, 0.42);
  font-size: 10px;
}

.batch-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.batch-platform-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 12px;
  background: #fff;
  color: #111318;
  text-align: left;
  font: inherit;
}

button.batch-platform-card {
  cursor: pointer;
}

.batch-platform-card.is-connected:hover {
  border-color: rgba(109, 166, 76, 0.45);
  background: #fafdf8;
}

.batch-platform-card.is-selected {
  border-color: #77ae58;
  background: #f1f8ed;
  box-shadow: inset 0 0 0 1px rgba(109, 166, 76, 0.08);
}

.batch-platform-card > span:nth-last-child(2),
.batch-platform-card > span:last-child {
  min-width: 0;
}

.batch-platform-card > span:nth-last-child(2) strong,
.batch-platform-card > span:last-child strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-platform-card > span:nth-last-child(2) small,
.batch-platform-card > span:last-child small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: rgba(17, 19, 24, 0.43);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-platform-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #111318;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.batch-platform-logo.instagram { background: linear-gradient(135deg, #ffb13b, #dc238d 58%, #6b2fff); }
.batch-platform-logo.facebook { background: #287bea; }
.batch-platform-logo.linkedin { background: #0a66c2; }
.batch-platform-logo.youtube { background: #f00; }
.batch-platform-logo.tiktok { background: #111316; box-shadow: inset 2px 0 #26f4ee, inset -2px 0 #fe2c55; }
.batch-platform-logo.threads { background: #111316; }

.batch-platform-check {
  position: absolute;
  align-self: start;
  justify-self: end;
  width: 18px;
  height: 18px;
  margin: -4px -5px 0 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.07);
  color: rgba(17, 19, 24, 0.44);
  font-size: 9px;
}

.batch-platform-card.is-connected {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr);
}

.batch-platform-card.is-selected .batch-platform-check {
  background: #6da64c;
  color: #fff;
}

.batch-platform-card.is-unbound {
  opacity: 0.68;
  background: #f7f7f6;
}

.batch-platform-card.is-unbound > button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 8px;
  background: #fff;
  color: rgba(17, 19, 24, 0.68);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.batch-account-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #436c2d;
  background: #f0f7ec;
  font-size: 10px;
  line-height: 1.5;
}

.batch-account-notice > b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #6da64c;
  color: #fff;
}

.batch-account-notice.is-warning,
.batch-account-notice.is-blocked {
  color: #7f501d;
  background: #fff5e6;
}

.batch-account-notice.is-warning > b,
.batch-account-notice.is-blocked > b {
  background: #e59a3c;
}

.batch-account-notice.is-blocked > span {
  display: grid;
  gap: 2px;
}

.batch-account-notice.is-blocked > button {
  margin-left: auto;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: #111318;
  color: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.batch-composer-generate-settings {
  display: grid;
  gap: 13px;
}

.batch-composer-generate-settings .batch-composer-section-head {
  margin-bottom: 0;
}

.batch-post-mode-picker {
  display: inline-flex;
  width: fit-content;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 12px;
  background: #f5f7f3;
}

.batch-post-mode-picker button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(17, 19, 24, 0.62);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.batch-post-mode-picker button span {
  color: #6da64c;
  font-size: 13px;
}

.batch-post-mode-picker button.is-selected {
  background: #6fb653;
  color: #fff;
  box-shadow: 0 4px 12px rgba(91, 153, 58, 0.2);
}

.batch-post-mode-picker button.is-selected span {
  color: #fff;
}

.batch-post-mode-picker button:not(.is-selected):hover {
  background: rgba(109, 166, 76, 0.09);
  color: #3f6d2a;
}

.batch-post-mode-help {
  min-height: 18px;
  margin: -4px 0 0;
  color: rgba(17, 19, 24, 0.48);
  font-size: 10px;
  line-height: 1.55;
}

.batch-composer-prompt {
  display: grid;
  gap: 7px;
}

.batch-composer-prompt > span,
.batch-edit-copy > span:first-child,
.batch-edit-schedule > span {
  color: rgba(17, 19, 24, 0.68);
  font-size: 10px;
  font-weight: 800;
}

.batch-composer-prompt textarea,
.batch-edit-copy textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 11px;
  outline: 0;
  background: #fff;
  color: #111318;
  font: inherit;
  line-height: 1.6;
}

.batch-composer-prompt textarea {
  min-height: 88px;
  padding: 12px 13px;
  font-size: 12px;
}

.batch-composer-prompt textarea:focus,
.batch-edit-copy textarea:focus,
.batch-edit-card select:focus,
.batch-edit-schedule input:focus {
  border-color: #72ad50;
  box-shadow: 0 0 0 3px rgba(109, 166, 76, 0.1);
}

.batch-composer-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 11px;
  background: #fafbf9;
}

.batch-composer-count-row > span {
  display: grid;
  gap: 3px;
}

.batch-composer-count-row strong {
  font-size: 11px;
}

.batch-composer-count-row small {
  color: rgba(17, 19, 24, 0.43);
  font-size: 9px;
}

.batch-count-control {
  display: grid;
  grid-template-columns: 34px 48px 34px;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: 9px;
  background: #fff;
}

.batch-count-control button,
.batch-count-control input {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  border: 0;
  background: transparent;
  color: #111318;
  text-align: center;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.batch-count-control button {
  cursor: pointer;
}

.batch-count-control button:hover {
  background: #eef5ea;
}

.batch-count-control input {
  border-right: 1px solid rgba(17, 19, 24, 0.08);
  border-left: 1px solid rgba(17, 19, 24, 0.08);
  appearance: textfield;
}

.batch-count-control input::-webkit-inner-spin-button {
  appearance: none;
}

.batch-imported-times,
.batch-manual-schedule-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #f2f6ef;
}

.batch-imported-times input {
  margin-top: 3px;
  accent-color: #6da64c;
}

.batch-imported-times span,
.batch-manual-schedule-note {
  color: rgba(17, 19, 24, 0.68);
  font-size: 10px;
  line-height: 1.5;
}

.batch-imported-times span {
  display: grid;
  gap: 2px;
}

.batch-imported-times small {
  color: rgba(17, 19, 24, 0.45);
  font-size: 9px;
}

.batch-manual-schedule-note {
  display: grid;
  gap: 2px;
}

.batch-composer-results {
  max-width: 1100px;
  margin: 0 auto;
}

.batch-results-summary {
  margin-bottom: 12px;
  padding: 0 2px;
}

.batch-results-summary > span {
  display: grid;
  gap: 3px;
}

.batch-results-summary strong {
  font-size: 15px;
}

.batch-results-summary small {
  color: rgba(17, 19, 24, 0.46);
  font-size: 10px;
}

.batch-results-summary > button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(109, 166, 76, 0.34);
  border-radius: 9px;
  background: #eff7eb;
  color: #4c7a31;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.batch-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.batch-result-card {
  min-width: 0;
  min-height: 280px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 14px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 19, 24, 0.035);
}

.batch-result-card > header {
  display: grid;
  grid-template-columns: 28px 84px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
}

.batch-result-card > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.batch-result-card > header strong {
  font-size: 10px;
}

.batch-result-card > header small {
  overflow: hidden;
  color: rgba(17, 19, 24, 0.44);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-result-target-avatars {
  display: flex !important;
  align-items: center;
  padding-left: 1px;
}

.batch-result-target-avatars .batch-platform-logo {
  width: 28px;
  height: 28px;
  margin-left: -17px;
  border: 2px solid #fff;
  border-radius: 9px;
  box-shadow: 0 2px 7px rgba(17, 19, 24, 0.13);
  font-size: 8px;
}

.batch-result-target-avatars .batch-platform-logo:first-child {
  margin-left: 0;
}

.batch-target-avatar-more {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #edf0eb;
  color: rgba(17, 19, 24, 0.64);
  font-size: 8px;
  font-weight: 900;
}

.batch-result-card > header > button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(17, 19, 24, 0.05);
  color: rgba(17, 19, 24, 0.42);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.batch-result-card > p {
  max-height: 190px;
  overflow: hidden;
  margin: 14px 0;
  color: rgba(17, 19, 24, 0.76);
  font-size: 11px;
  line-height: 1.65;
}

.batch-result-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
}

.batch-result-card > footer span {
  min-width: 0;
  display: grid;
  gap: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-result-card > footer b {
  color: rgba(17, 19, 24, 0.72);
  font-size: 9px;
}

.batch-result-card > footer small {
  overflow: hidden;
  color: rgba(17, 19, 24, 0.43);
  font-size: 8px;
  text-overflow: ellipsis;
}

.batch-result-card > footer button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: #6da64c;
  color: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.batch-chat-page .single-composer-modal .social3-copy-button {
  display: none;
}

.batch-edit-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 19, 24, 0.09);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 19, 24, 0.035);
}

.batch-edit-card > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: end;
  gap: 9px;
  margin-bottom: 10px;
}

.batch-edit-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #111318;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.batch-edit-card > header label {
  display: grid;
  gap: 4px;
}

.batch-edit-card > header label > span {
  color: rgba(17, 19, 24, 0.46);
  font-size: 8px;
  font-weight: 800;
}

.batch-edit-card select,
.batch-edit-schedule input {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(17, 19, 24, 0.11);
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #111318;
  font: inherit;
  font-size: 9px;
}

.batch-edit-card > header > button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(17, 19, 24, 0.05);
  color: rgba(17, 19, 24, 0.42);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.batch-edit-card > header > button:hover {
  background: #fff0f0;
  color: #b64b4b;
}

.batch-edit-copy {
  display: grid;
  gap: 6px;
}

.batch-edit-copy > span:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-edit-copy em {
  color: rgba(17, 19, 24, 0.42);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.batch-edit-copy textarea {
  min-height: 132px;
  padding: 11px 12px;
  font-size: 11px;
}

.batch-edit-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.batch-edit-publish > span,
.batch-edit-schedule > span {
  color: rgba(17, 19, 24, 0.48);
  font-size: 9px;
  font-weight: 800;
}

.batch-edit-publish > div {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(17, 19, 24, 0.05);
}

.batch-edit-publish button {
  min-height: 27px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(17, 19, 24, 0.5);
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.batch-edit-publish button.is-selected {
  background: #fff;
  color: #49762f;
  box-shadow: 0 2px 6px rgba(17, 19, 24, 0.08);
}

.batch-edit-schedule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.batch-edit-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
}

.batch-edit-card > footer span {
  color: rgba(17, 19, 24, 0.36);
  font-size: 8px;
  line-height: 1.4;
}

.batch-edit-card > footer button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: #f1f5ee;
  color: #52783f;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.batch-composer-foot {
  justify-content: flex-start;
  padding: 14px 24px;
  background: #fff;
}

.batch-composer-footer-note {
  flex: 1;
  color: rgba(17, 19, 24, 0.43);
  font-size: 10px;
  text-align: right;
}

.batch-composer-primary {
  min-width: 150px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #111318;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.batch-composer-primary:disabled {
  background: #d9dbd7;
  color: #fff;
  cursor: not-allowed;
}

.channel-picker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .batch-chat-page {
    left: 186px;
  }
}

@media (max-width: 920px) {
  .batch-chat-page {
    inset: 0;
    border-radius: 0;
  }
}

@media (max-width: 900px) {
  .batch-platform-grid,
  .channel-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-ready-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-edit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .modal-backdrop {
    padding: 8px;
  }

  .batch-composer-modal {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }

  .batch-composer-head,
  .batch-composer-body,
  .batch-composer-foot {
    padding-right: 14px;
    padding-left: 14px;
  }

  .batch-platform-grid,
  .channel-picker-grid {
    grid-template-columns: 1fr;
  }

  .batch-composer-section-head,
  .batch-results-summary,
  .batch-composer-count-row,
  .batch-edit-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .batch-account-notice.is-blocked {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .batch-account-notice.is-blocked > button {
    width: 100%;
    margin-left: 0;
  }

  .batch-composer-footer-note {
    display: none;
  }

  .batch-composer-primary {
    flex: 1;
    min-width: 0;
  }

  .batch-chat-page-head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 9px 12px;
  }

  .batch-chat-page-head > div {
    justify-items: start;
  }

  .batch-chat-page-head > button:last-child {
    display: none;
  }

  .batch-chat-thread {
    width: calc(100% - 24px);
    padding-top: 24px;
  }

  .batch-mode-head-spacer {
    display: none;
  }

  .batch-mode-scroll {
    padding: 28px 18px 56px;
  }

  .batch-mode-panel {
    gap: 28px;
    padding: 0;
    border-radius: 0;
  }

  .batch-mode-intro {
    margin-top: -8px;
  }

  .batch-mode-intro h1 {
    font-size: 25px;
  }

  .batch-mode-options {
    grid-template-columns: 1fr;
  }

  .batch-mode-options button {
    min-height: 150px;
    padding: 19px;
  }

  .batch-mode-tabs {
    grid-template-columns: 1fr;
  }

  .batch-mode-tabs button {
    grid-template-columns: 30px auto minmax(0, 1fr);
  }

  .batch-mode-prompt {
    padding-right: 16px;
    padding-left: 16px;
  }

  .batch-mode-compose-actions,
  .batch-ready-template-library-head {
    align-items: stretch;
    flex-direction: column;
  }

  .batch-mode-compose-actions {
    padding-left: 16px;
  }

  .batch-mode-compose-actions button {
    width: 100%;
  }

  .batch-ready-template-grid {
    grid-template-columns: 1fr;
  }

  .batch-ready-template-card {
    min-height: 210px;
  }

  .batch-template-preview-layer {
    padding: 8px;
  }

  .batch-template-preview {
    max-height: calc(100vh - 16px);
    border-radius: 18px;
  }

  .batch-template-preview > header,
  .batch-template-preview-body,
  .batch-template-preview > footer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .batch-template-preview-platforms {
    padding-right: 16px;
    padding-left: 16px;
  }

  .batch-template-preview > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .batch-template-preview > footer > div,
  .batch-template-preview > footer button {
    flex: 1;
  }

  .batch-template-detail-scroll {
    padding: 28px 18px 56px;
  }

  .batch-template-detail-shell > header h1 {
    font-size: 25px;
  }

  .batch-template-detail-shell .batch-template-preview-body {
    padding: 22px 18px;
  }

  .batch-template-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .batch-template-detail-actions > div,
  .batch-template-detail-actions button {
    flex: 1;
  }

  .batch-chat-message > div {
    max-width: calc(100% - 48px);
  }

  .batch-chat-choices {
    margin-left: 0;
  }

  .batch-chat-inputbar {
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .batch-chat-count {
    width: 100%;
    justify-content: space-between;
  }

  .batch-chat-input {
    flex: 1;
  }

  .batch-chat-finish {
    padding: 0 12px;
  }
}