/* CardNews Studio 의 좋은 기능만 InstaPilot 위저드로 흡수하기 위한 CSS.
   원본은 static/cardnews-studio.html 의 <style> 통째. 메인 영역(Step 2~4) 셀렉터만 추출.
   - 모든 셀렉터는 [id^="cns-embed-"] 컨테이너 안으로 한정 → InstaPilot 기존 .card/.btn 등과 충돌 회피
   - 변수는 InstaPilot 다크 톤(--accent / --bg-card / --border / --text 등) 으로 매핑
   - 흡수 끝나면 cardnews-studio.html / loader / bridge 폐기 (NEXT_SESSION.md 참고) */

[id^="cns-embed-"]{
  /* SPA 원본 변수 → InstaPilot 다크 톤 매핑 */
  --cns-bg: var(--bg);                  /* 기존 라이트 #f6f7fb → 다크 */
  --cns-panel: var(--bg-card);          /* 라이트 #fff → 다크 카드 */
  --cns-ink: var(--text);               /* 라이트 #15181f → 다크 텍스트 */
  --cns-sub: var(--text-subtle);        /* 라이트 #6b7280 → 다크 subtle */
  --cns-line: var(--border);            /* 라이트 #e7e9f0 → 다크 border */
  --cns-line-2: var(--border-strong);   /* 라이트 #cfd3e6 → 다크 border-strong */
  --cns-brand: var(--accent);           /* 라이트 #5b5bf0 보라 → 라임 (InstaPilot 톤) */
  --cns-brand-2: #6ed9ff;               /* 보조 그라데이션 */
  --cns-chip: var(--accent-glow);       /* 라이트 #eef0fb → 라임 glow */
  --cns-radius: var(--radius-lg);
  --cns-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);

  /* SPA 가 인라인 style 로 참조하는 원본 변수명도 매핑 — 호스트(light DOM)에는
     이 변수들이 없어서 활성 칩 등이 색을 잃고 하얗게 깨지던 문제 방지 */
  --brand: var(--accent);
  --brand-2: #6ed9ff;
  --ink: var(--text);
  --sub: var(--text-subtle);
  --line: var(--border);
  --line-2: var(--border-strong);
  --panel: var(--bg-card);
  --chip: var(--accent-glow);

  font-family: inherit;
  color: var(--cns-ink);
}

/* 메인 카드 컨테이너 — 4단계 본문이 들어가는 박스 */
[id^="cns-embed-"] .card {
  background: var(--cns-panel);
  border: 1px solid var(--cns-line);
  border-radius: var(--cns-radius);
  padding: 22px;
  box-shadow: var(--cns-shadow);
}
[id^="cns-embed-"] .card + .card { margin-top: 16px; }

/* 섹션 타이틀/부제 */
[id^="cns-embed-"] h2.sec { font-size: 18px; margin: 2px 0 4px; color: var(--cns-ink); }
[id^="cns-embed-"] p.sec { color: var(--cns-sub); font-size: 13px; margin: 0 0 18px; }
[id^="cns-embed-"] .sec { font-size: 12px; color: var(--cns-sub); }

/* 공통 helper */
[id^="cns-embed-"] .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
[id^="cns-embed-"] .actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; }

/* 버튼 — InstaPilot .btn 과 클래스명이 같아 prefix 로 격리 */
[id^="cns-embed-"] .btn {
  border: 1px solid var(--cns-line);
  background: var(--cns-panel);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cns-ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: inherit;
}
[id^="cns-embed-"] .btn:hover { border-color: var(--cns-brand); }
[id^="cns-embed-"] .btn.primary {
  background: var(--cns-brand);
  color: #0a0b0f;
  border: 0;
  font-weight: 800;
}
[id^="cns-embed-"] .btn.primary:hover { filter: brightness(1.05); }
[id^="cns-embed-"] .btn.ghost { background: none; border: 0; color: var(--cns-sub); }

/* 디자인 추천 카드 그리드 (Step 2) */
[id^="cns-embed-"] .tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
[id^="cns-embed-"] .tpl {
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cns-panel);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
[id^="cns-embed-"] .tpl.active { border-color: var(--cns-brand); }
[id^="cns-embed-"] .tpl .nm { font-size: 12px; padding: 7px 9px; font-weight: 600; color: var(--cns-ink); }

/* AI 추천 디자인 카드 — Step 2 핵심 */
[id^="cns-embed-"] .reccard { position: relative; }
[id^="cns-embed-"] .recnum {
  position: absolute; top: 7px; left: 7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
[id^="cns-embed-"] .rectag {
  position: absolute; top: 7px; right: 7px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
}
[id^="cns-embed-"] .reccard .recprev {
  position: relative;
  line-height: 0;
  border-radius: 11px 11px 0 0;
  overflow: hidden;
}
[id^="cns-embed-"] .reccard .recprev svg { width: 100%; height: auto; display: block; }
[id^="cns-embed-"] .recover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: 0.15s;
  pointer-events: none;
}
[id^="cns-embed-"] .reccard:hover .recover { opacity: 1; }
[id^="cns-embed-"] .recbtn {
  background: var(--cns-brand);
  color: #0a0b0f;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.32);
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   Step 3 — 장별 기획 (Phase 1b)
   슬라이드 탭 스트립 + 선택 슬라이드 inline edit
   원본 cardnews-studio.html 라인 113~120, 219~230
   ───────────────────────────────────────────────────────────── */

/* 슬라이드 탭 스트립 — 가로 스크롤바는 얇고 은은하게 */
[id^="cns-embed-"] .ptabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--cns-line-2) transparent;
}
[id^="cns-embed-"] .ptabs::-webkit-scrollbar { height: 6px; }
[id^="cns-embed-"] .ptabs::-webkit-scrollbar-thumb { background: var(--cns-line-2); border-radius: 3px; }
[id^="cns-embed-"] .ptabs::-webkit-scrollbar-track { background: transparent; }
[id^="cns-embed-"] .ptab {
  flex: 0 0 auto;
  border: 1px solid var(--cns-line);
  border-radius: 10px;
  padding: 9px 11px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--cns-panel);
  cursor: pointer;
}
[id^="cns-embed-"] .ptab:hover { border-color: var(--cns-line-2); }
[id^="cns-embed-"] .ptab.sel {
  border-color: var(--cns-brand);
  box-shadow: 0 0 0 3px var(--cns-chip);
}
[id^="cns-embed-"] .ptab-n {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--cns-bg);
  color: var(--cns-sub);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
[id^="cns-embed-"] .ptab.sel .ptab-n {
  background: var(--cns-brand);
  color: #0a0b0f;
}
[id^="cns-embed-"] .ptab-b { min-width: 0; }
[id^="cns-embed-"] .ptab-t {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
  margin-bottom: 3px;
  color: var(--cns-ink);
}
[id^="cns-embed-"] .ptab-add {
  flex: 0 0 auto;
  border: 1px dashed var(--cns-line);
  border-radius: 10px;
  background: var(--cns-panel);
  color: var(--cns-sub);
  font-size: 18px;
  padding: 0 15px;
  cursor: pointer;
}
[id^="cns-embed-"] .ptab-add:hover {
  border-color: var(--cns-brand);
  color: var(--cns-brand);
}

/* 역할 라벨 (표지/콘텐츠/마무리) */
[id^="cns-embed-"] .role-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--cns-chip);
  color: var(--cns-brand);
}

/* 선택된 슬라이드 편집 row */
[id^="cns-embed-"] .slide-row {
  border: 1px solid var(--cns-line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--cns-panel);
}
[id^="cns-embed-"] .slide-row .hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
[id^="cns-embed-"] .slide-row input.h,
[id^="cns-embed-"] .slide-row textarea.b {
  width: 100%;
  border: 1px solid var(--cns-line);
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  margin-top: 6px;
  background: var(--cns-bg);
  color: var(--cns-ink);
  font-family: inherit;
}
[id^="cns-embed-"] .slide-row textarea.b {
  min-height: 60px;
  resize: vertical;
  line-height: 1.55;
}

/* 카드 내부 입력 (Step 3 의 헤드라인/본문 input·textarea — Views.stepPlan 에서 직접 사용) */
[id^="cns-embed-"] input.input,
[id^="cns-embed-"] textarea.input,
[id^="cns-embed-"] div.input[contenteditable] {
  width: 100%;
  border: 1px solid var(--cns-line);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px;
  background: var(--cns-bg);
  color: var(--cns-ink);
  font-family: inherit;
}
[id^="cns-embed-"] textarea.input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}
[id^="cns-embed-"] div.input[contenteditable] { line-height: 1.6; }
/* 형광펜 강조 표시 — 입력칸에서 [[ ]] 대신 주황 하이라이트로 */
[id^="cns-embed-"] div.input[contenteditable] mark {
  background: #ff6b2c;
  color: #fff;
  padding: 0 3px;
  border-radius: 3px;
}
[id^="cns-embed-"] input.input:focus,
[id^="cns-embed-"] textarea.input:focus,
[id^="cns-embed-"] div.input[contenteditable]:focus {
  outline: none;
  border-color: var(--cns-brand);
  box-shadow: 0 0 0 3px var(--cns-chip);
}
[id^="cns-embed-"] label.f {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 7px;
  color: var(--cns-ink);
}

/* 작은 보조 버튼 (이전/다음/삭제) */
[id^="cns-embed-"] .mini,
#cns-embed-result .mini {
  border: 0;
  background: none;
  color: var(--cns-sub);
  font-size: 13px;
  padding: 4px 7px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
[id^="cns-embed-"] .mini:hover,
#cns-embed-result .mini:hover {
  background: var(--cns-bg);
  color: var(--cns-ink);
}
[id^="cns-embed-"] .mini:disabled,
#cns-embed-result .mini:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   Step 4 — 결과 확인 (Phase 1c)
   큰 슬라이드 미리보기 + 썸네일 스트립 + 비율 전환 + 빠른 수정 칩
   원본 cardnews-studio.html 라인 175~194, 315~326
   #cns-embed-result 컨테이너 안에서만 유효 (Step 2~3 와 별도)
   ───────────────────────────────────────────────────────────── */
#cns-embed-result {
  --cns-bg: var(--bg);
  --cns-panel: var(--bg-card);
  --cns-ink: var(--text);
  --cns-sub: var(--text-subtle);
  --cns-line: var(--border);
  --cns-line-2: var(--border-strong);
  --cns-brand: var(--accent);
  --cns-chip: var(--accent-glow);
  font-family: inherit;
  color: var(--cns-ink);
}

#cns-embed-result .card {
  background: var(--cns-panel);
  border: 1px solid var(--cns-line);
  border-radius: var(--radius-lg);
  padding: 22px;
}
#cns-embed-result .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#cns-embed-result h2.sec { font-size: 18px; margin: 2px 0 4px; color: var(--cns-ink); }
#cns-embed-result p.sec { color: var(--cns-sub); font-size: 13px; margin: 0 0 18px; }
#cns-embed-result .btn {
  border: 1px solid var(--cns-line);
  background: var(--cns-panel);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cns-ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: inherit;
}
#cns-embed-result .btn:hover { border-color: var(--cns-brand); }
#cns-embed-result .btn.pub {
  background: linear-gradient(135deg, #f857a6, #7b5bf0);
  color: #fff;
  border: 0;
}

/* ⬇ 다운로드 드롭다운 — SPA dlmenu 스타일 호스트 이식 (없으면 팝업이 생짜 목록으로 깨짐) */
[id^="cns-embed-"] .dlmenu { position: relative; }
[id^="cns-embed-"] .dlmenu > summary { list-style: none; cursor: pointer; }
[id^="cns-embed-"] .dlmenu > summary::-webkit-details-marker { display: none; }
[id^="cns-embed-"] .dlpop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--cns-panel);
  border: 1px solid var(--cns-line);
  border-radius: 10px;
  box-shadow: var(--cns-shadow);
  padding: 6px;
  z-index: 40;
  min-width: 200px;
}
[id^="cns-embed-"] .dlitem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--cns-ink);
  cursor: pointer;
  white-space: nowrap;
}
[id^="cns-embed-"] .dlitem:hover { background: var(--cns-chip); }

/* 큰 미리보기 영역 (중앙) — 화살표가 허공에 뜨지 않게 카드 옆에 붙여서 가운데 정렬 */
#cns-embed-result .resstage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
}
#cns-embed-result .resnav {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--cns-line);
  background: var(--cns-panel);
  font-size: 20px;
  color: var(--cns-sub);
  cursor: pointer;
}
#cns-embed-result .resnav:hover {
  border-color: var(--cns-brand);
  color: var(--cns-brand);
}
#cns-embed-result .resbig {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
}
#cns-embed-result .bigwrap {
  position: relative;
  cursor: pointer;
  line-height: 0;
  width: auto;
  max-width: 330px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}
#cns-embed-result .bigwrap svg { width: 100%; height: auto; display: block; }
#cns-embed-result .resedit {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: 0.15s;
  pointer-events: none;
}
#cns-embed-result .bigwrap:hover .resedit { opacity: 1; }
/* 가운데 [✏️ 편집하기] 알약만 클릭 가능 + 손 커서 — 빈 캔버스는 더블클릭 인라인 수정 전용 */
#cns-embed-result .resedit .recbtn { pointer-events: auto; cursor: pointer; }

/* 썸네일 스트립 */
#cns-embed-result .resthumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px;
  justify-content: center;
  flex-wrap: nowrap;
}
#cns-embed-result .resthumb {
  flex: none;
  width: 52px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  position: relative;
  background: var(--cns-panel);
}
#cns-embed-result .resthumb svg { width: 100%; height: auto; display: block; }
#cns-embed-result .resthumb .tn {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.4;
}
#cns-embed-result .resthumb.sel { border-color: var(--cns-brand); }
#cns-embed-result .resadd {
  flex: none;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--cns-line);
  border-radius: 8px;
  color: var(--cns-sub);
  cursor: pointer;
  font-size: 18px;
  background: var(--cns-panel);
}
#cns-embed-result .resadd:hover {
  border-color: var(--cns-brand);
  color: var(--cns-brand);
}

/* 빠른 수정 칩 (폰트 크기/여백/미니멀/간결/사진) */
#cns-embed-result .reschips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 16px 0;
}
#cns-embed-result .icbtn {
  border: 1px solid var(--cns-line);
  background: var(--cns-panel);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 14px;
  cursor: pointer;
  color: var(--cns-sub);
  font-family: inherit;
}
#cns-embed-result .icbtn:hover {
  border-color: var(--cns-brand);
  color: var(--cns-brand);
}

/* AI 수정 입력 (하단) */
#cns-embed-result .resai {
  display: flex;
  gap: 8px;
}
#cns-embed-result .resai .input { flex: 1; min-width: 0; }
#cns-embed-result .resai .btn { flex: none; }
#cns-embed-result input.input {
  width: 100%;
  border: 1px solid var(--cns-line);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px;
  background: var(--cns-bg);
  color: var(--cns-ink);
  font-family: inherit;
}
#cns-embed-result input.input:focus {
  outline: none;
  border-color: var(--cns-brand);
  box-shadow: 0 0 0 3px var(--cns-chip);
}

/* 비율 전환 segmented (1:1 / 4:5 / 9:16) */
#cns-embed-result .ratioseg {
  display: inline-flex;
  border: 1px solid var(--cns-line);
  border-radius: 8px;
  overflow: hidden;
  height: 38px;
}
#cns-embed-result .ratioseg .rsg {
  border: 0;
  background: var(--cns-panel);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cns-sub);
  border-right: 1px solid var(--cns-line);
  cursor: pointer;
  font-family: inherit;
}
#cns-embed-result .ratioseg .rsg:last-child { border-right: 0; }
#cns-embed-result .ratioseg .rsg.on {
  background: var(--cns-chip);
  color: var(--cns-brand);
}

/* ───────── 🧩 템플릿 관리자 (admin) — InstaPilot 네이티브 이식 ───────── */
/* 카테고리 필터 칩 — 기본 스타일이 없어 흰색 기본 버튼으로 깨지던 것 */
[id^="cns-embed-"] .chip {
  border: 1px solid var(--cns-line);
  background: var(--cns-panel);
  color: var(--cns-sub);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
[id^="cns-embed-"] .chip:hover { border-color: var(--cns-brand); color: var(--cns-ink); }
[id^="cns-embed-"] .admingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
[id^="cns-embed-"] .admincard { border: 1px solid var(--cns-line); border-radius: 12px; overflow: hidden; background: var(--cns-panel); transition: border-color 0.15s; }
[id^="cns-embed-"] .admincard:hover { border-color: rgba(163, 255, 94, 0.4); }
[id^="cns-embed-"] .adminprev { line-height: 0; }
[id^="cns-embed-"] .adminprev svg { width: 100%; height: auto; display: block; }
[id^="cns-embed-"] .adminmeta { padding: 10px; }
[id^="cns-embed-"] .adminmeta b { font-size: 14px; color: var(--cns-ink); }
[id^="cns-embed-"] .adminbadge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
[id^="cns-embed-"] .adminbadge.pub { background: rgba(163, 255, 94, 0.16); color: var(--cns-brand); }
[id^="cns-embed-"] .adminbadge.draft { background: rgba(255, 255, 255, 0.08); color: var(--cns-sub); }
[id^="cns-embed-"] .adminbadge.bi { background: rgba(110, 217, 255, 0.16); color: #6ed9ff; }
[id^="cns-embed-"] .admincat { font-size: 11px; color: var(--cns-sub); margin: 4px 0 8px; }
[id^="cns-embed-"] .mini { border: 0; background: none; color: var(--cns-sub); font-size: 13px; padding: 4px 7px; border-radius: 7px; cursor: pointer; }
[id^="cns-embed-"] .mini:hover { background: rgba(255, 255, 255, 0.06); color: var(--cns-ink); }
/* 템플릿 카드 액션(편집/공개/삭제)은 눌리는 버튼처럼 보이게 */
[id^="cns-embed-"] .adminmeta .row { gap: 6px; margin-top: 2px; }
[id^="cns-embed-"] .adminmeta .mini {
  border: 1px solid var(--cns-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cns-ink);
  font-size: 12px;
  padding: 6px 10px;
}
[id^="cns-embed-"] .adminmeta .mini:hover {
  border-color: var(--cns-brand);
  color: var(--cns-brand);
  background: rgba(163, 255, 94, 0.08);
}
/* 편집 폼 */
[id^="cns-embed-"] .adedit { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
[id^="cns-embed-"] .adbig { position: sticky; top: 6px; display: flex; flex-direction: column; align-items: center; }
[id^="cns-embed-"] .adbig > svg { width: 100%; max-width: 480px; height: auto; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34); }
[id^="cns-embed-"] .adroles { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
[id^="cns-embed-"] .adrolewrap { text-align: center; }
[id^="cns-embed-"] .adrole { width: 70px; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; line-height: 0; background: var(--cns-panel); display: inline-block; }
[id^="cns-embed-"] .adrole.sel { border-color: var(--cns-brand); }
[id^="cns-embed-"] .adrole svg { width: 100%; height: auto; display: block; }
[id^="cns-embed-"] .adrolelab { font-size: 11px; color: var(--cns-sub); margin-top: 4px; }
[id^="cns-embed-"] label.f { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 7px; color: var(--cns-ink); }
[id^="cns-embed-"] input.input,
[id^="cns-embed-"] textarea.input,
[id^="cns-embed-"] select.input { width: 100%; border: 1px solid var(--cns-line); border-radius: 8px; padding: 9px; font-size: 13px; background: var(--cns-bg); color: var(--cns-ink); font-family: inherit; }
[id^="cns-embed-"] details.adv { margin-top: 16px; border: 1px solid var(--cns-line); border-radius: 12px; overflow: hidden; }
[id^="cns-embed-"] details.adv > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 14px; list-style: none; user-select: none; background: var(--cns-panel); color: var(--cns-ink); }
[id^="cns-embed-"] details.adv > summary::-webkit-details-marker { display: none; }
[id^="cns-embed-"] details.adv > summary::after { content: '▾'; float: right; color: var(--cns-sub); }
[id^="cns-embed-"] details.adv[open] > summary::after { content: '▴'; }
[id^="cns-embed-"] .adv-body { padding: 4px 16px 16px; }
[id^="cns-embed-"] .adv-row { display: flex; gap: 18px; flex-wrap: wrap; }
[id^="cns-embed-"] .adv-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--cns-line); border-bottom: 1px solid var(--cns-line); margin: 14px 0; }
@media (max-width: 880px) { [id^="cns-embed-"] .adedit { grid-template-columns: 1fr; } }
</content>
</invoke>