/* Floating AI launcher: only hide when chat full page is active */
body:has(#page-chat.active) :is(#cw-fab, #cw-launcher),
body:has(#page-process[data-active-step="2"]) :is(#cw-fab, #cw-launcher),
body:has(#page-process.active[data-active-step="2"]) :is(#cw-fab, #cw-launcher),
body:has([data-proc-step="2"]:not([style*="display: none"]):not([hidden])) :is(#cw-fab, #cw-launcher),
body:has(.pe2-studio) :is(#cw-fab, #cw-launcher),
:is(#cw-fab, #cw-launcher).hidden,
:is(#cw-fab, #cw-launcher)[data-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure Floating Chatbot Icon is ALWAYS visible and placed nicely at bottom right */
:is(#cw-fab, #cw-launcher) {
  position: fixed !important;
  right: 14px !important;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
}

/* Compact controls and roomy groups on phones. No desktop declarations. */
@media (max-width:768px) {
 #content:not(:has(#page-chat.active)) {padding-bottom:calc(85px + env(safe-area-inset-bottom,0px))!important}
 :is(#cw-fab, #cw-launcher) {position:fixed!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;max-height:44px!important;top:auto!important;left:auto!important;right:14px!important;bottom:calc(85px + env(safe-area-inset-bottom,0px))!important;font-size:15px!important;line-height:44px!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;border-radius:50%!important;aspect-ratio:1/1!important;overflow:hidden!important;z-index:99996!important;box-shadow:0 4px 14px rgba(37,99,235,0.32)!important;opacity:0.92}
 #topbar-title {padding-right:8px}
 :is(#cw-fab, #cw-launcher) svg {width:22px!important;height:22px!important}
 #step3-log, #proc-log, .log-box, .proc-log-content {font-size:10px!important;line-height:1.5!important;padding:8px 10px!important}
 #step3-log > div, #proc-log > div, .log-box > div, .proc-log-content > div {margin-bottom:5px!important;line-height:1.5!important}
 #step3-log > div:last-child, #proc-log > div:last-child, .log-box > div:last-child, .proc-log-content > div:last-child {margin-bottom:0!important}
 body:has(#page-chat.active) :is(#cw-fab, #cw-launcher),
 body:has(#page-process[data-active-step="2"]) :is(#cw-fab, #cw-launcher),
 body:has(#page-process.active[data-active-step="2"]) :is(#cw-fab, #cw-launcher),
 body:has([data-proc-step="2"]:not([style*="display: none"]):not([hidden])) :is(#cw-fab, #cw-launcher),
 body:has(.pe2-studio) :is(#cw-fab, #cw-launcher),
 :is(#cw-fab, #cw-launcher).hidden,
 :is(#cw-fab, #cw-launcher)[data-hidden="true"] {display:none!important}
 /* Universal Mobile Typography & Control Sizing (10.5px - 12px) - No All-Caps */
 body, #content, #content>.page {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
   font-size: 11px;
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
 }
 #content>.page :is(h1,h2,h3,.card-title,.cfg-card-title,.step1-card-header h3,.section-title,.avl-heading h2,.aff-inspector-title) {
   font-size: 11px !important;
   font-weight: 600 !important;
   line-height: 1.35 !important;
   text-transform: none !important;
   letter-spacing: normal !important;
   overflow-wrap: anywhere;
 }
 #content>.page :is(h4,h5,h6,.pe2-grp) {
   font-size: 11px !important;
   font-weight: 600 !important;
   line-height: 1.35 !important;
   text-transform: none !important;
   letter-spacing: normal !important;
 }
 #content>.page :is(label,.field label,label.form-label) {
   font-size: 11px !important;
   font-weight: 550 !important;
   line-height: 1.35 !important;
   text-transform: none !important;
   letter-spacing: normal !important;
   margin-bottom: 3px !important;
   white-space: normal;
   height: auto;
 }
 #content>.page :is(small,.proc-help-text,.sub-text,[data-ui-help],.empty-state) {
   font-size: 10px !important;
   line-height: 1.4 !important;
   text-transform: none !important;
   letter-spacing: normal !important;
 }

 /* Compact Inputs & Form Controls (Eliminates oversized inputs across all pages) */
 #content>.page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select) {
   height: 30px !important;
   min-height: 30px !important;
   max-height: 32px !important;
   padding: 3px 8px !important;
   font-size: 11px !important;
   line-height: 1.35 !important;
   border-radius: 6px !important;
   border: 1px solid var(--border, #cbd5e1) !important;
   background: var(--bg-card, #ffffff) !important;
   color: var(--text-main, #0f172a) !important;
   box-sizing: border-box !important;
 }
 .dark #content>.page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select) {
   background: var(--bg3, #202d3d) !important;
   border-color: var(--border, #334155) !important;
   color: var(--text, #f1f5f9) !important;
 }
 #content>.page textarea {
   font-size: 11px !important;
   padding: 6px 8px !important;
   border-radius: 6px !important;
   line-height: 1.4 !important;
   box-sizing: border-box !important;
 }

 /* Standardized, Uniform Buttons (Eliminates oversized buttons & uneven padding) */
 #content>.page :is(button,.btn):not(.mobile-nav-item):not(.toggle):not(.pe2-range-handle):not(.pe2-handle):not(.close-btn):not(.avl-delete-icon):not(.proc-help):not(.btn-icon):not(#user-library-open) {
   min-height: 28px !important;
   height: auto;
   padding: 3px 9px !important;
   font-size: 11px !important;
   font-weight: 600 !important;
   border-radius: 6px !important;
   gap: 5px !important;
   line-height: 1.3 !important;
   box-sizing: border-box !important;
 }
 #content>.page :is(button,.btn,.card-title,.cfg-card-title) svg {width:13px!important;height:13px!important;flex-shrink:0}
 #content>.page :is(button,h1,h2,h3) .material-symbols-outlined {font-size:13px!important}

 /* Icon-Only Action Buttons */
 #content>.page :is(.btn-icon, .step1-card-toggle-btn, .mobile-icon-action, button.icon-only) {
   width: 28px !important;
   min-width: 28px !important;
   max-width: 28px !important;
   height: 28px !important;
   min-height: 28px !important;
   max-height: 28px !important;
   padding: 0 !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   border-radius: 6px !important;
 }

 /* Clear Section Backgrounds, Borders, and Spacing */
 #content>.page :is(.card, .cfg-card, .cfg-feature-block, .aff-card-box) {
   padding: 8px 10px !important;
   margin-bottom: 6px !important;
   border-radius: 10px !important;
   border: 1px solid var(--border, #e2e8f0) !important;
   background: var(--bg-card, #ffffff) !important;
 }
 .dark #content>.page :is(.card, .cfg-card, .cfg-feature-block, .aff-card-box) {
   border-color: var(--border, #334155) !important;
   background: var(--bg-card, #182230) !important;
 }
 /* Eliminate double margin when cards/feature-blocks are in flex or grid containers */
 :is(.grid, .flex, [class*="gap-"], .step1-grid-layout, #step1-grid-container, .step3-layout, .proc-step5-grid) > :is(.card, .cfg-card, .cfg-feature-block, .aff-card-box),
 :is(.grid, .flex, .step1-grid-layout, #step1-grid-container) > div > :is(.card, .cfg-card, .cfg-feature-block, .aff-card-box),
 #page-process #step1-grid-container .card,
 #page-process .step1-grid-layout .card,
 #page-process [data-proc-step] .card {
   margin-bottom: 0 !important;
 }
 /* Compact gap between cards across all mobile layouts */
 :is(.step1-grid-layout, #step1-grid-container, .step3-layout, .proc-step5-grid, #page-download > .grid) {
   gap: 6px !important;
 }
 #page-process :is(.flex-col, .grid):has(> .card) {
   gap: 6px !important;
 }
 #content>.page .field {margin-bottom:8px}
 #content>.page .field.mb-0 {margin-bottom:0}
 #content>.page :is(.btn-group,.card-actions) {display:flex;flex-wrap:wrap;gap:6px;min-width:0}
 #content>.page .card-header {display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:6px!important;margin-bottom:6px!important}
 #content>.page .card-actions {margin-left:auto;max-width:100%}
 #content>.page .alert-info {font-size:10px!important;line-height:1.45;overflow-wrap:anywhere;padding:6px 9px!important;border-radius:6px!important}
 #content>.page .table-wrap {width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
 #content>.page :is(th,td) {font-size:11px;padding:6px 8px}

 /* Step 1 Quick Options Bar */
 .proc-step1-quick-options {
   display: grid !important;
   grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
   gap: 4px !important;
 }
 .proc-step1-quick-options :is(.proc-pill-btn, label) {
   min-height: 28px !important;
   padding: 3px 4px !important;
   border-radius: 6px !important;
   font-size: 10px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 4px !important;
 }
 .proc-step1-quick-options .proc-pill-text {
   display: flex !important;
   flex-direction: row !important;
   gap: 2px !important;
   font-size: 10px !important;
   white-space: nowrap !important;
 }

 #page-user .provider-bar {display:flex;flex-wrap:wrap;gap:8px;align-items:center}
 #page-user #current-provider-badge {grid-column:1/-1;font-size:10px}
 #page-user #provider-select {width:100%!important;min-width:0;font-size:11px}
 #page-user .card-title {flex:1;min-width:0}
 #page-user .user-discovery-layout {gap:10px}

 #page-publish .publish-shell {gap:10px}
 #page-publish .publish-nav .publish-tab {min-height:34px;font-size:11px;padding:6px 8px;gap:6px}
 #page-publish .platform-tabs-header {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #page-publish .platform-tab {min-width:0;padding:6px 6px;font-size:11px;gap:5px;flex-wrap:nowrap;justify-content:center}
 #page-publish .platform-tab svg {width:12px;height:12px;flex:none}
 #page-publish .ai-controls {display:flex;flex-wrap:wrap;gap:8px}
 #page-publish .input-with-button {gap:6px}
 #page-publish .input-with-button input {width:0;flex:1 1 0}
 #page-publish #pub-recent-select-wrap>div {display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:8px!important}
 #page-publish #pub-recent-select-wrap>div>span {font-size:11px!important}
 #page-publish #pub-recent-videos {width:100%;min-width:0;font-size:11px!important;text-overflow:ellipsis}
 #page-publish .input-with-button:has(#batch-pub-info) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #page-publish #batch-pub-info {grid-column:1/-1;width:100%;min-width:0}
 #page-publish .input-with-button:has(#batch-pub-info)>button {width:100%!important;min-width:0!important;min-height:32px;height:auto;padding:6px 8px;gap:6px;white-space:normal;justify-content:center}

 #page-transcribe {padding:6px 8px 96px 8px!important}
 #page-transcribe .tr-panel {padding:10px 12px!important;border-radius:12px;margin-bottom:8px;scroll-margin-top:54px}
 #page-transcribe .tr-panel.tr-collapsed> :not(.tr-panel-head) {display:none!important}
 #page-transcribe .tr-panel.tr-collapsed .tr-panel-head {margin-bottom:0!important;padding-bottom:0!important;border-bottom:none!important}
 #page-transcribe .tr-panel.tr-collapsed .tr-mob-toggle svg {transform:rotate(180deg)}
 #page-transcribe .tr-panel-head {padding-bottom:8px!important;margin-bottom:8px!important}
 #page-transcribe .tr-panel-head-title h3 {font-size:11px!important;font-weight:600}
 #page-transcribe .tr-icon-badge {width:26px!important;height:26px!important;border-radius:7px!important}
 #page-transcribe .tr-icon-badge svg {width:14px!important;height:14px!important}
 #page-transcribe .tr-field label {font-size:11px!important;font-weight:600!important;margin-bottom:3px!important;letter-spacing:0.02em}
 #page-transcribe .tr-field input, #page-transcribe .tr-field select, #page-transcribe .tr-input {height:32px!important;min-height:32px!important;font-size:11px!important;padding:4px 8px!important;border-radius:8px!important}
 #page-transcribe textarea#tr-test-script {min-height:48px!important;height:54px!important;font-size:11px!important;padding:6px 8px!important}
 #page-transcribe .tr-btn-secondary {height:30px;font-size:11px;padding:2px 8px;border-radius:7px}
 #page-transcribe #tr-btn-test-voice {height:32px!important;min-height:32px!important;font-size:11px!important;padding:0 12px!important;border-radius:8px}
 #page-transcribe #btn-tr-tts {height:34px!important;min-height:34px!important;font-size:11px!important;font-weight:600;border-radius:10px;margin-top:2px}
 #page-transcribe #btn-tr-transcribe {height:34px!important;min-height:34px!important;font-size:11px!important;font-weight:600;border-radius:10px;margin-top:2px}
 #page-transcribe .tr-nav-pill {font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;border:1px solid var(--border,#e2e8f0);background:var(--bg-card,#ffffff);color:var(--text-main,#0f172a);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:all .15s}
 #page-transcribe .tr-nav-pill:hover, #page-transcribe .tr-nav-pill.active {background:var(--primary,#3b82f6);color:#ffffff;border-color:var(--primary,#3b82f6)}
 #page-transcribe .tr-sub-editor-header {display:none!important}
 #page-transcribe .tr-sub-row {display:grid;grid-template-columns:26px 1fr 1fr 30px;gap:6px;padding:8px 6px;align-items:center;border-bottom:1px solid var(--border,#e2e8f0)}
 #page-transcribe .tr-sub-row>.tr-sub-index {grid-column:1;grid-row:1;font-size:10px;font-weight:700;color:var(--text-muted,#64748b)}
 #page-transcribe .tr-sub-row>.tr-sub-start {grid-column:2;grid-row:1;font-size:11px;height:30px;padding:4px 6px;min-width:0;text-align:center}
 #page-transcribe .tr-sub-row>.tr-sub-end {grid-column:3;grid-row:1;font-size:11px;height:30px;padding:4px 6px;min-width:0;text-align:center}
 #page-transcribe .tr-sub-row>.tr-sub-actions, #page-transcribe .tr-sub-row>div:last-child {grid-column:4;grid-row:1;display:flex;justify-content:center}
 #page-transcribe .tr-sub-row>.tr-sub-text-input {grid-column:1/-1;grid-row:2;width:100%;min-height:48px;line-height:1.45;font-size:11px;font-family:inherit;resize:vertical;padding:6px 8px}
 #page-transcribe .tr-sub-del-btn {width:28px;height:28px;padding:0;min-height:28px!important}
 .ai-fab, .chat-fab, #ai-chat-btn, .ai-assistant-btn {bottom:68px!important;right:10px!important;z-index:35!important}

 #page-config .cfg-card-header {flex-wrap:wrap;gap:8px;align-items:center}
 #page-config .cfg-card-header:has(>div.flex)> .cfg-card-title {flex-basis:calc(100% - 40px);order:0}
 #page-config .cfg-card-header:has(>div.flex)>div.flex {order:2;width:100%;flex-wrap:wrap;gap:8px}
 #page-config .cfg-card-header>.mobile-accordion-toggle {order:1}
 #page-config .cfg-card-header .btn {min-height:30px}
 #page-config .cfg-input-btn-group {gap:6px;min-width:0}
 #page-config .cfg-input-btn-group input {width:0;flex:1 1 0}
 #page-config .cfg-input-btn-group button {flex:0 0 auto;max-width:42%;font-size:10px}
 #page-config .config-savebar {position:static;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
 #page-config .config-savebar>div {font-size:10px;line-height:1.45}
 #page-config .config-savebar>.btn {width:100%;justify-content:center;white-space:nowrap}

 #page-providers {padding:10px!important}
 #page-providers #providers-list-view {display:flex;flex-direction:column;gap:20px}
 #page-providers #providers-list-view>div {margin-top:0}
 #page-providers :is(#oauth-grid,#llm-grid,#speech-grid,#search-grid) {gap:10px;margin-top:10px}
 #page-providers #provider-details-view {min-width:0}
 #page-providers #provider-details-view>div {min-width:0;max-width:100%}
 #page-quota {padding:10px!important}
 #page-quota .material-symbols-outlined {font-size:14px!important}
 #page-quota>div>div:first-child {margin-bottom:12px}
 #page-proxies .card-actions {justify-content:flex-start;width:100%;margin-left:0}
 #page-proxies .card-actions>.btn {flex:0 1 auto;max-width:100%}
 #page-proxies #router-summary {flex:1 0 100%;margin-right:0!important}
 #page-proxies code {overflow-wrap:anywhere}

 /* Full Chat Page on mobile: seamless layout with responsive drawer, full width main area, and clear inputs */
 body:has(#page-chat.active) #content {padding:0!important;overflow:hidden!important}
 #page-chat.active {margin:0!important;max-width:100%!important;width:100%!important;height:calc(100dvh - 50px)!important;min-height:0!important;display:flex!important;flex-direction:column!important;position:relative!important;overflow:hidden!important;background-color:var(--bg,#f8fafc)!important}
 .dark #page-chat.active {background-color:#090d16!important}
 #page-chat #chat-sidebar {position:absolute!important;top:0!important;bottom:0!important;left:0!important;width:min(85vw,300px)!important;max-width:100%!important;z-index:50!important;background:#ffffff!important;box-shadow:0 10px 40px rgba(0,0,0,0.25)!important}
 .dark #page-chat #chat-sidebar {background:#0f172a!important}
 #page-chat:not(.chat-sessions-open) #chat-sidebar {display:none!important}
 #page-chat.chat-sessions-open #chat-sidebar {display:flex!important}
 #page-chat .chat-mobile-backdrop {display:none}
 #page-chat.chat-sessions-open .chat-mobile-backdrop {display:block!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,0.45)!important;z-index:45!important}
 #page-chat #chat-main-area {flex:1 1 100%!important;min-width:0!important;width:100%!important;max-width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
 #page-chat #chat-navbar {padding:6px 10px!important;min-height:72px!important;gap:4px!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;position:relative!important}
 #page-chat #chat-navbar > div:first-child {order:2!important;width:100%!important;flex:0 0 100%!important;gap:4px!important;overflow-x:auto!important;scrollbar-width:none!important}
 #page-chat #chat-navbar > div:last-child {order:1!important;width:100%!important;display:flex!important;justify-content:flex-end!important;gap:6px!important;padding-left:36px!important}
 #page-chat #chat-navbar .chat-tab-btn {font-size:11px!important;padding:4px 7px!important;flex-shrink:0!important}
 #page-chat #chat-sidebar-toggle {position:absolute!important;top:8px!important;left:8px!important;z-index:10!important}
 #page-chat .chat-tool-panel[data-tool="chat"] {flex:1 1 0%!important;display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;overflow:hidden!important}
 #page-chat #chat-messages {flex:1 1 0%!important;overflow-y:auto!important;padding:12px 10px!important;min-height:0!important;-webkit-overflow-scrolling:touch!important}
 #page-chat #chat-empty {padding:16px 8px!important;gap:0!important}
 #page-chat #chat-empty h2 {font-size:11px!important;line-height:1.5!important;max-width:280px!important;margin:8px auto 12px!important}
 #page-chat #chat-empty>div:first-child {width:40px!important;height:40px!important;border-radius:12px!important;margin-bottom:4px!important}
 #page-chat #chat-empty>div:first-child svg {width:20px!important;height:20px!important}
 #page-chat #chat-empty .grid {grid-template-columns:1fr!important;gap:8px!important;width:100%!important}
 #page-chat .chat-starter-card {padding:10px 12px!important;border-radius:10px!important}
 #page-chat .chat-starter-card p {font-size:10px!important}
 #page-chat #chat-input {font-size:11px!important;min-height:40px!important}

 /* Match the compact preview controls in remaining editor actions. */
 #page-process :is(.editor-mobile-tools,.editor-mobile-dialog) button svg {width:12px;height:12px;flex-shrink:0}
 #page-process .editor-mobile-dialog #aff-panel .aff-number-wrap input {font-size:11px!important;padding:0 2px}

 /* Forms opened from real account/provider data must fit a short viewport. */
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) {box-sizing:border-box;padding:12px!important;max-width:100vw}
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) :is(h3,h4) {font-size:11px!important;line-height:1.4;overflow-wrap:anywhere}
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) :is(button,.btn) {font-size:11px!important;line-height:1.4;min-height:30px;white-space:normal;gap:6px}
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) button svg {width:12px!important;height:12px!important;flex:none}
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) :is(input:not([type=checkbox]):not([type=range]),select,textarea) {font-size:11px!important;min-width:0;max-width:100%;box-sizing:border-box}
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) label {font-size:11px!important;letter-spacing:0;line-height:1.4}
 :is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal,#chat-settings-modal) :is(p,code) {overflow-wrap:anywhere}
 #credential-modal-content {display:flex;flex-direction:column;min-width:0;max-width:440px;width:100%;max-height:calc(100dvh - 24px);margin:0;padding:12px;box-sizing:border-box;overflow:hidden}
 #credential-modal-content>div {min-width:0;flex:none}
 #credential-modal-content>div.space-y-4.mt-5 {flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin-top:10px;padding-right:2px}
 #credential-modal-content>div:first-child {padding-bottom:10px;gap:8px}
 #credential-modal-content>div:first-child>div {min-width:0;gap:8px}
 #credential-modal-content>div:first-child>div>div:first-child {width:28px;height:28px;flex:none}
 #credential-modal-content>div:first-child>button {flex:none;min-width:30px}
 #modal-mode-tabs {gap:6px;margin-top:10px}
 #modal-single-fields .field {margin-bottom:10px}
 #modal-actions {margin-top:10px;padding-top:10px;gap:8px}
 #modal-actions button {min-width:0;padding:6px 8px}
 #modal-conn-priority-field label {text-transform:none}
 #add-facebook-account-form {display:flex;flex-direction:column;max-height:calc(100dvh - 24px);min-width:0;box-sizing:border-box}
 #add-facebook-account-form>div {flex:none;padding:12px}
 #add-facebook-account-form>div:nth-child(2) {flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 #add-facebook-account-form>div:first-child>div:first-child {gap:8px}
 #add-facebook-account-form>div:first-child>div:first-child>div:first-child {width:30px;height:30px;flex:none}
 #add-facebook-account-form>div:last-child {gap:8px;flex-wrap:wrap}
 #add-facebook-account-form>div:last-child button {padding:6px 10px;height:auto;min-width:0}
 #add-douyin-account-modal>.sch-modal-box {box-sizing:border-box;width:100%!important;max-width:min(540px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px);padding:12px!important;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
 #add-douyin-account-modal .sch-modal-box>div {min-width:0;max-width:100%;box-sizing:border-box}
 #add-douyin-account-modal .sch-modal-box>div:first-child {gap:8px;margin-bottom:10px!important;padding-bottom:10px!important}
 #add-douyin-account-modal .sch-modal-box>div:first-child>div {font-size:11px!important;min-width:0}
 #add-douyin-account-modal .sch-modal-box>div:nth-child(2) {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
 #add-douyin-account-modal .sch-modal-box>div:nth-child(2) button {min-width:0;width:100%;max-width:100%;padding:6px!important;white-space:normal!important;height:auto!important;min-height:42px!important;max-height:none!important;line-height:1.4!important;overflow-wrap:anywhere;justify-content:center;text-align:center}
 #add-douyin-account-modal :is(#panel-dy-browser,#panel-dy-paste)>div:last-child {flex-wrap:wrap}
 #chat-settings-modal>div {max-height:calc(100dvh - 24px);min-width:0;width:100%}
 #chat-settings-modal>div>div {padding:10px 12px;min-width:0}
 #chat-settings-modal .chat-panel-scroll {min-height:0;overscroll-behavior:contain}
 #chat-settings-modal>div>div:first-child {gap:8px;flex:none}
 #chat-settings-modal>div>div:first-child>div {min-width:0;gap:6px}
 #chat-settings-modal>div>div:first-child>button {flex:none;min-width:30px}
 #chat-settings-modal>div>div:last-child {flex:none;gap:8px;flex-wrap:wrap}
 #provider-details-view>div {padding:12px}
 #connections-list-header {padding:8px 0;font-size:10px;gap:8px}
 #connections-list-header>span {margin-left:0;min-width:0}
 #connections-list-rows>div {padding:10px 0}
 #connections-list-rows>div>div.flex {flex-wrap:wrap;gap:8px;min-width:0}
 #connections-list-rows>div>div.flex>div:nth-child(3) {flex:1 1 0;min-width:0}
 #connections-list-rows>div>div.flex>div:last-child {flex:1 0 100%;justify-content:flex-end;gap:12px;padding-top:4px}
 #connections-list-rows .truncate {white-space:normal;overflow-wrap:anywhere;font-size:11px}
 #connections-list-rows .material-symbols-outlined {font-size:14px!important}
 body:has(:is(#credential-modal,#add-facebook-account-modal,#add-douyin-account-modal)[style*="display: flex"]) #cw-fab {display:none!important}

 /* Phone workspace: icon actions and plain surfaces, without nested outlines. */
 #content {padding-left:8px!important;padding-right:8px!important}
 /* Only the editing workspace's outer frame loses its outline. */
 #page-process .pe2-editor.pe2-studio {position:relative;border:0!important;box-shadow:none!important;padding:0!important;background:transparent}
 #page-process .pe2-editor.pe2-studio .pe2-body {gap:8px}
 #page-process #batch-queue-list:has(>.empty-state:only-child) {min-height:80px!important}
 /* Step 2 Mobile Tabs: Full-width clean horizontal scroll, hide redundant artificial floating tools (fixes Image 5) */
 #page-process .editor-mobile-tools {display:none!important;visibility:hidden!important;pointer-events:none!important}
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical {
   margin:4px 0 8px 0!important;margin-left:0!important;padding:10px 16px 10px 10px!important;gap:6px!important;
   width:100%!important;max-width:100%!important;
   display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
   align-items:center!important;
   overflow-x:auto!important;box-sizing:border-box!important;
   background:var(--bg2,#fff)!important;border-bottom:1px solid var(--border,#e2e8f0)!important;
   border-radius:8px 8px 0 0!important;
   scrollbar-width:none!important;
   scroll-behavior:smooth!important;
   scroll-padding:0 16px!important;
   -webkit-overflow-scrolling:touch!important;
 }
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical::-webkit-scrollbar {display:none!important;width:0!important;height:0!important}
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical::after {
   content:''!important;flex:0 0 16px!important;width:16px!important;min-width:16px!important;height:1px!important;display:block!important;
 }
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab[data-pe2tab="object-track"],
 #page-process [data-pe2tab="object-track"],
 #page-process [data-pe2pane="object-track"] {display:none!important}
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab {
   flex:0 0 auto!important;min-width:44px!important;width:auto!important;
   height:auto!important;min-height:42px!important;max-height:none!important;
   padding:6px 10px!important;border-radius:8px!important;border:1px solid transparent!important;
   display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
   gap:3px!important;box-sizing:border-box!important;margin:1px 0!important;
 }
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab svg {width:16px!important;height:16px!important;flex:none}
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab:has(.mobile-tab-caption) > span:not(.mobile-tab-caption) {
   display:none!important;
 }
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab > .mobile-tab-caption,
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab:not(:has(.mobile-tab-caption)) > span {
   display:block!important;line-height:1.25!important;font-size:11px!important;font-weight:550!important;white-space:nowrap!important;text-transform:none!important;padding:0 2px!important;
 }
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab.active {
   background:#eff6ff!important;border-color:#3b82f6!important;color:#1d4ed8!important;box-shadow:0 0 0 1px rgba(59,130,246,0.3)!important;
 }
 .dark #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical {background:#182230!important;border-bottom-color:#334155!important}
 .dark #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab.active {background:rgba(59,130,246,0.22)!important;border-color:#60a5fa!important;color:#93c5fd!important}
 #page-process .pe2-editor.pe2-studio #pe2-tabs-vertical .pe2-vtab.active::after {display:none}
 #page-process .editor-mobile-dialog>header .mobile-icon-action {border:0;box-shadow:none;background:transparent}
 #page-process .editor-mobile-dialog>header .mobile-icon-action:focus-visible {outline:1px solid #94a3b8;outline-offset:-3px}
 #page-process .pe2-editor.pe2-studio #editor-toggle-timeline {width:30px!important;min-width:30px!important;font-size:0!important;gap:0;padding:6px!important}
 #page-process #editor-toggle-timeline::before {display:none!important}
 #page-process #proc-wiz-nav {
   position: sticky !important;
   top: 0 !important;
   z-index: 25 !important;
   display: grid !important;
   grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   gap: 4px !important;
   padding: 6px 4px !important;
   margin-top: 0 !important;
   margin-bottom: 8px !important;
   background: var(--bg2, #fff) !important;
   border: 1px solid var(--border, #e2e8f0) !important;
   border-radius: 14px !important;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
 }
 #page-process .proc-wiz-line { display: none !important; }
 #page-process .proc-wiz-item {
   display: flex !important;
   min-height: 44px !important;
   justify-content: center !important;
   align-items: center !important;
   flex-direction: column !important;
   padding: 3px 2px !important;
   gap: 3px !important;
   border-radius: 10px !important;
   transition: all 0.15s ease !important;
   text-align: center !important;
   min-width: 0 !important;
 }
 #page-process .proc-wiz-item :is(.proc-wiz-lbl) { display: none !important; }
 #page-process .proc-wiz-item>.proc-wiz-num {
   display: flex !important;
   width: 20px !important;
   height: 20px !important;
   font-size: 10.5px !important;
   font-weight: 700 !important;
   border-width: 1px !important;
   box-shadow: none !important;
   align-items: center !important;
   justify-content: center !important;
   flex-shrink: 0 !important;
 }
 #page-process .proc-wiz-item>.mobile-step-icon { display: none !important; }
 #page-process .proc-wiz-item::after {
   content: attr(data-mobile-label) !important;
   font-size: 11px !important;
   line-height: 1.2 !important;
   white-space: nowrap !important;
   font-weight: 600 !important;
 }
 #page-process .proc-wiz-item.active {
   background: var(--accent-light, #eff6ff) !important;
   opacity: 1 !important;
 }
 #page-process .proc-wiz-item.active::after {
   color: var(--accent, #2563eb) !important;
   font-weight: 700 !important;
 }
 #page-process .proc-wiz-item.done::after {
   color: var(--text-main, #334155) !important;
   font-weight: 600 !important;
 }
 #page-process .proc-wiz-item:not(.active):not(.done)::after {
   color: var(--text-muted, #94a3b8) !important;
   font-weight: 500 !important;
 }
 #page-process #sub-preview-placeholder>div>div:first-child {display:none!important}
 #page-process #sub-preview-placeholder>div::before {content:'Chọn video để xem trước';font-size:11px;line-height:1.5}
 #page-process .pe2-player-heading {display:none!important}
 #page-process .pe2-editor.pe2-studio #pe2-tl-track {--pe2-track-gutter:0px;margin-left:0!important;margin-right:0!important}
 #page-process :is(.pe2-source-track-label,.pe2-track-gutter) {display:none!important}
 #page-process .editor-mobile-dialog .pt-template span {font-size:10px;padding:4px 0}
 #page-process #proc-shared-config-card>.aff-only {font-size:0!important;line-height:0;margin-bottom:4px!important}
 #page-process #proc-shared-config-card>.aff-only {display:none!important}
 #page-user #platform-badge {display:none}
 #page-user .card-title {flex:1}
 #page-process .pt-actions {gap:8px;margin:8px 0}
 /* Strictly single row: [Play][Cam][v] on left, [0:00 / --:--] in center, [-][100%][+] on right - NEVER WRAP */
  #page-process .pe2-editor.pe2-studio .pe2-player-transport,
  #page-process .pe2-player-transport,
  .pe2-player-transport {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 0 10px !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-transport-playback,
  .pe2-transport-playback {
    order: 1 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-player-transport .pe2-transport-playback .btn,
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #editor-toggle-timeline,
  .pe2-player-transport #editor-toggle-timeline,
  .pe2-player-transport #pe2-play-btn,
  .pe2-player-transport #pe2-frame-btn {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #pe2-play-btn,
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #pe2-frame-btn,
  .pe2-player-transport #pe2-play-btn,
  .pe2-player-transport #pe2-frame-btn {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #pe2-play-btn:hover,
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #pe2-frame-btn:hover,
  .pe2-player-transport #pe2-play-btn:hover,
  .pe2-player-transport #pe2-frame-btn:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #editor-toggle-timeline,
  .pe2-player-transport #editor-toggle-timeline {
    background: var(--bg2, #ffffff) !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    color: var(--text, #334155) !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-player-transport #editor-toggle-timeline:hover,
  .pe2-player-transport #editor-toggle-timeline:hover {
    background: var(--bg3, #f8fafc) !important;
    border-color: var(--accent, #6366f1) !important;
    color: var(--accent, #6366f1) !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-transport-time,
  .pe2-transport-time {
    order: 2 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-radius: 6px !important;
    background: var(--bg2, #ffffff) !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  #page-process .pe2-editor.pe2-studio #pe2-ts-input {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    font-family: ui-monospace, monospace !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--accent, #2563eb) !important;
    font-weight: 600 !important;
    outline: none !important;
    box-shadow: none !important;
  }
  #page-process .pe2-editor.pe2-studio #pe2-tl-dur {
    font-size: 10.5px !important;
    line-height: 22px !important;
    color: var(--text-muted, #64748b) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: ui-monospace, monospace !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-transport-zoom,
  .pe2-transport-zoom {
    order: 3 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-transport-zoom :is(select, .pe2-quick-fit, .pe2-quick-aspect, #proc-preview-aspect, #proc-content-aspect-mode) {
    display: none !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-transport-zoom button {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    background: var(--bg2, #ffffff) !important;
    color: var(--text, #334155) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }
  #page-process .pe2-editor.pe2-studio .pe2-transport-zoom button:hover,
  #page-process .pe2-editor.pe2-studio #pe2-zoom-val:hover {
    background: var(--bg3, #f8fafc) !important;
    border-color: var(--accent, #6366f1) !important;
  }
  #page-process .pe2-editor.pe2-studio #pe2-zoom-val {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 44px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 26px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: ui-monospace, monospace !important;
    padding: 0 6px !important;
    margin: 0 !important;
    text-align: center !important;
    background: var(--bg2, #ffffff) !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-radius: 6px !important;
    color: var(--text, #1e293b) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
  .dark #page-process .pe2-editor.pe2-studio .pe2-transport-time,
  .dark .pe2-transport-time {
    background: var(--bg3, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }
  .dark #page-process .pe2-editor.pe2-studio #pe2-ts-input {
    color: #60a5fa !important;
  }
  .dark #page-process .pe2-editor.pe2-studio #pe2-tl-dur {
    color: #94a3b8 !important;
  }
  .dark #page-process .pe2-editor.pe2-studio .pe2-transport-zoom button,
  .dark #page-process .pe2-editor.pe2-studio #pe2-zoom-val,
  .dark #page-process .pe2-editor.pe2-studio .pe2-player-transport #editor-toggle-timeline {
    background: var(--bg3, #1e293b) !important;
    border-color: var(--border, #334155) !important;
    color: var(--text, #f1f5f9) !important;
  }
  .pe2-panel-actions button[onclick*="procWizStep2Continue"]:nth-of-type(n+2),
 .pe2-panel-actions .pe2-continue-top ~ .pe2-continue-top {display:none!important}
 #page-process .pe2-editor.pe2-studio .pe2-tl-controls .btn {height:28px!important;min-height:28px!important;padding:0 7px!important;border-radius:6px!important;font-size:11px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
 /* Dong bo padding top 3px cho tat ca cac buoc cua page-process de tranh sat tren / tut xuong duoi */
 #content:has(#page-process),
 #content:has(#page-process.active) {
   padding-top: 3px !important;
   padding-left: 6px !important;
   padding-right: 6px !important;
   box-sizing: border-box !important;
 }
 #page-process {
   padding-top: 0 !important;
   margin-top: 0 !important;
 }
  /* Bat buoc chi hien thi step tuong ung voi data-active-step, an triet de cac step con lai */
  #page-process[data-active-step="1"] > :is([data-proc-step="2"], [data-proc-step="3"], [data-proc-step="4"]),
  #page-process[data-active-step="2"] > :is([data-proc-step="1"], [data-proc-step="3"], [data-proc-step="4"]),
  #page-process[data-active-step="3"] > :is([data-proc-step="1"], [data-proc-step="2"], [data-proc-step="4"]),
  #page-process[data-active-step="4"] > :is([data-proc-step="1"], [data-proc-step="2"], [data-proc-step="3"]),
  #page-process:not([data-active-step="2"]) > [data-proc-step="2"],
  #page-process:not([data-active-step]) > :is([data-proc-step="2"], [data-proc-step="3"], [data-proc-step="4"]) {
    display: none !important;
  }
  #page-process[data-active-step="1"] > [data-proc-step="1"],
  #page-process:not([data-active-step]) > [data-proc-step="1"] {
    display: block !important;
  }

  /* Mobile studio: Video expands to take all remaining space, timeline strictly at bottom, edge-to-edge */
  #content:has(#page-process.active[data-active-step="2"]) {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
   /* A saved editor step must not reveal an inactive page over Affiliate. */
   #page-affiliate.active:has(#page-process.active[data-active-step="2"]),
   #aff-process-host:has(#page-process.active[data-active-step="2"]),
   #page-process.active[data-active-step="2"] {
     display: flex !important;
     flex-direction: column !important;
     flex: 1 1 0% !important;
     height: 100% !important;
     max-height: 100% !important;
     min-height: 0 !important;
     overflow: hidden !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   #page-process[data-active-step="2"]>[data-proc-step="2"] {
     display: flex !important;
     flex-direction: column !important;
     flex: 1 1 0% !important;
     height: 100% !important;
     max-height: 100% !important;
     min-height: 0 !important;
     overflow: hidden !important;
     padding: 0 !important;
     margin: 0 !important;
   }
   .pe2-editor.pe2-studio,
   #page-process .pe2-editor.pe2-studio {
     display: flex !important;
     flex-direction: column !important;
     flex: 1 1 0% !important;
     height: 100% !important;
     max-height: 100% !important;
     min-height: 0 !important;
     overflow: hidden !important;
     border: none !important;
     background: transparent !important;
     margin: 0 !important;
     padding: 0 !important;
   }
   .pe2-editor.pe2-studio .pe2-body,
   #page-process .pe2-editor.pe2-studio .pe2-body {
     display: flex !important;
     flex-direction: column !important;
     flex: 1 1 0% !important;
     height: 100% !important;
     max-height: 100% !important;
     min-height: 0 !important;
     gap: 0 !important;
     overflow: hidden !important;
     margin: 0 !important;
     padding: 0 !important;
   }
   .pe2-editor.pe2-studio .pe2-center,
   #page-process .pe2-editor.pe2-studio .pe2-center {
     display: flex !important;
     flex-direction: column !important;
     flex: 1 1 0% !important;
     min-height: 120px !important;
     height: 100% !important;
     max-height: none !important;
     overflow: hidden !important;
     order: 1 !important;
     background: var(--bg2, #fff) !important;
     border: none !important;
     border-radius: 0 !important;
     box-shadow: none !important;
     margin-bottom: 0 !important;
   }
   .pe2-editor.pe2-studio .pe2-screen,
   #page-process .pe2-editor.pe2-studio .pe2-screen {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     flex: 1 1 0% !important;
     height: 100% !important;
     min-height: 260px !important;
     max-height: none !important;
     padding: 6px !important;
     overflow: hidden !important;
     box-sizing: border-box !important;
   }
   .pe2-screen #proc-preview-col,
   .pe2-screen #proc-preview-row,
   .pe2-screen #sub-preview-wrap {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     height: 100% !important;
     width: 100% !important;
     max-height: 100% !important;
     max-width: 100% !important;
     flex: 1 1 0% !important;
     min-height: 0 !important;
   }
   #page-process .pe2-editor.pe2-studio .pe2-body>#pe2-panel,
   #page-process .pe2-editor.pe2-studio .pe2-body>.pe2-media-library,
   #pe2-panel:not(.editor-mobile-dialog #pe2-panel):not(.editor-mobile-dialog-content #pe2-panel) {
     display: none !important;
   }
   .editor-mobile-dialog #pe2-panel,
   .editor-mobile-dialog-content #pe2-panel {
     display: block !important;
   }
   #page-process .pe2-editor.pe2-studio #pe2-timeline,
   .pe2-editor #pe2-timeline {
     display: block !important;
     position: relative !important;
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
     z-index: 30 !important;
     flex: 0 0 auto !important;
     margin-top: auto !important;
     margin-bottom: 0 !important;
     order: 2 !important;
     border: none !important;
     border-top: 1px solid var(--border, #e2e8f0) !important;
     border-radius: 0 !important;
     background: var(--bg2, #fff) !important;
     box-shadow: none !important;
     width: 100% !important;
     padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
   }
  #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio.editor-timeline-hidden #pe2-timeline {display:none!important}
  #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio #pe2-tl-track {height:var(--timeline-user-height,140px)!important;min-height:100px!important;max-height:480px!important;margin:4px 6px 14px!important;overflow-x:auto!important;overflow-y:hidden!important}
  #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio .pe2-tl-controls {padding:4px 8px!important;min-height:30px!important}
  #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio #pe2-timeline-resize {display:flex!important;align-items:center;justify-content:center;height:14px!important;min-height:14px;cursor:ns-resize;touch-action:none;user-select:none}
  #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio #pe2-timeline-resize span {width:44px!important;height:4px!important;border-radius:4px!important;background:var(--border,#cbd5e1)!important}
  :is(#page-publish,#page-process) .platform-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  :is(#page-publish,#page-process) .platform-tab>span:has(svg) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  :is(#page-publish,#page-process) .platform-tab>span:has(svg)+span {
    display: inline-block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }
  :is(#page-publish,#page-process) .platform-tab svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    flex: none !important;
  }
  #page-scheduler .sch-platform-toggle svg {
    display: block;
    width: 16px !important;
    height: 16px !important;
    flex: none;
  }

 /* Step 1 Platform Pills (YouTube, TikTok, Facebook): Hien thi ro ten va chu dam tren mobile */
 #page-process [id^="step1-pub-pill-"] {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   padding: 5px 8px !important;
   min-height: 32px !important;
   min-width: 0 !important;
   border-radius: 10px !important;
   font-size: 10.5px !important;
   font-weight: 700 !important;
   gap: 4px !important;
 }
 #page-process [id^="step1-pub-pill-"] > span:first-child {
   display: flex !important;
   align-items: center !important;
   gap: 4.5px !important;
   min-width: 0 !important;
   font-size: 10.5px !important;
   font-weight: 700 !important;
 }
 #page-process [id^="step1-pub-pill-"] > span:first-child > span {
   display: inline-block !important;
   font-size: 10.5px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
 }
 #page-process [id^="step1-pub-pill-"] svg {
   display: block !important;
   width: 14px !important;
   height: 14px !important;
   flex-shrink: 0 !important;
 }
 #page-content .cpt-tab {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 5px !important;
   padding: 5px 10px !important;
   height: 30px !important;
   min-height: 30px !important;
   font-size: 11px !important;
   font-weight: 550 !important;
   border-radius: 7px !important;
   white-space: nowrap !important;
 }
 #page-content .cpt-tab svg { width: 13px !important; height: 13px !important; flex: none !important; }
 html,body,#app,#main {overflow-x:clip;overscroll-behavior-x:none}
 #page-process.active[data-active-step="2"] {max-width:100%;overflow:visible;padding-bottom:0!important;margin-bottom:0!important}
 #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio {padding-bottom:0!important;margin-bottom:0!important}
 #page-process.active[data-active-step="2"] .pe2-editor.pe2-studio .pe2-transport-zoom :is(#proc-preview-aspect,#proc-content-aspect-mode) {display:none!important}
 #page-process .editor-mobile-dialog {max-height:92dvh!important;border-radius:14px!important;overflow:hidden!important}
 #page-process .editor-mobile-dialog-content {touch-action:pan-y;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:14px 14px 36px 14px!important;gap:12px!important;display:flex!important;flex-direction:column!important}
 #page-process .editor-mobile-dialog :is(.aff-card-box,.aff-slider-card,.aff-toggle-card) {margin-bottom:12px!important;padding:12px 14px!important;border-radius:12px!important}
 #page-process .editor-mobile-dialog .aff-fields {display:flex!important;flex-direction:column!important;gap:12px!important}
 #page-process .editor-mobile-dialog .aff-input-group {display:flex!important;flex-direction:column!important;gap:6px!important;margin-bottom:12px!important}
 #page-process .editor-mobile-dialog .aff-input-group:last-child {margin-bottom:0!important}
 #page-process .editor-mobile-dialog .aff-box-head {margin-bottom:12px!important;padding-bottom:6px!important;border-bottom:1px solid var(--border,#e2e8f0)!important}
 #page-process .editor-mobile-dialog .aff-details-box {margin:12px 0!important;padding:10px 12px!important;border-radius:10px!important}
 #page-process .editor-mobile-dialog .aff-action-btn {margin-top:12px!important;min-height:38px!important;border-radius:10px!important}
 #page-process .editor-mobile-dialog .pe2-grp {font-size:12px!important;font-weight:700!important;margin-top:18px!important;margin-bottom:10px!important}
 #page-process .pe2-editor.pe2-studio .editor-mobile-dialog-content .pe2-media-library {height:auto!important;max-height:none!important;overflow:visible!important;touch-action:pan-y}
 #page-process .editor-mobile-dialog-content :is(#aff-library,.aff-library-content,.aff-left-campaign,#aff-gallery) {height:auto!important;max-height:none!important;overflow:visible!important;min-height:0;touch-action:pan-y}
 #page-process .editor-mobile-dialog #aff-library .aff-card-links {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
 #page-process .editor-mobile-dialog #aff-library .aff-card-link-item {min-width:0;padding:4px!important;font-size:10px!important;min-height:30px!important;height:auto!important;white-space:nowrap}
 #page-process .editor-mobile-dialog :is(.aff-library-header,#aff-status,.aff-card-layout) {display:none!important}
 #page-process .pe2-screen :is(#frame-preview-canvas,#sub-preview-wrap,#pe2-video-player) {touch-action:none;user-select:none;-webkit-user-select:none}
 /* Larger invisible grab areas keep the visual handles compact. */
 #page-process .pe2-range-handle::before {content:'';position:absolute;inset:-5px -6px}
 #page-process .pe2-handle::before {content:'';position:absolute;inset:-6px}
 #page-process .editor-mobile-dialog-content input[type=range] {touch-action:pan-y}
 #page-process #pe2-tl-track {touch-action:pan-y!important}
 #page-process .pe2-source-band {touch-action:none}
 #page-process #pe2-tl-ranges,#page-process #pe2-tl-ranges .pe2-tl-range {touch-action:pan-y!important}
 #page-process #pe2-tl-ranges .pe2-range-handle {touch-action:none!important;opacity:1}
 /* One visual hierarchy for phone sheets; preserve card outlines. */
 #page-process .pe2-editor.pe2-studio {--text-muted:#586a81}
 #page-process .editor-mobile-dialog {border-color:var(--border);color:var(--text);background:var(--bg2)}
 #page-process .editor-mobile-dialog>header {background:var(--bg2);border-color:var(--border);font-weight:600}
 #page-process .editor-mobile-dialog>header button {color:var(--text);border-color:var(--border);background:var(--bg3);min-width:32px;min-height:32px}
 #page-process .editor-mobile-dialog :is(.aff-inspector-header,#aff-ai-content>.aff-ai-heading,#aff-ai-content>.aff-ai-hint) {display:none!important}
 #page-process .editor-mobile-dialog .aff-card-box:not(:has(*)),
 #page-process :is(#aff-reference-status,#aff-profile-status,#step1-aff-profile-status,#aff-cover-status):empty {display:none}
 #page-process .editor-mobile-dialog :is(.aff-box-title,.aff-ai-title) {font-size:11px;line-height:1.45}
 #page-process .editor-mobile-dialog :is(.aff-toggle-desc,.aff-ai-hint,.aff-inspector-sub,.pe2-setting-note,small) {font-size:10px;line-height:1.5;color:var(--text-muted)}
 #page-process .editor-mobile-dialog :is(.aff-toggle-title,.aff-details-summary,.aff-textarea,.aff-select,.aff-text-input) {font-size:11px;line-height:1.45}
 #page-process .editor-mobile-dialog .aff-ai-title,#page-process .editor-mobile-dialog .aff-ai-title svg {color:#3158bb}
 #page-process .editor-mobile-dialog .aff-ai-action {background:#2563eb!important}
 #page-process .editor-mobile-dialog .aff-ai-box {background:var(--aff-card-bg);border-color:var(--aff-card-border)}
 #page-process .editor-mobile-dialog :is(.aff-select,.aff-text-input,.aff-textarea):focus-visible {outline:2px solid var(--accent);outline-offset:2px}
 .dark #page-process {--bg:#111a27;--bg2:#182230;--bg3:#202d3d;--bg-card:#182230;--surface:#182230;--text:#e8eef6;--text-main:#e8eef6;--text-muted:#b0bfd1;--border:#34465c;--accent:#8bb9ff;color-scheme:dark;color:var(--text)}
 .dark #page-process .pe2-editor.pe2-studio {--bg:#111a27;--bg2:#182230;--bg3:#202d3d;--bg-card:#182230;--surface:#182230;--bg-hover:#26384f;--text:#e8eef6;--text2:#c6d3e3;--text-main:#e8eef6;--text-muted:#b0bfd1;--border:#34465c;--border2:#465c76;--accent:#8bb9ff;--primary:#2563eb;color-scheme:dark;color:var(--text)}
 .dark #page-process :is(h3,h4,label,.aff-box-title,.aff-toggle-title,.card-title) {color:var(--text)!important}
 .dark #page-process .cfg-feature-block {background:var(--bg3)!important;border-color:var(--border)!important}
 .dark #page-process .pe2-editor.pe2-studio :is(.editor-mobile-dialog,#pe2-panel,.pe2-pane,.pe2-panel-body,.pe2-media-library,.pe2-player-transport,.pe2-tl-controls,#pe2-timeline,#pe2-tabs-vertical,.pe2-asset-tabs) {background:var(--bg2)!important;color:var(--text)!important;border-color:var(--border)!important}
 .dark #page-process .pe2-editor.pe2-studio :is(.pe2-screen,#pe2-tl-track,#pe2-tl-ranges) {background:var(--bg3)!important}
 .dark #page-process .pe2-editor.pe2-studio :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea),
 .dark #page-process :is(#proc-shared-config-card,#step1-queue-card) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea) {background:var(--bg3)!important;border-color:var(--border)!important;color:var(--text)!important}
 .dark #page-process ::placeholder {color:#b0bfd1!important;opacity:1}
 .dark #page-process .pe2-editor.pe2-studio :is(.btn-secondary,.aff-pill-btn,.pe2-vtab,.aff-card,.aff-details-summary) {color:var(--text)!important;background:var(--bg3)!important;border-color:var(--border)!important}
 .dark #page-process .pe2-editor.pe2-studio :is(.pe2-vtab.active,.aff-card.selected,.aff-card.is-selected) {background:#253f65!important;color:#c6dcff!important;border-color:#8bb9ff!important}
 .dark #page-process .editor-mobile-dialog :is(.aff-ai-title,.aff-ai-title svg) {color:#a8caff!important}
 .dark #page-process .editor-mobile-dialog :is(.aff-card-box,.aff-slider-card,.aff-ai-box) {color:var(--text);background:var(--bg2);border-color:var(--border)}
 .dark #page-process .editor-mobile-dialog :is(.aff-toggle-card,.aff-quick-align-bar,.aff-number-wrap) {background:var(--bg3);border-color:var(--border)}
 .dark #page-process .editor-mobile-dialog .aff-callout-info {background:#203653;color:#d8e7ff;border-color:#48688f}
 .dark #page-process .pe2-editor.pe2-studio #pe2-tl-ranges .pe2-tl-range>span:not(.pe2-range-handle) {color:#203047!important}
 #page-process .editor-mobile-dialog #aff-gallery button[data-preview-kind=frame]>span {display:none}
 #page-process .editor-mobile-dialog #aff-gallery button[data-preview-kind=frame]::after {content:'Tĩnh'}
 .dark #page-process #step1-queue-card .proc-step1-quick-options label:has(input:checked),
 .dark #page-process #proc-ai-auto-review {background:#253f65!important;color:#e2edff!important;border-color:#7ca9e5!important;box-shadow:none!important}
 .dark #page-process :is(.border-b,.border-t) {border-color:var(--border)!important}
 .dark #page-process .pe2-editor.pe2-studio :is([data-mobile-library],#pe2-zoom-val) {background:var(--bg3)!important;color:var(--text)!important}
 .dark #page-process .editor-mobile-dialog .aff-music-library-filters button[aria-pressed=true] {background:#253f65;color:#d7e7ff}
 .dark #page-process .editor-mobile-dialog .pe2-asset-tabs button {color:var(--text-muted)!important}
 .dark #page-process .editor-mobile-dialog .pe2-asset-tabs button.active {background:#253f65!important;color:#d7e7ff!important}
 .dark #page-process #aff-export-summary>div {background:var(--bg3)!important;border-color:var(--border)!important}
 .dark #page-process #aff-export-summary>div>span:first-child {color:var(--text-muted)!important}
 .dark #page-process #aff-export-summary>div>span:last-child {color:var(--text)!important}
 #page-process #aff-export-summary>div {gap:8px;padding:8px!important;line-height:1.45}
 #page-process [data-proc-step="3"] .aff-only:has(#step3-auto-review-enabled)>p {font-size:10px!important;line-height:1.55;color:var(--text-muted)}
 /* Sheets provide their own frame; keep borders on fields and real groups. */
 #page-process .pe2-editor.pe2-studio .editor-mobile-dialog #pe2-panel {border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
 #page-process .editor-mobile-dialog .mobile-reference-details {padding:0!important;margin-bottom:14px}
 #page-process .editor-mobile-dialog .mobile-reference-details>summary {cursor:pointer;padding:11px 10px;font-size:11px;line-height:1.45;color:var(--text);list-style-position:inside}
 #page-process .editor-mobile-dialog .mobile-reference-details[open]>:not(summary) {margin-left:10px;margin-right:10px;max-width:calc(100% - 20px)}
 #page-process .editor-mobile-dialog .mobile-reference-details[open]>textarea {width:calc(100% - 20px);margin-bottom:10px}
 #page-process .editor-mobile-dialog .mobile-reference-details>label {display:none}
 #page-process .editor-mobile-dialog .mobile-reference-details>small {display:none}
 #page-process .editor-mobile-dialog #aff-ai-content .aff-ai-box {border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
 #page-process .editor-mobile-dialog #aff-ai-content .aff-ai-box>.aff-box-head {display:none}
 #page-process .editor-mobile-dialog #aff-review-state[data-state=idle],
 #page-process .editor-mobile-dialog .aff-details-box:has(#aff-review-transcript:empty),
 #page-process .editor-mobile-dialog .aff-details-box:has(#aff-review-summary:empty) {display:none}
 #page-process .editor-mobile-dialog #aff-ai-content .aff-toggle-card {padding:10px;gap:10px;margin-top:12px;margin-bottom:12px}
 #page-process .editor-mobile-dialog #aff-ai-content .aff-toggle-card:has(#aff-use-review) .aff-toggle-desc {display:none}
 #page-process .editor-mobile-dialog #aff-ai-content .aff-toggle-card:has(#aff-use-review) {min-height:44px}
 #page-process .editor-mobile-dialog #aff-sales-script {min-height:110px;margin-top:6px}
 #page-process .editor-mobile-dialog .aff-script-textarea::placeholder {font-size:11px}
 #page-process .editor-mobile-dialog .pe2-setting-field>label {white-space:normal;line-height:1.45;margin-bottom:5px}
 #page-process .editor-mobile-dialog .pe2-setting-grid {gap:10px 8px}
 #page-process .editor-mobile-dialog .pe2-setting-note {line-height:1.55;font-size:10px;color:var(--text-muted)}
 .dark #page-process .editor-mobile-dialog :is(.pe2-grp,.pe2-section-head,.pe2-field-label,details>summary) {color:var(--text)!important}
 #page-process .editor-mobile-dialog .pe2-pane>.pe2-grp:first-child {margin-top:0}
 #page-process .editor-mobile-dialog .pe2-ai-box {padding:10px;border-radius:8px}
 .dark #page-process .pe2-editor.pe2-studio .editor-mobile-dialog #pe2-panel :is(.field>label,.pe2-setting-field>label,.pe2-optcard,.pe2-setting-note,.pe2-empty-note) {color:var(--text-muted)!important}
 .dark #page-process .pe2-editor.pe2-studio .editor-mobile-dialog :is(.pe2-ai-box,.pe2-ai-status,.pe2-sample-card,.pe2-setting-row) {background:var(--bg3)!important;border-color:var(--border)!important;color:var(--text)!important}
 .dark #page-process .pe2-editor.pe2-studio .editor-mobile-dialog :is(.pe2-pane>details,#frame-controls>.pe2-collapsible-section) {border-color:var(--border)!important}
 .dark #page-process .editor-mobile-dialog #pe2-panel .field>label {color:var(--text-muted)!important}
 .dark #page-process .editor-mobile-dialog #pe2-panel input[type=color] {background:var(--bg3)!important;border-color:var(--border)!important}
 .dark #page-process .pe2-editor.pe2-studio .editor-mobile-dialog #pe2-panel .pe2-pane[data-pe2pane=subs] .pe2-optcard-lbl {color:#b0bfd1!important}
 #page-process .editor-mobile-dialog #aff-review-state[data-state=error] {color:#9b2424;background:#fff1f1;border-color:#e9b6b6}
 .dark #page-process .editor-mobile-dialog #aff-review-state[data-state=error] {color:#ffd7d7;background:#43272c;border-color:#9a5d65}
}


/* ══════════ INITIAL APP LOADER / SPLASH ══════════ */
.app-initial-loader {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
  pointer-events: all;
  min-height: 280px;
}

.dark .app-initial-loader {
  background: #0f172a;
}

.app-initial-loader.app-loader-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.app-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 90vw;
  width: 250px;
  text-align: center;
  animation: appLoaderPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .app-loader-card {
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(51, 65, 85, 0.85);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

@keyframes appLoaderPop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.app-loader-logo-box {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-loader-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  animation: appLogoPulse 2s infinite ease-in-out;
}

@keyframes appLogoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.app-loader-spinner-ring {
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  border: 2px solid transparent;
  border-top-color: #2563eb;
  border-right-color: #38bdf8;
  animation: appRingSpin 0.9s linear infinite;
}

@keyframes appRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.app-loader-text-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.app-loader-app-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.dark .app-loader-app-name {
  color: #f1f5f9;
}

.app-loader-app-desc {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.dark .app-loader-app-desc {
  color: #94a3b8;
}

.app-loader-bar-wrap {
  width: 140px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.dark .app-loader-bar-wrap {
  background: #334155;
}

.app-loader-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #2563eb);
  border-radius: 9999px;
  animation: appShimmer 1.3s ease-in-out infinite;
}

@keyframes appShimmer {
  0% { left: -45%; width: 35%; }
  50% { left: 30%; width: 55%; }
  100% { left: 105%; width: 35%; }
}

/* ══════════ PULL TO REFRESH (PTR) ══════════ */
#ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, -120%, 0);
  z-index: 100000;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
  opacity: 0;
  display: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease;
}

#ptr-indicator.ptr-dragging,
#ptr-indicator.ptr-ready,
#ptr-indicator.ptr-loading {
  display: block !important;
}

#ptr-indicator.ptr-dragging {
  transition: none !important;
}

#ptr-indicator .ptr-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dark #ptr-indicator .ptr-pill {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
}

#ptr-indicator .ptr-icon-box {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

.dark #ptr-indicator .ptr-icon-box {
  color: #60a5fa;
}

#ptr-indicator .ptr-arrow-icon {
  display: block;
  transition: transform 0.15s ease;
  transform-origin: center center;
}

#ptr-indicator .ptr-spinner-icon {
  display: none;
  animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulled past threshold: ready state */
#ptr-indicator.ptr-ready .ptr-pill {
  background: rgba(239, 246, 255, 0.98);
  border-color: rgba(59, 130, 246, 0.6);
  color: #1d4ed8;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.25);
  transform: scale(1.03);
}

.dark #ptr-indicator.ptr-ready .ptr-pill {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(96, 165, 250, 0.6);
  color: #93c5fd;
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.4);
  transform: scale(1.03);
}

#ptr-indicator.ptr-ready .ptr-arrow-icon {
  transform: rotate(180deg) !important;
}

/* Loading / Refreshing state */
#ptr-indicator.ptr-loading {
  opacity: 1 !important;
  transform: translate3d(-50%, 65px, 0) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease !important;
}

#ptr-indicator.ptr-loading .ptr-arrow-icon {
  display: none !important;
}

#ptr-indicator.ptr-loading .ptr-spinner-icon {
  display: block !important;
}

#ptr-indicator.ptr-loading .ptr-pill {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(59, 130, 246, 0.6);
  color: #2563eb;
}

.dark #ptr-indicator.ptr-loading .ptr-pill {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(96, 165, 250, 0.6);
  color: #60a5fa;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE UI SYSTEM REFINEMENTS: ICON-FIRST, COMPACT CONTROLS, DOCKED TIMELINE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Global Typography: Balanced, Harmonious, NO ALL-CAPS */
  :is(h1, h2, h3, h4, h5, h6, .card-title, .cfg-card-title, .step1-card-header h3, .section-title, .avl-heading h2, .avl-eyebrow, .aff-inspector-title, .aff-box-title, #page-user .card-title, .pe2-grp, label, .field label, span, strong) {
    text-transform: none !important;
    letter-spacing: normal !important;
  }
  :root {
    --mobile-header-height: 56px;
  }
  #topbar {
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    max-height: var(--mobile-header-height) !important;
    padding: 0 10px !important;
  }
  #mobile-menu-overlay .mobile-menu-panel {
    padding-top: 0;
  }
  #mobile-menu-overlay .mobile-menu-heading {
    box-sizing: border-box;
    height: var(--mobile-header-height);
    padding-bottom: 0;
  }
  #topbar-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  :is(.card-title, .cfg-card-title, .step1-card-header h3, h1, h2, h3, .avl-heading h2, .section-title, .aff-inspector-title, .aff-box-title, #page-user .card-title) {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  :is(h4, h5, h6, .card-header .card-title, label, .field label, label.form-label, .pe2-grp) {
    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 1.35 !important;
  }
  :is(small, [data-ui-help], .proc-help-text, .sub-text, .avl-heading p, p[data-ui-help], .empty-state, .progress-info) {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  /* 2. Tooltip Help Icon: Perfect 16px Circle (Never distorted or stretched) */
  button.proc-help, .proc-help {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    flex: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  .proc-help::before {
    content: 'i' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    min-height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    border: 1.2px solid currentColor !important;
    border-radius: 50% !important;
    font-family: Arial, sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Editor tools and template cards own their height and preview content. */
  button.btn, .btn, button[type="button"]:not(.mobile-nav-item):not(.toggle):not(.pe2-range-handle):not(.pe2-handle):not(.proc-help):not(.btn-icon):not(#user-library-open):not(#cw-fab):not(#cw-launcher):not(:where(.pe2-editor button, .step3-completed-preview, .step3-completed-info)) {
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 550 !important;
    border-radius: 6px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }
  .btn-icon, button.icon-only, .mobile-icon-action, .step1-card-toggle-btn:not(#cw-fab):not(#cw-launcher) {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  /* Full-width action button */
  #user-library-open,
  .user-library-sidebar #user-library-open {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  #user-library-open span {
    display: inline !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  /* 4. Step 1 Quick Options: Clean Balanced Pills */
  #step1-queue-card .proc-step1-quick-options,
  .proc-step1-quick-options {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  #step1-queue-card .proc-step1-quick-options::-webkit-scrollbar,
  .proc-step1-quick-options::-webkit-scrollbar {
    display: none !important;
  }
  #step1-queue-card .proc-step1-quick-options label,
  #step1-queue-card .proc-step1-quick-options button.proc-pill-btn,
  .proc-step1-quick-options :is(.proc-pill-btn, label) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 4px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3.5px !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-main, #334155) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  #step1-queue-card .proc-step1-quick-options label svg,
  #step1-queue-card .proc-step1-quick-options button.proc-pill-btn svg,
  .proc-step1-quick-options svg {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  #step1-queue-card .proc-step1-quick-options .proc-pill-text,
  .proc-step1-quick-options .proc-pill-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    font-weight: 550 !important;
  }

  /* 5. Inputs & Selects: Balanced 30px - 32px Height */
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="datetime-local"],
  select {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  /* 6. Affiliate Video Library Compact Styling */
  #page-affiliate-library .avl-shell {
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  #page-affiliate-library .avl-heading h2 {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
  }
  #page-affiliate-library .avl-heading p {
    font-size: 10px !important;
  }
  #page-affiliate-library .avl-heading-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
  }
  #page-affiliate-library .avl-toolbar {
    margin: 8px 0 6px !important;
    gap: 6px !important;
  }
  #page-affiliate-library .avl-search-box {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
  }
  #page-affiliate-library #avl-search {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 11px !important;
  }
  #page-affiliate-library #avl-count {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
  #page-affiliate-library #avl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #page-affiliate-library .avl-card-info strong {
    font-size: 11px !important;
    min-height: 26px !important;
    line-height: 1.3 !important;
  }
  #page-affiliate-library .avl-card-info small {
    font-size: 10px !important;
  }
  #page-affiliate-library .avl-delete-icon {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    top: 4px !important;
    right: 4px !important;
  }

  /* 7. Step 2 Timeline STRICTLY Bottom Docked, Video takes all remaining height */
  #page-process.active[data-active-step="2"] .pe2-studio,
  #page-process .pe2-editor.pe2-studio,
  .pe2-editor.pe2-studio {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #page-process.active[data-active-step="2"] .pe2-body,
  .pe2-editor.pe2-studio .pe2-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #page-process.active[data-active-step="2"] .pe2-center,
  .pe2-studio .pe2-center,
  .pe2-editor.pe2-studio .pe2-center {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 120px !important;
    max-height: none !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  #page-process.active[data-active-step="2"] .pe2-screen,
  .pe2-studio .pe2-screen,
  .pe2-editor.pe2-studio .pe2-screen {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 100px !important;
    max-height: none !important;
    padding: 2px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* HIDE inspector panel completely outside modal dialog - NEVER in page flow */
  #page-process #pe2-panel:not(.editor-mobile-dialog #pe2-panel):not(.editor-mobile-dialog-content #pe2-panel),
  .pe2-studio #pe2-panel:not(.editor-mobile-dialog #pe2-panel):not(.editor-mobile-dialog-content #pe2-panel) {
    display: none !important;
  }
  #page-process.active[data-active-step="2"] #pe2-timeline,
  #page-process .pe2-editor.pe2-studio #pe2-timeline,
  .pe2-editor #pe2-timeline,
  .pe2-studio #pe2-timeline {
    order: 2 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    background: var(--bg-card, #ffffff) !important;
    border: none !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .dark #page-process.active[data-active-step="2"] #pe2-timeline,
  .dark #page-process .pe2-editor.pe2-studio #pe2-timeline,
  .dark .pe2-studio #pe2-timeline {
    background: #182230 !important;
    border: none !important;
    border-top: 1px solid #334155 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 8. Clear Contrast and Card Region Styling */
  .card, .cfg-card, .cfg-feature-block, .aff-card-box {
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }
  :is(.grid, .flex, [class*="gap-"], .step1-grid-layout, #step1-grid-container, .step3-layout, .proc-step5-grid) > :is(.card, .cfg-card, .cfg-feature-block, .aff-card-box),
  :is(.grid, .flex, .step1-grid-layout, #step1-grid-container) > div > :is(.card, .cfg-card, .cfg-feature-block, .aff-card-box),
  #page-process #step1-grid-container .card,
  #page-process .step1-grid-layout .card,
  #page-process [data-proc-step] .card {
    margin-bottom: 0 !important;
  }
  .dark .card, .dark .cfg-card, .dark .cfg-feature-block, .dark .aff-card-box {
    background: #182230 !important;
    border-color: #334155 !important;
  }
}

/* Modal dialog bo goc 6px theo yeu cau nguoi dung */
.editor-mobile-dialog,
#page-process .editor-mobile-dialog {
  border-radius: 6px !important;
  overflow: hidden !important;
}
.editor-mobile-dialog > header,
#page-process .editor-mobile-dialog > header {
  border-radius: 6px 6px 0 0 !important;
}

/* Khong bo goc cho vung preview va timeline, bo border cho tu nhien */
#sub-preview-wrap,
.pe2-screen,
.pe2-center,
#proc-preview-col,
#proc-preview-row,
#sub-preview-placeholder,
#page-process .pe2-editor.pe2-studio #pe2-timeline,
.pe2-editor #pe2-timeline,
#page-process #pe2-timeline,
.pe2-studio #pe2-timeline {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nut dong modal: chi icon X mau do, khong bo vien, khong nen */
.editor-mobile-dialog > header button,
.editor-mobile-close-btn {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ef4444 !important;
  font-size: 0 !important;
  cursor: pointer !important;
}
.editor-mobile-dialog > header button svg,
.editor-mobile-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ef4444 !important;
  stroke-width: 2.4 !important;
}
.editor-mobile-dialog > header button:hover svg,
.editor-mobile-close-btn:hover svg {
  stroke: #dc2626 !important;
}

/* Chong trung lap nut Tiep tuc o buoc 2 */
.pe2-panel-actions button.pe2-continue-top ~ button.pe2-continue-top,
.pe2-panel-actions button[onclick*="procWizStep2Continue"] ~ button[onclick*="procWizStep2Continue"] {
  display: none !important;
}

/* Step 4: 2 action buttons side by side on all mobile screens */
#page-process .step4-action-row,
.step4-action-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
}
#page-process .step4-action-row .btn,
.step4-action-row .btn {
  width: 100% !important;
  min-height: 38px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* === CONTENT MANAGEMENT & CHATBOT FAB REFINEMENTS === */
/* Search Input in Files Tab: Plentiful left padding so icon never overlaps text */
#content-search,
.cpt-panel input#content-search,
div:has(> svg):has(> #content-search) > #content-search {
  padding-left: 32px !important;
}

/* Elevated Segmented Platform Tabs */
#page-content .content-platform-tabs {
  display: flex !important;
  gap: 3px !important;
  background: var(--bg2, #f1f5f9) !important;
  padding: 3px !important;
  border-radius: 9px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 12px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.dark #page-content .content-platform-tabs {
  background: var(--bg3, #1e293b) !important;
  border-color: var(--border, #334155) !important;
}
#page-content .content-platform-tabs::-webkit-scrollbar {
  display: none !important;
}
#page-content .cpt-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  height: 28px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  color: var(--text-muted, #64748b) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
}
#page-content .cpt-tab:hover {
  color: var(--text, #1e293b) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}
#page-content .cpt-tab.active {
  background: var(--bg-card, #ffffff) !important;
  color: var(--primary, #2563eb) !important;
  font-weight: 600 !important;
  border-color: var(--border, #e2e8f0) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
.dark #page-content .cpt-tab.active {
  background: var(--bg-card, #0f172a) !important;
  color: #60a5fa !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Header & Card Elevation in Content Page ("header nổi lên") */
#page-content .content-header-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
#page-content .card {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
}
#page-content .card-header {
  background: var(--bg2, #f8fafc) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 12px !important;
  margin: -10px -10px 10px -10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
.dark #page-content .card-header {
  background: var(--bg3, #1e293b) !important;
}
#page-content .card-title {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Rock-solid circular chatbot button (hình tròn) */
#cw-fab, #cw-launcher, button#cw-fab, button#cw-launcher {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#cw-fab svg, #cw-launcher svg {
  width: 22px !important;
  height: 22px !important;
  margin: auto !important;
}

/* ── #page-user Modern UI Refinements ────────────────────────────── */
#page-user .user-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 10px !important;
}
#page-user .user-avatar,
#page-user .user-avatar-ph {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--border, #e2e8f0) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
#page-user .user-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--text, #1e293b) !important;
}
#page-user .user-name-vi {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--primary, #2563eb) !important;
  margin-top: 2px !important;
}
#page-user .user-sig {
  font-size: 10.5px !important;
  color: var(--text-muted, #64748b) !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}
#page-user #u-sig-vi {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}
#page-user .user-stats {
  display: flex !important;
  gap: 16px !important;
  margin-top: 6px !important;
}
#page-user .user-stat {
  min-width: 44px !important;
  text-align: left !important;
}
#page-user .user-stat-val {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary, #2563eb) !important;
  line-height: 1.2 !important;
}
#page-user .user-stat-lbl {
  font-size: 9.5px !important;
  font-weight: 500 !important;
  color: var(--text-muted, #94a3b8) !important;
  margin-top: 1px !important;
}

/* User Filters: Desktop default */
#page-user .user-filters-bar {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
}
#page-user .user-filters-selects {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  min-width: 230px !important;
}
#page-user .user-filters-search {
  flex: 1 !important;
  min-width: 0 !important;
}
#page-user .user-search-input-wrap {
  position: relative !important;
  width: 100% !important;
}
#page-user .user-search-icon {
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-muted, #94a3b8) !important;
  pointer-events: none !important;
  width: 13px !important;
  height: 13px !important;
}
#page-user #filter-search {
  padding-left: 28px !important;
  height: 30px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
}
#page-user .user-filter-mobile-btn {
  display: none !important;
}
#page-user .user-filters-bar .field label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #64748b) !important;
  margin-bottom: 3px !important;
}

/* User Filters: Mobile UI (Chỉ hiện tìm kiếm và icon bộ lọc) */
@media (max-width: 640px) {
  #page-user .user-card {
    padding: 8px 10px !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }
  #page-user .user-avatar,
  #page-user .user-avatar-ph {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
  #page-user .user-name {
    font-size: 13px !important;
  }
  #page-user .user-stats {
    gap: 12px !important;
    margin-top: 4px !important;
  }
  #page-user .user-stat-val {
    font-size: 12px !important;
  }
  #page-user .user-filters-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  #page-user .user-filters-selects {
    display: none !important;
  }
  #page-user .user-search-label {
    display: none !important;
  }
  #page-user .user-filter-mobile-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: var(--bg2, #f1f5f9) !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    color: var(--text, #334155) !important;
    cursor: pointer !important;
  }
  #page-user .user-filter-dot {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--primary, #2563eb) !important;
  }
  #page-user .user-filter-dot.hidden {
    display: none !important;
  }
  #page-user .user-actions-bar {
    padding: 5px 8px !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }
  #page-user .user-actions-select-group {
    gap: 4px !important;
  }
  #page-user .user-actions-select-group .btn {
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }
  #page-user .user-sel-count-pill {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }
  #page-user .user-actions-queue-group {
    gap: 4px !important;
  }
  #page-user .user-queue-dest-wrap span {
    font-size: 9.5px !important;
  }
  #page-user #user-queue-destination {
    height: 25px !important;
    min-height: 25px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
  }
  #page-user #btn-dl-selected {
    height: 25px !important;
    min-height: 25px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
  }
  #page-user .card-header .card-title {
    font-size: 12px !important;
  }
  #page-user #load-status {
    font-size: 9.5px !important;
  }
  #page-user .vcard-desc {
    font-size: 10.5px !important;
  }
  #page-user .vcard-vi {
    font-size: 10px !important;
  }
  #page-user .vcard-stats {
    font-size: 9px !important;
  }
}

/* Modal Bottom-sheet: Bộ lọc video trên mobile */
.user-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: userFadeIn 0.15s ease;
}
.user-modal-overlay.hidden {
  display: none !important;
}
@keyframes userFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes userSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.user-modal-sheet {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card, #ffffff);
  border-radius: 18px 18px 0 0;
  padding: 12px 16px 20px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  animation: userSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  border-top: 1px solid var(--border, #e2e8f0);
}
.dark .user-modal-sheet {
  background: var(--bg2, #1e293b);
  border-color: var(--border, #334155);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
.user-modal-drag-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #cbd5e1);
  margin: 0 auto 10px;
}
.user-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.user-modal-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1e293b);
}
.dark .user-modal-title {
  color: var(--text, #f1f5f9);
}
.user-modal-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.dark .user-modal-close {
  background: var(--bg3, #334155);
  border-color: var(--border, #475569);
  color: var(--text-muted, #94a3b8);
}
.user-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.user-modal-group-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.user-modal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.user-filter-pill {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 18px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--bg2, #f8fafc);
  color: var(--text, #334155);
  cursor: pointer;
  transition: all 0.15s ease;
}
.dark .user-filter-pill {
  background: var(--bg3, #1e293b);
  border-color: var(--border, #334155);
  color: var(--text, #cbd5e1);
}
.user-filter-pill:hover {
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
}
.user-filter-pill.active {
  background: var(--primary, #2563eb) !important;
  color: #ffffff !important;
  border-color: var(--primary, #2563eb) !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}
.user-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.dark .user-modal-footer {
  border-top-color: var(--border, #334155);
}
.user-modal-footer .btn {
  height: 32px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
}

/* User Actions Toolbar: Separated selection & queue action */
#page-user .user-actions-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: var(--bg2, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}
#page-user .user-actions-select-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
#page-user .user-sel-count-pill {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #475569) !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  background: var(--bg3, #e2e8f0) !important;
  white-space: nowrap !important;
}
#page-user .user-actions-queue-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
#page-user .user-queue-dest-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#page-user #user-queue-destination {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

/* Pagination: Strictly Compact & Perfectly Centered */
#page-user .pagination.user-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  padding: 12px 0 6px !important;
  margin-top: 12px !important;
  border-top: 1px solid var(--border, #e2e8f0) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#page-user .pagination.user-pagination button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}
#page-user .pagination .page-info {
  font-size: 11.5px !important;
  color: var(--text-muted, #64748b) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
#page-user .pagination .page-jump-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#page-user .pagination input.page-jump-input {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 2px 4px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

/* Dark mode adaptions */
.dark #page-user .user-card {
  background: var(--bg2, #1e293b) !important;
  border-color: var(--border, #334155) !important;
}
.dark #page-user .user-actions-bar {
  background: var(--bg2, #182230) !important;
  border-color: var(--border, #334155) !important;
}
.dark #page-user .user-sel-count-pill {
  background: var(--bg3, #253347) !important;
  color: var(--text, #cbd5e1) !important;
}
.dark #page-user .pagination.user-pagination {
  border-top-color: var(--border, #334155) !important;
}

/* No double outline ring on icon action buttons */
#content>.page :is(.btn-icon, .step1-card-toggle-btn, .proc-card-toggle-btn, .mobile-icon-action, button.icon-only, #btn-proc-stop-ai, #btn-proc-pause):focus:not(:focus-visible),
#content>.page :is(.btn-icon, .step1-card-toggle-btn, .proc-card-toggle-btn, .mobile-icon-action, button.icon-only, #btn-proc-stop-ai, #btn-proc-pause):focus {
  outline: none !important;
  box-shadow: none !important;
}
#page-process .card.is-collapsed {
  padding: 0 !important;
  min-height: auto !important;
  height: auto !important;
}
#page-process .card.is-collapsed .proc-card-header,
#page-process .card.is-collapsed .step1-card-header {
  padding: 8px 12px !important;
  min-height: 38px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}


/* === MOBILE & RESPONSIVE POLISH: SPACING, TABS, CARDS & BUTTONS === */
#pe2-tabs-vertical,
.pe2-tabs-vertical,
#page-process #pe2-tabs-vertical {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
#pe2-tabs-vertical::-webkit-scrollbar,
.pe2-tabs-vertical::-webkit-scrollbar,
#page-process #pe2-tabs-vertical::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#page-process .pe2-editor #pe2-tabs-vertical .pe2-vtab.active,
#pe2-tabs-vertical .pe2-vtab.active,
.pe2-vtab.active {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3) !important;
}
#pe2-tabs-vertical .pe2-vtab.active::after,
.pe2-vtab.active::after {
  display: none !important;
}
.dark #page-process .pe2-editor #pe2-tabs-vertical .pe2-vtab.active,
.dark #pe2-tabs-vertical .pe2-vtab.active,
.dark .pe2-vtab.active {
  background: rgba(59, 130, 246, 0.22) !important;
  border-color: #60a5fa !important;
  color: #93c5fd !important;
}

/* Step 3 Action Buttons Spacing */
#page-process #step3-action-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}
#page-process #step3-action-buttons > button {
  min-height: 36px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  border-radius: 12px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#page-process #step3-action-buttons > button:last-child {
  grid-column: 1 / -1 !important;
  margin-top: 2px !important;
  min-height: 34px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Step 4 Schedule Cards Spacing */
#page-process [data-proc-step="4"] .step4-col-sched,
#page-process [data-proc-step="4"] .step4-col-schedule {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
#page-process [data-proc-step="4"] #proc-batchsched-card {
  margin-bottom: 14px !important;
}
#page-process [data-proc-step="4"] #step4-guide-card {
  margin-top: 0 !important;
}
#page-process [data-proc-step="4"] :is(#proc-batchsched-card, #step4-guide-card) .proc-card-header {
  padding: 12px 14px !important;
  gap: 12px !important;
}

/* Affiliate Inspector Dialog Roomy Spacing */
#page-process .editor-mobile-dialog {
  max-height: 90dvh !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
}
#page-process .editor-mobile-dialog-content {
  padding: 16px 16px 42px 16px !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}
#page-process .editor-mobile-dialog :is(.aff-card-box, .aff-slider-card, .aff-toggle-card) {
  margin-bottom: 14px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border, #e2e8f0) !important;
}
#page-process .editor-mobile-dialog .aff-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 10px !important;
}
#page-process .editor-mobile-dialog .aff-input-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
#page-process .editor-mobile-dialog .aff-input-group:last-child {
  margin-bottom: 0 !important;
}
#page-process .editor-mobile-dialog .aff-input-group label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin-bottom: 3px !important;
}
#page-process .editor-mobile-dialog .aff-box-head {
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
}
#page-process .editor-mobile-dialog .aff-details-box {
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
}
#page-process .editor-mobile-dialog .aff-action-btn {
  margin-top: 14px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
}
#page-process .editor-mobile-dialog .aff-quick-align-bar {
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  gap: 8px !important;
  border-radius: 10px !important;
}
#page-process .editor-mobile-dialog .aff-quick-btn {
  min-height: 32px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
}