* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e6e8f0;
  --text: #172033;
  --muted: #687086;
  --primary: #ff5a3c;
  --primary-dark: #e9482c;
  --navy: #121a2d;
  --violet: #7657f6;
  --ok: #16a34a;
  --warn: #d97706;
  --fail: #dc2626;
  --radius: 16px;
}

body {
  font-family: 'Segoe UI', 'Leelawadee UI', Tahoma, sans-serif;
  background:
    radial-gradient(circle at 8% -10%, rgba(118,87,246,.09), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(255,90,60,.08), transparent 26%),
    var(--bg);
  color: var(--text);
  font-size: 15px;
}

header {
  background: rgba(255,255,255,.94);
  color: var(--navy);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(224,226,235,.9);
  box-shadow: 0 8px 30px rgba(24,32,51,.06);
  backdrop-filter: blur(14px);
}

header h1 { font-size: 20px; font-weight: 800; white-space: nowrap; letter-spacing: -.4px; display:flex;align-items:center;gap:10px; }
header h1 img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 5px 14px rgba(118,87,246,.22); }

nav { display: flex; gap: 4px; height: 100%; }

nav button,
nav .nav-link {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  padding: 0 14px;
  cursor: pointer;
  height: 100%;
  border-bottom: 0;
  font-family: inherit;
  text-decoration: none;
}

nav button:hover,
nav .nav-link:hover { color: var(--navy); background: #f4f2ff; }
nav button.active { color: var(--primary-dark); background: #fff0ec; font-weight: 700; }

main { max-width: 1180px; margin: 30px auto; padding: 0 20px 70px; }

.page { display: none; }
.page.active { display: block; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 12px 40px rgba(25,34,54,.055);
}

.card h2 { font-size: 18px; margin-bottom: 16px; letter-spacing: -.2px; }
.card h3 { font-size: 15px; margin: 16px 0 8px; }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.check-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check-row input[type=checkbox] { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.check-row span { color: var(--navy); line-height: 1.45; }

input[type=text], input[type=url], input[type=password], input[type=number], input[type=time], input[type=file], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
input[type=time] { min-height: 42px; }
input[type=file] { padding: 8px 12px; cursor: pointer; }

textarea { resize: vertical; min-height: 70px; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,90,60,.12);
}

.row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.row > div { flex: 1; min-width: 180px; }

.btn {
  background: linear-gradient(135deg, var(--primary), #ff795f);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 650;
  box-shadow: 0 5px 14px rgba(255,90,60,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.btn:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,90,60,.24); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn.secondary:hover { background: #f3f4f6; }

.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.danger { background: #fff; color: var(--fail); border: 1px solid var(--fail); }
.btn.danger:hover { background: #fef2f2; }

/* LINE OA TikTok product import */
.line-import-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#fff 45%,#ebfff3)}
.line-import-hero h2{margin-bottom:6px}.line-btn{background:linear-gradient(135deg,#06c755,#04a847);box-shadow:0 5px 14px rgba(6,199,85,.22)}.line-btn:hover{background:linear-gradient(135deg,#04a847,#058d3e);box-shadow:0 8px 18px rgba(6,199,85,.25)}
.line-import-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.line-import-grid>.card{margin-bottom:22px}
.line-status-box{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#f7f8fb;line-height:1.65}.line-status-box.ok{border-color:#92dfb0;background:#effbf4}.line-status-box.fail{border-color:#f0abab;background:#fff3f3}
.line-bind-command{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px;padding:14px;border:1px dashed #06c755;border-radius:11px;background:#f1fff6}.line-bind-command .hint{width:100%;margin:0}.line-bind-command code{font-size:20px;font-weight:800;letter-spacing:1px;color:#047c37;background:#fff}
.line-import-steps{margin:8px 0 12px 22px}.line-import-steps li{margin:9px 0}
@media(max-width:760px){.line-import-hero{align-items:flex-start;flex-direction:column}.line-import-grid{grid-template-columns:1fr}.line-import-grid>.card{margin-bottom:0}.line-bind-command .btn{width:100%}}

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* image selection grid */
.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.img-grid .thumb {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: #fafafa;
}

.img-grid .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-grid .thumb.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(238,77,45,.25); }
.img-grid .thumb .ai-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: #7c3aed;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

.img-grid .thumb .check {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--primary);
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.img-grid .thumb.selected .check { display: flex; }

/* jobs */
.job {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* thumbnail ต้นทาง: แสดงตามสัดส่วนจริง ไม่ crop */
.job .src img {
  width: 80px;
  height: auto;
  max-height: 142px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fafafa;
}
.job .info { flex: 1; min-width: 0; }
.job .info .prompt { color: var(--muted); font-size: 13px; margin: 2px 0 6px; word-break: break-word; }
.job .meta { font-size: 12px; color: var(--muted); }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.badge.waiting, .badge.queuing { background: #fef3c7; color: var(--warn); }
.badge.generating { background: #dbeafe; color: #2563eb; }
.badge.success { background: #dcfce7; color: var(--ok); }
.badge.fail { background: #fee2e2; color: var(--fail); }
.badge.type { background: #f3e8ff; color: #7c3aed; }

.results { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* แสดงผลลัพธ์ตามสัดส่วนจริงของภาพ (แนวตั้ง 9:16 จะสูงได้ถึง 340px) */
.results img, .results video {
  max-width: 240px;
  max-height: 340px;
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.results audio { width: 360px; max-width: 78vw; height: 40px; }
.result-item { display: flex; flex-direction: column; gap: 4px; }
.result-item a { font-size: 12px; color: var(--primary); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
td img.mini { width: 42px; height: 42px; object-fit: cover; border-radius: 4px; margin-right: 4px; border: 1px solid var(--border); }
.product-data-name-url { display: inline; margin-left: 4px; font-size: 12px; overflow-wrap: anywhere; }

.input-eye { display: flex; gap: 6px; }
.input-eye input { flex: 1; }
.input-eye button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 16px;
}
.input-eye button:hover { background: #f3f4f6; }

.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
pre.example {
  background: #f8f9fb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 12.5px;
  overflow-x: auto;
  margin-top: 8px;
}

.script-preview {
  min-height: 58px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.empty { color: var(--muted); padding: 16px 0; text-align: center; }

/* gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.gallery-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

.gallery-item img, .gallery-item video {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  background: #000;
}
.gallery-media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
  font: inherit;
}

.gallery-item .cap {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}
.gallery-item .cap .name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-item .cap a { color: var(--primary); text-decoration: none; flex-shrink: 0; }
.gallery-actions { padding: 0 8px 8px; }
.gallery-actions .btn { width: 100%; }

.url-fetch-row { display: flex; gap: 8px; }
.url-fetch-row input { flex: 1; }
.url-fetch-row button { white-space: nowrap; }
.product-image-preview { margin-top: 10px; }
.product-image-preview .thumb { padding: 0; font: inherit; }
.product-image-preview .edit-image-remove {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(185, 28, 28, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.content-character-image-preview {
  display: none;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafbfc;
}
.content-character-image-preview img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
}
.content-character-image-preview .preview-name {
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.select-pager { display: flex; gap: 6px; align-items: stretch; }
.select-pager select { flex: 1; min-width: 0; }
.select-pager .btn { padding-left: 12px; padding-right: 12px; }

.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-title-row .actions { margin-top: 0; }
.request-log { border: 1px solid var(--border); border-radius: 7px; margin-top: 8px; background: #fff; }
.request-log.failed { border-left: 4px solid var(--fail); }
.request-log.ok { border-left: 4px solid var(--ok); }
.request-log summary { cursor: pointer; padding: 10px; overflow-wrap: anywhere; }
.request-log .log-meta { float: right; color: var(--muted); font-size: 12px; }
.request-log pre { margin: 0 10px 10px; max-height: 420px; }
.log-payloads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px 10px; }
.log-payloads > div { min-width: 0; }
.log-payload-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.log-payloads pre { margin: 0; height: 260px; }

@media (max-width: 640px) {
  .url-fetch-row, .section-title-row { flex-direction: column; }
  .url-fetch-row button { width: 100%; }
  .request-log .log-meta { display: block; float: none; margin-top: 4px; }
  .log-payloads { grid-template-columns: 1fr; }
}

.paging {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.paging button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
}
.paging button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.paging button.current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.paging button:disabled { opacity: .4; cursor: not-allowed; }
.paging .total { font-size: 13px; color: var(--muted); margin-left: 8px; }

/* toast */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  display: none;
  z-index: 99999;
  max-width: 90%;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  pointer-events: none;
}
#toast.error { background: var(--fail); border-color: rgba(255, 255, 255, 0.25); }
#toast.show { display: block; animation: toastFadeIn 0.2s ease-out; }
@keyframes toastFadeIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* modal */
#modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 50;
  padding: 40px 16px;
}
#modal-backdrop.show { display: flex; }
#modal {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  width: 560px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
#modal h2 { font-size: 16px; margin-bottom: 14px; }
.media-viewer {
  width: min(1200px, 96vw) !important;
  height: min(900px, 90vh);
  max-height: 90vh !important;
  display: flex;
  flex-direction: column;
  padding: 14px !important;
}
.media-viewer-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.media-viewer-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-close { border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; color: var(--muted); }
.media-viewer-content { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 8px; overflow: hidden; }
.media-viewer-content img, .media-viewer-content video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.media-viewer-actions { flex-shrink: 0; justify-content: center; }
#modal-backdrop.fullscreen-active { padding: 0; }
.media-viewer.fullscreen { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0; }
.media-fullscreen-toggle { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.media-caption {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8f9fb;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  max-height: 120px;
  overflow-y: auto;
}
.media-caption-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.media-caption .btn { flex-shrink: 0; }

.adb-helper-image-button {
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.adb-helper-image-button:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,90,60,.12); }
.adb-helper-image-button img { display: block; max-width: 360px; width: 100%; height: auto; }
.field { margin-bottom: 12px; }

/* collapsible cards (Master Data) */
#page-master .card h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
#page-master .card h2::before {
  content: '▾';
  font-size: 13px;
  color: var(--muted);
  transition: transform .15s;
}
#page-master .card.collapsed h2::before { transform: rotate(-90deg); }
#page-master .card.collapsed > *:not(h2) { display: none; }

/* phone post list — show source preview in real aspect ratio, click to enlarge */
.phone-media {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
}
#phone-videos .job img, #phone-videos .job video {
  width: 120px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  border-radius: 6px;
  background: #111;
  display: block;
}
.phone-media:hover { outline: 2px solid var(--primary); }
#content-post-list .job video { width: 120px; height: auto; max-height: 200px; object-fit: contain; border-radius: 6px; background: #111; display: block; }
#content-post-list .job.posted { background: #fef2f2; }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* ป้ายบอกว่าโพสลง Shopee ไปแล้ว */
.posted-badge {
  display: inline-block;
  background: var(--fail);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
#phone-videos .job.posted { background: #fef2f2; }

/* สถานะโพส Facebook/TikTok/YouTube ของ Content run — 1 แพลตฟอร์ม = 1 แถว เรียงแนวตั้ง
   แทนที่จะปล่อยให้ badge/ปุ่ม/ลิงก์ของ 3 แพลตฟอร์มมาเรียงชนกันเป็นก้อนเดียว */
.content-post-platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.content-post-platform-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.content-post-platform-row .platform-label {
  min-width: 84px;
  font-weight: 600;
  font-size: 13px;
}

/* Content เรื่องยาว: คลิปย่อยและบทพากย์แยกรายตอน โดยวิดีโอรวมยังแสดงแยกด้านล่าง */
.content-section-results { margin-top: 12px; }
.content-section-results-title { margin-bottom: 6px; font-weight: 600; }
.content-section-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.content-section-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafbfc;
}
.content-section-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px; }
.content-section-card video { display:block;width:100%;aspect-ratio:16/9;border-radius:6px;background:#000; }
.content-section-card audio { display:block;width:100%;margin-top:8px; }
.content-section-audio { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.content-section-audio-meta { margin-top:4px; font-size:12px; color:var(--muted); }
.content-section-subclips { margin:8px 0; padding:8px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.content-section-subclips-title { margin-bottom:6px; font-size:12px; font-weight:600; color:var(--muted); }
.content-section-subclip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.content-section-subclip { min-width:0; font-size:12px; }
.content-section-subclip audio { display:block; width:100%; margin-top:3px; }
.content-section-subclip > span { display:block; font-weight:700; color:var(--navy); }
.content-section-subclip-placeholder { display:flex; align-items:center; justify-content:center; min-height:68px; margin-top:3px; padding:8px; border-radius:6px; background:#eef1f6; color:var(--muted); font-size:11px; text-align:center; }
.content-section-card label { display:block;margin:9px 0 4px;font-size:12px;font-weight:600;color:var(--muted); }
.content-section-script { width:100%;min-height:150px;resize:vertical;background:#fff;line-height:1.5; }
.content-section-video-placeholder {
  display:flex;align-items:center;justify-content:center;min-height:150px;padding:12px;border-radius:6px;
  background:#eef1f5;color:var(--muted);font-size:12px;text-align:center;
}

/* workflow log */
.workflow-device { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--border);border-radius:11px;background:#f8f9fc; }
.workflow-device .hint { margin-top:3px; }
#wf-mobile-latest-hint { display:none; margin:8px 0 0; color:var(--primary); }
@media (max-width:820px) {
  #page-workflow .workflow-desktop-controls { display:none; }
  #page-workflow #wf-card-toggle { display:none; }
  #page-workflow #wf-mobile-latest-hint { display:block; }
  #page-workflow #workflow-status-card { margin-bottom:12px; }
}
.wf-log { font-size: 12px; color: var(--muted); max-height: 160px; overflow-y: auto; }
.wf-logline { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.wf-logline span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wf-log-restart {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--primary);
  font-size: 11px;
  line-height: 16px;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.wf-log-restart:hover { background: #eef5ff; border-color: var(--primary); }
.wf-log-activity {
  margin: 2px 0 4px 22px;
  padding: 4px 8px;
  border-left: 2px solid var(--border);
  background: #fafbfc;
  font-size: 11px;
  color: var(--muted);
}
.wf-log-activity-line { padding: 1px 0; white-space: normal; word-break: break-word; }
.wf-log-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--primary);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  flex: 0 0 auto;
}
.wf-log-prompt {
  margin: 2px 0 4px 22px;
  padding: 4px 8px;
  border-left: 2px solid var(--border);
  background: #fafbfc;
  font-size: 11px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.wf-preview { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fafbfc; display: flex; flex-direction: column; gap: 12px; }
.wf-step { padding-bottom: 4px; }
.wf-step-t { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.wf-text-result { white-space: pre-wrap; line-height: 1.55; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); }
.wf-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-thumbs img { height: 110px; width: auto; border-radius: 6px; border: 1px solid var(--border); object-fit: contain; background: #fff; }
.wf-video { max-width: 200px; max-height: 300px; border-radius: 8px; border: 1px solid var(--border); background: #000; display: block; }

/* automation panel — ปักไว้ล่างจอ มองเห็นตลอดขณะรัน */
#auto-run-box {
  position: sticky;
  bottom: 12px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 -2px 12px rgba(0,0,0,.12);
  z-index: 20;
}
.auto-run-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.auto-run-close {
  display: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 22px;
  line-height: 26px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.auto-run-close:hover { border-color: var(--fail); color: var(--fail); background: #fff5f5; }

/* automation live log */
#auto-log {
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 12.5px;
  font-family: Consolas, monospace;
  background: #0f172a;
  color: #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.6;
}
#auto-log .log-now { color: #fbbf24; }
#auto-log .log-ok { color: #4ade80; }
#auto-log .log-err { color: #f87171; }
#auto-transfer-progress{margin:10px 0;padding:9px 10px;border-radius:9px;background:#182238}
.auto-transfer-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;color:#e5edf9;font-size:13px}
.auto-transfer-meta span{color:#93c5fd;white-space:nowrap;font-variant-numeric:tabular-nums}
.auto-transfer-track{height:10px;overflow:hidden;border-radius:999px;background:#334155}
#auto-transfer-bar{height:100%;width:0;background:linear-gradient(90deg,#38bdf8,#22c55e);border-radius:inherit;transition:width .15s linear}

@media (max-width: 820px) {
  header { padding: 10px 14px 0; gap: 12px; flex-wrap: wrap; }
  header h1 { width: 100%; }
  nav { width: 100%; overflow-x: auto; height: 48px; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button, nav .nav-link { flex: 0 0 auto; border-radius: 9px 9px 0 0; }
  main { margin-top: 18px; padding-left: 12px; padding-right: 12px; }
  .card { padding: 17px; border-radius: 13px; }
}

/* Visual ADB Template Builder — แยกจาก JSON editor เดิม */
.adb-builder-title,.adb-builder-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.adb-builder-title h2,.adb-builder-section-head h3{margin:0}
.adb-builder-layout{display:grid;grid-template-columns:220px minmax(360px,1fr) 310px;gap:14px;align-items:start}.adb-builder-layout>.card{margin:0;position:sticky;top:18px}.adb-builder-workspace{position:static!important;min-height:540px}.adb-builder-tools{display:grid;gap:7px;margin-top:12px}.adb-tool{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--navy);cursor:grab;text-align:left;font:inherit}.adb-tool:hover{border-color:var(--primary);background:#fff5f2}.adb-tool:active,.adb-step-card.dragging{cursor:grabbing;opacity:.55}.adb-tool-icon{width:25px;text-align:center}.adb-builder-canvas{margin-top:12px}.adb-dropzone{min-height:58px;border:2px dashed #cbd2df;border-radius:11px;padding:8px;transition:.15s;background:#f9fafc}.adb-dropzone.drag-over{border-color:var(--primary);background:#fff2ee}.adb-dropzone-empty{display:grid;place-items:center;min-height:42px;color:var(--muted);font-size:13px;pointer-events:none}.adb-step-card{border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:10px;background:#fff;margin:7px 0;padding:10px;box-shadow:0 3px 10px rgba(18,26,45,.05);cursor:pointer}.adb-step-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(255,104,77,.16)}.adb-step-head{display:flex;align-items:center;gap:8px}.adb-step-handle{cursor:grab;color:var(--muted);font-size:18px}.adb-step-title{flex:1;font-weight:700}.adb-step-summary{color:var(--muted);font-size:12px;margin:4px 0 0 27px;word-break:break-word}.adb-step-buttons{display:flex;gap:3px}.adb-step-buttons button{border:0;background:#f0f2f6;color:var(--navy);border-radius:6px;cursor:pointer;padding:3px 7px}.adb-branch{margin:10px 0 2px 20px;padding-left:10px;border-left:3px solid #d9deea}.adb-branch.then{border-left-color:#31a46c}.adb-branch.else{border-left-color:#f0a029}.adb-branch-label{font-size:12px;font-weight:800;margin-bottom:5px}.adb-inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.adb-inspector-grid .full{grid-column:1/-1}.adb-builder-inspector label{font-size:12px;margin-bottom:3px}.adb-builder-inspector input,.adb-builder-inspector select{padding:8px}.adb-builder-json{min-height:210px;font-family:Consolas,monospace;font-size:12px;background:#0f172a;color:#d5e2f3;border-color:#0f172a}.adb-builder-dirty{color:#9a5b00!important;background:#fff3d6!important}
.adb-tool[data-builder-type="if"]{border-color:#9a78e8;background:#f7f3ff;font-weight:700}
.adb-branch>.adb-dropzone{background:#fff;min-height:48px}
@media(max-width:1100px){.adb-builder-layout{grid-template-columns:200px 1fr}.adb-builder-inspector{grid-column:1/-1;position:static!important}.adb-builder-inspector-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.adb-builder-layout{grid-template-columns:1fr}.adb-builder-layout>.card{position:static}.adb-builder-tools{grid-template-columns:1fr 1fr}.adb-builder-inspector-grid{grid-template-columns:1fr 1fr}}

/* n8n-style node graph and curved connectors */
.adb-builder-canvas{position:relative;overflow-x:auto;padding:12px}
.adb-builder-graph{position:relative;z-index:1;min-width:560px}
.adb-builder-lines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.adb-builder-graph>.adb-dropzone{padding:15px 36px;min-height:76px;background:rgba(249,250,252,.88)}
.adb-builder-graph .adb-step-card{position:relative;width:min(620px,calc(100% - 16px));margin:30px auto;padding:11px;z-index:1;box-shadow:0 5px 16px rgba(18,26,45,.08)}
.adb-builder-graph .adb-step-card.is-condition{width:min(800px,100%);border-left-color:#8a62db;background:#fdfcff}
.adb-branches{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.adb-builder-graph .adb-branch{margin:0;padding:10px;border:1px solid #d9deea;border-radius:11px;background:#f8fafc}
.adb-builder-graph .adb-branch.then{border-color:#7bd3a5;background:#f2fbf6}
.adb-builder-graph .adb-branch.else{border-color:#efc574;background:#fffaf0}
.adb-builder-graph .adb-branch-label{text-align:center}
.adb-builder-graph .adb-branch>.adb-dropzone{padding:8px;min-height:60px;background:rgba(255,255,255,.84)}
.adb-builder-graph .adb-branch .adb-step-card{width:100%;margin:25px 0;padding:9px}
@media(max-width:760px){.adb-branches{grid-template-columns:1fr}.adb-builder-graph{min-width:660px}}

/* left application sidebar */
header {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  height: 100vh;
  min-height: 0;
  padding: 20px 14px;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  overflow: visible;
  transition: width .22s ease;
}

header h1 { min-height: 40px; padding: 0 7px; overflow: hidden; }
header h1 span { transition: opacity .15s ease; }

#sidebar-toggle {
  position: absolute;
  top: 27px;
  right: -14px;
  z-index: 2;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(25,34,54,.14);
}
#sidebar-toggle:hover { color: var(--primary); border-color: #ffc4b8; }

header nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

header nav button,
header nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border-radius: 11px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.nav-icon { width: 24px; flex: 0 0 24px; text-align: center; font-size: 17px; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-group { width: 100%; }
.nav-group-toggle { position: relative; }
.nav-group-chevron {
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  transition: transform .18s ease;
}
.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 2px 18px;
}
.nav-group.open .nav-submenu { display: flex; }
.nav-group.open .nav-group-chevron { transform: rotate(180deg); }
header nav .nav-submenu button {
  height: 38px;
  padding: 0 11px;
  font-size: 13px;
}
header nav .nav-submenu .nav-icon { font-size: 15px; }
.nav-group.has-active > .nav-group-toggle {
  color: var(--primary-dark);
  background: #fff7f4;
  font-weight: 700;
}

main {
  margin: 0 0 0 248px;
  max-width: none;
  min-height: 100vh;
  padding-top: 30px;
  transition: margin-left .22s ease;
}
main > .page { max-width: 1180px; margin-left: auto; margin-right: auto; }

body.standalone-page header { display:none!important; }
body.standalone-page main,
body.standalone-page.sidebar-collapsed main { margin-left:0!important; padding:20px 16px 40px; }
body.standalone-page main > .page { max-width:1180px; }

/* Config control center */
#page-config.config-modern {
  max-width: 1240px;
  --config-ink: #13213c;
  --config-soft: #f4f6fb;
  --config-line: #e4e9f2;
}
.config-modern .config-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 210px;
  padding: 38px 42px;
  margin-bottom: 18px;
  color: #fff;
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.17), transparent 26%),
    radial-gradient(circle at 6% 100%, rgba(255,116,82,.44), transparent 34%),
    linear-gradient(125deg, #111c38 0%, #293b79 52%, #7657f6 100%);
  box-shadow: 0 24px 60px rgba(27,42,83,.2);
}
.config-modern .config-hero::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  right: -70px;
  top: -110px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.025);
}
.config-hero-copy { position: relative; z-index: 1; max-width: 690px; }
.config-eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:11px; font-weight:800; letter-spacing:1.8px; color:#cbd5ff; }
.config-eyebrow span { width:28px; height:2px; border-radius:2px; background:#ff8068; }
.config-hero h1 { margin:0 0 8px; font-size:40px; line-height:1.05; letter-spacing:-1.3px; }
.config-hero p { margin:0; color:rgba(255,255,255,.76); font-size:15px; line-height:1.65; }
.config-hero-meta { position:relative; z-index:1; min-width:128px; padding:17px 20px; text-align:center; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.config-hero-meta strong { display:block; font-size:30px; line-height:1; }
.config-hero-meta span { display:block; margin-top:7px; color:rgba(255,255,255,.72); font-size:12px; }
.config-toolbar { position:sticky; top:14px; z-index:8; display:flex; align-items:center; gap:14px; padding:10px; margin-bottom:18px; border:1px solid rgba(224,228,239,.95); border-radius:17px; background:rgba(255,255,255,.88); box-shadow:0 10px 30px rgba(23,32,51,.08); backdrop-filter:blur(14px); }
.config-search { flex:1; display:flex; align-items:center; gap:10px; margin:0; padding:0 12px; color:#8a93a8; border-radius:11px; background:#f5f7fb; }
.config-search > span { font-size:24px; line-height:1; transform:rotate(-15deg); }
.config-search input[type=search] { min-width:0; height:44px; padding:0; border:0; outline:0; box-shadow:none; background:transparent; color:var(--config-ink); }
.config-search input[type=search]::-webkit-search-cancel-button { cursor:pointer; }
.config-search kbd { padding:3px 7px; color:#8b93a6; border:1px solid #dce1eb; border-bottom-width:2px; border-radius:6px; background:#fff; font:11px/1.2 inherit; }
.config-search-status { flex:0 0 auto; padding:0 10px; color:#778198; font-size:12px; white-space:nowrap; }
.config-category-section { padding:25px; margin-bottom:20px; border:1px solid var(--config-line); border-radius:22px; background:#fff; box-shadow:0 14px 38px rgba(24,35,59,.06); }
.config-category-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.config-category-heading h2,.config-detail-heading h3 { margin:3px 0 0; color:var(--config-ink); }
.config-category-heading h2 { font-size:23px; }
.config-category-heading p { max-width:480px; margin:0; color:#7b8498; font-size:12px; line-height:1.55; text-align:right; }
.config-section-kicker { color:#7559ef; font-size:10px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; }
.config-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.config-category-card { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto 1fr auto; gap:3px 13px; min-height:142px; padding:18px; overflow:hidden; text-align:left; color:#5d687e; border:1px solid #e2e7f0; border-radius:16px; background:linear-gradient(145deg,#fff,#fafbfe); font-family:inherit; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease; }
.config-category-card:hover { transform:translateY(-2px); color:var(--config-ink); border-color:#bdb4f5; box-shadow:0 12px 25px rgba(45,51,88,.1); }
.config-category-card.is-active { color:#fff; border-color:transparent; background:linear-gradient(135deg,#263a78,#7255ed); box-shadow:0 14px 30px rgba(72,62,173,.24); }
.config-category-number { position:absolute; top:12px; right:14px; color:#a0a8b8; font-size:10px; font-weight:900; letter-spacing:1px; }
.config-category-card.is-active .config-category-number { color:rgba(255,255,255,.58); }
.config-category-icon { grid-row:1 / span 2; display:grid; place-items:center; width:48px; height:48px; font-size:22px; border-radius:14px; background:#eef1f8; }
.config-category-card.is-active .config-category-icon { background:rgba(255,255,255,.14); }
.config-category-copy { min-width:0; padding-right:16px; }
.config-category-copy strong,.config-category-copy small { display:block; }
.config-category-copy strong { color:var(--config-ink); font-size:15px; }
.config-category-card.is-active .config-category-copy strong { color:#fff; }
.config-category-copy small { margin-top:7px; color:#858ea2; font-size:11px; line-height:1.45; }
.config-category-card.is-active .config-category-copy small { color:rgba(255,255,255,.7); }
.config-category-action { grid-column:1 / -1; align-self:end; display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:10px; font-size:11px; font-weight:800; border-top:1px solid #edf0f5; }
.config-category-card.is-active .config-category-action { border-color:rgba(255,255,255,.15); }
.config-category-action b { font-size:18px; font-weight:400; }
.config-modern .config-panels { min-width:0; }
.config-modern .config-panel { position:relative; scroll-margin-top:92px; overflow:hidden; padding:28px; margin-bottom:20px; border-color:var(--config-line); border-radius:20px; box-shadow:0 14px 42px rgba(24,35,59,.065); animation:configPanelIn .22s ease both; }
.config-modern .config-panel[hidden] { display:none!important; }
@keyframes configPanelIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.config-modern .config-panel::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(#7657f6,#ff7358); opacity:.82; }
.config-panel-label { display:flex; align-items:center; gap:13px; margin:-4px 0 22px; padding-bottom:18px; border-bottom:1px solid #edf0f5; }
.config-panel-label > span { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; font-size:21px; border-radius:13px; background:linear-gradient(145deg,#f0efff,#fff2ee); }
.config-panel-label strong,.config-panel-label small { display:block; }
.config-panel-label strong { color:var(--config-ink); font-size:16px; }
.config-panel-label small { margin-top:3px; color:#8a93a5; font-size:12px; }
.config-modern .config-panel > h2 { margin-top:22px; padding-top:4px; color:var(--config-ink); font-size:19px; }
.config-modern .config-panel > .config-panel-label + h2,
.config-modern .config-panel > .config-detail-menu + h2 { margin-top:0; }
.config-modern .config-panel h3 { scroll-margin-top:100px; margin:28px 0 13px; padding:11px 13px; color:#34415e; border-left:3px solid #7657f6; border-radius:0 10px 10px 0; background:#f6f7fc; }
.config-detail-menu { margin:-6px 0 25px; padding:20px; border:1px solid #e6e9f2; border-radius:16px; background:#f8f9fd; }
.config-detail-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:13px; }
.config-detail-heading h3 { padding:0!important; margin:3px 0 0!important; border:0!important; background:transparent!important; font-size:16px; }
.config-detail-heading > span { padding:5px 9px; color:#7559ef; border-radius:999px; background:#ece9ff; font-size:10px; font-weight:800; }
.config-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.config-detail-card { display:grid; grid-template-columns:30px minmax(0,1fr) 14px; align-items:center; gap:9px; min-height:58px; padding:10px 12px; text-align:left; color:#556077; border:1px solid #e1e5ef; border-radius:12px; background:#fff; font-family:inherit; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.config-detail-card:hover { transform:translateY(-1px); color:#5d45d3; border-color:#bdb4f5; background:#faf9ff; }
.config-detail-card > span { display:grid; place-items:center; width:30px; height:30px; color:#7657f6; border-radius:9px; background:#eeebff; font-size:9px; font-weight:900; }
.config-detail-card strong { overflow:hidden; font-size:11px; line-height:1.35; text-overflow:ellipsis; }
.config-detail-card b { font-size:14px; font-weight:400; opacity:.55; }
.config-modern .config-panel input[type=text],.config-modern .config-panel input[type=password],.config-modern .config-panel input[type=number],.config-modern .config-panel input[type=time],.config-modern .config-panel input[type=file],.config-modern .config-panel textarea,.config-modern .config-panel select { border-color:#dfe4ee; border-radius:11px; background:#fbfcfe; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.config-modern .config-panel input:focus,.config-modern .config-panel textarea:focus,.config-modern .config-panel select:focus { border-color:#7657f6; background:#fff; box-shadow:0 0 0 3px rgba(118,87,246,.1); }
.config-modern .config-panel .actions { gap:9px; padding-top:5px; }
.config-modern .config-panel .btn { border-radius:11px; }
.config-modern .config-panel .btn.secondary { border-color:#dfe4ee; background:#fff; }
.config-modern .config-panel .hint { color:#7b8498; line-height:1.55; }
.config-filtered-out { display:none!important; }

@media (max-width: 1040px) {
  .config-category-grid,.config-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .config-modern .config-panel { padding:23px; }
}
@media (max-width: 820px) {
  .config-modern .config-hero { min-height:178px; padding:29px 26px; border-radius:21px; }
  .config-hero h1 { font-size:32px; }
  .config-category-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .config-category-heading p { text-align:left; }
}
@media (max-width: 600px) {
  .config-modern .config-hero { align-items:flex-start; flex-direction:column; gap:20px; padding:25px 21px; }
  .config-hero-meta { display:none; }
  .config-toolbar { top:8px; align-items:stretch; flex-direction:column; gap:5px; padding:8px; }
  .config-search-status { padding:2px 8px 4px; }
  .config-category-section { padding:17px; border-radius:17px; }
  .config-category-grid,.config-detail-grid { grid-template-columns:1fr; }
  .config-category-card { min-height:124px; }
  .config-modern .config-panel { padding:19px 17px; border-radius:16px; }
  .config-panel-label { align-items:flex-start; }
  .config-panel-label small { line-height:1.4; }
}

body.sidebar-collapsed header { width: 76px; }
body.sidebar-collapsed header h1 { padding: 0 4px; }
body.sidebar-collapsed header h1 img { width: 38px; height: 38px; flex: 0 0 38px; }
body.sidebar-collapsed header h1 span,
body.sidebar-collapsed .nav-label { display: none; }
body.sidebar-collapsed header nav button,
body.sidebar-collapsed header nav .nav-link { justify-content: center; padding: 0; }
body.sidebar-collapsed .nav-group-chevron,
body.sidebar-collapsed .nav-submenu { display: none; }
body.sidebar-collapsed main { margin-left: 76px; }

@media (max-width: 820px) {
  header { width: 230px; padding: 16px 12px; flex-wrap: nowrap; gap: 18px; }
  header h1 { width: auto; }
  header nav { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }
  header nav button, header nav .nav-link { border-radius: 11px; }
  #sidebar-toggle { top: 23px; }
  main, body.sidebar-collapsed main { margin-left: 76px; padding-top: 18px; }
  body:not(.sidebar-collapsed) header { box-shadow: 14px 0 40px rgba(18,26,45,.18); }
}
.clone-reel-output video { display:block; width:min(100%,420px); max-height:70vh; border-radius:14px; background:#111; }
.clone-reel-caption { white-space:pre-wrap; padding:14px; border-radius:12px; background:#f5f6fa; font-family:inherit; }
.clone-reel-progress { height:14px; overflow:hidden; border-radius:999px; background:#e7e9f0; margin-top:12px; }
.clone-reel-progress > div { height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#ff5a46,#ff8a67); transition:width .35s ease; }
.clone-reel-progress-label { text-align:right; margin-top:4px; }
.clone-reel-collapsible { border:1px solid #e5e7ef; border-radius:10px; padding:8px; background:#fff; }
.clone-reel-collapsible summary { cursor:pointer; font-weight:600; color:#30384d; }
.clone-reel-collapsible[open] summary { margin-bottom:8px; }
.clone-reel-popup-video { display:block; width:min(82vw,540px); max-height:78vh; background:#111; border-radius:14px; }
.content-auto-switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; position:relative; margin:0; }
.content-auto-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.content-auto-switch-track { width:42px; height:24px; flex:none; border-radius:20px; background:#9ca3af; transition:background .2s; }
.content-auto-switch-track::before { content:''; display:block; width:18px; height:18px; margin:3px; border-radius:50%; background:white; transition:transform .2s; }
.content-auto-switch input:checked + .content-auto-switch-track { background:#16a34a; }
.content-auto-switch input:checked + .content-auto-switch-track::before { transform:translateX(18px); }
.content-auto-switch input:focus-visible + .content-auto-switch-track { outline:2px solid #2563eb; outline-offset:3px; }
.content-auto-switch input:disabled + .content-auto-switch-track { opacity:.5; }

/* Shopee Image Loading Overlay */
.shopee-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 7, 12, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.shopee-loading-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
  border-radius: 20px;
  padding: 32px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  min-width: 420px;
  max-width: 90vw;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.shopee-loading-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.shopee-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #e6e8f0;
  border-top-color: #ff5a3c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.shopee-loading-text {
  flex: 1;
}

.shopee-loading-text h3 {
  font-size: 18px;
  font-weight: 700;
  color: #172033;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.shopee-loading-text p {
  font-size: 14px;
  color: #687086;
  margin: 0;
}

.shopee-progress-container {
  margin-top: 20px;
}

.shopee-progress-bar {
  height: 8px;
  background: #e6e8f0;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.shopee-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5a3c 0%, #ff795f 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(255, 90, 60, 0.4);
}

.shopee-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  color: #687086;
}

.shopee-progress-percent {
  font-weight: 700;
  color: #ff5a3c;
  font-size: 14px;
}

@media (max-width: 600px) {
  .shopee-loading-card {
    min-width: 0;
    padding: 24px 28px;
  }
  
  .shopee-loading-spinner {
    width: 36px;
    height: 36px;
  }
  
  .shopee-loading-text h3 {
    font-size: 16px;
  }
}