.modal.random-config-modal { width: min(860px, 94vw); max-height: 90vh; }
.random-config-modal .modal-body { overflow: auto; }
.random-config-modal p { margin: 8px 0 14px; font-size: 13px; line-height: 1.5; }
.modal.random-plan-modal { width: min(1100px, 94vw); max-height: 90vh; margin: auto; padding: 0; color: var(--text-primary); }
.random-plan-modal::backdrop { background: var(--modal-backdrop); backdrop-filter: blur(4px); }
.random-plan-modal .modal-header, .random-plan-modal .modal-footer { flex-shrink: 0; }
.random-plan-modal .modal-body { min-height: 0; padding: 0; }
.random-plan-modal .random-plan { height: auto; }
.random-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.random-toolbar label, .random-quantity, .random-row-actions, .random-pagination { display: flex; align-items: center; gap: 6px; }
.random-toolbar label, .random-pagination { font-size: 12px; }
.random-toolbar input, .random-toolbar select, .random-table input, .random-table select { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 5px; padding: 6px 8px; }
.random-table select { width: 100%; min-width: 190px; }
.random-quantity input { width: 78px; }
.random-quantity { white-space: nowrap; }
.random-table-scroll { overflow: auto; }
.random-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.random-table th, .random-table td { padding: 10px; border-bottom: 1px solid var(--border-default); text-align: left; }
.random-table th { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.random-table td { vertical-align: middle; }
.random-table td.random-empty { text-align: center; color: var(--text-secondary); padding: 32px 12px; }
.random-table-scroll > button { margin-top: 12px; }
.random-muted { color: var(--text-secondary); font-size: 12px; }
.random-error { color: var(--accent-error); font-size: 13px; }
.random-plan { padding: 14px; overflow: auto; height: 100%; }
.random-plan-filters { gap: 10px; margin-bottom: 16px; }
.random-plan-filters .report-dropdown-field { gap: 4px; margin: 0; max-width: 100%; }
.random-filter-account { width: 140px; }
.random-filter-account-name { display: flex; align-items: center; gap: 6px; height: 30px; font-size: 12px; }
.random-filter-account-name svg { flex-shrink: 0; color: var(--text-secondary); }
.random-filter-account-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.random-filter-date { width: 150px; }
.random-filter-history { width: 140px; }
.random-filter-scope { width: 190px; }
.random-plan-filters .random-filter-control { display: block; height: 30px; padding: 0 8px; font-weight: 600; color-scheme: dark; }
body.theme-light .random-plan-filters .random-filter-control { color-scheme: light; }
.random-plan-filters .random-filter-control:focus-visible { border-color: var(--accent-primary); outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.random-filter-select { position: relative; }
.random-filter-select .random-filter-control { appearance: none; padding-right: 28px; }
.random-filter-select > svg { position: absolute; right: 8px; top: 8px; pointer-events: none; color: var(--text-tertiary); }
.random-plan-filters > .btn { height: 30px; }
.random-pagination { margin-left: auto; }
.random-plan > .random-toolbar:last-child { margin-top: 12px; }
.random-mode-badge, .random-turn-status { display: inline-block; border-radius: 4px; padding: 3px 6px; white-space: nowrap; font-size: 11px; background: var(--bg-tertiary); }
.random-mode-badge { align-self: flex-start; }
.random-mode-badge, .random-turn-running { color: #8b5cf6; background: rgba(139,92,246,.12); }
.random-turn-completed { color: var(--accent-success); background: rgba(22,163,74,.1); }
.random-turn-stopped { color: var(--accent-warning); background: rgba(217,119,6,.1); }
.web-enrichment-overlay{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.42);display:flex;justify-content:center;align-items:flex-start;padding:36px 16px 16px;box-sizing:border-box;color:#0f172a}
.web-enrichment-modal{width:640px;max-width:100%;max-height:calc(100dvh - 52px);background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(15,23,42,.28);display:flex;flex-direction:column;overflow:hidden;font-size:13px;outline:none;text-align:left}
.web-enrichment-modal *{box-sizing:border-box}.web-enrichment-modal button,.web-enrichment-modal input,.web-enrichment-modal textarea{font:inherit}.web-enrichment-modal button{cursor:pointer}.web-enrichment-modal button:disabled{cursor:default;opacity:.55}.web-enrichment-modal button:focus-visible,.web-enrichment-modal input:focus-visible,.web-enrichment-modal textarea:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
.web-enrichment-modal header{display:flex;align-items:center;gap:10px;padding:18px 20px 15px;border-bottom:1px solid #eef2f7;flex-shrink:0}.web-enrichment-icon{width:36px;height:36px;display:grid;place-items:center;background:#eef0ff;color:#4f46e5;border-radius:10px;flex-shrink:0}.web-enrichment-heading{flex:1;min-width:0}.web-enrichment-heading h2{font-size:17px;font-weight:700;margin:0;line-height:1.4}.web-enrichment-heading p{font-size:12.5px;color:#64748b;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.web-enrichment-toggle{display:flex;align-items:center;gap:5px;font-size:12px;background:#f1f5f9;color:#64748b;padding:6px 8px;border-radius:20px;white-space:nowrap}.web-enrichment-toggle.enabled{background:#e8f7ef;color:#16803c}.web-enrichment-toggle input{accent-color:#22a06b}.web-enrichment-close{border:0;background:none;color:#64748b;padding:4px;display:flex}
.web-enrichment-body{padding:18px 20px;overflow-y:auto;max-height:600px}.web-enrichment-body fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;min-width:0}.web-enrichment-body section>label{display:flex;align-items:center;gap:7px;font-weight:600;color:#334155;margin-bottom:8px;font-size:13px;flex-wrap:wrap}.web-enrichment-body label b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#eef0ff;color:#5b57e8;font-size:11px}.web-enrichment-body label em{color:#ef4444;font-style:normal}.web-enrichment-body label small{margin-left:auto;font-size:11.5px;color:#94a3b8;font-weight:400}.web-enrichment-body input:not([type=checkbox]),.web-enrichment-body textarea{border:1px solid #dbe3ec;border-radius:10px;padding:10px 12px;color:#334155;background:#fff;font-size:13.5px;min-width:0}.web-enrichment-body textarea{width:100%;resize:vertical;line-height:1.55}.web-enrichment-body input::placeholder,.web-enrichment-body textarea::placeholder{color:#94a3b8}.web-enrichment-hint{margin:6px 0 0;font-size:11.5px;color:#94a3b8;line-height:1.5}
.web-enrichment-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:1px solid #dbe3ec;border-radius:10px;padding:8px;min-height:42px}.web-enrichment-chips>span{background:#eef0ff;color:#5753c8;border:1px solid #e0e3ff;border-radius:6px;padding:4px 7px;display:flex;align-items:center;gap:5px;max-width:100%;overflow-wrap:anywhere}.web-enrichment-chips.orange>span{background:#fff4e8;border-color:#ffe3c1;color:#c67620}.web-enrichment-modal .web-enrichment-chips input{border:0;padding:4px;flex:1;min-width:180px;font-size:12px}.web-enrichment-chips button,.web-enrichment-websites button{border:0;background:transparent;color:inherit;padding:1px;display:flex}.web-enrichment-add{display:flex;gap:8px;align-items:center}.web-enrichment-add input{flex:1}.web-enrichment-add button{display:flex;align-items:center;gap:5px;border:1px solid #dbe3ec;background:#f8fafc;color:#475569;border-radius:9px;padding:9px 12px;white-space:nowrap}.web-enrichment-websites{display:flex;flex-direction:column;gap:6px}.web-enrichment-websites>div{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e8edf4;border-radius:9px;padding:7px 10px}.web-enrichment-websites:not(:empty){margin-bottom:8px}.website-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#e0e7ff;color:#4f46e5;font-weight:600;flex-shrink:0}.website-icon.color-1{background:#ffedd5;color:#ea580c}.website-icon.color-2{background:#dcfce7;color:#16a34a}.website-icon.color-3{background:#fce7f3;color:#db2777}.website-icon.color-4{background:#e0f2fe;color:#0284c7}.website-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#475569;font-size:12.5px}.web-enrichment-duration{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.web-enrichment-stepper{height:38px;display:flex;align-items:center;border:1px solid #dbe3ec;border-radius:9px;overflow:hidden;gap:5px}.web-enrichment-stepper button{border:0;background:#f8fafc;color:#64748b;height:36px;width:30px;display:grid;place-items:center}.web-enrichment-modal .web-enrichment-stepper input{border:0;width:45px;text-align:center;padding:0;appearance:textfield}.web-enrichment-stepper input::-webkit-inner-spin-button{appearance:none}.web-enrichment-stepper span{color:#64748b;font-size:12px}.web-enrichment-presets{display:flex;gap:5px;flex-wrap:wrap}.web-enrichment-presets button{border:1px solid #e2e8f0;background:#fff;border-radius:20px;padding:5px 9px;color:#64748b;font-size:11.5px}.web-enrichment-presets button[aria-pressed=true]{background:#eef0ff;color:#5b57e8;border-color:#c7cbff}.web-enrichment-chips.times{border:0;padding:8px 0 0;min-height:0}.web-enrichment-warning{font-size:12px;color:#a16207;background:#fffbeb;border:1px solid #fef3c7;padding:9px 11px;line-height:1.55;border-radius:9px;margin:9px 0 0}.web-enrichment-note{display:flex;gap:8px;padding:12px 13px;background:#f6f8fb;border:1px solid #e8edf4;border-radius:11px;color:#64748b;line-height:1.6;font-size:12px}.web-enrichment-note svg{flex-shrink:0;margin-top:2px}.web-enrichment-note p{margin:0}.web-enrichment-note strong{display:block;color:#475569;margin-bottom:3px}.web-enrichment-error{background:#fef2f2;color:#b91c1c;padding:10px;border-radius:9px;margin-top:12px;line-height:1.5}.web-enrichment-error button{display:block;border:0;background:none;color:#4f46e5;text-decoration:underline;margin-top:6px}.web-enrichment-loading{display:flex;justify-content:center;gap:8px;padding:30px;color:#64748b}.web-enrichment-modal footer{display:flex;justify-content:flex-end;gap:10px;padding:13px 20px;background:#fbfcfe;border-top:1px solid #eef2f7;flex-shrink:0}.web-enrichment-modal footer button{height:38px;padding:0 17px;border-radius:10px;background:#fff;border:1px solid #dbe3ec;color:#475569;display:flex;align-items:center;gap:6px;font-weight:600}.web-enrichment-modal footer .primary{background:#5b57e8;border-color:#5b57e8;color:#fff}.web-enrichment-modal .spin{animation:web-enrichment-spin 1s linear infinite}@keyframes web-enrichment-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){.web-enrichment-overlay{padding:12px 8px}.web-enrichment-modal{max-height:calc(100dvh - 24px)}.web-enrichment-modal header{padding:14px 12px;gap:7px}.web-enrichment-heading h2{font-size:15px}.web-enrichment-body{padding:16px 12px}.web-enrichment-toggle{font-size:0;gap:0;padding:6px}.web-enrichment-modal footer{padding:12px}.web-enrichment-duration{gap:8px}}

/* Follow the app's body.theme-light switch, including native date/time controls. */
.web-enrichment-modal { color-scheme: light; }
body:not(.theme-light) .web-enrichment-overlay {
  background: var(--modal-backdrop);
  color: var(--text-primary);
}
body:not(.theme-light) .web-enrichment-modal {
  color-scheme: dark;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}
body:not(.theme-light) .web-enrichment-modal header,
body:not(.theme-light) .web-enrichment-modal footer,
body:not(.theme-light) .web-enrichment-body input:not([type=checkbox]),
body:not(.theme-light) .web-enrichment-body textarea,
body:not(.theme-light) .web-enrichment-chips,
body:not(.theme-light) .web-enrichment-add button,
body:not(.theme-light) .web-enrichment-websites > div,
body:not(.theme-light) .web-enrichment-stepper,
body:not(.theme-light) .web-enrichment-presets button,
body:not(.theme-light) .web-enrichment-note,
body:not(.theme-light) .web-enrichment-modal footer button {
  border-color: var(--border-default);
}
body:not(.theme-light) .web-enrichment-body section > label,
body:not(.theme-light) .web-enrichment-body input:not([type=checkbox]),
body:not(.theme-light) .web-enrichment-body textarea,
body:not(.theme-light) .website-url,
body:not(.theme-light) .web-enrichment-note strong {
  color: var(--text-primary);
}
body:not(.theme-light) .web-enrichment-heading p,
body:not(.theme-light) .web-enrichment-toggle,
body:not(.theme-light) .web-enrichment-close,
body:not(.theme-light) .web-enrichment-body label small,
body:not(.theme-light) .web-enrichment-body input::placeholder,
body:not(.theme-light) .web-enrichment-body textarea::placeholder,
body:not(.theme-light) .web-enrichment-hint,
body:not(.theme-light) .web-enrichment-stepper span,
body:not(.theme-light) .web-enrichment-note,
body:not(.theme-light) .web-enrichment-loading {
  color: var(--text-secondary);
}
body:not(.theme-light) .web-enrichment-body input:not([type=checkbox]),
body:not(.theme-light) .web-enrichment-body textarea,
body:not(.theme-light) .web-enrichment-chips,
body:not(.theme-light) .web-enrichment-stepper,
body:not(.theme-light) .web-enrichment-modal footer {
  background: var(--bg-primary);
}
body:not(.theme-light) .web-enrichment-toggle,
body:not(.theme-light) .web-enrichment-websites > div,
body:not(.theme-light) .web-enrichment-note {
  background: var(--bg-tertiary);
}
body:not(.theme-light) .web-enrichment-add button,
body:not(.theme-light) .web-enrichment-stepper button,
body:not(.theme-light) .web-enrichment-presets button,
body:not(.theme-light) .web-enrichment-modal footer button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
body:not(.theme-light) .web-enrichment-icon,
body:not(.theme-light) .web-enrichment-body label b,
body:not(.theme-light) .web-enrichment-chips > span,
body:not(.theme-light) .web-enrichment-presets button[aria-pressed=true] {
  background: var(--bg-accent-subtle);
  color: var(--accent-primary-hover);
  border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-default));
}
body:not(.theme-light) .web-enrichment-chips.orange > span {
  background: color-mix(in srgb, var(--cat-utility) 12%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--cat-utility) 35%, var(--border-default));
  color: var(--cat-utility);
}
body:not(.theme-light) .web-enrichment-chips.times { background: transparent; }
body:not(.theme-light) .web-enrichment-toggle.enabled {
  background: color-mix(in srgb, var(--accent-success) 12%, var(--bg-secondary));
  color: var(--accent-success);
}
body:not(.theme-light) .website-icon { --website-accent: var(--accent-primary-hover); }
body:not(.theme-light) .website-icon.color-1 { --website-accent: var(--cat-utility); }
body:not(.theme-light) .website-icon.color-2 { --website-accent: var(--accent-success); }
body:not(.theme-light) .website-icon.color-3 { --website-accent: color-mix(in srgb, var(--accent-error) 70%, var(--text-primary)); }
body:not(.theme-light) .website-icon.color-4 { --website-accent: var(--accent-info); }
body:not(.theme-light) .web-enrichment-websites .website-icon {
  background: color-mix(in srgb, var(--website-accent) 15%, var(--bg-secondary));
  color: var(--website-accent);
}
body:not(.theme-light) .web-enrichment-warning {
  background: color-mix(in srgb, var(--accent-warning) 10%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--accent-warning) 35%, var(--border-default));
  color: var(--accent-warning);
}
body:not(.theme-light) .web-enrichment-error {
  background: color-mix(in srgb, var(--accent-error) 12%, var(--bg-secondary));
  color: color-mix(in srgb, var(--accent-error) 70%, var(--text-primary));
}
body:not(.theme-light) .web-enrichment-error button { color: var(--accent-primary-hover); }
body:not(.theme-light) .web-enrichment-modal footer .primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
body:not(.theme-light) .web-enrichment-modal button:enabled:hover { filter: brightness(1.12); }
body:not(.theme-light) .web-enrichment-modal button:focus-visible,
body:not(.theme-light) .web-enrichment-modal input:focus-visible,
body:not(.theme-light) .web-enrichment-modal textarea:focus-visible {
  outline-color: var(--accent-primary-hover);
}
.facebook-login-overlay { z-index: 1200; }
.modal.facebook-import-modal { --facebook-success: var(--accent-success); --facebook-error: var(--accent-error); --facebook-ready: var(--accent-info); --facebook-running: var(--accent-primary); width: 60vw; max-height: 90vh; display: flex; flex-direction: column; }
.theme-light .facebook-import-modal { --facebook-success: #047857; --facebook-error: #b91c1c; --facebook-ready: #0369a1; --facebook-running: #4f46e5; }
.modal.facebook-import-modal .btn-ghost { color: var(--text-secondary); }
.facebook-credentials-modal { width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.facebook-login-body { overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.facebook-login-body p { margin: 0; line-height: 1.5; }
.facebook-login-body label { display: flex; flex-direction: column; gap: 6px; }
.facebook-login-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.facebook-import-input { min-height: 120px; resize: vertical; font-family: monospace; }
.facebook-login-note { font-size: 12px; opacity: .8; }
.facebook-login-processing { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-default)); border-radius: 8px; background: var(--bg-accent-subtle); }
.facebook-login-processing > svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent-primary); }
.facebook-login-processing > div { min-width: 0; display: grid; gap: 6px; }
.facebook-login-processing strong { color: var(--text-primary); font-size: 13px; font-weight: 600; line-height: 1.5; }
.facebook-login-processing p { color: var(--text-secondary); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .facebook-login-processing > svg { animation: none; } }
.facebook-login-error { color: #d84b4b; }
.facebook-login-body .facebook-login-checkbox { flex-direction: row; align-items: center; font-size: 12px; }
.facebook-import-help { color: var(--text-secondary); font-size: 12px; }
.facebook-import-help summary { cursor: pointer; width: fit-content; color: var(--accent-primary); }
.facebook-import-help summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }
.facebook-import-help > div { display: grid; gap: 8px; margin-top: 10px; padding: 12px; background: var(--bg-tertiary); border-radius: 6px; }
.facebook-import-help code { overflow-wrap: anywhere; }
.facebook-import-summary { display: grid; gap: 8px; }
.facebook-import-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.facebook-import-summary-heading strong { font-size: 15px; }
.facebook-import-summary-heading > span, .facebook-import-counts { font-size: 12px; color: var(--text-secondary); }
.facebook-import-counts { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.facebook-import-counts:empty { display: none; }
.facebook-count-success { color: var(--facebook-success); }
.facebook-count-failed { color: var(--facebook-error); }
.facebook-import-progress { width: 100%; height: 6px; border: 0; border-radius: 6px; overflow: hidden; appearance: none; }
.facebook-import-progress::-webkit-progress-bar { background: var(--bg-tertiary); }
.facebook-import-progress::-webkit-progress-value { background: var(--accent-primary); border-radius: 6px; }
.facebook-import-results { max-height: 58vh; overflow: auto; border: 1px solid var(--border-default); border-radius: 6px; }
.facebook-import-results table { width: 100%; border-collapse: collapse; font-size: 12px; }
.facebook-import-results th, .facebook-import-results td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-default); overflow-wrap: anywhere; }
.facebook-import-results th { position: sticky; top: 0; background: var(--bg-secondary, #f1f4f8); white-space: nowrap; }
.facebook-import-results td:nth-child(2) { white-space: nowrap; }
.facebook-import-results tr:last-child td { border-bottom: 0; }
.facebook-status-badge { --facebook-status-color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--facebook-status-color); background: color-mix(in srgb, var(--facebook-status-color) 12%, transparent); }
.facebook-row-ready .facebook-status-badge { --facebook-status-color: var(--facebook-ready); }
.facebook-row-running .facebook-status-badge { --facebook-status-color: var(--facebook-running); }
.facebook-row-success .facebook-status-badge { --facebook-status-color: var(--facebook-success); }
.facebook-row-failed .facebook-status-badge, .facebook-row-invalid .facebook-status-badge { --facebook-status-color: var(--facebook-error); }
.facebook-login-body .facebook-row-message { margin-top: 6px; color: var(--text-secondary); }
.facebook-import-footer { align-items: center; flex-wrap: wrap; }
.facebook-import-reset { margin-right: auto; }
.campaign-schedule-ai-trigger { color: var(--accent-primary, #6366f1); margin-left: 8px; }
.campaign-schedule-ai-popover {
  position: fixed; width: min(400px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto;
  box-sizing: border-box; padding: 16px; border: 1px solid var(--border-default, #e2e8f0); border-radius: 12px;
  background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-shadow: 0 12px 36px #0002;
  font-size: 13px;
}
.campaign-schedule-ai-heading, .campaign-schedule-ai-heading strong, .campaign-schedule-ai-actions {
  display: flex; align-items: center; gap: 8px;
}
.campaign-schedule-ai-heading { justify-content: space-between; margin-bottom: 12px; }
.campaign-schedule-ai-popover label { display: block; margin-bottom: 6px; }
.campaign-schedule-ai-popover textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px; }
.campaign-schedule-ai-hint { margin-top: 6px; color: var(--text-secondary, #64748b); font-size: 12px; line-height: 1.5; }
.campaign-schedule-ai-actions { justify-content: flex-end; margin-top: 12px; }
.campaign-schedule-ai-error { color: var(--accent-error, #dc2626); margin-top: 10px; line-height: 1.5; }
.group-sharing-dialog{position:fixed;inset:0;margin:auto;height:fit-content;box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--border-default,var(--border-color,#dbe1ea));border-radius:12px;background:var(--bg-primary,#fff);color:var(--text-primary,#1e293b);box-shadow:0 24px 64px rgba(15,23,42,.22);overflow:hidden}
.group-sharing-dialog[open]{display:flex;flex-direction:column}
.group-sharing-dialog::backdrop{background:rgba(15,23,42,.4)}
.group-sharing-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border-default,var(--border-color,#dbe1ea));flex:none}
.group-sharing-dialog-header > div{min-width:0}
.group-sharing-dialog-header h3{margin:0;font-size:16px;font-weight:600}
.group-sharing-dialog-header p{margin:5px 0 0;font-size:12px;color:var(--text-secondary,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-sharing-dialog-header .btn-icon{flex:none}
.group-sharing-dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border-default,var(--border-color,#dbe1ea));flex:none}
.group-sharing-panel{display:flex;flex-direction:column;gap:12px;padding:20px;min-height:0;overflow:auto;font-size:13px}
.group-sharing-trigger{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap}
.group-sharing-panel label{display:flex;align-items:center;gap:8px;cursor:pointer}
.group-sharing-panel input[type=checkbox],.group-sharing-panel input[type=radio]{width:15px;height:15px;flex:none;accent-color:#6366f1}
.group-sharing-panel input:not([type=checkbox]):not([type=radio]){min-width:0;width:100%;padding:8px;border:1px solid var(--border-default,var(--border-color,#dbe1ea));border-radius:6px;background:transparent;color:inherit;box-sizing:border-box}
.group-sharing-panel p{margin:0;line-height:1.5}.group-sharing-panel [role=alert]{color:#b91c1c}
.group-sharing-panel button{align-self:flex-start}
.group-sharing-staff{display:flex;flex-direction:column;gap:9px;max-height:220px;overflow:auto}
.group-sharing-staff small{opacity:.65}
.group-sharing-badge{display:block!important;box-sizing:border-box;min-width:0;width:fit-content;max-width:100%;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;line-height:1.45;padding:3px 6px;border-radius:5px;background:rgba(99,102,241,.09);color:#6366f1;font-size:11px!important;font-weight:500}
.group-copy-action{display:flex;flex-direction:column;gap:6px;margin:8px 0}.group-copy-action [role=alert]{color:#b91c1c}

.data-group-info-overview > .group-sharing-badge{margin-top:10px}
.ctw-manager-group-title{display:flex;align-items:center;gap:8px;min-width:0}
.ctw-manager-group-title > strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctw-manager-group-description{margin:6px 0;font-size:12px;color:var(--text-secondary,#64748b);white-space:pre-wrap;overflow-wrap:anywhere;max-height:60px;overflow:auto}
.ctw-manager-group-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;min-width:0}
.ctw-manager-group-actions > .group-copy-action{margin:0;min-width:0}
.ctw-manager-preview > .group-copy-action{padding:0 12px}
.send-exclusions,
.exclusion-modal {
  --ex-accent: var(--accent-primary);
  --ex-border: var(--border-default);
  --ex-divider: var(--border-default);
  --ex-surface: var(--bg-secondary);
  --ex-subtle: var(--bg-tertiary);
  --ex-muted: var(--text-secondary);
  --ex-text: var(--text-primary);
  --ex-tint: var(--bg-accent-subtle);
  --ex-chip-border: #6356a1;
  --ex-disabled: var(--bg-primary);
  --ex-danger-bg: #40232b;
  --ex-danger: #f5a0a0;
  --ex-success: #34d399;
  --ex-warning-bg: #43351f;
  --ex-warning: #edc481;
  color: var(--ex-text);
  font: 13px/1.5 var(--font-family);
  text-align: left;
}

body.theme-light .send-exclusions,
body.theme-light .exclusion-modal {
  --ex-accent: #4f46e5;
  --ex-border: #dfe5ee;
  --ex-divider: #eef2f7;
  --ex-surface: #fff;
  --ex-subtle: #f6f8fb;
  --ex-muted: #5b6b80;
  --ex-text: #334155;
  --ex-tint: #f7f8ff;
  --ex-chip-border: #c7c8f7;
  --ex-disabled: #fbfcfe;
  --ex-danger-bg: #fdeceb;
  --ex-danger: #b4322f;
  --ex-success: #15803d;
  --ex-warning-bg: #fdf3e4;
  --ex-warning: #92600c;
}

.send-exclusions,
.send-exclusions *,
.exclusion-modal,
.exclusion-modal * { box-sizing: border-box; }
.send-exclusions svg,
.exclusion-modal svg { flex-shrink: 0; }
.send-exclusions p,
.exclusion-modal p { margin: 0; }
.send-exclusions button,
.exclusion-modal button,
.send-exclusions select,
.exclusion-modal select,
.exclusion-modal input { font: inherit; color: inherit; }
.send-exclusions button,
.exclusion-modal button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 1px solid var(--ex-border);
  border-radius: 9px;
  background: var(--ex-surface);
  padding: 7px 12px;
  cursor: pointer;
  line-height: 1.2;
}
.send-exclusions button:hover:not(:disabled),
.exclusion-modal button:hover:not(:disabled) { background: var(--ex-subtle); }
.send-exclusions button:disabled,
.exclusion-modal button:disabled { opacity: .5; cursor: default; }
.send-exclusions :focus-visible,
.exclusion-modal :focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 2px; }
.send-exclusions .exclusion-link,
.exclusion-modal .exclusion-link {
  padding: 2px 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ex-accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.send-exclusions .exclusion-link:hover:not(:disabled),
.exclusion-modal .exclusion-link:hover:not(:disabled) { background: transparent; text-decoration: underline; }
.send-exclusions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--ex-border);
  border-radius: 14px;
  background: var(--ex-surface);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .06);
}
.exclusion-header { display: flex; align-items: center; gap: 10px; }
.exclusion-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ex-danger-bg);
  color: var(--ex-danger);
}
.exclusion-heading-copy { flex: 1; min-width: 0; }
.exclusion-title-row { display: flex; align-items: center; gap: 8px; }
.exclusion-title-row > button { flex-shrink: 0; margin-left: 0; }
.exclusion-heading-copy strong { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.exclusion-heading-copy p { margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--ex-muted); }
.exclusion-badge { border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 600; background: var(--ex-subtle); color: var(--ex-muted); white-space: nowrap; }
.exclusion-default {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ex-divider);
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--ex-subtle);
  font-size: 12.5px;
}
.exclusion-default > svg { color: var(--ex-success); }
.exclusion-default > span { flex: 1; min-width: 0; }
.exclusion-default > small { display: flex; align-items: center; gap: 4px; color: var(--ex-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.exclusion-account-label { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.send-exclusions select,
.exclusion-modal select,
.exclusion-modal input:not([type=checkbox]) {
  min-width: 0;
  max-width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 13px;
  border: 1px solid var(--ex-border);
  border-radius: 10px;
  background: var(--ex-surface);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 500;
}
.exclusion-account-label select { flex: 1; width: 0; }
.exclusion-label-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 7px; }
.exclusion-label-row > span { font-size: 13.5px; font-weight: 600; }
.exclusion-label-row > small { color: var(--ex-muted); font-size: 12px; overflow-wrap: anywhere; }
.exclusion-picker { display: flex; align-items: stretch; gap: 8px; }
.exclusion-dropdown { flex: 1; min-width: 0; position: relative; }
.send-exclusions .exclusion-group-trigger {
  width: 100%;
  min-height: 46px;
  height: 100%;
  justify-content: space-between;
  border-radius: 10px;
  padding: 5px 14px;
  text-align: left;
}
.exclusion-picker-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; }
.exclusion-picker-copy > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.exclusion-picker-name { font-size: 14px; font-weight: 600; }
.exclusion-picker-copy small { color: var(--ex-muted); font-size: 11.5px; font-weight: 400; overflow-wrap: anywhere; }
.exclusion-placeholder { color: var(--ex-muted); font-size: 13px; font-weight: 400; }
.send-exclusions .exclusion-add { flex: 0 0 46px; min-height: 46px; padding: 0; border-radius: 10px; color: var(--ex-accent); }
.exclusion-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 300px;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--ex-border);
  border-radius: 11px;
  background: var(--ex-surface);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}
.exclusion-menu button[role=option] { justify-content: flex-start; width: 100%; padding: 9px 10px; border: 0; text-align: left; font-size: 13.5px; font-weight: 600; }
.exclusion-menu button[aria-selected=true] { background: var(--ex-tint); color: var(--ex-accent); }
.exclusion-menu .exclusion-menu-add { width: 100%; justify-content: flex-start; padding: 10px; margin-top: 4px; border: 0; border-top: 1px solid var(--ex-divider); border-radius: 0; color: var(--ex-accent); font-size: 12px; font-weight: 600; }
.exclusion-menu .exclusion-menu-empty { padding: 10px; font-size: 12px; color: var(--ex-muted); }
.send-exclusions .exclusion-helper { margin-top: 7px; color: var(--ex-muted); font-size: 12px; }
.exclusion-summary { padding: 11px 12px; border: 1px solid var(--ex-chip-border); border-radius: 10px; background: var(--ex-tint); }
.exclusion-summary-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; font-size: 12px; color: var(--ex-muted); }
.exclusion-summary-actions { display: flex; gap: 12px; }
.exclusion-summary-rules { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.exclusion-summary-rules > div { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; }
.exclusion-summary-rules > div > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.exclusion-join { width: 46px; flex: 0 0 46px; padding: 3px 0; border-radius: 6px; background: var(--ex-subtle); color: var(--ex-muted); text-align: center; font-size: 10.5px; line-height: 1.5; font-weight: 700; }
.exclusion-join.and { color: var(--ex-accent); background: var(--ex-tint); }
.exclusion-join.or { color: var(--ex-warning); background: var(--ex-warning-bg); }
.exclusion-divider { height: 1px; background: var(--ex-divider); }
.exclusion-lists { position: relative; }
.exclusion-lists > summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px 6px 8px; border: 1px solid var(--ex-border); border-radius: 10px; list-style: none; cursor: pointer; }
.exclusion-lists > summary::-webkit-details-marker { display: none; }
.exclusion-chips { display: flex; flex: 1; flex-wrap: wrap; gap: 5px; min-width: 0; }
.exclusion-chips > .exclusion-placeholder { padding-left: 5px; }
.exclusion-list-chip { display: inline-flex; align-items: center; max-width: 100%; gap: 7px; padding: 4px 6px 4px 10px; border: 1px solid var(--ex-chip-border); border-radius: 999px; background: var(--ex-tint); color: var(--ex-accent); font-size: 12px; font-weight: 600; }
.exclusion-list-chip > span { min-width: 0; overflow-wrap: anywhere; }
.exclusion-list-chip > small { color: var(--ex-muted); font-size: 11px; font-weight: 400; }
.exclusion-list-chip > button { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.exclusion-list-option { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.exclusion-list-option:hover { background: var(--ex-subtle); }
.send-exclusions input.exclusion-checkbox,
.exclusion-modal input.exclusion-checkbox {
  appearance: none;
  display: block;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ex-border);
  border-radius: 5px;
  background: var(--ex-surface);
  cursor: pointer;
}
.send-exclusions input.exclusion-checkbox:checked,
.exclusion-modal input.exclusion-checkbox:checked {
  border-color: var(--ex-accent);
  background-color: var(--ex-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}
.exclusion-modal input.exclusion-checkbox:disabled { cursor: default; opacity: .5; }
.exclusion-list-help { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
.exclusion-list-help p { color: var(--ex-muted); font-size: 12px; }
.exclusion-list-help .exclusion-link { padding: 0; }
.exclusion-error { color: var(--ex-danger); font-size: 12px; overflow-wrap: anywhere; }
.exclusion-error .exclusion-link { margin-left: 6px; }
.exclusion-control-group > .exclusion-error,
.exclusion-summary > p { margin-top: 7px; }

/* The editor follows the design's 660px header/body/footer layout. */
.exclusion-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: flex-start; justify-content: center; padding: 36px 20px; background: rgba(15, 23, 42, .45); }
.exclusion-modal { display: flex; flex-direction: column; width: 660px; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: 14px; background: var(--ex-surface); box-shadow: 0 26px 70px rgba(15, 23, 42, .24); }
.exclusion-modal > .exclusion-header { flex-shrink: 0; padding: 15px 18px; gap: 11px; border-bottom: 1px solid var(--ex-divider); }
.exclusion-modal h3 { margin: 0; color: var(--text-primary); font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.exclusion-modal .exclusion-close { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ex-muted); }
.exclusion-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; }
.exclusion-modal fieldset { display: flex; flex-direction: column; gap: 15px; min-width: 0; margin: 0; padding: 0; border: 0; }
.exclusion-identity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.exclusion-identity label { display: flex; flex-direction: column; min-width: 0; gap: 6px; font-size: 12.5px; font-weight: 600; }
.exclusion-identity input { width: 100%; }
.exclusion-identity input[readonly] { text-overflow: ellipsis; }
.exclusion-identity i { color: var(--ex-danger); font-style: normal; }
.exclusion-account-note { display: flex; align-items: flex-start; gap: 4px; margin-top: 6px; color: var(--ex-success); font-size: 11.5px; }
.exclusion-account-note svg { margin-top: 2px; }
.exclusion-mode { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; }
.exclusion-mode > strong { color: var(--text-primary); font-size: 13.5px; font-weight: 700; }
.exclusion-mode-control { display: flex; align-items: center; gap: 10px; }
.exclusion-mode-control > span { font-size: 12px; color: var(--ex-muted); }
.exclusion-segment { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--ex-subtle); }
.exclusion-segment button { padding: 5px 14px; border: 0; border-radius: 7px; background: transparent; font-size: 12.5px; font-weight: 700; color: var(--ex-muted); }
.exclusion-segment button[aria-pressed=true] { background: var(--ex-surface); color: var(--ex-accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.exclusion-modal .exclusion-mode-hint { margin-top: 6px; font-size: 11.5px; color: var(--ex-muted); }
.exclusion-source { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 11px; padding: 11px 12px; border: 1px solid var(--ex-chip-border); border-radius: 11px; background: var(--ex-tint); }
.exclusion-source > span:first-child { font-size: 13px; font-weight: 600; }
.exclusion-source > small { padding: 2px 8px; border-radius: 999px; color: var(--ex-danger); background: var(--ex-danger-bg); font-size: 10.5px; font-weight: 700; }
.exclusion-source-account { flex: 1 1 220px; min-width: 0; padding: 8px 11px; border: 1px solid var(--ex-border); border-radius: 8px; background: var(--ex-surface); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exclusion-fields { margin-top: 9px; border: 1px solid var(--ex-border); border-radius: 11px; overflow: hidden; }
.exclusion-condition { display: grid; grid-template-columns: 17px 46px minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 12px; background: var(--ex-disabled); }
.exclusion-condition + .exclusion-condition { border-top: 1px solid var(--ex-divider); }
.exclusion-condition.enabled { background: var(--ex-surface); }
.exclusion-condition > .exclusion-checkbox { margin-top: 3px !important; }
.exclusion-condition > .exclusion-join { margin-top: 1px; }
.exclusion-condition-body { min-width: 0; opacity: .6; }
.exclusion-condition.enabled .exclusion-condition-body { opacity: 1; }
.exclusion-condition-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 25px; }
.exclusion-condition-heading > label { font-size: 13px; font-weight: 600; margin-right: 4px; cursor: pointer; }
.exclusion-operators { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.exclusion-operators button { padding: 4px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; }
.exclusion-operators button[aria-pressed=true] { background: var(--ex-tint); border-color: var(--ex-chip-border); color: var(--ex-accent); }
.exclusion-value-hint { flex: 1; text-align: right; font-size: 11px; color: var(--ex-muted); }
.exclusion-option-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.exclusion-option-list button { max-width: 100%; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.exclusion-option-list button[aria-pressed=true] { background: var(--ex-tint); border-color: var(--ex-chip-border); color: var(--ex-accent); }
.exclusion-option-list .exclusion-sync { color: var(--ex-muted); font-size: 11.5px; font-weight: 500; border-color: transparent; background: transparent; }
.exclusion-option-list > small { font-size: 12px; color: var(--ex-muted); }
.exclusion-inline-value { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; }
.exclusion-modal input.exclusion-number { width: 68px; height: 32px; padding: 0 8px; border-radius: 8px; text-align: center; font-size: 13px; }
.exclusion-modal input.exclusion-text-value { width: 100%; height: 34px; font-size: 13px; }
.exclusion-input-value { margin-top: 8px; }
.exclusion-sentence { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid var(--ex-divider); border-radius: 10px; background: var(--ex-subtle); font-size: 12.5px; line-height: 1.6; }
.exclusion-sentence > svg { margin-top: 3px; color: var(--ex-muted); }
.exclusion-sentence > span { min-width: 0; overflow-wrap: anywhere; }
.exclusion-modal-body > .exclusion-error { margin-top: 12px; }
.exclusion-modal footer { display: flex; flex-shrink: 0; align-items: center; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--ex-divider); background: var(--ex-disabled); }
.exclusion-footnote { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 500; color: var(--ex-success); overflow-wrap: anywhere; }
.exclusion-footnote.invalid { color: var(--ex-warning); }
.exclusion-modal footer > button { flex-shrink: 0; height: 38px; padding: 0 15px; font-size: 12.5px; font-weight: 600; }
.exclusion-modal footer > .exclusion-primary { padding: 0 17px; border-color: var(--ex-accent); background: var(--ex-accent); color: #fff; }
.exclusion-modal footer > .exclusion-primary:hover:not(:disabled) { background: var(--ex-accent); filter: brightness(.95); }
.exclusion-modal footer > .exclusion-primary:disabled { background: var(--ex-subtle); border-color: var(--ex-border); color: var(--ex-muted); opacity: 1; }

@media (max-width: 600px) {
  .send-exclusions { padding: 14px; }
  .exclusion-header { flex-wrap: wrap; }
  .send-exclusions .exclusion-badge { margin-left: 40px; }
  .send-exclusions .exclusion-heading-copy { flex-basis: calc(100% - 40px); }
  .exclusion-default { align-items: flex-start; flex-wrap: wrap; }
  .exclusion-default > svg { margin-top: 3px; }
  .exclusion-default > small { margin-left: 23px; }
  .exclusion-overlay { padding: 12px; }
  .exclusion-modal > .exclusion-header { flex-wrap: nowrap; padding: 14px; }
  .exclusion-modal-body { padding: 14px; }
  .exclusion-identity { grid-template-columns: minmax(0, 1fr); }
  .exclusion-mode { align-items: flex-start; }
  .exclusion-mode-control { margin-left: auto; }
  .exclusion-condition { grid-template-columns: 17px 36px minmax(0, 1fr); gap: 7px; padding: 11px 9px; }
  .exclusion-condition > .exclusion-join { width: 36px; }
  .exclusion-value-hint { flex-basis: 100%; text-align: left; }
  .exclusion-modal footer { flex-wrap: wrap; justify-content: flex-end; padding: 12px 14px; }
  .exclusion-footnote { flex-basis: 100%; }
}
.newsfeed-message-requests .schedule-hint {
  margin: 0;
}

.newsfeed-message-request-rules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.newsfeed-message-request-rule {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) 32px;
  align-items: start;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

.newsfeed-message-request-rule .stepper-form-group {
  min-width: 0;
  margin-bottom: 0;
}

.newsfeed-message-request-rule .stepper-textarea {
  min-height: 80px;
}

.newsfeed-message-request-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
}

.newsfeed-message-request-remove:hover:not(:disabled) {
  color: var(--accent-danger, #ef4444);
}

.newsfeed-message-request-add {
  align-self: flex-start;
}

.newsfeed-message-request-remove:disabled,
.newsfeed-message-request-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .newsfeed-message-request-rule {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .newsfeed-message-request-rule .stepper-form-group {
    grid-column: 1;
  }

  .newsfeed-message-request-remove {
    grid-column: 2;
    grid-row: 1;
  }
}
.zalo-auxiliary-actions {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  container-type: inline-size;
}

.zalo-auxiliary-card {
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.zalo-auxiliary-card > .zalo-auxiliary-toggle {
  padding: 12px 16px;
  gap: 9px;
  font-weight: 600;
}

.zalo-auxiliary-card.is-enabled > .zalo-auxiliary-toggle {
  background: var(--bg-accent-subtle);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.zalo-auxiliary-body {
  display: grid;
  gap: 14px;
  padding: 14px 16px;
}

.zalo-auxiliary-body .stepper-form-group {
  margin-bottom: 0;
}

.zalo-tag-settings {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.zalo-tag-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px;
}

.zalo-tag-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.zalo-tag-input-row .stepper-input {
  flex: 1;
  min-width: 0;
}

.zalo-tag-sync {
  flex-shrink: 0;
  white-space: nowrap;
}

.zalo-auxiliary-rules {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

.zalo-auxiliary-rule-heading,
.zalo-tag-choices-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.zalo-auxiliary-rule-options {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.zalo-auxiliary-rule-heading {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  background: var(--bg-accent-subtle);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.zalo-auxiliary-rule-heading .zalo-auxiliary-hint {
  font-weight: 400;
}

.zalo-auxiliary-rule-options .schedule-checkbox-label,
.zalo-alias-rules .schedule-checkbox-label {
  gap: 8px;
  font-size: 12px;
}

.zalo-auxiliary-hint {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.zalo-auxiliary-rule-heading .zalo-auxiliary-hint,
.zalo-tag-choices-heading .zalo-auxiliary-hint {
  margin: 0;
}

.zalo-auxiliary-error {
  color: var(--accent-error);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.zalo-tag-choices {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.zalo-tag-choices-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  max-height: 144px;
  padding: 2px;
  margin: -2px;
  overflow-y: auto;
}

.zalo-tag-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.zalo-tag-choice:has(input:checked) {
  border-color: var(--accent-primary);
  background: var(--bg-accent-subtle);
  color: var(--text-primary);
}

.zalo-tag-choice:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.zalo-tag-choice:focus-within {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.zalo-tag-choice:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.zalo-tag-choice input {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--accent-primary);
  cursor: inherit;
}

.zalo-tag-choice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.zalo-alias-rules {
  justify-items: start;
  gap: 10px;
}

@container (max-width: 540px) {
  .zalo-tag-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .zalo-auxiliary-card > .zalo-auxiliary-toggle {
    padding: 12px;
  }

  .zalo-auxiliary-body {
    padding: 12px;
  }
}
.facebook-page-identity {
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.facebook-page-identity.is-enabled {
  background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-default));
}

.facebook-page-identity-heading { display: flex; align-items: flex-start; gap: 10px; }
.facebook-page-identity-heading > div { min-width: 0; }
.facebook-page-identity-heading strong { display: block; font-size: 13px; font-weight: 600; }
.facebook-page-identity-heading p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

.facebook-page-identity-switch {
  position: relative;
  width: 34px;
  height: 20px;
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  padding: 0;
  background: var(--border-strong);
  cursor: pointer;
}

.facebook-page-identity-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.facebook-page-identity-switch[aria-checked=true] { background: var(--accent-primary); }
.facebook-page-identity-switch[aria-checked=true] span { transform: translateX(14px); }
.facebook-page-identity-body { position: relative; margin-top: 12px; }
.facebook-page-identity-label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; margin-bottom: 6px; }
.facebook-page-identity-label label { flex: 1; margin: 0; white-space: nowrap; }
.facebook-page-identity-label > span { color: var(--text-secondary); font-size: 11px; }
.facebook-page-identity-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.facebook-page-identity-select { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 0; height: 38px; padding: 0 12px; text-align: left; cursor: pointer; }
.facebook-page-identity-select > svg { flex: none; color: var(--text-secondary); }
.facebook-page-identity-load { flex: none; height: 38px; }
.facebook-page-identity button:disabled { opacity: .55; cursor: not-allowed; }
.facebook-page-identity button:focus-visible, .facebook-page-identity-menu button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.facebook-page-identity-select:not(:disabled):hover { border-color: var(--border-hover); }
.facebook-page-avatar { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: var(--accent-primary); background: var(--bg-accent-subtle); font-size: 11px; font-weight: 600; }
.facebook-page-identity-name { flex: 1; min-width: 0; }
.facebook-page-identity-name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facebook-page-identity-name small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
.facebook-page-identity-select .facebook-page-identity-name { display: flex; align-items: baseline; gap: 8px; }
.facebook-page-identity-select .facebook-page-identity-name small { flex: none; max-width: 50%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.facebook-page-identity-menu {
  position: fixed;
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.facebook-page-identity-menu button { display: flex; align-items: center; gap: 8px; padding: 8px; width: 100%; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.facebook-page-identity-menu button[aria-selected=true] { background: var(--bg-accent-subtle); border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-default)); }
.facebook-page-identity-menu button:hover { background: var(--bg-hover); }
.facebook-page-identity-menu button > svg { flex: none; color: var(--accent-primary); }
.facebook-page-identity-menu p { padding: 12px; text-align: center; font-size: 12px; color: var(--text-secondary); }

.facebook-page-identity-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent-info) 20%, var(--border-default));
  background: color-mix(in srgb, var(--accent-info) 6%, var(--bg-secondary));
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.facebook-page-identity-hint svg { flex: none; margin-top: 2px; color: var(--accent-info); }
.facebook-page-identity-help, .facebook-page-identity-error { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.facebook-page-identity-error { color: var(--accent-error); }
.facebook-page-identity .is-spinning { animation: facebook-page-spin .9s linear infinite; }
@keyframes facebook-page-spin { to { transform: rotate(360deg); } }
.campaign-account-picker-scroll {
  max-height: min(280px, 38vh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-account-picker {
  width: 100%;
  border-spacing: 0;
  font-size: 13px;
  text-align: left;
}

.campaign-account-picker th,
.campaign-account-picker td {
  padding: 2px 10px;
  white-space: nowrap;
  vertical-align: middle;
}

.campaign-account-picker thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
}

.campaign-account-picker th {
  height: 23px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}

.campaign-account-picker-caption,
.campaign-account-picker thead tr:nth-child(2) th,
.campaign-account-picker-action {
  text-align: center;
}

.campaign-account-picker td:first-child,
.campaign-account-picker th:first-child[rowspan] {
  width: 40%;
}

.campaign-account-picker .account-select-account-row {
  padding-left: 18px;
}

.campaign-account-picker .account-checkbox-option .account-select-account-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 230px;
  max-width: 360px;
  overflow: visible;
}

.campaign-account-picker-identity {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-account-picker-login {
  flex: 0 0 auto;
  white-space: nowrap;
}

.campaign-account-picker-group {
  background: var(--bg-secondary);
}

.campaign-account-picker-row:hover {
  background: var(--bg-hover);
}

.campaign-account-picker-row td {
  border-bottom: 1px solid var(--border-default);
}

.campaign-account-picker .account-checkbox-option {
  min-height: 24px;
}

.campaign-account-picker-action .is-normal {
  color: var(--accent-success, #22c55e);
}

.campaign-account-picker-action .is-limited {
  color: var(--accent-warning);
}

.campaign-account-picker-action .is-unavailable,
.campaign-account-picker-note,
.campaign-account-picker-empty {
  color: var(--text-secondary);
}

.campaign-account-picker-note {
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap;
}

.campaign-account-picker-empty {
  padding: 12px;
  font-size: 13px;
  text-align: center;
}
.content-template-load-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #e4e4e7);
  border-radius: 8px;
  background: var(--bg-secondary, #f8fafc);
  font-size: 13px;
  flex-shrink: 0;
}

.content-template-load-notice .btn {
  flex-shrink: 0;
}
.column-filter-heading{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.column-filter-trigger{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-secondary,#64748b);padding:4px;border-radius:4px;cursor:pointer}
.column-filter-trigger:hover,.column-filter-trigger.is-active{background:var(--bg-accent-subtle,#ede9fe);color:var(--accent-primary,#7c3aed)}
.column-filter-trigger:disabled{opacity:.35;cursor:not-allowed}
.column-filter-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 2px;font-size:12px;min-height:36px}
.column-filter-bar>.text-muted{display:inline-flex;align-items:center;gap:6px}
.column-filter-chip{display:inline-flex;align-items:center;max-width:360px;background:var(--bg-accent-subtle,#ede9fe);border:1px solid var(--border-default,#bfdbfe);border-radius:5px;color:var(--text-primary,#1e3a5f)}
.column-filter-chip button,.column-filter-clear{border:0;background:transparent;color:inherit;cursor:pointer;padding:5px 7px;font:inherit}
.column-filter-chip button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.column-filter-chip button:last-child{display:flex;flex-shrink:0}
.column-filter-clear{color:var(--accent-primary,#7c3aed)}
.column-filter-popover{position:fixed;z-index:20000;width:332px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;background:var(--bg-primary,#fff);color:var(--text-primary,#1f2937);border:1px solid var(--border-default,#d1d5db);border-radius:8px;box-shadow:0 10px 32px #0003;padding:14px;font-size:13px}
.column-filter-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.column-filter-title button{display:flex;background:none;border:0;color:inherit;cursor:pointer}
.column-filter-popover form>label{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.column-filter-popover input:not([type=checkbox]),.column-filter-popover select,.column-filter-popover textarea{box-sizing:border-box;width:100%;padding:7px 8px;border:1px solid var(--border-default,#d1d5db);background:var(--bg-secondary,#fff);color:inherit;border-radius:5px;font:inherit}
.column-filter-popover textarea{min-height:76px;resize:vertical}
.column-filter-options{max-height:180px;overflow:auto;display:flex;flex-direction:column;gap:7px;margin:10px 0}
.column-filter-options label{display:flex;gap:8px;align-items:center;overflow-wrap:anywhere}
.column-filter-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.column-filter-actions button{border:1px solid var(--border-default,#d1d5db);border-radius:5px;padding:7px 10px;cursor:pointer;font:inherit}
.column-filter-error{color:var(--accent-error,#dc2626);margin:8px 0}
.data-group-form-heading { flex: 1; min-width: 0; }
.data-group-form-heading p { margin: 3px 0 0; font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-group-external-sync-panel, .google-sheet-sync-dialog { --sheet-accent: #7c3aed; --sheet-soft: color-mix(in srgb, #7c3aed 7%, var(--bg-primary)); --sheet-border: color-mix(in srgb, #7c3aed 22%, var(--border-default)); }
.data-group-external-sync-panel { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.data-group-external-sync-panel > * { flex: none; }
.sheet-sync-banner { display: flex; gap: 9px; padding: 10px 12px; border: 1px solid color-mix(in srgb, #3b82f6 25%, var(--border-default)); border-radius: 11px; background: color-mix(in srgb, #3b82f6 8%, var(--bg-primary)); color: var(--text-primary); }
.sheet-sync-banner > svg { flex: none; margin-top: 2px; color: #3b82f6; }
.sheet-sync-banner strong { font-size: 12.5px; }
.sheet-sync-banner p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-secondary); }
.sheet-sync-section-heading { display: flex; align-items: center; gap: 6px; }
.sheet-sync-section-heading > strong { flex: 1; text-transform: uppercase; letter-spacing: .03em; font-size: 11.5px; }
.sheet-sync-section-heading .btn-icon { width: 26px; height: 26px; }
.sheet-sync-add, .sheet-sync-small-button, .sheet-sync-presets button, .sheet-sync-connect { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-primary); color: var(--text-secondary); font: 600 11.5px var(--font-family); padding: 4px 9px; cursor: pointer; }
.sheet-sync-add { height: 28px; border-color: var(--sheet-border); color: var(--sheet-accent); background: var(--sheet-soft); font-weight: 700; }
.sheet-sync-add:hover:not(:disabled), .sheet-sync-small-button:hover:not(:disabled) { border-color: var(--sheet-accent); color: var(--sheet-accent); }
.data-group-external-sync-panel button:disabled, .google-sheet-sync-dialog button:disabled { opacity: .5; cursor: not-allowed; }
.sheet-sync-source { border: 1px solid var(--border-default); border-radius: 11px; padding: 11px 12px; background: var(--bg-primary); }
.sheet-sync-source.is-enabled { border-color: var(--sheet-border); }
.sheet-sync-source-top { display: flex; align-items: flex-start; gap: 9px; }
.sheet-sync-source-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, #10b981 12%, var(--bg-primary)); color: #109467; }
.sheet-sync-source-open { flex: 1; min-width: 0; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 5px; border: 0; background: transparent; color: var(--text-primary); text-align: left; padding: 0; cursor: pointer; font-family: inherit; }
.sheet-sync-source-open strong { font-size: 12.5px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sheet-sync-source-open small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-tertiary); font-size: 11px; }
.sheet-sync-source-top > .btn-icon { width: 24px; height: 24px; flex: none; }
.sheet-sync-source-top > .btn-icon:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 8%, var(--bg-primary)); }
.sheet-sync-badge { flex: none; font-size: 10.5px; font-weight: 700; line-height: 16px; padding: 1px 7px; border-radius: 999px; color: var(--sheet-accent); background: var(--sheet-soft); }
.sheet-sync-badge.is-paused, .sheet-sync-badge.is-expired { color: var(--text-secondary); background: var(--bg-tertiary); }
.sheet-sync-badge.is-error, .sheet-sync-badge.is-retry { color: #b45309; background: color-mix(in srgb, #f59e0b 12%, var(--bg-primary)); }
.sheet-sync-source-metrics { display: flex; flex-wrap: wrap; gap: 6px 9px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-default); font-size: 11px; color: var(--text-secondary); }
.sheet-sync-source-metrics b { font-size: 11.5px; color: var(--text-primary); }
.sheet-sync-source-metrics .sheet-sync-added { color: #109467; }
.sheet-sync-source-metrics small { font-size: 11px; }
.sheet-sync-source-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; }
.sheet-sync-source-actions > small { font-size: 10.5px; color: var(--text-tertiary); }
.sheet-sync-source-error { color: #dc7373; margin: 8px 0 0; font-size: 11px; line-height: 1.5; }
.sheet-sync-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px dashed var(--border-default); border-radius: 11px; background: var(--bg-primary); padding: 22px 14px; text-align: center; color: var(--text-secondary); }
.sheet-sync-empty span { color: var(--text-tertiary); font-size: 11.5px; }
.sheet-sync-log { padding: 11px 12px; border: 1px solid var(--border-default); border-radius: 11px; background: var(--bg-primary); }
.sheet-sync-log h4 { margin: 0 0 10px; font-size: 12px; }
.sheet-sync-log-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; }
.sheet-sync-log-row + .sheet-sync-log-row { border-top: 1px solid var(--border-default); }
.sheet-sync-log-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #e0575b; flex: none; }
.sheet-sync-log-dot.is-success { background: #10b981; }
.sheet-sync-log-dot.is-running { background: #7c3aed; }
.sheet-sync-log-dot.is-cancelled { background: #94a3b8; }
.sheet-sync-log-row > div { flex: 1; min-width: 0; }
.sheet-sync-log-row strong { font-size: 11.5px; overflow-wrap: anywhere; }
.sheet-sync-log-row p { margin: 2px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.45; }
.sheet-sync-log-row time { flex: none; width: 54px; text-align: right; color: var(--text-tertiary); font-size: 10px; }
.sheet-sync-remove-confirm { margin-top: 10px; font-size: 11.5px; }
.sheet-sync-remove-confirm p { margin: 0 0 6px; }
.sheet-sync-remove-confirm button { border: 1px solid var(--border-default); padding: 3px 8px; border-radius: 6px; margin-right: 6px; cursor: pointer; background: var(--bg-secondary); color: var(--text-primary); }
.sheet-sync-remove-confirm button:last-child { color: #dc2626; }
.google-sheet-sync-dialog { width: min(520px,100%); border-radius: 14px; background: var(--bg-primary); }
.google-sheet-sync-dialog .data-group-form-header { padding: 15px 18px; gap: 11px; }
.google-sheet-sync-dialog .data-group-form-header h2 { font-size: 15px; font-weight: 700; }
.google-sheet-sync-dialog .data-group-form-icon { width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, #10b981 12%, var(--bg-primary)); color: #109467; }
.google-sheet-sync-dialog .data-group-form-header .btn-icon { width: 28px; height: 28px; }
.sheet-sync-form-body { padding: 16px 18px; overflow-y: auto; min-height: 0; }
.sheet-sync-fields { display: grid; grid-auto-rows: max-content; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.sheet-sync-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); min-width: 0; }
.sheet-sync-label > input, .sheet-sync-label > select { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; height: 38px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-primary); color: var(--text-primary); font: 500 12.5px var(--font-family); padding: 0 10px; min-width: 0; }
.sheet-required { color: #e0575b; }
.sheet-sync-link { display: flex; align-items: center; gap: 8px; height: 38px; margin-top: 6px; padding: 0 7px 0 11px; border: 1px solid var(--border-default); border-radius: 9px; }
.sheet-sync-link > svg { flex: none; color: var(--text-tertiary); }
.sheet-sync-link input { flex: 1; min-width: 0; border: 0; outline-offset: 2px; height: 30px; background: transparent; color: var(--text-primary); font: 400 12px var(--font-family); }
.sheet-sync-link button { flex: none; font-size: 10.5px; }
.sheet-sync-connected { display: flex; gap: 5px; align-items: center; color: #109467; font-size: 11.5px; margin: -8px 0 0; }
.sheet-sync-help { color: var(--text-tertiary); font-size: 11px; line-height: 1.5; margin: 6px 0 0; font-weight: 400; }
.sheet-sync-fields > .sheet-sync-help { margin: -8px 0 0; }
.sheet-sync-checkbox { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.sheet-sync-checkbox input { accent-color: var(--sheet-accent); }
.sheet-sync-schedule { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet-sync-schedule small { display: block; font-weight: 400; font-size: 11px; margin-top: 6px; color: var(--text-tertiary); }
.sheet-sync-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sheet-sync-presets button { padding: 4px 8px; }
.sheet-sync-presets .is-active { border-color: var(--sheet-border); background: var(--sheet-soft); color: var(--sheet-accent); }
.sheet-sync-mapping { border: 1px solid var(--border-default); border-radius: 11px; background: var(--bg-secondary); padding: 12px 13px; min-width: 0; }
.sheet-sync-mapping header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.sheet-sync-map-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.sheet-sync-map-row select { flex: 1; min-width: 0; width: 0; height: 32px; padding: 0 7px; border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-primary); background: var(--bg-primary); font: 500 12px var(--font-family); text-overflow: ellipsis; }
.sheet-sync-map-row select:nth-of-type(2) { color: var(--sheet-accent); }
.sheet-sync-map-row > svg { flex: none; color: var(--text-tertiary); }
.sheet-sync-map-row .btn-icon { width: 24px; height: 24px; flex: none; }
.sheet-sync-dedupe { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--sheet-border); border-radius: 11px; background: var(--sheet-soft); }
.sheet-sync-dedupe > svg { color: var(--sheet-accent); margin-top: 1px; flex: none; }
.sheet-sync-dedupe strong { font-size: 12.5px; }
.sheet-sync-dedupe p { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin: 2px 0 0; }
.sheet-sync-note { display: flex; align-items: flex-start; gap: 9px; font-size: 11.5px; line-height: 1.55; color: var(--text-secondary); border: 1px dashed var(--border-default); border-radius: 10px; padding: 10px 12px; }
.sheet-sync-note > svg { flex: none; margin-top: 2px; }
.sheet-sync-form-footer { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--border-default); background: var(--bg-secondary); flex: none; }
.sheet-sync-form-footer > span { flex: 1; }
.sheet-sync-form-footer .btn { height: 36px; font: 600 12px var(--font-family); padding: 0 11px; border: 1px solid var(--border-default); border-radius: 9px; white-space: nowrap; background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; }
.sheet-sync-form-footer .btn-primary { background: var(--sheet-accent); color: white; border-color: transparent; }
.sheet-sync-error { border: 1px solid color-mix(in srgb, #dc2626 30%, var(--border-default)); background: color-mix(in srgb, #dc2626 7%, var(--bg-primary)); color: var(--text-primary); border-radius: 9px; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.sheet-sync-form-body > .sheet-sync-error { margin-top: 12px; }
.sheet-sync-preview { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--sheet-border); border-radius: 9px; font-size: 11.5px; }
.sheet-sync-preview > strong { font-size: 12px; }
.sheet-sync-preview p { margin: 5px 0; }
.sheet-sync-preview-table { max-height: 160px; overflow: auto; }
.sheet-sync-preview table { width: 100%; border-collapse: collapse; }
.sheet-sync-preview th, .sheet-sync-preview td { text-align: left; max-width: 240px; padding: 5px; border-bottom: 1px solid var(--border-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-group-form-modal.sheet-sync-narrow-dialog { width: min(420px,100%); }
.btn.data-group-sync-narrow-button { display: none; }
/* Three tabs and the existing info actions must fit in the 330px minimum rail. */
.data-group-info-header { flex-wrap: wrap; }
.data-group-info-tabs { width: 100%; min-height: 31px; gap: 11px !important; }
.data-group-info-header-actions { margin-left: auto; }
.data-group-info-tabs > button { font-size: 11.5px; gap: 4px; }
.data-group-info-tabs > button::after { bottom: 0; }
.data-group-info-tabs > button span { min-width: 16px; padding: 2px 4px; }
@media (max-width: 1050px) { .btn.data-group-sync-narrow-button { display: inline-flex; flex: none; } }
@media (max-width: 540px) {
  .sheet-sync-schedule { grid-template-columns: 1fr; }
  .sheet-sync-form-footer { padding: 12px; gap: 5px; flex-wrap: wrap; }
  .sheet-sync-form-footer .btn { font-size: 11px; padding: 0 8px; }
  .sheet-sync-form-body { padding: 14px; }
}
.sheet-sync-add-menu { position: relative; }
.sheet-sync-add-options { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 172px; padding: 5px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-secondary); box-shadow: 0 6px 20px #0002; }
.sheet-sync-add-options button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text-primary); font-size: 12px; cursor: pointer; }
.sheet-sync-add-options button:hover { background: var(--bg-hover); }
.modal-overlay.phone-check-overlay { z-index: 3700; }
.phone-check-modal { position: relative; display: flex; flex-direction: column; width: min(1200px, 96vw); height: min(820px, 92vh); border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); overflow: hidden; }
.phone-check-modal h2 { margin: 0; font-size: 18px; }
.phone-check-config { display: flex; align-items: end; gap: 12px; padding: 20px 20px 8px; flex-wrap: wrap; }
.phone-check-config label, .phone-check-summary label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.phone-check-config label:first-child { flex: 1; min-width: 240px; }
.phone-check-config input { width: 150px; }
.phone-check-summary { padding: 10px 20px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.phone-check-stats { display: flex; flex: 1; min-width: 240px; flex-direction: column; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.phone-check-stats-row { display: flex; flex-wrap: wrap; gap: 16px; min-height: 20px; align-items: center; }
.phone-check-summary > p { flex-basis: 100%; margin: 0; font-size: 13px; }
.phone-check-summary label { flex-direction: row; align-items: center; }
.phone-check-summary select { width: auto; }
.phone-check-table-scroll { flex: 1; min-height: 0; overflow: auto; border-block: 1px solid var(--border-default); }
.phone-check-table-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.phone-check-table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--bg-secondary); text-align: left; white-space: nowrap; }
.phone-check-table-scroll th, .phone-check-table-scroll td { padding: 12px; border-bottom: 1px solid var(--border-default); }
.phone-check-table-scroll td:nth-child(3), .phone-check-table-scroll td:nth-child(5) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-check-table-scroll td:last-child { min-width: 180px; max-width: 330px; overflow-wrap: anywhere; }
.phone-check-status { white-space: nowrap; color: var(--text-secondary); }
.phone-check-status.is-found { color: var(--accent-success, #15803d); }
.phone-check-status.is-checking { color: var(--accent-primary, #2563eb); }
.phone-check-status.is-unknown { color: var(--accent-warning, #b45309); }
.phone-check-empty { text-align: center; height: 160px; color: var(--text-secondary); }
.phone-check-subdialog { position: absolute; inset: 0; z-index: 3; background: #0005; display: grid; place-items: center; }
.phone-check-subdialog > div { padding: 24px; border-radius: 10px; background: var(--bg-primary); max-width: 480px; }
.phone-check-subdialog button { margin: 8px 8px 0 0; }

.phone-check-overlay ~ .data-group-manager-backdrop { z-index: 3800; }
.phone-check-overlay ~ .data-group-form-backdrop { z-index: 3900; }
.ctw-workspace {
  --ctw-control-height: 36px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--bg-primary);
  color-scheme: dark;
}

body.theme-light .ctw-workspace {
  color-scheme: light;
}

/* Keep every control in this workspace on the akaAgent design system. Selects
   intentionally live here because stepper-select has no global base style. */
.ctw-workspace .stepper-input,
.ctw-workspace .stepper-select,
.ctw-workspace .stepper-textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.ctw-workspace .stepper-input,
.ctw-workspace .stepper-select {
  height: var(--ctw-control-height);
  min-height: var(--ctw-control-height);
}

.ctw-workspace .stepper-input {
  padding: 0 11px;
}

.ctw-workspace .stepper-select {
  appearance: none;
  padding: 0 36px 0 11px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  cursor: pointer;
}

.ctw-workspace .stepper-textarea {
  padding: 10px 11px;
  line-height: 1.55;
}

.ctw-workspace .stepper-input:hover:not(:disabled),
.ctw-workspace .stepper-select:hover:not(:disabled),
.ctw-workspace .stepper-textarea:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.ctw-workspace .stepper-input:focus,
.ctw-workspace .stepper-select:focus,
.ctw-workspace .stepper-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.ctw-workspace .stepper-input:disabled,
.ctw-workspace .stepper-select:disabled,
.ctw-workspace .stepper-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ctw-workspace .stepper-select option {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.ctw-workspace .btn {
  min-height: 34px;
}

.ctw-workspace .btn.btn-sm {
  min-height: 30px;
}

.ctw-workspace button.btn-icon:not(.btn) {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.ctw-workspace button:focus-visible,
.ctw-dialog button:focus-visible,
.ctw-dialog input:focus-visible,
.ctw-dialog textarea:focus-visible,
.ctw-dialog select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-primary) 65%, transparent);
  outline-offset: 2px;
}

.ctw-workspace.modal-mode {
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.ctw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(4px);
}

.ctw-modal-shell {
  width: min(1360px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

/* Shared library layout for both the standalone page and modal: groups,
   templates, and a persistent live preview. */
.ctw-manager-header {
  min-height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.ctw-manager-heading,
.ctw-manager-header-actions,
.ctw-manager-heading > div,
.ctw-manager-panel-title,
.ctw-manager-toolbar,
.ctw-manager-listbar,
.ctw-manager-preview-heading,
.ctw-manager-footer {
  min-width: 0;
}

.ctw-manager-heading,
.ctw-manager-header-actions,
.ctw-manager-panel-title,
.ctw-manager-listbar,
.ctw-manager-preview-heading,
.ctw-manager-footer {
  display: flex;
  align-items: center;
}

.ctw-manager-heading {
  gap: 11px;
}

.ctw-manager-heading-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.ctw-manager-heading h1,
.ctw-manager-heading p {
  margin: 0;
}

.ctw-manager-heading h1 {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.25;
}

.ctw-manager-heading p {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.ctw-manager-header-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.ctw-manager-body {
  display: grid;
  grid-template-columns: 256px minmax(420px, 1fr) 404px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.ctw-manager-groups,
.ctw-manager-library,
.ctw-manager-preview {
  min-width: 0;
  min-height: 0;
}

.ctw-manager-groups {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.ctw-manager-panel-title {
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px 10px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.ctw-manager-panel-title > span {
  min-width: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: center;
}

.ctw-manager-compact-search {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.ctw-manager-compact-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.ctw-manager-compact-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

.ctw-manager-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-top: 9px;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg-tertiary);
}

.ctw-manager-segments button {
  height: 27px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
}

.ctw-manager-segments button.active {
  color: var(--accent-primary);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
}

.ctw-manager-type-filter {
  margin-top: 9px;
}

.ctw-manager-group-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  margin-top: 9px;
  overflow-y: auto;
}

.ctw-manager-group-list > button {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 47px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ctw-manager-group-list > button:hover { background: var(--bg-tertiary); }
.ctw-manager-group-list > button.active {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
  box-shadow: inset 2px 0 0 var(--accent-primary);
}
.ctw-manager-group-list > button.inactive { opacity: 0.62; }
.ctw-manager-group-list > button > span { min-width: 0; }
.ctw-manager-group-list strong,
.ctw-manager-group-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctw-manager-group-list strong { color: var(--text-primary); font-size: 12px; }
.ctw-manager-group-list small { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; }
.ctw-manager-group-list em {
  min-width: 25px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
.ctw-manager-group-list > button.active em { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 17%, transparent); }

.ctw-manager-add-group {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  border: 1px dashed var(--border-default);
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ctw-manager-add-group:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.ctw-manager-library {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.ctw-manager-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
}

.ctw-manager-listbar {
  min-height: 48px;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}
.ctw-manager-listbar > div:first-child { min-width: 0; margin-right: auto; }
.ctw-manager-listbar strong,
.ctw-manager-listbar > div:first-child > span { display: block; }
.ctw-manager-listbar strong { color: var(--text-primary); font-size: 12px; }
.ctw-manager-listbar > div:first-child > span { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; }
.ctw-manager-listbar > select {
  height: 30px;
  max-width: 145px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  outline: 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 10.5px;
}

.ctw-manager-view-switch { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg-tertiary); }
.ctw-manager-view-switch button {
  display: grid;
  width: 28px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
}
.ctw-manager-view-switch button.active { color: var(--accent-primary); background: var(--bg-secondary); box-shadow: var(--shadow-sm); }

.ctw-manager-results { min-height: 0; flex: 1 1 auto; padding: 12px; overflow-y: auto; }
.ctw-manager-empty {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-tertiary);
  text-align: center;
}
.ctw-manager-empty strong { color: var(--text-secondary); }

.ctw-manager-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ctw-manager-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ctw-manager-card:hover { border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-default)); transform: translateY(-1px); }
.ctw-manager-card.is-selected { border-color: var(--accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 13%, transparent); }
.ctw-manager-card-main {
  display: flex;
  width: 100%;
  min-height: 178px;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 11px;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ctw-manager-card-title { display: flex; min-width: 0; align-items: center; gap: 7px; padding-right: 62px; }
.ctw-manager-card-title svg { flex: 0 0 auto; color: var(--accent-primary); }
.ctw-manager-card-title strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ctw-manager-card-group { color: var(--text-tertiary); font-size: 10px; }
.ctw-manager-card .ctw-channel-badges { min-height: 23px; margin-top: 0; }
.ctw-manager-excerpt {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ctw-manager-card-meta { display: flex; gap: 10px; margin-top: auto; padding-top: 7px; border-top: 1px solid var(--border-default); color: var(--text-tertiary); font-size: 9.5px; }
.ctw-manager-card-meta > span { display: flex; align-items: center; gap: 4px; }
.ctw-manager-card-actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 2px; }
.ctw-manager-card-actions .btn-icon,
.ctw-manager-row-actions .btn-icon { width: 27px !important; height: 27px !important; flex-basis: 27px !important; }
.ctw-manager-card-actions .danger:hover,
.ctw-manager-row-actions .danger:hover { color: var(--accent-error); }

.ctw-manager-table { overflow: hidden; border: 1px solid var(--border-default); border-radius: 11px; background: var(--bg-primary); }
.ctw-manager-table-head,
.ctw-manager-table > div:not(.ctw-manager-table-head) { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(90px, 130px) 52px 45px 62px; align-items: center; gap: 8px; min-height: 43px; padding: 7px 10px; }
.ctw-manager-table-head { color: var(--text-tertiary); background: var(--bg-tertiary); font-size: 9.5px; font-weight: 700; text-transform: uppercase; }
.ctw-manager-table > div:not(.ctw-manager-table-head) { border-top: 1px solid var(--border-default); color: var(--text-secondary); font-size: 10.5px; }
.ctw-manager-table > div.is-selected { background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-primary)); }
.ctw-manager-table-select { display: flex; min-width: 0; align-items: center; gap: 7px; border: 0; color: var(--text-primary); background: transparent; text-align: left; cursor: pointer; }
.ctw-manager-table-select svg { flex: 0 0 auto; color: var(--accent-primary); }
.ctw-manager-table-select strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-manager-row-actions { display: flex; justify-content: flex-end; gap: 2px; }

.ctw-manager-detail-list { display: flex; flex-direction: column; gap: 9px; }
.ctw-manager-detail-list > article { padding: 10px 11px; border: 1px solid var(--border-default); border-radius: 11px; background: var(--bg-primary); }
.ctw-manager-detail-list > article.is-selected { border-color: var(--accent-primary); }
.ctw-manager-detail-list article > button:first-child { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; border: 0; color: var(--text-primary); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ctw-manager-detail-list article > button:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-manager-detail-list article > button:first-child span { margin-left: auto; color: var(--text-tertiary); font-size: 10px; }
.ctw-manager-detail-list p { margin: 8px 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.45; }
.ctw-manager-detail-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-tertiary); font-size: 10px; }

.ctw-manager-preview { display: flex; flex-direction: column; border-left: 1px solid var(--border-default); background: var(--bg-primary); }
.ctw-manager-preview-heading { min-height: 58px; justify-content: space-between; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--border-default); }
.ctw-manager-preview-heading > div { min-width: 0; }
.ctw-manager-preview-heading strong,
.ctw-manager-preview-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctw-manager-preview-heading strong { color: var(--text-tertiary); font-size: 9.5px; letter-spacing: 0.07em; }
.ctw-manager-preview-heading span { margin-top: 3px; color: var(--text-primary); font-size: 12px; font-weight: 700; }
.ctw-manager-preview-channels { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 15px 0; }
.ctw-manager-preview-channels button { padding: 5px 8px; border: 1px solid var(--border-default); border-radius: 7px; color: var(--text-tertiary); background: var(--bg-secondary); font: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer; }
.ctw-manager-preview-channels button.active { border-color: var(--accent-primary); color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary)); }
.ctw-manager-preview-meta { display: flex; align-items: center; gap: 7px; padding: 8px 15px 0; }
.ctw-manager-preview-meta span,
.ctw-manager-preview-meta em { padding: 4px 8px; border-radius: 7px; font-size: 10px; font-style: normal; font-weight: 700; }
.ctw-manager-preview-meta span { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary)); }
.ctw-manager-preview-meta em { color: var(--accent-success); background: color-mix(in srgb, var(--accent-success) 12%, var(--bg-secondary)); }
.ctw-manager-preview-scroll { min-height: 0; flex: 1 1 auto; padding: 9px 15px 11px; overflow-y: auto; }
.ctw-manager-preview-scroll .ctw-preview-stage { min-height: 350px; }
.ctw-manager-sample-data { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; padding: 10px 15px 12px; border-top: 1px solid var(--border-default); color: var(--text-secondary); background: var(--bg-secondary); font-size: 10px; }
.ctw-manager-sample-data strong { grid-column: 1 / -1; color: var(--text-tertiary); font-size: 9.5px; letter-spacing: 0.05em; }
.ctw-manager-sample-data code { min-width: 92px; margin-right: 8px; color: var(--accent-primary); font-size: 9.5px; }
.ctw-manager-preview-empty { display: flex; min-height: 280px; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 30px; color: var(--text-tertiary); text-align: center; }
.ctw-manager-preview-empty strong { color: var(--text-secondary); }

.ctw-manager-footer { min-height: 56px; flex: 0 0 auto; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--border-default); color: var(--text-secondary); background: var(--bg-secondary); font-size: 11px; }

.ctw-page-header,
.ctw-editor-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.ctw-title-row,
.ctw-editor-heading,
.ctw-header-actions,
.ctw-editor-heading > div:first-child {
  display: flex;
  align-items: center;
}

.ctw-title-row {
  gap: 9px;
}

.ctw-title-row svg {
  color: var(--accent-primary);
}

.ctw-page-header h1,
.ctw-editor-header h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 720;
  color: var(--text-primary);
}

.ctw-page-header p,
.ctw-editor-header p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.ctw-header-actions {
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 8px;
  align-self: center;
}

.ctw-header-actions .btn {
  white-space: nowrap;
}

.ctw-close {
  margin-left: 4px;
}

.ctw-list-body,
.ctw-editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 28px;
}

.ctw-list-body {
  display: flex;
  flex-direction: column;
}

.ctw-filter-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(170px, 230px) minmax(180px, 240px) 34px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--card-shadow);
}

.ctw-filter-card .stepper-select {
  width: 100%;
}

.ctw-filter-card > .btn-icon {
  justify-self: center;
}

.ctw-search-field {
  min-width: 0;
  height: var(--ctw-control-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ctw-search-field:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.ctw-search-field:hover {
  border-color: var(--border-hover);
}

.ctw-search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}

.ctw-search-field input::placeholder {
  color: var(--text-tertiary);
}

.ctw-list-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 40px;
  padding: 12px 2px 9px;
  color: var(--text-primary);
}

.ctw-list-summary span {
  color: var(--text-tertiary);
  font-size: 12px;
}

.ctw-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px;
  align-content: start;
}

.ctw-template-card {
  min-width: 0;
  min-height: 224px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ctw-template-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.ctw-template-card-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ctw-template-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.ctw-template-title {
  min-width: 0;
}

.ctw-template-title h3 {
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-template-title span {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-row-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ctw-row-actions .btn-icon {
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
}

.ctw-row-actions .btn-icon.danger:hover:not(:disabled) {
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 10%, transparent);
}

.ctw-channel-badges {
  min-height: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 13px;
}

.ctw-channel-badge,
.ctw-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
}

.ctw-channel-badge.base {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.ctw-channel-badge.sms {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.ctw-channel-badge.zalo {
  color: #1687ef;
  background: rgba(22, 135, 239, 0.12);
  border-color: rgba(22, 135, 239, 0.25);
}

.ctw-channel-badge.facebook {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}

.ctw-channel-badge.email {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.ctw-template-excerpt {
  display: -webkit-box;
  min-height: 58px;
  overflow: hidden;
  margin: 10px 0 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ctw-card-image-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -2px 0 12px;
}

.ctw-card-image-strip img,
.ctw-card-image-strip span {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.ctw-card-image-strip span {
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 11px;
  font-weight: 600;
}

.ctw-template-card-foot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.ctw-template-card-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.ctw-template-card-foot svg {
  flex: 0 0 auto;
}

.ctw-template-card-foot span:last-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  margin-left: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-empty {
  flex: 1;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
  text-align: center;
}

.ctw-empty strong {
  color: var(--text-primary);
  font-size: 14px;
}

.ctw-empty span {
  color: var(--text-secondary);
}

.ctw-empty .btn {
  margin-top: 8px;
}

.ctw-empty.compact {
  min-height: 180px;
  border: 0;
  background: transparent;
}

.ctw-spin {
  animation: ctw-spin 0.8s linear infinite;
}

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

/* Editor */
.ctw-editor-heading {
  min-width: 0;
  gap: 10px;
}

.ctw-editor-heading > div:last-child {
  min-width: 0;
}

.ctw-editor-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ctw-general-card,
.ctw-images-section,
.ctw-content-card {
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--card-shadow);
}

.ctw-general-card,
.ctw-images-section {
  padding: 15px 16px 16px;
}

.ctw-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ctw-section-heading.horizontal {
  align-items: center;
}

.ctw-section-heading strong,
.ctw-content-heading strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.ctw-section-heading span,
.ctw-content-heading span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 400;
}

.ctw-general-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ctw-form-field {
  min-width: 0;
}

.ctw-form-field + .ctw-form-field {
  margin-top: 13px;
}

.ctw-general-grid .ctw-form-field + .ctw-form-field {
  margin-top: 0;
}

.ctw-form-field.compact {
  max-width: 190px;
}

.ctw-form-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.ctw-form-field label > span {
  color: var(--accent-error);
}

.ctw-form-field .stepper-input,
.ctw-form-field .stepper-select,
.ctw-form-field .stepper-textarea {
  width: 100%;
}

.ctw-form-field small {
  display: block;
  margin-top: 6px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.ctw-group-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.ctw-group-select-row .btn {
  white-space: nowrap;
  min-height: var(--ctw-control-height);
}

.ctw-image-empty {
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ctw-image-empty:hover:not(:disabled) {
  border-color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.ctw-image-empty:focus-visible {
  border-color: var(--accent-primary);
  outline: 2px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
  outline-offset: 2px;
}

.ctw-image-empty strong {
  color: var(--text-primary);
  font-size: 12.5px;
}

.ctw-image-empty span {
  font-size: 11px;
}

.ctw-image-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 10px;
}

.ctw-image-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.ctw-image-tile img,
.ctw-image-tile video {
  width: 100%;
  height: 92px;
  display: block;
  object-fit: cover;
  background: var(--bg-tertiary);
}

.ctw-image-tile-caption {
  overflow: hidden;
  padding: 6px 8px;
  color: var(--text-secondary);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-image-tile > button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  color: white;
  background: rgba(15, 23, 42, 0.72);
  cursor: pointer;
}

.ctw-image-tile > button:hover:not(:disabled) {
  background: var(--accent-error);
}

.ctw-image-count {
  margin-top: 7px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-align: right;
}

.ctw-content-card {
  overflow: hidden;
}

.ctw-outer-tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  gap: 2px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.ctw-outer-tabs button {
  position: relative;
  min-width: 112px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.ctw-outer-tabs button:hover,
.ctw-outer-tabs button.active {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.ctw-outer-tabs button:focus-visible,
.ctw-inner-tabs button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

.ctw-outer-tabs button.active {
  border-bottom-color: var(--accent-primary);
  color: var(--accent-primary);
}

.ctw-tab-check {
  width: 14px;
  height: 14px;
  padding: 1px;
  border-radius: 50%;
  color: white;
  background: var(--accent-success);
}

.ctw-content-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 14px 18px 11px;
}

.ctw-inner-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-default);
}

.ctw-inner-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.ctw-inner-tabs button:hover,
.ctw-inner-tabs button.active {
  color: var(--text-primary);
}

.ctw-inner-tabs button:hover:not(.active) {
  background: var(--bg-hover);
}

.ctw-inner-tabs button.active {
  border-bottom-color: var(--accent-primary);
  color: var(--accent-primary);
}

.ctw-tab-panel {
  min-height: 330px;
  padding: 16px 18px 18px;
}

.ctw-base-editor > p {
  margin: 8px 2px 0;
  color: var(--text-tertiary);
  font-size: 11px;
}

.ctw-rich-editor .email-html-editor-shell {
  min-height: 230px;
  background: var(--bg-primary);
}

.ctw-rich-editor .email-html-toolbar {
  background: var(--bg-tertiary);
}

.ctw-rich-editor .email-html-toolbar-select,
.ctw-rich-editor .email-html-toolbar-button {
  border-radius: var(--radius-sm);
}

.ctw-rich-editor .email-html-toolbar-select {
  appearance: none;
  padding: 0 28px 0 9px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 8px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.ctw-rich-editor .email-html-toolbar-select:focus,
.ctw-rich-editor .email-html-toolbar-button:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 12%, transparent);
  outline: none;
}

.ctw-rich-editor .email-html-editor-content {
  min-height: 168px;
}

.ctw-channel-editor {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ctw-format-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.ctw-format-setting strong {
  display: block;
  color: var(--text-primary);
  font-size: 12px;
}

.ctw-format-setting > div > span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.ctw-personalization-panel {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}

.ctw-personalization-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
}

.ctw-personalization-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.ctw-personalization-header > div {
  min-width: 0;
}

.ctw-personalization-header strong,
.ctw-personalization-header > div > span {
  display: block;
}

.ctw-personalization-header strong {
  color: var(--text-primary);
  font-size: 12px;
}

.ctw-personalization-header > div > span {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.45;
}

.ctw-personalization-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 12px 13px 13px;
}

.ctw-personalization-section {
  min-width: 0;
}

.ctw-personalization-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
}

.ctw-personalization-tokens,
.ctw-personalization-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ctw-personalization-token {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.ctw-personalization-token:hover:not(:disabled) {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  background: var(--bg-accent-subtle);
}

.ctw-personalization-token:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
  outline-offset: 2px;
}

.ctw-personalization-token:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ctw-personalization-token code {
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 500;
}

.ctw-personalization-date-row .stepper-select {
  width: auto;
  min-width: 124px;
  height: 31px;
  font-size: 10.5px;
}

.ctw-personalization-token.date {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-elevated));
}

.ctw-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ctw-toggle-row.disabled {
  opacity: 0.55;
}

.ctw-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ctw-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-primary) 65%, transparent);
  outline-offset: 2px;
}

.ctw-toggle:disabled {
  cursor: not-allowed;
}

.ctw-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.ctw-toggle.on {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.ctw-toggle.on span {
  transform: translateX(16px);
  background: white;
}

.ctw-variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ctw-variant-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.ctw-variant-card.active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 9%, transparent);
}

.ctw-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 41px;
  padding: 6px 9px 6px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-elevated);
}

.ctw-variant-head strong {
  font-size: 12px;
  color: var(--text-primary);
}

.ctw-variant-card > .ctw-variant-textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  min-height: 138px;
  resize: vertical;
  background: var(--bg-primary);
}

.ctw-variant-card .ctw-rich-editor .email-html-editor-shell {
  border: 0;
  border-radius: 0;
}

.ctw-sms-count {
  padding: 7px 10px;
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-align: right;
}

.ctw-add-variant {
  align-self: flex-start;
}

.ctw-channel-disabled {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-tertiary);
  text-align: center;
}

.ctw-channel-disabled strong {
  color: var(--text-primary);
  font-size: 14px;
}

.ctw-channel-disabled .btn {
  margin-top: 7px;
}

/* Group dialog */
.ctw-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 3250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop-strong);
  backdrop-filter: blur(3px);
}

.ctw-dialog {
  width: min(980px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 40px));
  max-height: min(760px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.ctw-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.ctw-dialog-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}

.ctw-dialog-header p {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 11.5px;
}

.ctw-group-dialog-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: 0;
  overflow: hidden;
}

.ctw-group-form-card,
.ctw-group-list-card {
  min-height: 0;
  padding: 17px;
  overflow-y: auto;
}

.ctw-group-list-card {
  background: var(--bg-secondary);
}

.ctw-group-form-card {
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.ctw-group-status-row {
  margin-top: 15px;
}

.ctw-group-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border-default);
}

.ctw-group-save {
  min-width: 128px;
}

.ctw-group-list-card {
  display: flex;
  flex-direction: column;
}

.ctw-group-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctw-group-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ctw-group-row:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.ctw-group-row.inactive {
  opacity: 0.72;
}

.ctw-group-order {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 11px;
  font-weight: 700;
}

.ctw-group-row-main {
  min-width: 0;
}

.ctw-group-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ctw-group-row-title strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-group-row-main p {
  overflow: hidden;
  margin: 2px 0;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-group-row-main > span {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.ctw-status-badge.inactive {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

/* Inline previews */
.ctw-preview-panel {
  min-height: 300px;
}

.ctw-preview-variant-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-bottom: 13px;
}

.ctw-preview-variant-tabs button {
  padding: 5px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-primary);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.ctw-preview-variant-tabs button:hover:not(.active) {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.ctw-preview-variant-tabs button.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.ctw-preview-variant-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-primary) 55%, transparent);
  outline-offset: 2px;
}

.ctw-preview-stage {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary) 9%, transparent), transparent 38%),
    var(--bg-primary);
}

.ctw-preview-phone {
  width: min(330px, 100%);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 7px solid #202333;
  border-radius: 28px;
  background: #f3f5f9;
  box-shadow: var(--shadow-md);
  color: #1f2937;
}

.ctw-preview-phone-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 14px;
  color: white;
  background: #3484f0;
  font-size: 12px;
}

.ctw-preview-phone.zalo .ctw-preview-phone-bar {
  justify-content: flex-start;
  background: #0868ff;
}

.ctw-preview-chat-date {
  margin: 13px auto 5px;
  color: #8490a3;
  font-size: 9px;
}

.ctw-preview-message-row {
  display: flex;
  justify-content: flex-end;
  padding: 9px 13px;
}

.ctw-preview-message-bubble {
  max-width: 86%;
  overflow: hidden;
  padding: 9px 11px;
  border-radius: 14px 14px 3px 14px;
  background: #dcecff;
  color: #172033;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ctw-preview-phone.sms .ctw-preview-message-bubble {
  background: #2f7df6;
  color: white;
}

.ctw-preview-composer {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 7px 11px;
  border-top: 1px solid #d9deea;
  color: #8490a3;
  background: white;
  font-size: 10px;
}

.ctw-preview-composer span {
  flex: 1;
  padding: 6px 10px;
  border-radius: 15px;
  background: #f0f2f6;
}

.ctw-preview-avatar {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, #8b5cf6, #4f46e5);
  font-size: 9px;
  font-weight: 700;
}

.ctw-preview-avatar.zalo {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.25);
}

.ctw-preview-avatar.facebook {
  background: linear-gradient(135deg, #1877f2, #60a5fa);
}

.ctw-preview-facebook-card,
.ctw-preview-base-card,
.ctw-preview-email-card {
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  color: #172033;
  background: white;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.ctw-preview-facebook-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
}

.ctw-preview-facebook-head div {
  display: flex;
  flex-direction: column;
}

.ctw-preview-facebook-head strong {
  font-size: 11px;
}

.ctw-preview-facebook-head span {
  color: #667085;
  font-size: 9px;
}

.ctw-preview-facebook-content {
  padding: 0 13px 13px;
  font-size: 11px;
  line-height: 1.55;
}

.ctw-preview-facebook-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 12px;
  border-top: 1px solid #e5e7eb;
  color: #667085;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.ctw-preview-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  overflow: hidden;
  margin: 3px 0;
}

.ctw-preview-images.count-1 {
  grid-template-columns: 1fr;
}

.ctw-preview-images.facebook-post.count-3 {
  grid-template-rows: repeat(2, minmax(80px, 1fr));
}

.ctw-preview-images.facebook-post.count-3 .ctw-preview-image:first-child {
  grid-row: 1 / 3;
}

.ctw-preview-images.facebook-post.count-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ctw-preview-images.facebook-post.count-5 .ctw-preview-image:nth-child(-n + 2) {
  grid-column: span 3;
}

.ctw-preview-images.facebook-post.count-5 .ctw-preview-image:nth-child(n + 3) {
  grid-column: span 2;
}

.ctw-preview-image {
  position: relative;
  min-height: 80px;
  overflow: hidden;
  background: #eef1f6;
}

.ctw-preview-image img,
.ctw-preview-image video {
  width: 100%;
  height: 100%;
  min-height: 80px;
  display: block;
  object-fit: cover;
}

.ctw-preview-image span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  background: rgba(15, 23, 42, 0.58);
  font-size: 18px;
  font-weight: 700;
}

.ctw-preview-message-bubble .ctw-preview-images {
  margin: -9px -11px 8px;
}

.ctw-preview-rich,
.ctw-preview-plain {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ctw-preview-rich > :first-child {
  margin-top: 0;
}

.ctw-preview-rich > :last-child {
  margin-bottom: 0;
}

.ctw-preview-rich p,
.ctw-preview-rich h1,
.ctw-preview-rich h2,
.ctw-preview-rich h3,
.ctw-preview-rich ul,
.ctw-preview-rich ol,
.ctw-preview-rich blockquote {
  margin: 0 0 7px;
}

.ctw-preview-rich h1 { font-size: 1.45em; }
.ctw-preview-rich h2 { font-size: 1.28em; }
.ctw-preview-rich h3 { font-size: 1.14em; }
.ctw-preview-rich ul,
.ctw-preview-rich ol { padding-left: 20px; }
.ctw-preview-rich blockquote { padding-left: 9px; border-left: 3px solid currentColor; opacity: 0.8; }

.ctw-preview-email-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  background: #f8fafc;
}

.ctw-preview-email-meta {
  padding: 6px 14px 0;
  color: #667085;
  font-size: 10px;
}

.ctw-preview-email-meta strong {
  color: #344054;
}

.ctw-preview-email-subject {
  margin: 12px 14px 0;
  padding-bottom: 9px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
}

.ctw-preview-email-body {
  min-height: 160px;
  padding: 16px 14px;
  font-size: 11px;
  line-height: 1.6;
}

.ctw-preview-attachments {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #e5e7eb;
  color: #667085;
  background: #f8fafc;
  font-size: 10px;
}

.ctw-preview-base-label {
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  color: #4f46e5;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
}

.ctw-preview-base-content {
  min-height: 170px;
  padding: 16px;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 1080px) {
  .ctw-template-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
  }

  .ctw-image-grid {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }
}

@media (max-width: 820px) {
  .ctw-page-header,
  .ctw-editor-header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .ctw-header-actions {
    align-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .ctw-list-body,
  .ctw-editor-body {
    padding: 14px 16px 20px;
  }

  .ctw-filter-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
  }

  .ctw-search-field {
    grid-column: 1 / -1;
  }

  .ctw-general-grid,
  .ctw-group-dialog-body {
    grid-template-columns: 1fr;
  }

  .ctw-group-form-card {
    max-height: 360px;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .ctw-image-grid {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .ctw-dialog {
    height: min(820px, calc(100vh - 32px));
  }

  .ctw-group-dialog-body {
    overflow-y: auto;
  }

  .ctw-group-list-card {
    overflow: visible;
  }
}

@media (max-width: 620px) {
  .ctw-group-form-actions .ctw-group-save {
    width: 100%;
  }

  .ctw-template-grid {
    grid-template-columns: 1fr;
  }

  .ctw-filter-card {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .ctw-filter-card .stepper-select {
    grid-column: 1 / -1;
  }

  .ctw-filter-card .ctw-search-field {
    grid-column: 1;
    grid-row: 1;
  }

  .ctw-filter-card > .btn-icon {
    grid-column: 2;
    grid-row: 1;
  }

  .ctw-page-header,
  .ctw-editor-header {
    gap: 12px;
  }

  .ctw-header-actions .btn {
    flex: 1 1 auto;
  }

  .ctw-group-select-row {
    grid-template-columns: 1fr;
  }

  .ctw-section-heading.horizontal,
  .ctw-content-heading,
  .ctw-format-setting {
    align-items: flex-start;
    flex-direction: column;
  }

  .ctw-image-grid {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }

  .ctw-tab-panel,
  .ctw-preview-stage {
    padding: 12px;
  }

  .ctw-dialog-overlay {
    padding: 8px;
  }

  .ctw-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .ctw-group-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .ctw-group-row > .ctw-row-actions {
    grid-column: 2;
    justify-content: flex-end;
  }

  .ctw-modal-overlay {
    padding: 0;
  }

  .ctw-modal-shell {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }
}

/* Content-template v2 composer -------------------------------------------------
   The three-pane layout mirrors the supplied multi-channel concept while all
   colors, radii and elevations stay on akaAgent theme tokens. */
.ctw-editor-header.compact-composer {
  min-height: 64px;
  align-items: center;
  padding: 10px 18px;
}

.ctw-editor-title-field {
  min-width: 220px;
}

.ctw-editor-title-field > span {
  display: block;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
}

.ctw-editor-title-field > input {
  width: min(370px, 32vw);
  margin-top: 2px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 720;
}

.ctw-editor-title-field > input::placeholder {
  color: var(--text-tertiary);
}

.ctw-editor-group-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 250px;
  padding-left: 15px;
  border-left: 1px solid var(--border-default);
}

.ctw-editor-group-field > span {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

.ctw-editor-group-field .stepper-select {
  width: min(210px, 19vw);
}

.ctw-composer-layout {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 226px minmax(430px, 1fr) minmax(330px, 390px);
  overflow: hidden;
  background: var(--bg-primary);
}

.ctw-channel-rail,
.ctw-live-preview {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.ctw-channel-rail {
  border-right: 1px solid var(--border-default);
}

.ctw-channel-rail-heading,
.ctw-live-preview-heading {
  flex: 0 0 auto;
  padding: 14px 14px 10px;
}

.ctw-channel-rail-heading strong,
.ctw-live-preview-copy > strong {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.ctw-channel-rail-heading span,
.ctw-live-preview-copy > span {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.45;
}

.ctw-channel-rail-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 3px 10px 12px;
}

.ctw-channel-rail-item {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.ctw-channel-rail-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.ctw-channel-rail-item.active {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-tertiary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.ctw-channel-rail-item.disabled-channel:not(.active) {
  opacity: 0.68;
}

.ctw-channel-mono,
.ctw-channel-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.ctw-channel-mono {
  width: 29px;
  height: 29px;
}

.ctw-channel-hero-icon {
  width: 39px;
  height: 39px;
  border-radius: 10px;
  font-size: 16px;
}

.ctw-channel-rail-copy {
  flex: 1;
  min-width: 0;
}

.ctw-channel-rail-copy strong,
.ctw-channel-rail-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctw-channel-rail-copy strong {
  color: var(--text-primary);
  font-size: 11.5px;
}

.ctw-channel-rail-copy small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.ctw-channel-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--border-hover);
}

.ctw-channel-dot.on {
  background: var(--accent-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-success) 12%, transparent);
}

.ctw-channel-rail-foot {
  flex: 0 0 auto;
  padding: 10px 13px;
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 9.5px;
  line-height: 1.5;
}

.ctw-composer-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px clamp(16px, 2.4vw, 30px) 34px;
}

.ctw-channel-editor-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 760px;
  margin: 0 auto 16px;
}

.ctw-channel-editor-heading > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.ctw-channel-editor-heading > div:nth-child(2) > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctw-channel-editor-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}

.ctw-channel-editor-heading p {
  margin: 3px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.45;
}

.ctw-status-badge.active {
  gap: 3px;
  color: var(--accent-success);
  border-color: color-mix(in srgb, var(--accent-success) 25%, transparent);
  background: color-mix(in srgb, var(--accent-success) 10%, transparent);
}

.ctw-composer-main > .ctw-channel-editor,
.ctw-composer-main > .ctw-channel-disabled {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.ctw-variants-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 -4px;
}

.ctw-variants-heading strong {
  color: var(--text-primary);
  font-size: 12px;
}

.ctw-variants-heading span {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.ctw-images-section.channel-scoped {
  margin-top: 3px;
  box-shadow: none;
}

.ctw-image-limit {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary) !important;
  background: var(--bg-tertiary);
  font-size: 10px !important;
  font-weight: 700 !important;
}

.ctw-image-add-tile {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.ctw-image-add-tile:hover:not(:disabled) {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.ctw-no-images-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  font-size: 10.5px;
}

.ctw-live-preview {
  overflow: hidden;
  border-left: 1px solid var(--border-default);
}

.ctw-live-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-default);
}

.ctw-live-preview-copy {
  min-width: 0;
  flex: 1;
}

.ctw-live-preview-heading .ctw-toggle-row {
  flex: 0 0 auto;
  align-items: flex-start;
  white-space: normal;
}

.ctw-live-preview-heading .ctw-toggle-row > span {
  max-width: 92px;
  margin: 1px 0 0;
  color: var(--text-secondary);
  font-size: 9.5px;
  line-height: 1.3;
}

.ctw-live-preview > .ctw-preview-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.ctw-live-preview .ctw-preview-stage {
  min-height: 100%;
  padding: 10px 0 20px;
  border: 0;
  background: transparent;
}

.ctw-live-preview .ctw-preview-phone {
  width: min(300px, 100%);
  min-height: 400px;
}

.ctw-preview-disabled {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  color: var(--text-tertiary);
  text-align: center;
}

.ctw-preview-disabled strong {
  color: var(--text-secondary);
  font-size: 12px;
}

.ctw-preview-disabled span {
  font-size: 10.5px;
}

.ctw-preview-phone.zalo_message .ctw-preview-phone-bar {
  justify-content: flex-start;
  background: #0868ff;
}

.ctw-preview-phone.facebook_message .ctw-preview-phone-bar,
.ctw-preview-phone.sms .ctw-preview-phone-bar {
  justify-content: flex-start;
  color: #111827;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.ctw-preview-phone-bar > div {
  display: flex;
  flex-direction: column;
}

.ctw-preview-phone-bar small {
  margin-top: 1px;
  color: inherit;
  font-size: 8px;
  font-weight: 500;
  opacity: 0.72;
}

.ctw-preview-avatar.zalo_message {
  background: rgba(255, 255, 255, 0.24);
}

.ctw-preview-avatar.facebook_message {
  background: linear-gradient(135deg, #0084ff, #a033ff);
}

.ctw-preview-avatar.sms {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.ctw-preview-facebook-card.comment {
  padding-bottom: 12px;
}

.ctw-preview-facebook-head.muted {
  border-bottom: 1px solid #eef0f4;
  opacity: 0.74;
}

.ctw-preview-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 13px 13px 5px;
}

.ctw-preview-comment-bubble {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f0f2f5;
  font-size: 10.5px;
  line-height: 1.45;
}

.ctw-preview-comment-bubble > strong {
  display: block;
  margin-bottom: 2px;
}

.ctw-preview-facebook-card.comment > .ctw-preview-images {
  margin: 4px 13px 0 52px;
  border-radius: 9px;
}

.ctw-preview-comment-media-note {
  width: fit-content;
  margin: 8px 13px 0 52px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.ctw-channel-badge.zalo_message,
.ctw-channel-rail-item.zalo_message .ctw-channel-mono,
.ctw-channel-hero-icon.zalo_message {
  color: #1687ef;
  background: color-mix(in srgb, #1687ef 12%, transparent);
}

.ctw-channel-badge.facebook_post,
.ctw-channel-badge.facebook_message,
.ctw-channel-badge.facebook_comment,
.ctw-channel-rail-item.facebook_post .ctw-channel-mono,
.ctw-channel-rail-item.facebook_message .ctw-channel-mono,
.ctw-channel-rail-item.facebook_comment .ctw-channel-mono,
.ctw-channel-hero-icon.facebook_post,
.ctw-channel-hero-icon.facebook_message,
.ctw-channel-hero-icon.facebook_comment {
  color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 12%, transparent);
}

.ctw-channel-rail-item.sms .ctw-channel-mono,
.ctw-channel-hero-icon.sms {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.ctw-channel-rail-item.email .ctw-channel-mono,
.ctw-channel-hero-icon.email {
  color: #10b981;
  background: color-mix(in srgb, #10b981 12%, transparent);
}

@media (max-width: 1280px) {
  .ctw-manager-body {
    grid-template-columns: 220px minmax(360px, 1fr) 340px;
  }

  .ctw-manager-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ctw-composer-layout {
    grid-template-columns: 208px minmax(390px, 1fr) minmax(300px, 330px);
  }

  .ctw-editor-title-field > input {
    width: min(310px, 28vw);
  }
}

@media (max-width: 1040px) {
  .ctw-manager-body {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .ctw-manager-preview {
    display: none;
  }

  .ctw-composer-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    overflow-y: auto;
  }

  .ctw-channel-rail {
    position: sticky;
    top: 0;
    height: 100%;
  }

  .ctw-composer-main {
    overflow: visible;
  }

  .ctw-live-preview {
    grid-column: 2;
    min-height: 470px;
    overflow: visible;
    border-top: 1px solid var(--border-default);
    border-left: 0;
  }

  .ctw-live-preview > .ctw-preview-panel {
    overflow: visible;
  }

  .ctw-editor-header.compact-composer {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .ctw-editor-group-field {
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .ctw-composer-layout {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .ctw-channel-rail {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .ctw-channel-rail-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .ctw-channel-rail-item {
    min-width: 180px;
  }

  .ctw-channel-rail-foot {
    display: none;
  }

  .ctw-live-preview {
    min-height: 450px;
  }

  .ctw-editor-title-field > input,
  .ctw-editor-group-field .stepper-select {
    width: 100%;
  }

  .ctw-editor-group-field {
    width: 100%;
    padding-left: 0;
  }

  .ctw-channel-editor-heading,
  .ctw-variants-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
.campaign-content-preview { min-height: 100%; color: var(--text-primary); }
.campaign-content-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border-bottom: 1px solid var(--border-default); background: var(--bg-tertiary); }
.campaign-content-preview-toolbar p { flex: 1 1 260px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.campaign-content-preview-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 12px; }
.campaign-content-preview-controls label { color: var(--text-secondary); font-weight: 600; }
.campaign-content-preview-controls select { width: 190px; max-width: 100%; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.campaign-content-preview-controls select:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.campaign-content-preview-badge { padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 11px; }
.campaign-content-preview-badge.personalized { color: var(--success, #3ba77a); border-color: color-mix(in srgb, #3ba77a 25%, transparent); background: color-mix(in srgb, #3ba77a 8%, var(--bg-primary)); }
.campaign-content-preview-notes { display: flex; flex-direction: column; gap: 5px; padding: 12px 20px 0; color: var(--text-secondary); font-size: 11px; line-height: 1.6; }
.campaign-content-preview-grid { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 20px; padding: 20px; overflow-x: auto; }
.campaign-content-preview-card { flex: 0 1 350px; min-width: 280px; }
.campaign-content-preview-card-heading { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 8px; }
.campaign-content-preview-card-heading strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.campaign-content-preview-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 8px; color: var(--accent-primary); background: var(--bg-accent-subtle); font-size: 12px; font-weight: 700; }
.campaign-content-preview-channel { padding: 3px 7px; border-radius: 20px; background: var(--bg-accent-subtle); color: var(--accent-primary); font-size: 10px; white-space: nowrap; }
.campaign-content-preview .ctw-preview-stage { align-items: flex-start; min-height: 0; padding: 0; border: 0; background: transparent; }
.campaign-content-preview .ctw-preview-panel { min-height: 0; }
.campaign-content-preview .ctw-preview-phone { width: 100%; min-height: 450px; }
.campaign-content-preview .ctw-preview-message-bubble { font-size: 12px; }
.campaign-content-preview .ctw-preview-phone-bar strong { overflow-wrap: anywhere; }
.campaign-content-preview .ctw-preview-email-card { min-width: 0; }
.campaign-content-preview .ctw-preview-footer { margin-top: 12px; }
.campaign-content-preview-hint { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.campaign-content-preview-hint svg { flex-shrink: 0; }
.campaign-content-preview-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 45px 20px; color: var(--text-secondary); text-align: center; font-size: 12px; }
.campaign-content-preview-empty strong { color: var(--text-primary); }
/* Diagnostics share the right panel with campaign progress and assistants. */
.campaign-diagnostics-panel {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  container-type: inline-size;
}
.campaign-diagnostics-panel[hidden] { display: none; }
.campaign-diagnostics {
  --diagnostic-card: var(--bg-secondary);
  --diagnostic-success: var(--accent-success);
  --diagnostic-warning: var(--accent-warning);
  --diagnostic-error: var(--accent-error);
  --diagnostic-info: var(--accent-info);
  padding: 16px 16px 32px;
  min-height: 100%;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary));
  font-size: 13px;
  line-height: 1.6;
}

body.theme-light .campaign-diagnostics {
  --diagnostic-card: #fff;
  --diagnostic-success: #15803d;
  --diagnostic-warning: #b45309;
  --diagnostic-error: #be123c;
  --diagnostic-info: #0369a1;
}

.diagnostic-content { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.campaign-diagnostics h3, .campaign-diagnostics h4, .campaign-diagnostics p { margin: 0; }
.campaign-diagnostics h3 { font-size: 14px; font-weight: 600; line-height: 1.5; }
.campaign-diagnostics h4 { font-size: 12px; font-weight: 600; }
.diagnostic-ok { --diagnostic-tone: var(--diagnostic-success); }
.diagnostic-info { --diagnostic-tone: var(--diagnostic-info); }
.diagnostic-warning { --diagnostic-tone: var(--diagnostic-warning); }
.diagnostic-blocking { --diagnostic-tone: var(--diagnostic-error); }
.diagnostic-unknown { --diagnostic-tone: var(--text-secondary); }

.diagnostic-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--diagnostic-tone) 30%, transparent);
  border-radius: 8px;
  color: var(--diagnostic-tone);
  background: color-mix(in srgb, var(--diagnostic-tone) 7%, var(--diagnostic-card));
}
.diagnostic-banner-message { display: flex; align-items: flex-start; flex: 1 1 340px; gap: 12px; min-width: 0; }
.diagnostic-banner-message > svg { flex-shrink: 0; margin-top: 2px; }
.diagnostic-banner-message > div { min-width: 0; overflow-wrap: anywhere; }
.diagnostic-banner-message p { margin-top: 3px; font-size: 11px; color: var(--text-secondary); }
.diagnostic-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.diagnostic-toolbar { margin-left: auto; }
.diagnostic-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-primary);
  background: var(--diagnostic-card);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.diagnostic-button > svg { flex-shrink: 0; }
.diagnostic-button:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-hover); }
.diagnostic-button:disabled { opacity: 0.5; cursor: not-allowed; }
.diagnostic-button:focus-visible, .diagnostic-check-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.diagnostic-button-ghost { border-color: transparent; color: var(--diagnostic-tone); background: transparent; }
.diagnostic-button-ai { color: var(--text-primary); }
.diagnostic-button-ai > svg { color: var(--diagnostic-info); }

.diagnostic-checks { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.diagnostic-issue { min-width: 0; border: 1px solid color-mix(in srgb, var(--diagnostic-tone) 35%, var(--border-default)); border-radius: 8px; background: var(--diagnostic-card); }
.diagnostic-issue.diagnostic-ok, .diagnostic-issue.diagnostic-unknown { border-color: var(--border-default); }
.diagnostic-check-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.diagnostic-check-toggle:hover { background: color-mix(in srgb, var(--bg-hover) 40%, transparent); }
.diagnostic-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--diagnostic-tone) 10%, transparent); color: var(--diagnostic-tone); }
.diagnostic-check-heading { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.diagnostic-check-heading strong { font-size: 14px; font-weight: 600; }
.diagnostic-check-heading > span { color: var(--text-secondary); }
.diagnostic-chevron { flex-shrink: 0; margin-top: 4px; color: var(--text-secondary); transition: transform 150ms; }
.diagnostic-check-toggle[aria-expanded="true"] .diagnostic-chevron { transform: rotate(180deg); }
.diagnostic-explanation { padding: 14px 16px 12px; border-top: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent); overflow-wrap: anywhere; }
.diagnostic-explanation dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.diagnostic-explanation dt { margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.diagnostic-explanation dd { margin: 0; color: var(--text-secondary); white-space: pre-wrap; }
.diagnostic-evidence { padding-left: 18px; margin: 12px 0 0; color: var(--text-secondary); }
.diagnostic-evidence li + li { margin-top: 4px; }
.diagnostic-remedy { margin-top: 16px; }
.diagnostic-remedy h4 { margin-bottom: 8px; }
.diagnostic-remedy .diagnostic-action-hint { margin-bottom: 8px; color: var(--text-secondary); white-space: pre-wrap; }
.diagnostic-remedy .diagnostic-actions > span { color: var(--text-secondary); }
.diagnostic-muted { color: var(--text-secondary); font-size: 12px; }

.diagnostic-quotas { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.diagnostic-quota { padding: 12px; border: 1px solid var(--border-default); border-radius: 6px; }
.diagnostic-quota h4 { margin-bottom: 8px; }
.diagnostic-limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.diagnostic-limit-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.diagnostic-limit-label > span { color: var(--text-secondary); }
.diagnostic-limit-label strong { flex-shrink: 0; color: var(--diagnostic-tone); font-weight: 500; font-variant-numeric: tabular-nums; }
.diagnostic-progress { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border-default) 65%, transparent); }
.diagnostic-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--diagnostic-tone); }
.diagnostic-progress-unknown { background: repeating-linear-gradient(120deg, var(--border-default) 0 4px, transparent 4px 8px); }
.diagnostic-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--border-default); border-radius: 6px; }
.diagnostic-table-wrap table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.diagnostic-table-wrap th { background: color-mix(in srgb, var(--bg-tertiary) 60%, var(--diagnostic-card)); font-weight: 500; color: var(--text-secondary); }
.diagnostic-table-wrap th, .diagnostic-table-wrap td { padding: 8px 12px; vertical-align: top; }
.diagnostic-table-wrap td { border-top: 1px solid var(--border-default); }
.diagnostic-reopen { display: inline-flex; align-items: flex-start; gap: 5px; min-width: 115px; color: var(--text-secondary); }
.diagnostic-reopen svg { flex-shrink: 0; margin-top: 3px; }

.diagnostic-ai { padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--diagnostic-info) 40%, var(--border-default)); border-radius: 8px; background: var(--diagnostic-card); }
.diagnostic-ai-header { display: flex; align-items: flex-start; gap: 12px; }
.diagnostic-ai-header > div { min-width: 0; }
.diagnostic-ai-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--diagnostic-info) 10%, transparent); color: var(--diagnostic-info); }
.diagnostic-ai-header h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.diagnostic-ai-header p { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; font-size: 11px; color: var(--text-secondary); }
.diagnostic-ai-tag { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--diagnostic-info) 8%, transparent); color: var(--diagnostic-info); font-size: 10px; font-weight: 500; }
.diagnostic-ai .diagnostic-ai-summary { margin: 14px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diagnostic-ai .diagnostic-checks { gap: 8px; }
.diagnostic-ai .diagnostic-notice { margin-top: 12px; }
.diagnostic-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--diagnostic-tone) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--diagnostic-tone) 6%, var(--diagnostic-card)); font-size: 12px; color: var(--diagnostic-tone); }
.diagnostic-notice > svg { flex-shrink: 0; margin-top: 2px; }
.diagnostic-source-counts { padding: 4px 0 8px; font-size: 11px; color: var(--text-secondary); }
.diagnostic-source-counts > div:first-child { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.diagnostic-source-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.diagnostic-source-pills > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--diagnostic-card); border: 1px solid var(--border-default); }
.diagnostic-source-pills strong { font-weight: 500; color: var(--text-primary); }
.diagnostic-skeletons { display: flex; flex-direction: column; gap: 12px; }
.diagnostic-skeletons > div { height: 96px; border-radius: 8px; background: var(--bg-tertiary); animation: diagnostic-pulse 1.5s ease-in-out infinite; }
.diagnostic-ai-skeleton { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
.diagnostic-ai-skeleton > span { width: 100%; height: 10px; border-radius: 4px; background: var(--bg-tertiary); animation: diagnostic-pulse 1.5s ease-in-out infinite; }
.diagnostic-ai-skeleton > span:last-child { width: 65%; }
.diagnostic-spin { animation: diagnostic-spin 1s linear infinite; }
.diagnostic-pulse { animation: diagnostic-pulse 1.5s ease-in-out infinite; }
@keyframes diagnostic-spin { to { transform: rotate(360deg); } }
@keyframes diagnostic-pulse { 50% { opacity: 0.45; } }

@container (max-width: 900px) {
  .campaign-diagnostics { padding: 12px 12px 32px; }
}
@container (max-width: 580px) {
  .campaign-diagnostics { padding: 10px 10px 32px; }
  .diagnostic-banner, .diagnostic-ai { padding: 12px; }
  .diagnostic-banner-message { flex-basis: 100%; }
  .diagnostic-check-toggle { padding: 12px; gap: 8px; }
  .diagnostic-explanation { padding: 12px; }
  .diagnostic-limit-grid { grid-template-columns: 1fr; }
  .diagnostic-limit-label { flex-wrap: wrap; gap: 2px 8px; }
  .diagnostic-limit-label strong { min-width: 0; overflow-wrap: anywhere; }
  .diagnostic-source-counts > div:first-child { align-items: flex-start; }
  .diagnostic-source-counts > div:first-child svg { flex-shrink: 0; margin-top: 3px; }
  .diagnostic-source-pills > span { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-diagnostics *, .campaign-diagnostics *::before, .campaign-diagnostics *::after { animation: none !important; transition: none !important; }
}
/* Tự động hóa: faithful desktop layout based on the selected concept. */
.automation-page {
  width: 100%; min-width: 0; min-height: 0; display: flex; flex: 1; flex-direction: column;
  gap: 10px; padding: 12px; overflow: hidden; color: var(--text-primary); background: var(--bg-primary);
}
.automation-page-header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; }
.automation-page-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.automation-page-title-icon, .automation-section-icon {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, var(--border-default)); border-radius: 9px;
  color: var(--accent-primary); background: var(--bg-accent-subtle);
}
.automation-page-title h1 { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 760; letter-spacing: -.02em; }
.automation-page-title p { max-width: 520px; margin: 3px 0 0; overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.automation-toolbar, .automation-toolbar > button, .automation-form-footer > div, .automation-pagination > div,
.automation-detail-header-actions, .automation-detail-pagination { display: flex; align-items: center; }
.automation-toolbar { gap: 7px; overflow-x: auto; scrollbar-width: none; }
.automation-toolbar::-webkit-scrollbar { display: none; }
.automation-button, .automation-icon-button {
  border: 1px solid var(--border-default); background: var(--bg-secondary); color: var(--text-primary); font: inherit; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}
.automation-button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border-radius: 7px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.automation-icon-button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; border-radius: 7px; }
.automation-button:hover:not(:disabled), .automation-icon-button:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg-hover); }
.automation-button:active:not(:disabled), .automation-icon-button:active:not(:disabled) { transform: translateY(1px); }
.automation-button.is-primary { border-color: var(--accent-primary); background: var(--accent-primary); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-primary) 22%, transparent); }
.automation-button.is-primary:hover:not(:disabled) { border-color: var(--accent-primary-hover); background: var(--accent-primary-hover); }
.automation-button:disabled, .automation-icon-button:disabled { cursor: not-allowed; opacity: .42; }
.automation-button:focus-visible, .automation-icon-button:focus-visible, .automation-action-card:focus-visible,
.automation-table tbody tr:focus-visible, .automation-form-step:focus-visible, .automation-status-option:focus-within,
.automation-choice-card:focus-within, .automation-schedule-option:focus-within, .automation-field input:focus-visible,
.automation-field select:focus-visible, .automation-field textarea:focus-visible, .automation-search-field:focus-within,
.automation-filter-field:focus-within, .automation-campaign-combobox-control:focus-within,
.automation-delay-exact-toggle:focus-within, .automation-delay-exact-time-field input:focus-visible,
.automation-data-group-trigger:focus-visible, .automation-data-group-clear:focus-visible,
.automation-data-group-manage-button:focus-visible, .automation-data-group-option:focus-visible,
.automation-data-group-menu-manage:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-primary) 68%, transparent); outline-offset: 2px; }

.automation-card { min-width: 0; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-secondary); box-shadow: var(--card-shadow); }
.automation-card-heading { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.automation-card-heading h2 { margin: 0; font-size: 12.5px; font-weight: 730; }
.automation-action-section { flex: 0 0 auto; padding-bottom: 10px; }
.automation-action-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 12px; overflow: hidden; border: 1px solid var(--border-default); border-radius: 7px; }
.automation-action-card {
  min-width: 0; min-height: 48px; position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border: 0; border-right: 1px solid var(--border-default); background: var(--bg-primary); color: var(--text-primary); text-align: left; font: inherit; cursor: pointer;
}
.automation-action-card:last-child { border-right: 0; }
.automation-action-card.active { z-index: 1; background: var(--bg-accent-subtle); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.automation-action-card.disabled { cursor: not-allowed; opacity: .68; }
.automation-action-card.is-unavailable { cursor: not-allowed; opacity: .62; }
.automation-action-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 7px; background: var(--bg-tertiary); color: var(--text-secondary); }
.automation-action-card.active .automation-action-icon { color: var(--accent-primary); background: color-mix(in srgb,var(--accent-primary) 16%,var(--bg-tertiary)); }
.automation-action-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.automation-action-copy strong, .automation-action-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-action-copy strong { font-size: 11.5px; font-weight: 680; }
.automation-action-copy small { color: var(--text-tertiary); font-size: 9.5px; }
.automation-action-selected { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; background: var(--accent-primary); color: #fff; }
.automation-coming-soon { flex: 0 0 auto; padding: 2px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-full); color: var(--text-tertiary); background: var(--bg-secondary); font-size: 9px; font-weight: 650; white-space: nowrap; }
.automation-options-error { display: flex; align-items: center; gap: 9px; margin: 8px 12px 0; padding: 7px 9px; border: 1px solid color-mix(in srgb,var(--accent-error) 38%,var(--border-default)); border-radius: 7px; color: var(--accent-error); background: color-mix(in srgb,var(--accent-error) 7%,var(--bg-primary)); }
.automation-options-error > svg { flex: 0 0 auto; }.automation-options-error > span { min-width: 0; display: flex; flex: 1; flex-direction: column; }.automation-options-error strong,.automation-options-error small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.automation-options-error strong { font-size: 10px; }.automation-options-error small { color: var(--text-secondary); font-size: 8.8px; }.automation-options-error .automation-button { min-height: 27px; flex: 0 0 auto; }

.automation-list-section { min-height: 200px; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.automation-list-heading > div { display: flex; align-items: baseline; gap: 8px; }
.automation-list-heading > div > span, .automation-refresh-indicator { color: var(--text-tertiary); font-size: 10px; }
.automation-refresh-indicator { display: inline-flex; align-items: center; gap: 5px; }
.automation-filters { display: grid; grid-template-columns: minmax(190px,1.45fr) repeat(5,minmax(120px,1fr)) auto; gap: 8px; padding: 0 12px 10px; }
.automation-search-field, .automation-filter-field {
  min-width: 0; height: 34px; position: relative; display: flex; align-items: center; border: 1px solid var(--border-default);
  border-radius: 7px; background: var(--bg-primary); transition: border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.automation-search-field { gap: 7px; padding: 0 9px; color: var(--text-tertiary); }
.automation-search-field input, .automation-filter-field select, .automation-filter-field input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 10.5px; }
.automation-search-field input::placeholder { color: var(--text-tertiary); }
.automation-search-field kbd { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: 4px; color: var(--text-tertiary); background: var(--bg-secondary); font-family: inherit; font-size: 9px; }
.automation-filter-field { height: 44px; align-items: flex-end; padding: 15px 25px 2px 9px; }
.automation-filter-field > span { position: absolute; top: 3px; left: 9px; color: var(--text-tertiary); font-size: 8.5px; pointer-events: none; }
.automation-filter-field > svg { position: absolute; right: 8px; bottom: 8px; color: var(--text-tertiary); pointer-events: none; }
.automation-filter-field select { appearance: none; cursor: pointer; }
.automation-filter-field.is-date { padding-right: 7px; }
.automation-filter-field input[type="date"] { color-scheme: dark; }
body.theme-light .automation-filter-field input[type="date"] { color-scheme: light; }
.automation-clear-filter { min-height: 34px; align-self: center; }

.automation-table-shell { min-height: 110px; position: relative; display: flex; flex: 1; overflow: hidden; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.automation-table-scroll, .automation-detail-table-wrap { width: 100%; min-height: 0; overflow: auto; }
.automation-table, .automation-detail-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: var(--text-primary); font-size: 10.5px; }
.automation-table { min-width: 1180px; }
.automation-table th, .automation-table td, .automation-detail-table th, .automation-detail-table td { padding: 7px 9px; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: middle; }
.automation-table th:last-child, .automation-table td:last-child, .automation-detail-table th:last-child, .automation-detail-table td:last-child { border-right: 0; }
.automation-table thead th, .automation-detail-table thead th { position: sticky; top: 0; z-index: 3; height: 34px; padding-top: 5px; padding-bottom: 5px; color: var(--text-secondary); background: var(--bg-tertiary); font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.automation-table tbody tr { background: var(--bg-secondary); cursor: pointer; outline: 0; transition: background var(--transition-fast),box-shadow var(--transition-fast); }
.automation-table tbody tr:hover { background: var(--bg-hover); }
.automation-table tbody tr.selected { background: var(--bg-accent-subtle); box-shadow: inset 3px 0 0 var(--accent-primary); }
.automation-table tbody tr:last-child td, .automation-detail-table tbody tr:last-child td { border-bottom: 0; }
.automation-table th:nth-child(1),.automation-table td:nth-child(1){width:38px}.automation-table th:nth-child(2),.automation-table td:nth-child(2){width:175px}
.automation-table th:nth-child(3),.automation-table td:nth-child(3){width:150px}.automation-table th:nth-child(4),.automation-table td:nth-child(4){width:145px}
.automation-table th:nth-child(5),.automation-table td:nth-child(5){width:155px}.automation-table th:nth-child(6),.automation-table td:nth-child(6){width:150px}
.automation-table th:nth-child(7),.automation-table td:nth-child(7){width:155px}.automation-table th:nth-child(8),.automation-table td:nth-child(8){width:180px}
.automation-table th:nth-child(9),.automation-table td:nth-child(9){width:150px}.automation-table th:nth-child(10),.automation-table td:nth-child(10){width:42px}
.automation-table td strong,.automation-table td small,.automation-detail-table td strong,.automation-detail-table td small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-table td strong,.automation-detail-table td strong { font-size: 10.5px; font-weight: 630; }
.automation-table td small,.automation-detail-table td small { margin-top: 2px; color: var(--text-tertiary); font-size: 8.8px; }
.automation-name-cell { color: var(--text-primary); font-weight: 680!important; }
.automation-action-cell { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); white-space: nowrap; }
.automation-action-cell svg { color: var(--accent-primary); }
.automation-status-pill,.automation-execution-status { max-width: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-tertiary); font-size: 9.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.automation-status-pill > span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; }
.automation-status-pill.is-active { border-color: color-mix(in srgb,var(--accent-success) 46%,var(--border-default)); color: var(--accent-success); background: color-mix(in srgb,var(--accent-success) 10%,var(--bg-tertiary)); }
.automation-status-pill.is-active > span { background: var(--accent-success); }.automation-status-pill.is-paused { color: var(--text-secondary); }.automation-status-pill.is-paused > span { background: var(--text-tertiary); }
.automation-trigger-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.automation-trigger-chips > span,.automation-data-group-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--accent-info) 36%,var(--border-default)); border-radius: 5px; color: var(--accent-info); background: color-mix(in srgb,var(--accent-info) 8%,var(--bg-tertiary)); font-size: 8.8px; text-overflow: ellipsis; white-space: nowrap; }
.automation-note-cell { display: block; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.automation-selection-column { text-align: center!important; }.automation-selection-column input,.automation-status-option input,.automation-choice-card input,.automation-schedule-option input,.automation-active-toggle input { accent-color: var(--accent-primary); }
.automation-row-action-cell { position: relative; padding: 4px 6px!important; text-align: center!important; }
.automation-row-menu { width: 132px; position: absolute; top: calc(100% - 4px); right: 6px; z-index: 25; padding: 5px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
.automation-row-menu button { width: 100%; height: 29px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text-primary); font: inherit; font-size: 10px; text-align: left; cursor: pointer; }
.automation-row-menu button:hover { background: var(--bg-hover); }.automation-row-menu button.is-danger { color: var(--accent-error); }
.automation-sort-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.automation-sort-button svg { color: var(--text-tertiary); }.automation-sort-button.active { color: var(--text-primary); }.automation-sort-button.active svg { color: var(--accent-primary); }
.automation-state-panel,.automation-inline-detail-empty,.automation-detail-loading { width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 16px; color: var(--text-tertiary); text-align: center; }
.automation-state-panel > svg,.automation-inline-detail-empty > svg { color: var(--accent-primary); }.automation-state-panel strong { color: var(--text-primary); font-size: 12px; }.automation-state-panel p { max-width: 420px; margin: 0; font-size: 10.5px; }
.automation-state-panel.is-error > svg,.automation-inline-detail-empty.is-error > svg { color: var(--accent-error); }
.automation-loading-table { width: 100%; padding: 8px; }.automation-loading-table span { height: 36px; display: block; margin-bottom: 6px; border-radius: 5px; background: var(--bg-tertiary); animation: automation-pulse 1.1s ease-in-out infinite alternate; }.automation-loading-table span:nth-child(2n){animation-delay:.12s}
@keyframes automation-pulse{from{opacity:.45}to{opacity:.9}}
.automation-pagination { min-height: 38px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 0 0 auto; padding: 4px 12px; color: var(--text-secondary); font-size: 9.5px; }.automation-pagination > div { gap: 6px; }
.automation-page-number { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-primary); border-radius: 7px; color: var(--accent-primary); background: var(--bg-accent-subtle); }

.automation-detail-dock { min-width: 0; min-height: 0; position: relative; display: flex; flex: 0 0 auto; flex-direction: column; overflow: visible; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-secondary); box-shadow: var(--card-shadow); }
.automation-detail-dock.is-collapsed { height: 39px; }
.automation-dock-resize { width: 54px; height: 11px; position: absolute; top: -6px; left: 50%; z-index: 10; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-tertiary); cursor: row-resize; transform: translateX(-50%); }
.automation-dock-resize:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.automation-detail-header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; border-bottom: 1px solid var(--border-default); }
.automation-detail-dock.is-collapsed .automation-detail-header { border-bottom: 0; }
.automation-detail-tabs { height: 100%; display: flex; align-items: stretch; padding-left: 7px; }
.automation-detail-tabs button { min-width: 88px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 10.5px; font-weight: 620; cursor: pointer; }
.automation-detail-tabs button::after { content: ''; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
.automation-detail-tabs button:hover,.automation-detail-tabs button.active { color: var(--text-primary); }.automation-detail-tabs button.active::after { background: var(--accent-primary); }
.automation-detail-tabs button span { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: var(--radius-full); color: var(--accent-primary); background: var(--bg-accent-subtle); font-size: 8.5px; }
.automation-detail-header-actions { min-width: 0; gap: 8px; padding-right: 7px; }.automation-detail-header-actions > strong { max-width: 280px; overflow: hidden; color: var(--text-secondary); font-size: 9.5px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.automation-detail-header-actions .is-rotated { transform: rotate(180deg); }
.automation-detail-body { min-height: 0; display: flex; flex: 1; overflow: hidden; }.automation-inline-detail-empty,.automation-detail-loading { min-height: 0; flex: 1; font-size: 10.5px; }.automation-inline-detail-empty.is-error { flex-direction: row; }
.automation-info-grid { width: 100%; display: grid; grid-template-columns: repeat(5,minmax(140px,1fr)); align-content: start; gap: 1px; overflow: auto; background: var(--border-default); }
.automation-info-grid > div { min-height: 62px; display: flex; flex-direction: column; justify-content: center; padding: 8px 11px; background: var(--bg-secondary); }.automation-info-grid > div.is-wide { grid-column: span 2; }
.automation-info-grid span { margin-bottom: 4px; color: var(--text-tertiary); font-size: 8.8px; }.automation-info-grid strong { overflow: hidden; color: var(--text-primary); font-size: 10.5px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }.automation-info-grid strong.is-success { color: var(--accent-success); }
.automation-info-grid small { margin-top: 2px; overflow: hidden; color: var(--text-tertiary); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.automation-detail-table { min-width: 1040px; }.automation-detail-table th:nth-child(1),.automation-detail-table td:nth-child(1){width:175px}.automation-detail-table th:nth-child(2),.automation-detail-table td:nth-child(2){width:140px}.automation-detail-table th:nth-child(3),.automation-detail-table td:nth-child(3){width:190px}.automation-detail-table th:nth-child(4),.automation-detail-table td:nth-child(4){width:150px}.automation-detail-table th:nth-child(5),.automation-detail-table td:nth-child(5){width:180px}.automation-detail-table th:nth-child(6),.automation-detail-table td:nth-child(6){width:135px}.automation-detail-table th:nth-child(7),.automation-detail-table td:nth-child(7){width:160px}
.automation-detail-table tbody tr { background: var(--bg-secondary); }.automation-detail-table tbody tr:hover { background: var(--bg-hover); }.automation-execution-status { border-radius: 5px; }
.automation-execution-status.is-success { border-color: color-mix(in srgb,var(--accent-success) 42%,var(--border-default)); color: var(--accent-success); background: color-mix(in srgb,var(--accent-success) 9%,var(--bg-tertiary)); }
.automation-execution-status.is-error { border-color: color-mix(in srgb,var(--accent-error) 42%,var(--border-default)); color: var(--accent-error); background: color-mix(in srgb,var(--accent-error) 9%,var(--bg-tertiary)); }
.automation-execution-status.is-warning { border-color: color-mix(in srgb,var(--accent-warning) 42%,var(--border-default)); color: var(--accent-warning); background: color-mix(in srgb,var(--accent-warning) 9%,var(--bg-tertiary)); }
.automation-execution-status.is-info { border-color: color-mix(in srgb,var(--accent-info) 42%,var(--border-default)); color: var(--accent-info); background: color-mix(in srgb,var(--accent-info) 9%,var(--bg-tertiary)); }
.automation-detail-table td small.is-error { color: var(--accent-error); }
.automation-detail-pagination { position: sticky; right: 0; bottom: 0; justify-content: flex-end; gap: 6px; min-height: 34px; padding: 3px 9px; border-top: 1px solid var(--border-default); background: var(--bg-secondary); color: var(--text-secondary); font-size: 9px; }

/* Three-step create/edit dialog. */
.automation-modal-backdrop { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(3,5,12,.64); backdrop-filter: blur(3px); }
.automation-form-modal { width: min(1040px,calc(100vw - 44px)); height: min(724px,calc(100vh - 44px)); min-height: 560px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-secondary); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.automation-form-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--border-default); }
.automation-form-eyebrow { color: var(--accent-primary); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.automation-form-header h2 { margin: 2px 0 0; font-size: 20px; font-weight: 780; letter-spacing: -.01em; }
.automation-form-layout { min-height: 0; display: flex; flex: 1; overflow: hidden; }
.automation-form-steps { width: 240px; display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; padding: 16px 12px; border-right: 1px solid var(--border-default); background: var(--bg-primary); }
.automation-form-step { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; }
.automation-form-step:hover { background: var(--bg-hover); color: var(--text-primary); }.automation-form-step.active { border-color: color-mix(in srgb,var(--accent-primary) 38%,var(--border-default)); background: var(--bg-accent-subtle); color: var(--text-primary); }
.automation-form-step-number { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-tertiary); background: var(--bg-secondary); }
.automation-form-step.active .automation-form-step-number { border-color: var(--accent-primary); color: #fff; background: var(--accent-primary); }.automation-form-step.complete .automation-form-step-number { border-color: color-mix(in srgb,var(--accent-success) 50%,var(--border-default)); color: var(--accent-success); background: color-mix(in srgb,var(--accent-success) 10%,var(--bg-secondary)); }
.automation-form-step > span:last-child { min-width: 0; display: flex; flex-direction: column; }.automation-form-step small { color: var(--text-tertiary); font-size: 10px; font-weight: 600; }.automation-form-step strong { overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.automation-form-content { min-width: 0; min-height: 0; flex: 1; overflow-y: auto; padding: 22px 26px 28px; scroll-behavior: smooth; }
.automation-form-error { margin-bottom: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--accent-error) 45%,var(--border-default)); border-radius: 8px; color: var(--accent-error); background: color-mix(in srgb,var(--accent-error) 8%,var(--bg-tertiary)); font-size: 12px; }
.automation-form-section { max-width: 660px; margin: 0 auto; outline: 0; }.automation-section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }.automation-section-heading h3 { margin: 0; font-size: 16px; font-weight: 750; }.automation-section-heading p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.automation-form-modal .automation-section-icon { width: 38px; height: 38px; border: 0; border-radius: 10px; }
.automation-field { min-width: 0; display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }.automation-field > span { color: var(--text-secondary); font-size: 12px; font-weight: 650; }.automation-field > span b { color: var(--accent-error); }.automation-field > span small,.automation-field-note { color: var(--text-tertiary); font-size: 11px; font-weight: 500; }
.automation-field input,.automation-field select,.automation-field textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 9px; outline: 0; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 13px; }
.automation-field select { cursor: pointer; }.automation-field textarea { min-height: 82px; padding-top: 10px; padding-bottom: 10px; resize: vertical; }.automation-field input:disabled,.automation-field select:disabled,.automation-field textarea:disabled { cursor: not-allowed; opacity: .52; }
.automation-field-note.is-warning { color: var(--accent-warning); }
.automation-data-group-field { gap: 7px; margin-bottom: 4px; }
.automation-data-group-field-heading { display: flex; align-items: center; gap: 10px; }
.automation-data-group-field-heading > span { min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.automation-data-group-field-heading > span small { color: var(--text-tertiary); font-size: 11px; font-weight: 500; }
.automation-data-group-manage-button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; margin-left: auto; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-secondary); color: var(--accent-primary); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.automation-data-group-manage-button:hover { border-color: color-mix(in srgb,var(--accent-primary) 42%,var(--border-default)); background: var(--bg-accent-subtle); }
.automation-data-group-combobox { min-width: 0; position: relative; }
.automation-data-group-control { min-width: 0; min-height: 44px; position: relative; display: flex; align-items: stretch; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-primary); transition: border-color var(--transition-fast),box-shadow var(--transition-fast); }
.automation-data-group-control:hover,.automation-data-group-control.is-open { border-color: color-mix(in srgb,var(--accent-primary) 50%,var(--border-hover)); }
.automation-data-group-trigger { min-width: 0; width: 100%; min-height: 42px; position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 42px 5px 12px; overflow: hidden; border: 0; border-radius: inherit; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.automation-data-group-trigger.has-value { padding-right: 72px; }
.automation-data-group-color { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb,currentColor 8%,transparent); }
.automation-data-group-empty-icon { flex: 0 0 auto; color: var(--text-tertiary); }
.automation-data-group-placeholder { min-width: 0; flex: 1; overflow: hidden; color: var(--text-tertiary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.automation-data-group-value-copy,.automation-data-group-option-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.automation-data-group-value-copy strong,.automation-data-group-option-copy strong { overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.automation-data-group-value-copy small,.automation-data-group-option-copy small { overflow: hidden; color: var(--text-tertiary); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.automation-data-group-chevron { position: absolute; right: 11px; flex: 0 0 auto; color: var(--text-tertiary); transition: transform var(--transition-fast); }
.automation-data-group-control.is-open .automation-data-group-chevron { transform: rotate(180deg); }
.automation-data-group-clear { width: 26px; height: 26px; position: absolute; top: 50%; right: 36px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-tertiary); cursor: pointer; transform: translateY(-50%); }
.automation-data-group-clear:hover { background: var(--bg-hover); color: var(--text-primary); }
.automation-data-group-menu { min-width: 0; width: 100%; max-height: 264px; position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
.automation-data-group-option { min-width: 0; width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.automation-data-group-option:hover,.automation-data-group-option.is-active { background: var(--bg-hover); }
.automation-data-group-option.is-selected { background: var(--bg-accent-subtle); }
.automation-data-group-option.is-none { min-height: 36px; color: var(--text-secondary); font-size: 12.5px; }
.automation-data-group-option.is-none > span { min-width: 0; flex: 1; }
.automation-data-group-option-check { flex: 0 0 auto; color: var(--accent-primary); }
.automation-data-group-menu-divider { height: 1px; margin: 5px 4px; background: var(--border-default); }
.automation-data-group-menu-label { padding: 2px 8px 6px; color: var(--text-tertiary); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.automation-data-group-empty { padding: 12px 10px; color: var(--text-tertiary); font-size: 12px; text-align: center; }
.automation-data-group-menu-manage { min-width: 0; width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 8px 10px; border: 1px dashed var(--border-default); border-radius: 7px; background: transparent; color: var(--accent-primary); font: inherit; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
.automation-data-group-menu-manage:hover { border-color: color-mix(in srgb,var(--accent-primary) 42%,var(--border-default)); background: var(--bg-accent-subtle); }
.automation-campaign-combobox { min-width: 0; width: 100%; }
.automation-campaign-combobox-control { min-width: 0; height: 44px; position: relative; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-primary); transition: border-color var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast); }
.automation-campaign-combobox-control:hover,.automation-campaign-combobox-control.is-open { border-color: color-mix(in srgb,var(--accent-primary) 58%,var(--border-default)); }
.automation-campaign-combobox.is-disabled { opacity: .52; }.automation-campaign-combobox.is-disabled .automation-campaign-combobox-control { cursor: not-allowed; }
.automation-campaign-combobox-search-icon { position: absolute; left: 10px; z-index: 1; color: var(--text-tertiary); pointer-events: none; }
.automation-field .automation-campaign-combobox-input { min-width: 0; width: 100%; height: 100%; min-height: 0; padding: 0 68px 0 34px; overflow: hidden; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.automation-field .automation-campaign-combobox-input:focus-visible { outline: 0; }.automation-field .automation-campaign-combobox-input::placeholder { color: var(--text-tertiary); }
.automation-campaign-combobox-toggle,.automation-campaign-combobox-clear { width: 28px; height: 28px; position: absolute; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast); }.automation-campaign-combobox-toggle { right: 3px; }.automation-campaign-combobox-clear { right: 31px; }
.automation-campaign-combobox-clear:hover { background: var(--bg-hover); color: var(--text-primary); }
.automation-campaign-combobox-toggle:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }.automation-campaign-combobox-toggle:disabled { cursor: not-allowed; }.automation-campaign-combobox-control.is-open .automation-campaign-combobox-toggle svg { transform: rotate(180deg); }
.automation-campaign-combobox-menu { position: fixed; z-index: 3600; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); color: var(--text-primary); scrollbar-gutter: stable; }
.automation-campaign-combobox-virtual-space { min-width: 0; position: relative; }
.automation-campaign-combobox-option { min-width: 0; width: 100%; position: absolute; right: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.automation-campaign-combobox-option:hover,.automation-campaign-combobox-option.is-active { background: var(--bg-hover); }.automation-campaign-combobox-option.is-selected { color: var(--accent-primary); background: var(--bg-accent-subtle); }
.automation-campaign-combobox-option-label { min-width: 0; display: flex; flex: 1; align-items: center; overflow: hidden; white-space: nowrap; }
.automation-campaign-combobox-option-label > span:not(.automation-campaign-combobox-option-separator):not(.automation-campaign-combobox-option-status) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automation-campaign-combobox-option-account { max-width: 24%; flex: 0 1 auto; font-weight: 680; }.automation-campaign-combobox-option-action { max-width: 32%; flex: 0 1 auto; color: var(--text-secondary); }.automation-campaign-combobox-option-name { flex: 1 1 auto; font-weight: 620; }
.automation-campaign-combobox-option-separator { flex: 0 0 auto; margin: 0 6px; color: var(--text-tertiary); }
.automation-campaign-combobox-option-status { max-width: 22%; flex: 0 1 auto; padding: 2px 6px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 8.8px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.automation-campaign-combobox-option-check { flex: 0 0 auto; color: var(--accent-primary); }
.automation-campaign-combobox-empty { min-height: 58px; display: flex; align-items: center; justify-content: center; padding: 11px; color: var(--text-tertiary); font-size: 11px; text-align: center; }
.automation-inline-empty { min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 9px; border: 1px dashed var(--border-default); border-radius: 8px; color: var(--text-tertiary); background: var(--bg-primary); font-size: 11px; text-align: center; }.automation-inline-empty.is-warning { border-color: color-mix(in srgb,var(--accent-warning) 42%,var(--border-default)); color: var(--accent-warning); }
.automation-status-options,.automation-choice-grid { display: grid; gap: 8px; }
.automation-status-groups { display: flex; flex-direction: column; gap: 12px; }
.automation-status-group { min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--border-default); border-radius: 9px; }
.automation-status-group > legend { max-width: 100%; padding: 0 5px; color: var(--text-primary); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.automation-status-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.automation-choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.automation-schedule-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.automation-status-option,.automation-choice-card,.automation-schedule-option { min-width: 0; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-primary); cursor: pointer; }
.automation-schedule-option { min-height: 92px; position: relative; align-items: flex-start; padding: 12px; }
.automation-schedule-option.is-legacy { min-height: 58px; grid-column: 1 / -1; }
.automation-status-option:hover,.automation-status-option.selected,.automation-choice-card:hover,.automation-choice-card.selected,.automation-schedule-option:hover,.automation-schedule-option.selected { border-color: color-mix(in srgb,var(--accent-primary) 55%,var(--border-default)); background: var(--bg-accent-subtle); }
.automation-status-option > input,.automation-choice-card > input,.automation-schedule-option > input,.automation-active-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.automation-status-check { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--border-default); border-radius: 5px; color: transparent; background: var(--bg-secondary); }.automation-status-option.selected .automation-status-check { border-color: var(--accent-primary); color: #fff; background: var(--accent-primary); }
.automation-status-option > span:last-child { min-width: 0; display: flex; flex-direction: column; }.automation-status-option strong { font-size: 12px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }.automation-status-option small { color: var(--text-tertiary); font-size: 10.5px; }
.automation-choice-card svg { flex: 0 0 auto; color: var(--text-tertiary); }.automation-choice-card.selected svg { color: var(--accent-primary); }.automation-choice-card span { overflow: hidden; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.automation-route-summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto minmax(0,1fr); align-items: center; gap: 10px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-primary); }
.automation-route-summary > div { min-width: 0; display: flex; flex-direction: column; }.automation-route-summary small,.automation-route-summary span,.automation-route-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.automation-route-summary small,.automation-route-summary span { color: var(--text-tertiary); font-size: 10.5px; }.automation-route-summary strong { margin-top: 2px; font-size: 12.5px; font-weight: 700; }.automation-route-summary > svg { color: var(--text-tertiary); }
.automation-route-data { padding: 4px 10px; border: 1px solid color-mix(in srgb,var(--accent-primary) 38%,var(--border-default)); border-radius: var(--radius-full); color: var(--accent-primary)!important; background: var(--bg-accent-subtle); font-size: 11px!important; font-weight: 700; }
.automation-rule-note { padding: 10px 11px; border-left: 3px solid var(--accent-info); border-radius: 0 7px 7px 0; color: var(--text-secondary); background: color-mix(in srgb,var(--accent-info) 7%,var(--bg-tertiary)); font-size: 11.5px; line-height: 1.5; }
.automation-schedule-block { margin: 20px 0 16px; padding-top: 18px; border-top: 1px solid var(--border-default); }
.automation-schedule-heading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.automation-schedule-heading-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; color: var(--accent-primary); background: var(--bg-accent-subtle); }
.automation-schedule-heading > div { min-width: 0; }.automation-schedule-heading h4 { margin: 0; font-size: 13.5px; font-weight: 700; }.automation-schedule-heading p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
.automation-schedule-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.automation-visually-hidden { width: 1px; height: 1px; position: absolute; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.automation-radio-dot { width: 16px; height: 16px; position: relative; flex: 0 0 auto; margin-top: 1px; border: 1px solid var(--border-default); border-radius: 50%; background: var(--bg-secondary); }.automation-schedule-option.selected .automation-radio-dot { border: 5px solid var(--accent-primary); }
.automation-schedule-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.automation-schedule-copy strong { font-size: 12px; font-weight: 700; line-height: 1.35; }.automation-schedule-copy small { color: var(--text-secondary); font-size: 10.5px; line-height: 1.45; }
.automation-schedule-config { margin: 10px 0 0; padding: 10px 11px; border-left: 3px solid var(--accent-primary); border-radius: 0 7px 7px 0; background: var(--bg-accent-subtle); }
.automation-delay-control { width: min(100%,390px); display: grid; grid-template-columns: minmax(130px,1fr) minmax(110px,.65fr); gap: 8px; }
.automation-delay-field { margin-bottom: 0; }
.automation-delay-exact-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb,var(--accent-primary) 24%,var(--border-default)); }
.automation-delay-exact-toggle { min-height: 42px; position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-primary); cursor: pointer; }
.automation-delay-exact-toggle:hover,.automation-delay-exact-toggle.selected { border-color: color-mix(in srgb,var(--accent-primary) 55%,var(--border-default)); background: color-mix(in srgb,var(--accent-primary) 8%,var(--bg-primary)); }
.automation-delay-exact-toggle > input { width: 1px; height: 1px; position: absolute; margin: 0; opacity: 0; }
.automation-delay-exact-check { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--border-default); border-radius: 5px; color: transparent; background: var(--bg-secondary); }
.automation-delay-exact-toggle.selected .automation-delay-exact-check { border-color: var(--accent-primary); color: #fff; background: var(--accent-primary); }
.automation-delay-exact-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.automation-delay-exact-copy strong { font-size: 12px; font-weight: 650; line-height: 1.35; }.automation-delay-exact-copy small { color: var(--text-tertiary); font-size: 10.5px; line-height: 1.4; }
.automation-delay-exact-time-field { max-width: 390px; display: flex; flex-direction: column; gap: 7px; margin: 9px 0 0 26px; }.automation-delay-exact-time-field > span { color: var(--text-secondary); font-size: 12px; font-weight: 620; }.automation-delay-exact-time-field > span b { color: var(--accent-error); }
.automation-delay-exact-time-field input { width: 190px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 9px; outline: 0; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 13px; }
.automation-time-field input { max-width: 190px; }.automation-fixed-time-field input { max-width: 280px; }
.automation-time-field input,.automation-fixed-time-field input,.automation-delay-exact-time-field input { color-scheme: dark; }.theme-light .automation-time-field input,.theme-light .automation-fixed-time-field input,.theme-light .automation-delay-exact-time-field input { color-scheme: light; }
.automation-form-two-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.automation-active-toggle { min-height: 62px; display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-primary); cursor: pointer; }
.automation-toggle-track { width: 34px; height: 19px; position: relative; flex: 0 0 auto; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-tertiary); }.automation-toggle-track > span { width: 13px; height: 13px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: var(--text-tertiary); transition: transform var(--transition-fast),background var(--transition-fast); }
.automation-active-toggle > input:checked + .automation-toggle-track { border-color: var(--accent-primary); background: var(--accent-primary); }.automation-active-toggle > input:checked + .automation-toggle-track > span { background: #fff; transform: translateX(15px); }.automation-active-toggle > span:last-child { min-width: 0; display: flex; flex-direction: column; }.automation-active-toggle strong { font-size: 12px; font-weight: 650; }.automation-active-toggle small { color: var(--text-tertiary); font-size: 10.5px; }
.automation-final-summary { padding: 13px 14px; border: 1px solid color-mix(in srgb,var(--accent-primary) 32%,var(--border-default)); border-radius: 9px; background: var(--bg-accent-subtle); }.automation-final-summary h4 { margin: 0 0 9px; font-size: 13px; font-weight: 700; }
.automation-final-summary-grid { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 7px 10px; font-size: 12px; }.automation-final-summary-grid > span { color: var(--text-tertiary); }.automation-final-summary-grid > strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.automation-final-summary-grid > strong.automation-schedule-summary-value { line-height: 1.4; white-space: normal; }
.automation-form-footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--border-default); background: var(--bg-primary); }.automation-form-footer > div { gap: 8px; }
.automation-form-modal .automation-button { min-height: 36px; padding-right: 13px; padding-left: 13px; font-size: 12px; }
body.theme-light .automation-modal-backdrop { background: var(--modal-backdrop); }

@media(max-width:1360px){
  .automation-filters { grid-template-columns: minmax(180px,1.35fr) repeat(3,minmax(118px,1fr)) auto; }
  .automation-filter-field:nth-of-type(5),.automation-filter-field:nth-of-type(6){display:none}
  .automation-page-title p{display:none}.automation-action-copy small{display:none}
}
@media(max-width:980px){
  .automation-page{padding:9px}.automation-page-header{align-items:flex-start;flex-direction:column;gap:7px}.automation-toolbar{width:100%}
  .automation-action-strip{grid-template-columns:1fr}.automation-action-card{border-right:0;border-bottom:1px solid var(--border-default)}.automation-action-card:last-child{border-bottom:0}.automation-action-card.disabled{display:none}
  .automation-filters{grid-template-columns:minmax(170px,1fr) minmax(120px,.7fr) auto}.automation-filter-field:nth-of-type(3),.automation-filter-field:nth-of-type(4){display:none}
  .automation-info-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}.automation-form-steps{width:176px}.automation-form-step strong{white-space:normal}
  .automation-status-options,.automation-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .automation-button.is-icon-mobile span{display:none}.automation-modal-backdrop{padding:15px 12px}.automation-form-modal{width:calc(100vw - 24px);height:calc(100vh - 30px);min-height:0}.automation-form-layout{flex-direction:column}
  .automation-form-steps{width:100%;flex-direction:row;padding:7px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-default)}.automation-form-step{min-width:150px;min-height:42px}.automation-form-content{padding:14px}
  .automation-status-options,.automation-choice-grid,.automation-schedule-options,.automation-form-two-columns{grid-template-columns:1fr}.automation-schedule-option.is-legacy{grid-column:auto}
}
@media(max-width:480px){.automation-data-group-field-heading{align-items:flex-start;flex-direction:column}.automation-data-group-manage-button{width:100%;margin-left:0}.automation-delay-control{grid-template-columns:1fr}.automation-delay-exact-time-field{max-width:none;margin-left:0}.automation-delay-exact-time-field input{width:100%}.automation-route-summary{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.automation-route-summary>.automation-route-data{display:none}.automation-route-summary>svg:first-of-type{display:none}}
@media(max-height:620px){.automation-form-modal{min-height:0}}
@media(max-height:820px){.automation-detail-dock:not(.is-collapsed){max-height:230px}}
@media(prefers-reduced-motion:reduce){.automation-page *,.automation-form-modal *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.login-page {
  --login-surface: #fff;
  --login-page-bg: #f3f5fa;
  --login-panel-bg: #eef1ff;
  --login-ink: #20283f;
  --login-muted: #68748a;
  --login-border: #e1e6f0;
  --login-accent: #5557d9;
  --login-accent-hover: #4445bf;
  --login-link-bg: rgba(255, 255, 255, .75);
  --login-shadow: 0 22px 72px rgba(38, 52, 100, .09), 0 2px 8px rgba(38, 52, 100, .03);
  color-scheme: light;
  display: flex;
  flex: 1;
  align-items: safe center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: 28px 32px;
  background: radial-gradient(ellipse at 75% 15%, rgba(99, 102, 241, .065), transparent 55%), var(--login-page-bg);
  color: var(--login-ink);
}

body:not(.theme-light) .login-page {
  color-scheme: dark;
  --login-surface: #171b29;
  --login-page-bg: #0e121d;
  --login-panel-bg: #1d2239;
  --login-ink: #ecedf7;
  --login-muted: #a1abc1;
  --login-border: #30384e;
  --login-accent: #a4a5ff;
  --login-accent-hover: #c0c1ff;
  --login-link-bg: rgba(32, 39, 62, .85);
  --login-shadow: 0 22px 72px rgba(0, 0, 0, .24);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(360px, .93fr) minmax(0, 1.07fr);
  width: 100%;
  max-width: 1080px;
  height: min(660px, calc(100dvh - 100px));
  min-height: 540px;
  overflow: hidden;
  border: 1px solid var(--login-border);
  border-radius: 20px;
  background: var(--login-surface);
  box-shadow: var(--login-shadow);
}

.login-form-panel { min-width: 0; overflow-y: auto; padding: 36px 42px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; }
.login-brand-name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.7px; line-height: 1.2; }
.login-brand-caption { display: block; margin-top: 4px; color: var(--login-muted); font-size: 11px; }
.login-heading { margin-bottom: 24px; }
.login-heading h1 { margin: 0 0 8px; font-size: 27px; font-weight: 650; letter-spacing: -.8px; line-height: 1.2; }
.login-heading p { margin: 0; color: var(--login-muted); font-size: 13px; line-height: 1.65; }
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field > label { font-size: 12px; font-weight: 600; }
.login-input-wrap { position: relative; display: flex; align-items: center; }
.login-input-icon { position: absolute; left: 14px; color: var(--login-muted); pointer-events: none; }
.login-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--login-border);
  border-radius: 9px;
  background: var(--login-surface);
  color: var(--login-ink);
  font: inherit;
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.login-input-wrap input::placeholder { color: var(--login-muted); opacity: .75; }
.login-input-wrap input:focus { outline: none; border-color: var(--login-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 13%, transparent); }
.login-input-wrap input:disabled { opacity: .65; }
.login-input-wrap input[aria-invalid="true"] { border-color: var(--accent-error); }
.login-password-input input { padding-right: 45px; }
.login-password-toggle { position: absolute; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--login-muted); cursor: pointer; }
.login-password-toggle:hover { color: var(--login-accent); background: var(--bg-accent-subtle); }
.login-recover { align-self: flex-end; border: 0; padding: 0; background: none; color: var(--login-accent); font: inherit; font-size: 12px; cursor: pointer; }
.login-recover:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-options { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; border: 0; }
.login-option { display: flex; align-items: center; gap: 9px; width: fit-content; color: var(--login-muted); font-size: 12px; line-height: 1.5; cursor: pointer; user-select: none; }
.login-option input { width: 15px; height: 15px; margin: 0; accent-color: #6366f1; cursor: inherit; }
.login-form button:disabled, .login-options:disabled .login-option { cursor: default; opacity: .6; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 45px; padding: 11px 16px; border: 1px solid transparent; border-radius: 9px; background: #595bdc; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(79, 70, 229, .14); transition: background .15s, box-shadow .15s; }
.login-submit:hover:not(:disabled) { background: #494bc4; box-shadow: 0 5px 14px rgba(79, 70, 229, .22); }
.login-error { margin: 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--accent-error) 25%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--accent-error) 7%, transparent); color: var(--accent-error); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.login-page a:focus-visible, .login-page button:focus-visible, .login-notice-scroll:focus-visible, .login-option input:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 4px; }
.login-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.login-information { position: relative; display: flex; flex-direction: column; gap: 30px; min-width: 0; min-height: 0; padding: 40px 42px; border-left: 1px solid var(--login-border); background: radial-gradient(ellipse at 100% 0, rgba(129, 140, 248, .1), transparent 60%), var(--login-panel-bg); }
.login-information-heading { display: flex; align-items: center; gap: 9px; color: var(--login-muted); font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; }
.login-information-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--login-accent); }
.login-information-body { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 0; }
.login-notice { --notice-accent: var(--login-accent); display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.login-notice-success { --notice-accent: #168162; }
.login-notice-warning { --notice-accent: #99601b; }
.login-notice-error { --notice-accent: #c34054; }
body:not(.theme-light) .login-notice-success { --notice-accent: #6dd9b7; }
body:not(.theme-light) .login-notice-warning { --notice-accent: #edc17d; }
body:not(.theme-light) .login-notice-error { --notice-accent: #ff9cac; }
.login-notice-symbol { display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; margin-bottom: 22px; border: 1px solid color-mix(in srgb, var(--notice-accent) 15%, transparent); border-radius: 16px; color: var(--notice-accent); background: var(--login-link-bg); }
.login-notice h2 { flex: 0 0 auto; margin: 0 0 16px; max-height: 100px; overflow: auto; color: var(--login-ink); font-size: 30px; font-weight: 650; line-height: 1.3; letter-spacing: -.9px; overflow-wrap: anywhere; }
.login-notice-welcome h2 { max-width: 350px; }
.login-notice h2 span { color: var(--login-accent); }
.login-notice-scroll { min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-gutter: stable; }
.login-notice-scroll p { margin: 0; color: var(--login-muted); font-size: 14px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.login-notice-link { display: inline-flex; align-items: center; gap: 6px; margin: 17px 0 5px; color: var(--notice-accent); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.login-notice-link svg { flex-shrink: 0; }
.login-resources { flex: 0 0 auto; }
.login-resources h3 { margin: 0 0 12px; font-size: 11px; font-weight: 500; color: var(--login-muted); }
.login-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.login-resource { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 12px; border: 1px solid var(--login-border); border-radius: 10px; background: var(--login-link-bg); color: var(--login-ink); text-decoration: none; transition: border-color .15s, background .15s; }
.login-resource:hover { border-color: color-mix(in srgb, var(--login-accent) 50%, transparent); background: var(--login-surface); }
.login-resource-icon { color: var(--login-accent); flex-shrink: 0; }
.login-resource > span { flex: 1; min-width: 0; }
.login-resource strong { display: block; font-size: 11px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.login-resource small { display: block; margin-top: 3px; color: var(--login-muted); font-size: 10px; line-height: 1.4; }
.login-resource-arrow { flex-shrink: 0; color: var(--login-muted); }

@media (max-height: 780px), (max-width: 1100px) {
  .login-form-panel { padding: 24px 30px; }
  .login-brand { margin-bottom: 20px; }
  .login-heading { margin-bottom: 18px; }
  .login-form { gap: 15px; }
  .login-information { padding: 30px; gap: 24px; }
  .login-notice h2 { font-size: 27px; }
  .login-resource { padding: 12px 10px; gap: 8px; }
}

@media (max-height: 700px) and (min-width: 861px) {
  .login-form-panel { padding-top: 20px; padding-bottom: 20px; }
  .login-brand { margin-bottom: 16px; }
  .login-heading { margin-bottom: 14px; }
  .login-form { gap: 12px; }
  .login-field { gap: 6px; }
}

@media (max-width: 860px) {
  .login-page { padding: 20px 20px 24px; }
  .login-shell { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-width: 540px; flex-shrink: 0; }
  .login-form-panel { padding: 30px; overflow: visible; }
  .login-information { min-height: 360px; border-left: 0; border-top: 1px solid var(--login-border); }
  .login-notice-scroll { max-height: 300px; }
  .login-information-body { min-height: 180px; }
}

@media (max-width: 420px) {
  .login-page { padding-left: 12px; padding-right: 12px; }
  .login-form-panel, .login-information { padding: 24px; }
  .login-resource-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .login-page *, .login-page *::before, .login-page *::after { transition: none !important; }
}

.modal.login-device-change-modal {
  width: min(440px, calc(100vw - 32px));
}

.login-device-change-modal .stepper-form-group {
  margin-bottom: 0;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-aria-container {
	position: absolute; /* try to hide from window but not from screen readers */
	left:-999em;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -------------------- IE10 remove auto clear button -------------------- */

::-ms-clear {
	display: none;
}

/* All widgets */
/* I am not a big fan of this rule */
.monaco-editor .editor-widget input {
	color: inherit;
}

/* -------------------- Editor -------------------- */

.monaco-editor {
	position: relative;
	overflow: visible;
	-webkit-text-size-adjust: 100%;
	color: var(--vscode-editor-foreground);
	background-color: var(--vscode-editor-background);
	overflow-wrap: initial;
}
.monaco-editor-background {
	background-color: var(--vscode-editor-background);
}
.monaco-editor .rangeHighlight {
	background-color: var(--vscode-editor-rangeHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-rangeHighlightBorder);
}
.monaco-editor.hc-black .rangeHighlight, .monaco-editor.hc-light .rangeHighlight {
	border-style: dotted;
}
.monaco-editor .symbolHighlight {
	background-color: var(--vscode-editor-symbolHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-symbolHighlightBorder);
}
.monaco-editor.hc-black .symbolHighlight, .monaco-editor.hc-light .symbolHighlight {
	border-style: dotted;
}

.monaco-editor .editorCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* -------------------- Misc -------------------- */

.monaco-editor .overflow-guard {
	position: relative;
	overflow: hidden;
}

.monaco-editor .view-overlays {
	position: absolute;
	top: 0;
}

.monaco-editor .view-overlays > div, .monaco-editor .margin-view-overlays > div {
	position: absolute;
	width: 100%;
}

/*
.monaco-editor .auto-closed-character {
	opacity: 0.3;
}
*/


.monaco-editor .squiggly-error {
	border-bottom: 4px double var(--vscode-editorError-border);
}
.monaco-editor .squiggly-error::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorError-background);
}
.monaco-editor .squiggly-warning {
	border-bottom: 4px double var(--vscode-editorWarning-border);
}
.monaco-editor .squiggly-warning::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorWarning-background);
}
.monaco-editor .squiggly-info {
	border-bottom: 4px double var(--vscode-editorInfo-border);
}
.monaco-editor .squiggly-info::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorInfo-background);
}
.monaco-editor .squiggly-hint {
	border-bottom: 2px dotted var(--vscode-editorHint-border);
}
.monaco-editor.showUnused .squiggly-unnecessary {
	border-bottom: 2px dashed var(--vscode-editorUnnecessaryCode-border);
}
.monaco-editor.showDeprecated .squiggly-inline-deprecated {
	text-decoration: line-through;
	text-decoration-color: var(--vscode-editor-foreground, inherit);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Arrows */
.monaco-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.monaco-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.monaco-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.monaco-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.monaco-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.monaco-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
.monaco-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}
.monaco-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.monaco-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}

.monaco-scrollable-element > .scrollbar {
	background: var(--vscode-scrollbar-background);
}

.monaco-scrollable-element > .scrollbar > .slider {
	background: var(--vscode-scrollbarSlider-background);
}

.monaco-scrollable-element > .scrollbar > .slider:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-scrollable-element > .scrollbar > .slider.active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .blockDecorations-container {
	position: absolute;
	top: 0;
	pointer-events: none;
}

.monaco-editor .blockDecorations-block {
	position: absolute;
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.monaco-editor .margin-view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.monaco-editor
	.margin-view-overlays
	.current-line.current-line-margin.current-line-margin-both {
	border-right: 0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cdr = core decorations rendering (div)
*/
.monaco-editor .lines-content .cdr {
	position: absolute;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .glyph-margin {
	position: absolute;
	top: 0;
}

/*
	Keeping name short for faster parsing.
	cgmr = core glyph margin rendering (div)
*/
.monaco-editor .glyph-margin-widgets .cgmr {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
	Ensure spinning icons are pixel-perfectly centered and avoid wobble.
	This is only applied to icons that spin to avoid unnecessary
	GPU layers and blurry subpixel AA.
*/
.monaco-editor .glyph-margin-widgets .cgmr.codicon-modifier-spin::before  {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .lines-content .core-guide {
	position: absolute;
	box-sizing: border-box;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin-view-overlays .line-numbers {
	bottom: 0;
	font-variant-numeric: tabular-nums;
	position: absolute;
	text-align: right;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: default;
}

.monaco-editor .relative-current-line-number {
	text-align: left;
	display: inline-block;
	width: 100%;
}

.monaco-editor .margin-view-overlays .line-numbers.lh-odd {
	margin-top: 1px;
}

.monaco-editor .line-numbers {
	color: var(--vscode-editorLineNumber-foreground);
}

.monaco-editor .line-numbers.active-line-number {
	color: var(--vscode-editorLineNumber-activeForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-mouse-cursor-text {
	cursor: text;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Uncomment to see lines flashing when they're painted */
/*.monaco-editor .view-lines > .view-line {
	background-color: none;
	animation-name: flash-background;
	animation-duration: 800ms;
}
@keyframes flash-background {
	0%   { background-color: lightgreen; }
	100% { background-color: none }
}*/

.mtkcontrol {
	color: rgb(255, 255, 255) !important;
	background: rgb(150, 0, 0) !important;
}

.mtkoverflow {
	background-color: var(--vscode-button-background, var(--vscode-editor-background));
	color: var(--vscode-button-foreground, var(--vscode-editor-foreground));
	border-width: 1px;
	border-style: solid;
	border-color: var(--vscode-contrastBorder);
	border-radius: 2px;
	padding: 4px;
	cursor: pointer;
}
.mtkoverflow:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.monaco-editor.no-user-select .lines-content,
.monaco-editor.no-user-select .view-line,
.monaco-editor.no-user-select .view-lines {
	user-select: none;
	-webkit-user-select: none;
}
/* Use user-select: text for lookup feature on macOS */
/* https://github.com/microsoft/vscode/issues/85632 */
.monaco-editor.mac .lines-content:hover,
.monaco-editor.mac .view-line:hover,
.monaco-editor.mac .view-lines:hover {
	user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}

.monaco-editor.enable-user-select {
	user-select: initial;
	-webkit-user-select: initial;
}

.monaco-editor .view-lines {
	white-space: nowrap;
}

.monaco-editor .view-line {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
}

/* There are view-lines in view-zones. We have to make sure this rule does not apply to them, as they don't set a line height */
.monaco-editor .lines-content > .view-lines > .view-line > span {
	top: 0;
	bottom: 0;
	position: absolute;
}

.monaco-editor .mtkw {
	color: var(--vscode-editorWhitespace-foreground) !important;
}

.monaco-editor .mtkz {
	display: inline-block;
	color: var(--vscode-editorWhitespace-foreground) !important;
}

/* TODO@tokenization bootstrap fix */
/*.monaco-editor .view-line > span > span {
	float: none;
	min-height: inherit;
	margin-left: inherit;
}*/
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .lines-decorations {
	position: absolute;
	top: 0;
	background: white;
}

/*
	Keeping name short for faster parsing.
	cldr = core lines decorations rendering (div)
*/
.monaco-editor .margin-view-overlays .cldr {
	position: absolute;
	height: 100%;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin {
	background-color: var(--vscode-editorGutter-background);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cmdr = core margin decorations rendering (div)
*/
.monaco-editor .margin-view-overlays .cmdr {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* START cover the case that slider is visible on mouseover */
.monaco-editor .minimap.slider-mouseover .minimap-slider {
	opacity: 0;
	transition: opacity 100ms linear;
}
.monaco-editor .minimap.slider-mouseover:hover .minimap-slider {
	opacity: 1;
}
.monaco-editor .minimap.slider-mouseover .minimap-slider.active {
	opacity: 1;
}
/* END cover the case that slider is visible on mouseover */
.monaco-editor .minimap-slider .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-background);
}
.monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-hoverBackground);
}
.monaco-editor .minimap-slider.active .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-activeBackground);
}
.monaco-editor .minimap-shadow-visible {
	box-shadow: var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset;
}
.monaco-editor .minimap-shadow-hidden {
	position: absolute;
	width: 0;
}
.monaco-editor .minimap-shadow-visible {
	position: absolute;
	left: -6px;
	width: 6px;
	pointer-events: none;
}
.monaco-editor.no-minimap-shadow .minimap-shadow-visible {
	position: absolute;
	left: -1px;
	width: 1px;
}

/* 0.5s fade in/out for the minimap */
.minimap.minimap-autohide-mouseover,
.minimap.minimap-autohide-scroll {
	opacity: 0;
	transition: opacity 0.5s;
}
.minimap.minimap-autohide-scroll{
	pointer-events: none;
}
.minimap.minimap-autohide-mouseover:hover,
.minimap.minimap-autohide-scroll.active {
	opacity: 1;
	pointer-events: auto;
}

.monaco-editor .minimap {
	z-index: 5;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .overlayWidgets {
	position: absolute;
	top: 0;
	left:0;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .view-ruler {
	position: absolute;
	top: 0;
	box-shadow: 1px 0 0 0 var(--vscode-editorRuler-foreground) inset;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .scroll-decoration {
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cslr = core selections layer rendering (div)
*/
.monaco-editor .lines-content .cslr {
	position: absolute;
}

.monaco-editor .focused .selected-text {
	background-color: var(--vscode-editor-selectionBackground);
}

.monaco-editor .selected-text {
	background-color: var(--vscode-editor-inactiveSelectionBackground);
}

.monaco-editor			.top-left-radius		{ border-top-left-radius: 3px; }
.monaco-editor			.bottom-left-radius		{ border-bottom-left-radius: 3px; }
.monaco-editor			.top-right-radius		{ border-top-right-radius: 3px; }
.monaco-editor			.bottom-right-radius	{ border-bottom-right-radius: 3px; }

.monaco-editor.hc-black .top-left-radius		{ border-top-left-radius: 0; }
.monaco-editor.hc-black .bottom-left-radius		{ border-bottom-left-radius: 0; }
.monaco-editor.hc-black .top-right-radius		{ border-top-right-radius: 0; }
.monaco-editor.hc-black .bottom-right-radius	{ border-bottom-right-radius: 0; }

.monaco-editor.hc-light .top-left-radius		{ border-top-left-radius: 0; }
.monaco-editor.hc-light .bottom-left-radius		{ border-bottom-left-radius: 0; }
.monaco-editor.hc-light .top-right-radius		{ border-top-right-radius: 0; }
.monaco-editor.hc-light .bottom-right-radius	{ border-bottom-right-radius: 0; }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .cursors-layer {
	position: absolute;
	top: 0;
}

.monaco-editor .cursors-layer > .cursor {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
}

/* -- smooth-caret-animation -- */
.monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor {
	transition: all 80ms;
}

/* -- block-outline-style -- */
.monaco-editor .cursors-layer.cursor-block-outline-style > .cursor {
	background: transparent !important;
	border-style: solid;
	border-width: 1px;
}

/* -- underline-style -- */
.monaco-editor .cursors-layer.cursor-underline-style > .cursor {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	background: transparent !important;
}

/* -- underline-thin-style -- */
.monaco-editor .cursors-layer.cursor-underline-thin-style > .cursor {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	background: transparent !important;
}

@keyframes monaco-cursor-smooth {
	0%,
	20% {
		opacity: 1;
	}
	60%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-phase {
	0%,
	20% {
		opacity: 1;
	}
	90%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-expand {
	0%,
	20% {
		transform: scaleY(1);
	}
	80%,
	100% {
		transform: scaleY(0);
	}
}

.cursor-smooth {
	animation: monaco-cursor-smooth 0.5s ease-in-out 0s 20 alternate;
}

.cursor-phase {
	animation: monaco-cursor-phase 0.5s ease-in-out 0s 20 alternate;
}

.cursor-expand > .cursor {
	animation: monaco-cursor-expand 0.5s ease-in-out 0s 20 alternate;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .mwh {
	position: absolute;
	color: var(--vscode-editorWhitespace-foreground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .monaco-decoration-css-rule-extractor {
	visibility: hidden;
	pointer-events: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .inputarea {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}
/*.monaco-editor .inputarea {
	position: fixed !important;
	width: 800px !important;
	height: 500px !important;
	top: initial !important;
	left: initial !important;
	bottom: 0 !important;
	right: 0 !important;
	color: black !important;
	background: white !important;
	line-height: 15px !important;
	font-size: 14px !important;
	z-index: 10 !important;
}*/
.monaco-editor .inputarea.ime-input {
	z-index: 10;
	caret-color: var(--vscode-editorCursor-foreground);
	color: var(--vscode-editor-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .native-edit-context {
	margin: 0;
	padding: 0;
	position: absolute;
	overflow-y: scroll;
	scrollbar-width: none;
	z-index: -10;
	white-space: pre-wrap;
}

.monaco-editor .ime-text-area {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}

.monaco-editor .edit-context-composition-none {
	background-color: transparent;
	border-bottom: none;
}

.monaco-editor :not(.hc-black, .hc-light) .edit-context-composition-secondary {
	border-bottom: 1px solid var(--vscode-editor-compositionBorder);
}

.monaco-editor :not(.hc-black, .hc-light) .edit-context-composition-primary {
	border-bottom: 2px solid var(--vscode-editor-compositionBorder);
}

.monaco-editor :is(.hc-black, .hc-light) .edit-context-composition-secondary {
	border: 1px solid var(--vscode-editor-compositionBorder);
}

.monaco-editor :is(.hc-black, .hc-light) .edit-context-composition-primary {
	border: 2px solid var(--vscode-editor-compositionBorder);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin-view-overlays .gpu-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	display: inline-block;
	border-left: solid 2px var(--vscode-editorWarning-foreground);
	opacity: 0.2;
	transition: background-color 0.1s linear;
}

.monaco-editor .margin-view-overlays .gpu-mark:hover {
	background-color: var(--vscode-editorWarning-foreground)
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-select-box {
	width: 100%;
	cursor: pointer;
	border-radius: 2px;
}

.monaco-select-box-dropdown-container {
	font-size: 13px;
	font-weight: normal;
	text-transform: none;
}

/** Actions */

.monaco-action-bar .action-item.select-container {
	cursor: default;
}

.monaco-action-bar .action-item .monaco-select-box {
	cursor: pointer;
	min-width: 100px;
	min-height: 18px;
	padding: 2px 23px 2px 8px;
}

.mac .monaco-action-bar .action-item .monaco-select-box {
	font-size: 11px;
	border-radius: 3px;
	min-height: 24px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-list {
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
}

.monaco-list.mouse-support {
	user-select: none;
	-webkit-user-select: none;
}

.monaco-list > .monaco-scrollable-element {
	height: 100%;
}

.monaco-list-rows {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-list.horizontal-scrolling .monaco-list-rows {
	width: auto;
	min-width: 100%;
}

.monaco-list-row {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.monaco-list.mouse-support .monaco-list-row {
	cursor: pointer;
	touch-action: none;
}

/* Make sure the scrollbar renders above overlays (sticky scroll) */
.monaco-list .monaco-scrollable-element > .scrollbar.vertical,
.monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
	z-index: 14;
}

/* for OS X ballistic scrolling */
.monaco-list-row.scrolling {
	display: none !important;
}

/* Focus */
.monaco-list.element-focused,
.monaco-list.selection-single,
.monaco-list.selection-multiple {
	outline: 0 !important;
}

/* Filter */

.monaco-list-type-filter-message {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 40px 1em 1em 1em;
	text-align: center;
	white-space: normal;
	opacity: 0.7;
	pointer-events: none;
}

.monaco-list-type-filter-message:empty {
	display: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-drag-image {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 12px;
	position: absolute;
	z-index: 1000;

	/* Default styles */
	background-color: var(--vscode-list-activeSelectionBackground);
	color: var(--vscode-list-activeSelectionForeground);
	outline: 1px solid var(--vscode-list-focusOutline);
	outline-offset: -1px;

	/*
	 * Browsers apply an effect to the drag image when the div becomes too
	 * large which makes them unreadable. Use max width so it does not happen
	 */
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Use custom CSS vars to expose padding into parent select for padding calculation */
.monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 1px;
	--dropdown-padding-bottom: 1px;
}

.hc-black .monaco-select-box-dropdown-padding,
.hc-light .monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 3px;
	--dropdown-padding-bottom: 4px;
}

.monaco-select-box-dropdown-container {
	display: none;
	box-sizing:	border-box;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown * {
	margin: 0;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code {
	line-height: 15px; /** For some reason, this is needed, otherwise <code> will take up 20px height */
	font-family: var(--monaco-monospace-font);
}


.monaco-select-box-dropdown-container.visible {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 1px;
	overflow: hidden;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	flex: 0 0 auto;
	align-self: flex-start;
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
	padding-left: 1px;
	padding-right: 1px;
	width: 100%;
	overflow: hidden;
	box-sizing:	border-box;
}

.monaco-select-box-dropdown-container > .select-box-details-pane {
	padding: 5px;
}

.hc-black .monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row {
	cursor: pointer;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-detail {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
	opacity: 0.7;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decorator-right {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
	white-space: nowrap;
	float: right;
}


/* Accepted CSS hiding technique for accessibility reader text  */
/* https://webaim.org/techniques/css/invisiblecontent/ */

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .visually-hidden {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
	flex: 1 1 auto;
	align-self: flex-start;
	opacity: 0;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div {
	overflow: hidden;
	max-height: 0px;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control {
	padding-left: 4px;
	padding-right: 8px;
	white-space: nowrap;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-action-bar {
	white-space: nowrap;
	height: 100%;
}

.monaco-action-bar .actions-container {
	display: flex;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	align-items: center;
}

.monaco-action-bar.vertical .actions-container {
	display: inline-block;
}

.monaco-action-bar .action-item {
	display: block;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
}

.monaco-action-bar .action-item.disabled {
	cursor: default;
}

.monaco-action-bar .action-item .icon,
.monaco-action-bar .action-item .codicon {
	display: block;
}

.monaco-action-bar .action-item .codicon {
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
}

.monaco-action-bar .action-label {
	display: flex;
	font-size: 11px;
	padding: 3px;
	border-radius: 5px;
}

.monaco-action-bar .action-item.disabled .action-label:not(.icon) ,
.monaco-action-bar .action-item.disabled .action-label:not(.icon)::before,
.monaco-action-bar .action-item.disabled .action-label:not(.icon):hover {
	color: var(--vscode-disabledForeground);
}

/* Unable to change color of SVGs, hence opacity is used */
.monaco-action-bar .action-item.disabled .action-label.icon ,
.monaco-action-bar .action-item.disabled .action-label.icon::before,
.monaco-action-bar .action-item.disabled .action-label.icon:hover {
	opacity: 0.6;
}

/* Vertical actions */

.monaco-action-bar.vertical {
	text-align: left;
}

.monaco-action-bar.vertical .action-item {
	display: block;
}

.monaco-action-bar.vertical .action-label.separator {
	display: block;
	border-bottom: 1px solid var(--vscode-disabledForeground);
	padding-top: 1px;
	margin-left: .8em;
	margin-right: .8em;
}

.monaco-action-bar .action-item .action-label.separator {
	width: 1px;
	height: 16px;
	margin: 5px 4px !important;
	cursor: default;
	min-width: 1px;
	padding: 0;
	background-color: var(--vscode-disabledForeground);
}

.secondary-actions .monaco-action-bar .action-label {
	margin-left: 6px;
}

/* Action Items */
.monaco-action-bar .action-item.select-container {
	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
	flex: 1;
	max-width: 170px;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.monaco-action-bar .action-item.action-dropdown-item {
	display: flex;
}

.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator {
	display: flex;
	align-items: center;
	cursor: default;
}

.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
	width: 1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-diff-editor .diff-review {
	position: absolute;

}

.monaco-component.diff-review {
	user-select: none;
	-webkit-user-select: none;
	z-index: 99;


	.diff-review-line-number {
		text-align: right;
		display: inline-block;
		color: var(--vscode-editorLineNumber-foreground);
	}

	.diff-review-summary {
		padding-left: 10px;
	}

	.diff-review-shadow {
		position: absolute;
		box-shadow: var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset;
	}

	.diff-review-row {
		white-space: pre;
	}

	.diff-review-table {
		display: table;
		min-width: 100%;
	}

	.diff-review-row {
		display: table-row;
		width: 100%;
	}

	.diff-review-spacer {
		display: inline-block;
		width: 10px;
		vertical-align: middle;
	}

	.diff-review-spacer > .codicon {
		font-size: 9px !important;
	}

	.diff-review-actions {
		display: inline-block;
		position: absolute;
		right: 10px;
		top: 2px;
		z-index: 100;
	}

	.diff-review-actions .action-label {
		width: 16px;
		height: 16px;
		margin: 2px 0;
	}

	.revertButton {
		cursor: pointer;
	}

	.action-label {
		background: var(--vscode-editorActionList-background);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

:root {
	--vscode-sash-size: 4px;
	--vscode-sash-hover-size: 4px;
}

.monaco-sash {
	position: absolute;
	z-index: 35;
	touch-action: none;
}

.monaco-sash.disabled {
	pointer-events: none;
}

.monaco-sash.mac.vertical {
	cursor: col-resize;
}

.monaco-sash.vertical.minimum {
	cursor: e-resize;
}

.monaco-sash.vertical.maximum {
	cursor: w-resize;
}

.monaco-sash.mac.horizontal {
	cursor: row-resize;
}

.monaco-sash.horizontal.minimum {
	cursor: s-resize;
}

.monaco-sash.horizontal.maximum {
	cursor: n-resize;
}

.monaco-sash.disabled {
	cursor: default !important;
	pointer-events: none !important;
}

.monaco-sash.vertical {
	cursor: ew-resize;
	top: 0;
	width: var(--vscode-sash-size);
	height: 100%;
}

.monaco-sash.horizontal {
	cursor: ns-resize;
	left: 0;
	width: 100%;
	height: var(--vscode-sash-size);
}

.monaco-sash:not(.disabled) > .orthogonal-drag-handle {
	content: " ";
	height: calc(var(--vscode-sash-size) * 2);
	width: calc(var(--vscode-sash-size) * 2);
	z-index: 100;
	display: block;
	cursor: all-scroll;
	position: absolute;
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.start,
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.end {
	cursor: nwse-resize;
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.end,
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.start {
	cursor: nesw-resize;
}

.monaco-sash.vertical > .orthogonal-drag-handle.start {
	left: calc(var(--vscode-sash-size) * -0.5);
	top: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.vertical > .orthogonal-drag-handle.end {
	left: calc(var(--vscode-sash-size) * -0.5);
	bottom: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.horizontal > .orthogonal-drag-handle.start {
	top: calc(var(--vscode-sash-size) * -0.5);
	left: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.horizontal > .orthogonal-drag-handle.end {
	top: calc(var(--vscode-sash-size) * -0.5);
	right: calc(var(--vscode-sash-size) * -1);
}

.monaco-sash:before {
	content: '';
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}

.monaco-enable-motion .monaco-sash:before {
	transition: background-color 0.1s ease-out;
}

.monaco-sash.hover:before,
.monaco-sash.active:before {
	background: var(--vscode-sash-hoverBorder);
}

.monaco-sash.vertical:before {
	width: var(--vscode-sash-hover-size);
	left: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.monaco-sash.horizontal:before {
	height: var(--vscode-sash-hover-size);
	top: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.pointer-events-disabled {
	pointer-events: none !important;
}

/** Debug **/

.monaco-sash.debug {
	background: cyan;
}

.monaco-sash.debug.disabled {
	background: rgba(0, 255, 255, 0.2);
}

.monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
	background: red;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-dropdown {
	height: 100%;
	padding: 0;
}

.monaco-dropdown > .dropdown-label {
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.monaco-dropdown > .dropdown-label > .action-label.disabled {
	cursor: default;
}

.monaco-dropdown-with-primary {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.monaco-dropdown-with-primary > .action-container > .action-label {
	margin-right: 0;
}

.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-toolbar {
	height: 100%;
}

.monaco-toolbar .toolbar-toggle-more {
	display: inline-block;
	padding: 0;
}

.monaco-toolbar.responsive {
	.monaco-action-bar > .actions-container > .action-item {
		flex-shrink: 1;
		min-width: 20px;
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-action-bar .action-item.menu-entry .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.monaco-action-bar .action-item.menu-entry.text-only .action-label {
	color: var(--vscode-descriptionForeground);
	overflow: hidden;
	border-radius: 2px;
}

.monaco-action-bar .action-item.menu-entry.text-only.use-comma:not(:last-of-type) .action-label::after {
	content: ', ';
}

.monaco-action-bar .action-item.menu-entry.text-only + .action-item:not(.text-only) > .monaco-dropdown .action-label {
	color: var(--vscode-descriptionForeground);
}

.monaco-dropdown-with-default {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.monaco-dropdown-with-default > .action-container > .action-label {
	margin-right: 0;
}

.monaco-dropdown-with-default > .action-container.menu-entry > .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.monaco-dropdown-with-default:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .diff-hidden-lines-widget {
	width: 100%;
}

.monaco-editor .diff-hidden-lines {
	height: 0px; /* The children each have a fixed height, the transform confuses the browser */
	transform: translate(0px, -10px);
	font-size: 13px;
	line-height: 14px;
}

.monaco-editor .diff-hidden-lines:not(.dragging) .top:hover,
.monaco-editor .diff-hidden-lines:not(.dragging) .bottom:hover,
.monaco-editor .diff-hidden-lines .top.dragging,
.monaco-editor .diff-hidden-lines .bottom.dragging {
	background-color: var(--vscode-focusBorder);
}

.monaco-editor .diff-hidden-lines .top,
.monaco-editor .diff-hidden-lines .bottom {
	transition: background-color 0.1s ease-out;
	height: 4px;
	background-color: transparent;
	background-clip: padding-box;
	border-bottom: 2px solid transparent;
	border-top: 4px solid transparent;
	/*cursor: n-resize;*/
}

.monaco-editor.draggingUnchangedRegion.canMoveTop:not(.canMoveBottom) *,
.monaco-editor .diff-hidden-lines .top.canMoveTop:not(.canMoveBottom),
.monaco-editor .diff-hidden-lines .bottom.canMoveTop:not(.canMoveBottom) {
	cursor: n-resize !important;
}

.monaco-editor.draggingUnchangedRegion:not(.canMoveTop).canMoveBottom *,
.monaco-editor .diff-hidden-lines .top:not(.canMoveTop).canMoveBottom,
.monaco-editor .diff-hidden-lines .bottom:not(.canMoveTop).canMoveBottom {
	cursor: s-resize !important;
}

.monaco-editor.draggingUnchangedRegion.canMoveTop.canMoveBottom *,
.monaco-editor .diff-hidden-lines .top.canMoveTop.canMoveBottom,
.monaco-editor .diff-hidden-lines .bottom.canMoveTop.canMoveBottom {
	cursor: ns-resize !important;
}

.monaco-editor .diff-hidden-lines .top {
	transform: translate(0px, 4px);
}

.monaco-editor .diff-hidden-lines .bottom {
	transform: translate(0px, -6px);
}

.monaco-editor .diff-unchanged-lines {
	background: var(--vscode-diffEditor-unchangedCodeBackground);
}

.monaco-editor .noModificationsOverlay {
	z-index: 1;
	background: var(--vscode-editor-background);

	display: flex;
	justify-content: center;
	align-items: center;
}


.monaco-editor .diff-hidden-lines .center {
	background: var(--vscode-diffEditor-unchangedRegionBackground);
	color: var(--vscode-diffEditor-unchangedRegionForeground);
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;

	height: 24px;
	box-shadow: inset 0 -5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow), inset 0 5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow);
}

.monaco-editor .diff-hidden-lines .center span.codicon {
	vertical-align: middle;
}

.monaco-editor .diff-hidden-lines .center a:hover .codicon {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .diff-hidden-lines div.breadcrumb-item {
	cursor: pointer;
}

.monaco-editor .diff-hidden-lines div.breadcrumb-item:hover {
	color: var(--vscode-editorLink-activeForeground);
}

.monaco-editor .movedOriginal {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.monaco-editor .movedModified {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.monaco-editor .movedOriginal.currentMove, .monaco-editor .movedModified.currentMove {
	border: 2px solid var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines path.currentMove {
	stroke: var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines path {
	pointer-events: visiblestroke;
}

.monaco-diff-editor .moved-blocks-lines .arrow {
	fill: var(--vscode-diffEditor-move-border);
}

.monaco-diff-editor .moved-blocks-lines .arrow.currentMove {
	fill: var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines .arrow-rectangle {
	fill: var(--vscode-editor-background);
}

.monaco-diff-editor .moved-blocks-lines {
	position: absolute;
	pointer-events: none;
}

.monaco-diff-editor .moved-blocks-lines path {
	fill: none;
	stroke: var(--vscode-diffEditor-move-border);
	stroke-width: 2;
}

.monaco-editor .char-delete.diff-range-empty {
	margin-left: -1px;
	border-left: solid var(--vscode-diffEditor-removedTextBackground) 3px;
}

.monaco-editor .char-insert.diff-range-empty {
	border-left: solid var(--vscode-diffEditor-insertedTextBackground) 3px;
}

.monaco-editor .fold-unchanged {
	cursor: pointer;
}

.monaco-diff-editor .diff-moved-code-block {
	display: flex;
	justify-content: flex-end;
	margin-top: -4px;
}

.monaco-diff-editor .diff-moved-code-block .action-bar .action-label.codicon {
	width: 12px;
	height: 12px;
	font-size: 12px;
}

/* ---------- DiffEditor ---------- */

.monaco-diff-editor .diffOverview {
	z-index: 9;
}

.monaco-diff-editor .diffOverview .diffViewport {
	z-index: 10;
}

/* colors not externalized: using transparancy on background */
.monaco-diff-editor.vs			.diffOverview { background: rgba(0, 0, 0, 0.03); }
.monaco-diff-editor.vs-dark		.diffOverview { background: rgba(255, 255, 255, 0.01); }

.monaco-scrollable-element.modified-in-monaco-diff-editor.vs		.scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark	.scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black	.scrollbar { background: none; }
.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-light	.scrollbar { background: none; }

.monaco-scrollable-element.modified-in-monaco-diff-editor .slider {
	z-index: 10;
}
.modified-in-monaco-diff-editor				.slider.active { background: rgba(171, 171, 171, .4); }
.modified-in-monaco-diff-editor.hc-black	.slider.active { background: none; }
.modified-in-monaco-diff-editor.hc-light	.slider.active { background: none; }

/* ---------- Diff ---------- */

.monaco-editor .insert-sign,
.monaco-diff-editor .insert-sign,
.monaco-editor .delete-sign,
.monaco-diff-editor .delete-sign {
	font-size: 11px !important;
	opacity: 0.7 !important;
	display: flex !important;
	align-items: center;
}
.monaco-editor.hc-black .insert-sign,
.monaco-diff-editor.hc-black .insert-sign,
.monaco-editor.hc-black .delete-sign,
.monaco-diff-editor.hc-black .delete-sign,
.monaco-editor.hc-light .insert-sign,
.monaco-diff-editor.hc-light .insert-sign,
.monaco-editor.hc-light .delete-sign,
.monaco-diff-editor.hc-light .delete-sign {
	opacity: 1;
}

.monaco-editor .inline-deleted-margin-view-zone {
	text-align: right;
}
.monaco-editor .inline-added-margin-view-zone {
	text-align: right;
}

.monaco-editor .arrow-revert-change {
	z-index: 10;
	position: absolute;
}

.monaco-editor .arrow-revert-change:hover {
	cursor: pointer;
}

/* ---------- Inline Diff ---------- */

.monaco-editor .view-zones .view-lines .view-line span {
	display: inline-block;
}

.monaco-editor .margin-view-zones .lightbulb-glyph:hover {
	cursor: pointer;
}

.monaco-editor .char-insert, .monaco-diff-editor .char-insert {
	background-color: var(--vscode-diffEditor-insertedTextBackground);
}

.monaco-editor .line-insert, .monaco-diff-editor .line-insert {
	background-color: var(--vscode-diffEditor-insertedLineBackground, var(--vscode-diffEditor-insertedTextBackground));
}

.monaco-editor .line-insert,
.monaco-editor .char-insert {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-insertedTextBorder);
}
.monaco-editor.hc-black .line-insert, .monaco-editor.hc-light .line-insert,
.monaco-editor.hc-black .char-insert, .monaco-editor.hc-light .char-insert {
	border-style: dashed;
}

.monaco-editor .line-delete,
.monaco-editor .char-delete {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-removedTextBorder);
}
.monaco-editor.hc-black .line-delete, .monaco-editor.hc-light .line-delete,
.monaco-editor.hc-black .char-delete, .monaco-editor.hc-light .char-delete {
	border-style: dashed;
}

.monaco-editor .inline-added-margin-view-zone,
.monaco-editor .gutter-insert, .monaco-diff-editor .gutter-insert {
	background-color: var(--vscode-diffEditorGutter-insertedLineBackground, var(--vscode-diffEditor-insertedLineBackground), var(--vscode-diffEditor-insertedTextBackground));
}

.monaco-editor .char-delete, .monaco-diff-editor .char-delete, .monaco-editor .inline-deleted-text {
	background-color: var(--vscode-diffEditor-removedTextBackground);
}

.monaco-editor .inline-deleted-text {
	text-decoration: line-through;
}

.monaco-editor .line-delete, .monaco-diff-editor .line-delete {
	background-color: var(--vscode-diffEditor-removedLineBackground, var(--vscode-diffEditor-removedTextBackground));
}

.monaco-editor .inline-deleted-margin-view-zone,
.monaco-editor .gutter-delete, .monaco-diff-editor .gutter-delete {
	background-color: var(--vscode-diffEditorGutter-removedLineBackground, var(--vscode-diffEditor-removedLineBackground), var(--vscode-diffEditor-removedTextBackground));
}

.monaco-diff-editor.side-by-side .editor.modified {
	box-shadow: -6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-left: 1px solid var(--vscode-diffEditor-border);
}

.monaco-diff-editor.side-by-side .editor.original {
	box-shadow: 6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-right: 1px solid var(--vscode-diffEditor-border);
}

.monaco-diff-editor .diffViewport {
	background: var(--vscode-scrollbarSlider-background);
}

.monaco-diff-editor .diffViewport:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-diff-editor .diffViewport:active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}

.monaco-editor .diagonal-fill {
	background-image: linear-gradient(
		-45deg,
		var(--vscode-diffEditor-diagonalFill) 12.5%,
		#0000 12.5%, #0000 50%,
		var(--vscode-diffEditor-diagonalFill) 50%, var(--vscode-diffEditor-diagonalFill) 62.5%,
		#0000 62.5%, #0000 100%
	);
	background-size: 8px 8px;
}

.monaco-diff-editor .gutter {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;

	& > div {
		position: absolute;
	}

	.gutterItem {
		opacity: 0;
		transition: opacity 0.7s;

		&.showAlways {
			opacity: 1;
			transition: none;
		}

		&.noTransition {
			transition: none;
		}
	}

	&:hover .gutterItem {
		opacity: 1;
		transition: opacity 0.1s ease-in-out;
	}

	.gutterItem {
		.background {
			position: absolute;
			height: 100%;
			left: 50%;
			width: 1px;

			border-left: 2px var(--vscode-menu-separatorBackground) solid;
		}

		.buttons {
			position: absolute;
			/*height: 100%;*/
			width: 100%;

			display: flex;
			justify-content: center;
			align-items: center;

			.monaco-toolbar {
				height: fit-content;
				.monaco-action-bar  {
					line-height: 1;

					.actions-container {
						width: fit-content;
						border-radius: 4px;
						background: var(--vscode-editorGutter-itemBackground);

						.action-item {
							&:hover {
								background: var(--vscode-toolbar-hoverBackground);
							}

							.action-label {
								color: var(--vscode-editorGutter-itemGlyphForeground);
								padding: 1px 2px;
							}
						}
					}
				}
			}
		}
	}
}


.monaco-diff-editor .diff-hidden-lines-compact {
	display: flex;
	height: 11px;
	.line-left, .line-right {
		height: 1px;
		border-top: 1px solid;
		border-color: var(--vscode-editorCodeLens-foreground);
		opacity: 0.5;
		margin: auto;
		width: 100%;
	}

	.line-left {
		width: 20px;
	}

	.text {
		color: var(--vscode-editorCodeLens-foreground);
		text-wrap: nowrap;
		font-size: 11px;
		line-height: 11px;
		margin: 0 4px;
	}
}

.monaco-editor .line-delete-selectable {
	user-select: text !important;
	-webkit-user-select: text !important;
	z-index: 1 !important;
}

.line-delete-selectable .view-line {
	user-select: text !important;
	-webkit-user-select: text !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .selection-anchor {
	background-color: #007ACC;
	width: 2px !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .bracket-match {
	box-sizing: border-box;
	background-color: var(--vscode-editorBracketMatch-background);
	border: 1px solid var(--vscode-editorBracketMatch-border);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.inline-editor-progress-decoration {
	display: inline-block;
	width: 1em;
	height: 1em;
}

.inline-progress-widget  {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.inline-progress-widget .icon {
	font-size: 80% !important;
}

.inline-progress-widget:hover .icon {
	font-size: 90% !important;
	animation: none;
}

.inline-progress-widget:hover .icon::before {
	content: var(--vscode-icon-x-content);
	font-family: var(--vscode-icon-x-font-family);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .monaco-editor-overlaymessage {
	padding-bottom: 8px;
	z-index: 10000;
}

.monaco-editor .monaco-editor-overlaymessage.below {
	padding-bottom: 0;
	padding-top: 8px;
	z-index: 10000;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.monaco-editor .monaco-editor-overlaymessage.fadeIn {
	animation: fadeIn 150ms ease-out;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.monaco-editor .monaco-editor-overlaymessage.fadeOut {
	animation: fadeOut 100ms ease-out;
}

.monaco-editor .monaco-editor-overlaymessage .message {
	padding: 2px 4px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-inputValidation-infoBorder);
	border-radius: 3px;
}

.monaco-editor .monaco-editor-overlaymessage .message p {
	margin-block: 0px;
}

.monaco-editor .monaco-editor-overlaymessage .message a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-editor-overlaymessage .message a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor.hc-black .monaco-editor-overlaymessage .message,
.monaco-editor.hc-light .monaco-editor-overlaymessage .message {
	border-width: 2px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor {
	width: 0 !important;
	height: 0 !important;
	border-color: transparent;
	border-style: solid;
	z-index: 1000;
	border-width: 8px;
	position: absolute;
	left: 2px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor.top {
	border-bottom-color: var(--vscode-inputValidation-infoBorder);
}

.monaco-editor .monaco-editor-overlaymessage .anchor.below {
	border-top-color: var(--vscode-inputValidation-infoBorder);
}

.monaco-editor .monaco-editor-overlaymessage:not(.below) .anchor.top,
.monaco-editor .monaco-editor-overlaymessage.below .anchor.below {
	display: none;
}

.monaco-editor .monaco-editor-overlaymessage.below .anchor.top {
	display: inherit;
	top: -8px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-text-button {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	padding: 4px;
	border-radius: 2px;
	text-align: center;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--vscode-button-border, transparent);
	line-height: 18px;
}

.monaco-text-button:focus {
	outline-offset: 2px !important;
}

.monaco-text-button:hover {
	text-decoration: none !important;
}

.monaco-button.disabled:focus,
.monaco-button.disabled {
	opacity: 0.4 !important;
	cursor: default;
}

.monaco-text-button .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

.monaco-text-button.monaco-text-button-with-short-label {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 4px;
	overflow: hidden;
	height: 28px;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
	flex-basis: 100%;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	flex-grow: 1;
	width: 0;
	overflow: hidden;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: normal;
	font-style: inherit;
	padding: 4px 0;
}

.monaco-button-dropdown {
	display: flex;
	cursor: pointer;
}

.monaco-button-dropdown.disabled {
	cursor: default;
}

.monaco-button-dropdown > .monaco-button:focus {
	outline-offset: -1px !important;
}

.monaco-button-dropdown.disabled > .monaco-button.disabled,
.monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
.monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
	opacity: 0.4 !important;
}

.monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-right-width: 0 !important;
}

.monaco-button-dropdown .monaco-button-dropdown-separator {
	padding: 4px 0;
	cursor: default;
}

.monaco-button-dropdown .monaco-button-dropdown-separator > div {
	height: 100%;
	width: 1px;
}

.monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
	border: 1px solid var(--vscode-button-border, transparent);
	border-left-width: 0 !important;
	border-radius: 0 2px 2px 0;
	display: flex;
	align-items: center;
}

.monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-radius: 2px 0 0 2px;
}

.monaco-description-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 4px 5px; /* allows button focus outline to be visible */
}

.monaco-description-button .monaco-button-description {
	font-style: italic;
	font-size: 11px;
	padding: 4px 20px;
}

.monaco-description-button .monaco-button-label,
.monaco-description-button .monaco-button-description {
	display: flex;
	justify-content: center;
	align-items: center;
}

.monaco-description-button .monaco-button-label > .codicon,
.monaco-description-button .monaco-button-description > .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

/* default color styles - based on CSS variables */

.monaco-button.default-colors,
.monaco-button-dropdown.default-colors > .monaco-button{
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
}

.monaco-button.default-colors:hover,
.monaco-button-dropdown.default-colors > .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.monaco-button.default-colors.secondary,
.monaco-button-dropdown.default-colors > .monaco-button.secondary {
	color: var(--vscode-button-secondaryForeground);
	background-color: var(--vscode-button-secondaryBackground);
}

.monaco-button.default-colors.secondary:hover,
.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
	background-color: var(--vscode-button-secondaryHoverBackground);
}

.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-background);
	border-top: 1px solid var(--vscode-button-border);
	border-bottom: 1px solid var(--vscode-button-border);
}

.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-secondaryBackground);
}

.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
	background-color: var(--vscode-button-separator);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.action-widget {
	font-size: 13px;
	border-radius: 0;
	min-width: 100px;
	max-width: 80vw;
	z-index: 40;
	display: block;
	width: 100%;
	border: 1px solid var(--vscode-menu-border) !important;
	border-radius: 5px;
	background-color: var(--vscode-menu-background);
	color: var(--vscode-menu-foreground);
	padding: 4px;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.context-view-block {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.context-view-pointerBlock {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.action-widget .monaco-list {
	user-select: none;
	-webkit-user-select: none;
	border: none !important;
	border-width: 0 !important;
}

.action-widget .monaco-list:focus:before {
	outline: 0 !important;
}

.action-widget .monaco-list .monaco-scrollable-element {
	overflow: visible;
}

/** Styles for each row in the list element **/
.action-widget .monaco-list .monaco-list-row {
	padding: 0 4px 0 4px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
	width: 100%;
	border-radius: 3px;
}

.action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) {
	background-color: var(--vscode-list-activeSelectionBackground) !important;
	color: var(--vscode-list-activeSelectionForeground);
	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
	outline-offset: -1px;
}

.action-widget .monaco-list-row.group-header {
	color: var(--vscode-descriptionForeground) !important;
	font-weight: 600;
	font-size: 13px;
}

.action-widget .monaco-list-row.group-header:not(:first-of-type) {
	margin-top: 2px;
}

.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator {
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
	color: var(--vscode-descriptionForeground);
	font-size: 12px;
	padding: 0;
	margin: 4px 0 0 0;
	cursor: default;
	user-select: none;
	border-radius: 0;
}

.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator.focused {
	outline: 0 solid;
	background-color: transparent;
	border-radius: 0;
}

.action-widget .monaco-list-row.separator:first-of-type {
	border-top: none;
	margin-top: 0;
}

.action-widget .monaco-list .group-header,
.action-widget .monaco-list .option-disabled,
.action-widget .monaco-list .option-disabled:before,
.action-widget .monaco-list .option-disabled .focused,
.action-widget .monaco-list .option-disabled .focused:before {
	cursor: default !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	background-color: transparent !important;
	outline: 0 solid !important;
}

.action-widget .monaco-list-row.action {
	display: flex;
	gap: 4px;
	align-items: center;
}

.action-widget .monaco-list-row.action.option-disabled,
.action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled,
.action-widget .monaco-list-row.action.option-disabled .codicon,
.action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused).option-disabled {
	color: var(--vscode-disabledForeground);
}


.action-widget .monaco-list-row.action:not(.option-disabled) .codicon {
	color: inherit;
}

.action-widget .monaco-list-row.action .title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.action-widget .monaco-list-row.action .monaco-keybinding > .monaco-keybinding-key {
		background-color: var(--vscode-keybindingLabel-background);
		color: var(--vscode-keybindingLabel-foreground);
		border-style: solid;
		border-width: 1px;
		border-radius: 3px;
		border-color: var(--vscode-keybindingLabel-border);
		border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
		box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
}

/* Action bar */

.action-widget .action-widget-action-bar {
	background-color: var(--vscode-menu-background);
	border-top: 1px solid var(--vscode-menu-border);
	margin-top: 2px;
}

.action-widget .action-widget-action-bar::before {
	display: block;
	content: "";
	width: 100%;
}

.action-widget .action-widget-action-bar .actions-container {
	padding: 4px 8px 2px 24px;
}

.action-widget-action-bar .action-label {
	color: var(--vscode-textLink-activeForeground);
	font-size: 13px;
	line-height: 22px;
	padding: 0;
	pointer-events: all;
}

.action-widget-action-bar .action-item {
	margin-right: 16px;
	pointer-events: none;
}

.action-widget-action-bar .action-label:hover {
	background-color: transparent !important;
}

.monaco-action-bar .actions-container.highlight-toggled .action-label.checked {
	/* The important gives this rule precedence over the hover rule. */
	background: var(--vscode-actionBar-toggledBackground) !important;
}

.action-widget .monaco-list .monaco-list-row .description {
	opacity: 0.7;
	margin-left: 0.5em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-keybinding {
	display: flex;
	align-items: center;
	line-height: 10px;
}

.monaco-keybinding > .monaco-keybinding-key {
	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 11px;
	padding: 3px 5px;
	margin: 0 2px;
}

.monaco-keybinding > .monaco-keybinding-key:first-child {
	margin-left: 0;
}

.monaco-keybinding > .monaco-keybinding-key:last-child {
	margin-right: 0;
}

.monaco-keybinding > .monaco-keybinding-key-separator {
	display: inline-block;
}

.monaco-keybinding > .monaco-keybinding-key-chord-separator {
	width: 6px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.post-edit-widget {
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 1px solid var(--vscode-widget-border, transparent);
	border-radius: 4px;
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
	overflow: hidden;
}

.post-edit-widget .monaco-button {
	padding: 2px;
	border: none;
	border-radius: 0;
}

.post-edit-widget .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground) !important;
}

.post-edit-widget .monaco-button .codicon {
	margin: 0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

@font-face {
	font-family: "codicon";
	font-display: block;
	src: url(./codicon-ngg6Pgfi.ttf) format("truetype");
}

.codicon[class*='codicon-'] {
	font: normal normal normal 16px/1 codicon;
	display: inline-block;
	text-decoration: none;
	text-rendering: auto;
	text-align: center;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	user-select: none;
	-webkit-user-select: none;
}

/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.codicon-wrench-subaction {
	opacity: 0.5;
}

@keyframes codicon-spin {
	100% {
		transform:rotate(360deg);
	}
}

.codicon-sync.codicon-modifier-spin,
.codicon-loading.codicon-modifier-spin,
.codicon-gear.codicon-modifier-spin,
.codicon-notebook-state-executing.codicon-modifier-spin {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.5s steps(30) infinite;
}

.codicon-modifier-disabled {
	opacity: 0.4;
}

/* custom speed & easing for loading icon */
.codicon-loading,
.codicon-tree-item-loading::before {
	animation-duration: 1s !important;
	animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* stylelint-disable layer-checker */

.monaco-editor .codicon.codicon-symbol-array,
.monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); }
.monaco-editor .codicon.codicon-symbol-boolean,
.monaco-workbench .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); }
.monaco-editor .codicon.codicon-symbol-class,
.monaco-workbench .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); }
.monaco-editor .codicon.codicon-symbol-method,
.monaco-workbench .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); }
.monaco-editor .codicon.codicon-symbol-color,
.monaco-workbench .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); }
.monaco-editor .codicon.codicon-symbol-constant,
.monaco-workbench .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); }
.monaco-editor .codicon.codicon-symbol-constructor,
.monaco-workbench .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); }
.monaco-editor .codicon.codicon-symbol-value,
.monaco-workbench .codicon.codicon-symbol-value,
.monaco-editor .codicon.codicon-symbol-enum,
.monaco-workbench .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); }
.monaco-editor .codicon.codicon-symbol-enum-member,
.monaco-workbench .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); }
.monaco-editor .codicon.codicon-symbol-event,
.monaco-workbench .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); }
.monaco-editor .codicon.codicon-symbol-field,
.monaco-workbench .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); }
.monaco-editor .codicon.codicon-symbol-file,
.monaco-workbench .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); }
.monaco-editor .codicon.codicon-symbol-folder,
.monaco-workbench .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); }
.monaco-editor .codicon.codicon-symbol-function,
.monaco-workbench .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); }
.monaco-editor .codicon.codicon-symbol-interface,
.monaco-workbench .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); }
.monaco-editor .codicon.codicon-symbol-key,
.monaco-workbench .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); }
.monaco-editor .codicon.codicon-symbol-keyword,
.monaco-workbench .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); }
.monaco-editor .codicon.codicon-symbol-module,
.monaco-workbench .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); }
.monaco-editor .codicon.codicon-symbol-namespace,
.monaco-workbench .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); }
.monaco-editor .codicon.codicon-symbol-null,
.monaco-workbench .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); }
.monaco-editor .codicon.codicon-symbol-number,
.monaco-workbench .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); }
.monaco-editor .codicon.codicon-symbol-object,
.monaco-workbench .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); }
.monaco-editor .codicon.codicon-symbol-operator,
.monaco-workbench .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); }
.monaco-editor .codicon.codicon-symbol-package,
.monaco-workbench .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); }
.monaco-editor .codicon.codicon-symbol-property,
.monaco-workbench .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); }
.monaco-editor .codicon.codicon-symbol-reference,
.monaco-workbench .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); }
.monaco-editor .codicon.codicon-symbol-snippet,
.monaco-workbench .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); }
.monaco-editor .codicon.codicon-symbol-string,
.monaco-workbench .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); }
.monaco-editor .codicon.codicon-symbol-struct,
.monaco-workbench .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); }
.monaco-editor .codicon.codicon-symbol-text,
.monaco-workbench .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); }
.monaco-editor .codicon.codicon-symbol-type-parameter,
.monaco-workbench .codicon.codicon-symbol-type-parameter { color: var(--vscode-symbolIcon-typeParameterForeground); }
.monaco-editor .codicon.codicon-symbol-unit,
.monaco-workbench .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); }
.monaco-editor .codicon.codicon-symbol-variable,
.monaco-workbench .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .lightBulbWidget {
	display: flex;
	align-items: center;
	justify-content: center;
}

.monaco-editor .lightBulbWidget:hover{
	cursor: pointer;
}

.monaco-editor .lightBulbWidget.codicon-light-bulb,
.monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.monaco-editor .lightBulbWidget.codicon-lightbulb-autofix,
.monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle-autofix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.monaco-editor .lightBulbWidget.codicon-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}

.monaco-editor .lightBulbWidget:before {
	position: relative;
	z-index: 2;
}

.monaco-editor .lightBulbWidget:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: 1;
}

/* gutter decoration */
.monaco-editor .glyph-margin-widgets .cgmr[class*="codicon-gutter-lightbulb"] {
	display: block;
	cursor: pointer;
}

.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb,
.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-auto-fix,
.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-aifix-auto-fix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.monaco-editor .glyph-margin-widgets .cgmr.codicon-gutter-lightbulb-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .codelens-decoration {
	overflow: hidden;
	display: inline-flex !important; /* !important to override inline display:block style */
	align-items: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
	padding-right: calc(var(--vscode-editorCodeLens-fontSize)*0.5);
	font-feature-settings: var(--vscode-editorCodeLens-fontFeatureSettings);
	font-family: var(--vscode-editorCodeLens-fontFamily), var(--vscode-editorCodeLens-fontFamilyDefault);
}

.monaco-editor .codelens-decoration > span,
.monaco-editor .codelens-decoration > a {
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	vertical-align: sub;
	display: inline-flex;
	align-items: center;
}

.monaco-editor .codelens-decoration > a {
	text-decoration: none;
}

.monaco-editor .codelens-decoration > a:hover {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .codelens-decoration > a:hover .codicon {
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .codelens-decoration .codicon[class*='codicon-'] {
	vertical-align: middle;
	color: currentColor !important;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
}


.monaco-editor .codelens-decoration > a:hover .codicon::before {
	cursor: pointer;
}

@keyframes fadein {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.monaco-editor .codelens-decoration.fadein {
	animation: fadein 0.1s linear;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .inlineSuggestionsHints {
	padding: 4px;

	.warningMessage p {
		margin: 0;
	}
}

.monaco-editor .inlineSuggestionsHints.withBorder {
	z-index: 39;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .inlineSuggestionsHints a {
	color: var(--vscode-foreground) !important;
}

.monaco-editor .inlineSuggestionsHints a:hover {
	color: var(--vscode-foreground) !important;
}

.monaco-editor .inlineSuggestionsHints .keybinding {
	display: flex;
	margin-left: 4px;
	opacity: 0.6;
}

.monaco-editor .inlineSuggestionsHints .keybinding .monaco-keybinding-key {
	font-size: 8px;
	padding: 2px 3px;
}

.monaco-editor .inlineSuggestionsHints .availableSuggestionCount a {
	display: flex;
	min-width: 19px;
	justify-content: center;
}

.monaco-editor .inlineSuggestionStatusBarItemLabel {
	margin-right: 2px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-hover {
	cursor: default;
	position: absolute;
	overflow: hidden;
	user-select: text;
	-webkit-user-select: text;
	box-sizing: border-box;
	line-height: 1.5em;
	white-space: var(--vscode-hover-whiteSpace, normal);
}

.monaco-hover.fade-in {
	animation: fadein 100ms linear;
}

.monaco-hover.hidden {
	display: none;
}

.monaco-hover a:hover:not(.disabled) {
	cursor: pointer;
}

.monaco-hover .hover-contents:not(.html-hover-contents) {
	padding: 4px 8px;
}

.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) {
	max-width: var(--vscode-hover-maxWidth, 500px);
	word-wrap: break-word;
}

.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr {
	min-width: 100%;
}

.monaco-hover p,
.monaco-hover .code,
.monaco-hover ul,
.monaco-hover h1,
.monaco-hover h2,
.monaco-hover h3,
.monaco-hover h4,
.monaco-hover h5,
.monaco-hover h6 {
	margin: 8px 0;
}

.monaco-hover h1,
.monaco-hover h2,
.monaco-hover h3,
.monaco-hover h4,
.monaco-hover h5,
.monaco-hover h6 {
	line-height: 1.1;
}

.monaco-hover code {
	font-family: var(--monaco-monospace-font);
}

.monaco-hover hr {
	box-sizing: border-box;
	border-left: 0px;
	border-right: 0px;
	margin-top: 4px;
	margin-bottom: -4px;
	margin-left: -8px;
	margin-right: -8px;
	height: 1px;
}

.monaco-hover p:first-child,
.monaco-hover .code:first-child,
.monaco-hover ul:first-child {
	margin-top: 0;
}

.monaco-hover p:last-child,
.monaco-hover .code:last-child,
.monaco-hover ul:last-child {
	margin-bottom: 0;
}

/* MarkupContent Layout */
.monaco-hover ul {
	padding-left: 20px;
}
.monaco-hover ol {
	padding-left: 20px;
}

.monaco-hover li > p {
	margin-bottom: 0;
}

.monaco-hover li > ul {
	margin-top: 0;
}

.monaco-hover code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.monaco-hover .monaco-tokenized-source {
	white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap);
}

.monaco-hover .hover-row.status-bar {
	font-size: 12px;
	line-height: 22px;
}

.monaco-hover .hover-row.status-bar .info {
	font-style: italic;
	padding: 0px 8px;
}

.monaco-hover .hover-row.status-bar .actions {
	display: flex;
	padding: 0px 8px;
	width: 100%;
}

.monaco-hover .hover-row.status-bar .actions .action-container {
	margin-right: 16px;
	cursor: pointer;
	overflow: hidden;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

.monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
	padding-right: 4px;
	vertical-align: middle;
}

.monaco-hover .hover-row.status-bar .actions .action-container a {
	color: var(--vscode-textLink-foreground);
	text-decoration: var(--text-link-decoration);
}

.monaco-hover .hover-row.status-bar .actions .action-container a .icon.codicon {
	color: var(--vscode-textLink-foreground);
}

.monaco-hover .markdown-hover .hover-contents .codicon {
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
}

.monaco-hover .hover-contents a.code-link:hover,
.monaco-hover .hover-contents a.code-link {
	color: inherit;
}

.monaco-hover .hover-contents a.code-link:before {
	content: '(';
}

.monaco-hover .hover-contents a.code-link:after {
	content: ')';
}

.monaco-hover .hover-contents a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-foreground);
}

.monaco-hover .hover-contents a.code-link > span:hover {
	color: var(--vscode-textLink-activeForeground);
}

/**
 * Spans in markdown hovers need a margin-bottom to avoid looking cramped:
 * https://github.com/microsoft/vscode/issues/101496

 * This was later refined to only apply when the last child of a rendered markdown block (before the
 * border or a `hr`) uses background color:
 * https://github.com/microsoft/vscode/issues/228136
 */
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) p:last-child [style*="background-color"] {
	margin-bottom: 4px;
	display: inline-block;
}

/**
 * Add a slight margin to try vertically align codicons with any text
 * https://github.com/microsoft/vscode/issues/221359
 */
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span.codicon {
	margin-bottom: 2px;
}

.monaco-hover-content .action-container a {
	-webkit-user-select: none;
	user-select: none;
}

.monaco-hover-content .action-container.disabled {
	pointer-events: none;
	opacity: 0.4;
	cursor: default;
}

/* Prevent text selection in all button-like elements within hovers */
.monaco-hover .action-container,
.monaco-hover .action,
.monaco-hover button,
.monaco-hover .monaco-button,
.monaco-hover .monaco-text-button,
.monaco-hover [role="button"] {
	-webkit-user-select: none;
	user-select: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-custom-toggle {
	margin-left: 2px;
	float: left;
	cursor: pointer;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid transparent;
	padding: 1px;
	box-sizing:	border-box;
	user-select: none;
	-webkit-user-select: none;
}

.monaco-custom-toggle:hover {
	background-color: var(--vscode-inputOption-hoverBackground);
}

.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
	border: 1px dashed var(--vscode-focusBorder);
}

.hc-black .monaco-custom-toggle,
.hc-light .monaco-custom-toggle {
	background: none;
}

.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
	background: none;
}

.monaco-custom-toggle.monaco-checkbox {
	height: 18px;
	width: 18px;
	border: 1px solid transparent;
	border-radius: 3px;
	margin-right: 9px;
	margin-left: 0px;
	padding: 0px;
	opacity: 1;
	background-size: 16px !important;
}

.monaco-action-bar .checkbox-action-item {
	display: flex;
	align-items: center;
	border-radius: 2px;
	padding-right: 2px;
}

.monaco-action-bar .checkbox-action-item:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox {
	margin-right: 4px;
}

.monaco-action-bar .checkbox-action-item > .checkbox-label {
	font-size: 12px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Find widget */
.monaco-editor .find-widget {
	position: absolute;
	z-index: 35;
	height: 33px;
	overflow: hidden;
	line-height: 19px;
	transition: transform 200ms linear;
	padding: 0 4px;
	box-sizing: border-box;
	transform: translateY(calc(-100% - 10px)); /* shadow (10px) */
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	color: var(--vscode-editorWidget-foreground);
	border-left: 1px solid var(--vscode-widget-border);
	border-right: 1px solid var(--vscode-widget-border);
	border-bottom: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: var(--vscode-editorWidget-background);
}

.monaco-reduce-motion .monaco-editor .find-widget {
	transition: transform 0ms linear;
}

.monaco-editor .find-widget textarea {
	margin: 0px;
}

.monaco-editor .find-widget.hiddenEditor {
	display: none;
}

/* Find widget when replace is toggled on */
.monaco-editor .find-widget.replaceToggled > .replace-part {
	display: flex;
}

.monaco-editor .find-widget.visible {
	transform: translateY(0);
}

/* This outline-color rule is used to override the outline color for synthetic-focus find input. */
.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
}

.monaco-editor .find-widget .monaco-inputbox .input {
	background-color: transparent;
	min-height: 0;
}

.monaco-editor .find-widget .monaco-findInput .input {
	font-size: 13px;
}

.monaco-editor .find-widget > .find-part,
.monaco-editor .find-widget > .replace-part {
	margin: 3px 25px 0 17px;
	font-size: 12px;
	display: flex;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox,
.monaco-editor .find-widget > .replace-part .monaco-inputbox {
	min-height: 25px;
}


.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-right: 22px;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input,
.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-top: 2px;
	padding-bottom: 2px;
}

.monaco-editor .find-widget > .find-part .find-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.monaco-editor .find-widget > .replace-part .replace-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.monaco-editor .find-widget .monaco-findInput {
	vertical-align: middle;
	display: flex;
	flex: 1;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element {
	/* Make sure textarea inherits the width correctly */
	width: 100%;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical {
	/* Hide vertical scrollbar */
	opacity: 0;
}

.monaco-editor .find-widget .matchesCount {
	display: flex;
	flex: initial;
	margin: 0 0 0 3px;
	padding: 2px 0 0 2px;
	height: 25px;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: center;
	line-height: 23px;
}

.monaco-editor .find-widget .button {
	width: 16px;
	height: 16px;
	padding: 3px;
	border-radius: 5px;
	display: flex;
	flex: initial;
	margin-left: 3px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* find in selection button */
.monaco-editor .find-widget .codicon-find-selection {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 5px;
}

.monaco-editor .find-widget .button.left {
	margin-left: 0;
	margin-right: 3px;
}

.monaco-editor .find-widget .button.wide {
	width: auto;
	padding: 1px 6px;
	top: -1px;
}

.monaco-editor .find-widget .button.toggle {
	position: absolute;
	top: 0;
	left: 3px;
	width: 18px;
	height: 100%;
	border-radius: 0;
	box-sizing: border-box;
}

.monaco-editor .find-widget .button.toggle.disabled {
	display: none;
}

.monaco-editor .find-widget .disabled {
	color: var(--vscode-disabledForeground);
	cursor: default;
}

.monaco-editor .find-widget > .replace-part {
	display: none;
}

.monaco-editor .find-widget > .replace-part > .monaco-findInput {
	position: relative;
	display: flex;
	vertical-align: middle;
	flex: auto;
	flex-grow: 0;
	flex-shrink: 0;
}

.monaco-editor .find-widget > .replace-part > .monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

/* REDUCED */
.monaco-editor .find-widget.reduced-find-widget .matchesCount {
	display: none;
}

/* NARROW (SMALLER THAN REDUCED) */
.monaco-editor .find-widget.narrow-find-widget {
	max-width: 257px !important;
}

/* COLLAPSED (SMALLER THAN NARROW) */
.monaco-editor .find-widget.collapsed-find-widget {
	max-width: 170px !important;
}

.monaco-editor .find-widget.collapsed-find-widget .button.previous,
.monaco-editor .find-widget.collapsed-find-widget .button.next,
.monaco-editor .find-widget.collapsed-find-widget .button.replace,
.monaco-editor .find-widget.collapsed-find-widget .button.replace-all,
.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls {
	display: none;
}

.monaco-editor .find-widget.no-results .matchesCount {
	color: var(--vscode-errorForeground);
}

.monaco-editor .findMatch {
	animation-duration: 0;
	animation-name: inherit !important;
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.monaco-editor .currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
	border: 2px solid var(--vscode-editor-findMatchBorder);
	padding: 1px;
	box-sizing: border-box;
}

.monaco-editor .findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.monaco-editor .find-widget .monaco-sash {
	left: 0 !important;
	background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border));
}

.monaco-editor.hc-black .find-widget .button:before {
	position: relative;
	top: 1px;
	left: 2px;
}

/* Action bars */
.monaco-editor .find-widget .button:not(.disabled):hover,
.monaco-editor .find-widget .codicon-find-selection:hover {
	background-color: var(--vscode-toolbar-hoverBackground) !important;
}

.monaco-editor.findMatch {
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.monaco-editor.currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
}

.monaco-editor.findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.monaco-editor.findMatch {
	background-color: var(--vscode-editorWidget-background);
}

/* Close button position. */
.monaco-editor .find-widget > .button.codicon-widget-close {
	position: absolute;
	top: 5px;
	right: 4px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-inputbox {
	position: relative;
	display: block;
	padding: 0;
	box-sizing:	border-box;
	border-radius: 2px;

	/* Customizable */
	font-size: inherit;
}

.monaco-inputbox > .ibwrapper > .input,
.monaco-inputbox > .ibwrapper > .mirror {

	/* Customizable */
	padding: 4px 6px;
}

.monaco-inputbox > .ibwrapper {
	position: relative;
	width: 100%;
}

.monaco-inputbox > .ibwrapper > .input {
	display: inline-block;
	box-sizing:	border-box;
	width: 100%;
	height: 100%;
	line-height: inherit;
	border: none;
	font-family: inherit;
	font-size: inherit;
	resize: none;
	color: inherit;
}

.monaco-inputbox > .ibwrapper > input {
	text-overflow: ellipsis;
}

.monaco-inputbox > .ibwrapper > textarea.input {
	display: block;
	scrollbar-width: none; /* Firefox: hide scrollbars */
	outline: none;
}

.monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
	display: none; /* Chrome + Safari: hide scrollbar */
}

.monaco-inputbox > .ibwrapper > textarea.input.empty {
	white-space: nowrap;
}

.monaco-inputbox > .ibwrapper > .mirror {
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	white-space: pre-wrap;
	visibility: hidden;
	word-wrap: break-word;
}

/* Context view */

.monaco-inputbox-container {
	text-align: right;
}

.monaco-inputbox-container .monaco-inputbox-message {
	display: inline-block;
	overflow: hidden;
	text-align: left;
	width: 100%;
	box-sizing:	border-box;
	padding: 0.4em;
	font-size: 12px;
	line-height: 17px;
	margin-top: -1px;
	word-wrap: break-word;
}

/* Action bar support */
.monaco-inputbox .monaco-action-bar {
	position: absolute;
	right: 2px;
	top: 4px;
}

.monaco-inputbox .monaco-action-bar .action-item {
	margin-left: 2px;
}

.monaco-inputbox .monaco-action-bar .action-item .codicon {
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
/* ---------- Find input ---------- */

.monaco-findInput {
	position: relative;
}

.monaco-findInput .monaco-inputbox {
	font-size: 13px;
	width: 100%;
}

.monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

.vs .monaco-findInput.disabled {
	background-color: #E1E1E1;
}

/* Theming */
.vs-dark .monaco-findInput.disabled {
	background-color: #333;
}

/* Highlighting */
.monaco-findInput.highlight-0 .controls,
.hc-light .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-0 100ms linear 0s;
}

.monaco-findInput.highlight-1 .controls,
.hc-light .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-1 100ms linear 0s;
}

.hc-black .monaco-findInput.highlight-0 .controls,
.vs-dark  .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-dark-0 100ms linear 0s;
}

.hc-black .monaco-findInput.highlight-1 .controls,
.vs-dark  .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-dark-1 100ms linear 0s;
}

@keyframes monaco-findInput-highlight-0 {
	0% { background: rgba(253, 255, 0, 0.8); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-1 {
	0% { background: rgba(253, 255, 0, 0.8); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}

@keyframes monaco-findInput-highlight-dark-0 {
	0% { background: rgba(255, 255, 255, 0.44); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-dark-1 {
	0% { background: rgba(255, 255, 255, 0.44); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.colorpicker-widget {
	height: 190px;
	user-select: none;
	-webkit-user-select: none;
}

/* Decoration */

.colorpicker-color-decoration,
.hc-light .colorpicker-color-decoration {
	border: solid 0.1em #000;
	box-sizing: border-box;
	margin: 0.1em 0.2em 0 0.2em;
	width: 0.8em;
	height: 0.8em;
	line-height: 0.8em;
	display: inline-block;
	cursor: pointer;
}

.hc-black .colorpicker-color-decoration,
.vs-dark .colorpicker-color-decoration {
	border: solid 0.1em #eee;
}

/* Header */

.colorpicker-header {
	display: flex;
	height: 24px;
	position: relative;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.colorpicker-header .picked-color {
	width: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24px;
	cursor: pointer;
	color: white;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
}

.colorpicker-header .picked-color .picked-color-presentation {
	white-space: nowrap;
	margin-left: 5px;
	margin-right: 5px;
}

.colorpicker-header .picked-color .codicon {
	color: inherit;
	font-size: 14px;
}

.colorpicker-header .picked-color.light {
	color: black;
}

.colorpicker-header .original-color {
	width: 74px;
	z-index: inherit;
	cursor: pointer;
}

.standalone-colorpicker {
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.colorpicker-header.standalone-colorpicker {
	border-bottom: none;
}

.colorpicker-header .close-button {
	cursor: pointer;
	background-color: var(--vscode-editorHoverWidget-background);
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.colorpicker-header .close-button-inner-div {
	width: 100%;
	height: 100%;
	text-align: center;
}

.colorpicker-header .close-button-inner-div:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.colorpicker-header .close-icon {
	padding: 3px;
}

/* Body */

.colorpicker-body {
	display: flex;
	padding: 8px;
	position: relative;
}

.colorpicker-body .saturation-wrap {
	overflow: hidden;
	height: 150px;
	position: relative;
	min-width: 220px;
	flex: 1;
}

.colorpicker-body .saturation-box {
	height: 150px;
	position: absolute;
}

.colorpicker-body .saturation-selection {
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -5px;
	border: 1px solid rgb(255, 255, 255);
	border-radius: 100%;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
	position: absolute;
}

.colorpicker-body .strip {
	width: 25px;
	height: 150px;
}

.colorpicker-body .standalone-strip {
	width: 25px;
	height: 122px;
}

.colorpicker-body .hue-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.colorpicker-body .opacity-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=");
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.colorpicker-body .strip.grabbing {
	cursor: grabbing;
}

.colorpicker-body .slider {
	position: absolute;
	top: 0;
	left: -2px;
	width: calc(100% + 4px);
	height: 4px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.71);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
}

.colorpicker-body .strip .overlay {
	height: 150px;
	pointer-events: none;
}

.colorpicker-body .standalone-strip .standalone-overlay {
	height: 122px;
	pointer-events: none;
}

.standalone-colorpicker-body {
	display: block;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
	overflow: hidden;
}

.colorpicker-body .insert-button {
	position: absolute;
	height: 20px;
	width: 58px;
	padding: 0px;
	right: 8px;
	bottom: 8px;
	background: var(--vscode-button-background);
	color: var(--vscode-button-foreground);
	border-radius: 2px;
	border: none;
	cursor: pointer;
}

.colorpicker-body .insert-button:hover{
	background: var(--vscode-button-hoverBackground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .peekview-widget .head {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title {
	display: flex;
	align-items: baseline;
	font-size: 13px;
	margin-left: 20px;
	min-width: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.monaco-editor .peekview-widget .head .peekview-title.clickable {
	cursor: pointer;
}

.monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) {
	font-size: 0.9em;
	margin-left: 0.5em;
}

.monaco-editor .peekview-widget .head .peekview-title .meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-editor .peekview-widget .head .peekview-title .dirname {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title .filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title .meta:not(:empty)::before {
	content: '-';
	padding: 0 0.3em;
}

.monaco-editor .peekview-widget .head .peekview-actions {
	flex: 1;
	text-align: right;
	padding-right: 2px;
}

.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar {
	display: inline-block;
}

.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar,
.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar > .actions-container {
	height: 100%;
}

.monaco-editor .peekview-widget > .body {
	border-top: 1px solid;
	position: relative;
}

.monaco-editor .peekview-widget .head .peekview-title .codicon {
	margin-right: 4px;
	align-self: center;
}

.monaco-editor .peekview-widget .monaco-list .monaco-list-row.focused .codicon {
	color: inherit !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .zone-widget {
	position: absolute;
	z-index: 10;
}


.monaco-editor .zone-widget .zone-widget-container {
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 0;
	border-bottom-width: 0;
	position: relative;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-split-view2 {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-split-view2 > .sash-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.monaco-split-view2 > .sash-container > .monaco-sash {
	pointer-events: initial;
}

.monaco-split-view2 > .monaco-scrollable-element {
	width: 100%;
	height: 100%;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container {
	width: 100%;
	height: 100%;
	white-space: nowrap;
	position: relative;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view {
	white-space: initial;
	position: absolute;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) {
	display: none;
}

.monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view {
	width: 100%;
}

.monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view {
	height: 100%;
}

.monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	pointer-events: none;
	background-color: var(--separator-border);
}

.monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 100%;
	width: 1px;
}

.monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 1px;
	width: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-table {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.monaco-table > .monaco-split-view2 {
	border-bottom: 1px solid transparent;
}

.monaco-table > .monaco-list {
	flex: 1;
}

.monaco-table-tr {
	display: flex;
	height: 100%;
}

.monaco-table-th {
	width: 100%;
	height: 100%;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-table-th,
.monaco-table-td {
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	content: "";
	position: absolute;
	left: calc(var(--vscode-sash-size) / 2);
	width: 0;
	border-left: 1px solid transparent;
}

.monaco-enable-motion .monaco-table > .monaco-split-view2,
.monaco-enable-motion .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	transition: border-color 0.2s ease-out;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-tl-row {
	display: flex;
	height: 100%;
	align-items: center;
	position: relative;
}

.monaco-tl-row.disabled {
	cursor: default;
}
.monaco-tl-indent {
	height: 100%;
	position: absolute;
	top: 0;
	left: 16px;
	pointer-events: none;
}

.hide-arrows .monaco-tl-indent {
	left: 12px;
}

.monaco-tl-indent > .indent-guide {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	border-left: 1px solid transparent;
	opacity: 0;
}

.monaco-enable-motion .monaco-tl-indent > .indent-guide {
	transition: opacity 0.1s linear;
}

.monaco-tl-twistie,
.monaco-tl-contents {
	height: 100%;
}

.monaco-tl-twistie {
	font-size: 10px;
	text-align: right;
	padding-right: 6px;
	flex-shrink: 0;
	width: 16px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transform: translateX(3px);
}

.monaco-tl-contents {
	flex: 1;
	overflow: hidden;
}

.monaco-tl-twistie::before {
	border-radius: 20px;
}

.monaco-tl-twistie.collapsed::before {
	transform: rotate(-90deg);
}

.monaco-tl-twistie.codicon-tree-item-loading::before {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.25s steps(30) infinite;
}

.monaco-tree-type-filter {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	padding: 3px;
	max-width: 200px;
	z-index: 100;
	margin: 0 10px 0 6px;
	border: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.monaco-enable-motion .monaco-tree-type-filter {
	transition: top 0.3s;
}

.monaco-tree-type-filter.disabled {
	top: -40px !important;
}

.monaco-tree-type-filter-input {
	flex: 1;
}

.monaco-tree-type-filter-input .monaco-inputbox {
	height: 23px;
}

.monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input,
.monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror {
	padding: 2px 4px;
}

.monaco-tree-type-filter-input .monaco-findInput > .controls {
	top: 2px;
}

.monaco-tree-type-filter-actionbar {
	margin-left: 4px;
}

.monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
	padding: 2px;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 13; /* Settings editor uses z-index: 12 */

	/* Backup color in case the tree does not provide the background color */
	background-color: var(--vscode-sideBar-background);
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{
	position: absolute;
	width: 100%;
	opacity: 1 !important; /* Settings editor uses opacity < 1 */
	overflow: hidden;

	/* Backup color in case the tree does not provide the background color */
	background-color: var(--vscode-sideBar-background);
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{
	background-color: var(--vscode-list-hoverBackground) !important;
	cursor: pointer;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty,
.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow {
	display: none;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow {
	position: absolute;
	bottom: -3px;
	left: 0px;
	height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */
	width: 100%;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{
	outline: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -- zone widget */
.monaco-editor .zone-widget .zone-widget-container.reference-zone-widget {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.monaco-editor .reference-zone-widget .inline {
	display: inline-block;
	vertical-align: top;
}

.monaco-editor .reference-zone-widget .messages {
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 3em 0;
}

.monaco-editor .reference-zone-widget .ref-tree {
	line-height: 23px;
	background-color: var(--vscode-peekViewResult-background);
	color: var(--vscode-peekViewResult-lineForeground);
}

.monaco-editor .reference-zone-widget .ref-tree .reference {
	text-overflow: ellipsis;
	overflow: hidden;
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file {
	display: inline-flex;
	width: 100%;
	height: 100%;
	color: var(--vscode-peekViewResult-fileForeground);
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file {
	color: inherit !important;
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) {
	background-color: var(--vscode-peekViewResult-selectionBackground);
	color: var(--vscode-peekViewResult-selectionForeground) !important;
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
	margin-right: 12px;
	margin-left: auto;
}

.monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight {
	color: var(--vscode-peekViewResult-fileForeground) !important;
	background-color: var(--vscode-peekViewResult-matchHighlightBackground) !important;
}

.monaco-editor .reference-zone-widget .preview .reference-decoration {
	background-color: var(--vscode-peekViewEditor-matchHighlightBackground);
	border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder);
	box-sizing: border-box;
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,
.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {
	background-color: var(--vscode-peekViewEditor-background);
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {
	background-color: var(--vscode-peekViewEditorGutter-background);
}

/* High Contrast Theming */

.monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file,
.monaco-editor.hc-light .reference-zone-widget .ref-tree .reference-file {
	font-weight: bold;
}

.monaco-editor.hc-black .reference-zone-widget .ref-tree .referenceMatch .highlight,
.monaco-editor.hc-light .reference-zone-widget .ref-tree .referenceMatch .highlight {
	border: 1px dotted var(--vscode-contrastActiveBorder, transparent);
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-count-badge {
	padding: 3px 5px;
	border-radius: 11px;
	font-size: 11px;
	min-width: 18px;
	min-height: 18px;
	line-height: 11px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
}

.monaco-count-badge.long {
	padding: 2px 3px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* ---------- Icon label ---------- */

.monaco-icon-label {
	display: flex; /* required for icons support :before rule */
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-icon-label::before {

	/* svg icons rendered as background image */
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	line-height: inherit !important;
	display: inline-block;

	/* fonts icons */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: top;

	flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
}

.monaco-icon-label-iconpath {
	width: 16px;
	height: 22px;
	margin-right: 6px;
	display: flex;
}

.monaco-icon-label-container.disabled {
	color: var(--vscode-disabledForeground);
}
.monaco-icon-label > .monaco-icon-label-container {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
	color: inherit;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
	margin: 0 2px;
	opacity: 0.5;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
	opacity: .7;
	white-space: pre;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .7;
	margin-left: 0.5em;
	font-size: 0.9em;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
	white-space: nowrap
}

.vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .95;
}

.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-weight: bold;
}

.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-style: italic;
}

.monaco-icon-label.deprecated {
	text-decoration: line-through;
	opacity: 0.66;
}

.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	text-decoration: line-through;
}

.monaco-icon-label::after {
	opacity: 0.75;
	font-size: 90%;
	font-weight: 600;
	margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
	text-align: center;
}

/* make sure selection color wins when a label is being selected */
.monaco-list:focus .selected .monaco-icon-label, /* list */
.monaco-list:focus .selected .monaco-icon-label::after
{
	color: inherit !important;
}

.monaco-list-row.focused.selected .label-description,
.monaco-list-row.selected .label-description {
	opacity: .8;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* marker zone */

.monaco-editor .peekview-widget .head .peekview-title .severity-icon {
	display: inline-block;
	vertical-align: text-top;
	margin-right: 4px;
}

.monaco-editor .marker-widget {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .marker-widget > .stale {
	opacity: 0.6;
	font-style: italic;
}

.monaco-editor .marker-widget .title {
	display: inline-block;
	padding-right: 5px;
}

.monaco-editor .marker-widget .descriptioncontainer {
	position: absolute;
	white-space: pre;
	user-select: text;
	-webkit-user-select: text;
	padding: 8px 12px 0 20px;
}

.monaco-editor .marker-widget .descriptioncontainer .message {
	display: flex;
	flex-direction: column;
}

.monaco-editor .marker-widget .descriptioncontainer .message .details {
	padding-left: 6px;
}

.monaco-editor .marker-widget .descriptioncontainer .message .source,
.monaco-editor .marker-widget .descriptioncontainer .message span.code {
	opacity: 0.6;
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link {
	opacity: 0.6;
	color: inherit;
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:before {
	content: '(';
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:after {
	content: ')';
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .marker-widget .descriptioncontainer .filename {
	cursor: pointer;
	color: var(--vscode-textLink-activeForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .zone-widget .codicon.codicon-error,
.markers-panel .marker-icon.error, .markers-panel .marker-icon .codicon.codicon-error,
.text-search-provider-messages .providerMessage .codicon.codicon-error,
.extensions-viewlet > .extensions .codicon.codicon-error,
.extension-editor .codicon.codicon-error,
.chat-attached-context-attachment .codicon.codicon-error {
	color: var(--vscode-problemsErrorIcon-foreground);
}

.monaco-editor .zone-widget .codicon.codicon-warning,
.markers-panel .marker-icon.warning, .markers-panel .marker-icon .codicon.codicon-warning,
.text-search-provider-messages .providerMessage .codicon.codicon-warning,
.extensions-viewlet > .extensions .codicon.codicon-warning,
.extension-editor .codicon.codicon-warning,
.preferences-editor .codicon.codicon-warning {
	color: var(--vscode-problemsWarningIcon-foreground);
}

.monaco-editor .zone-widget .codicon.codicon-info,
.markers-panel .marker-icon.info, .markers-panel .marker-icon .codicon.codicon-info,
.text-search-provider-messages .providerMessage .codicon.codicon-info,
.extensions-viewlet > .extensions .codicon.codicon-info,
.extension-editor .codicon.codicon-info {
	color: var(--vscode-problemsInfoIcon-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .hoverHighlight {
	background-color: var(--vscode-editor-hoverHighlightBackground);
}

.monaco-editor .monaco-resizable-hover {
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	box-sizing: content-box;
}

.monaco-editor .monaco-resizable-hover > .monaco-hover {
	border: none;
	border-radius: none;
}

.monaco-editor .monaco-hover {
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
}

.monaco-editor .monaco-hover a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-hover a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .monaco-hover .hover-row {
	display: flex;
}

.monaco-editor .monaco-hover .hover-row.hover-row-with-copy {
	position: relative;
	padding-right: 20px;
}

.monaco-editor .monaco-hover .hover-row .hover-row-contents {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions {
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	width: 22px;
	overflow-y: clip;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner {
	display: flex;
	flex-direction: column;
	padding-left: 5px;
	padding-right: 5px;
	justify-content: flex-end;
	position: relative;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon {
	cursor: pointer;
	font-size: 11px;
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon.enabled {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-hover .hover-row .verbosity-actions-inner .codicon.disabled {
	opacity: 0.6;
}

.monaco-editor .monaco-hover .hover-row .actions {
	background-color: var(--vscode-editorHoverWidget-statusBarBackground);
}

.monaco-editor .monaco-hover code {
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .monaco-hover .hover-copy-button {
	position: absolute;
	top: 4px;
	right: 4px;
	padding: 2px 4px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

.monaco-editor .monaco-hover .hover-row-with-copy:hover .hover-copy-button,
.monaco-editor .monaco-hover .hover-row-with-copy:focus-within .hover-copy-button {
	opacity: 1;
}

.monaco-editor .monaco-hover .hover-copy-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
	cursor: pointer;
}

.monaco-editor .monaco-hover .hover-copy-button:focus {
	outline: 1px solid var(--vscode-focusBorder);
	outline-offset: -1px;
}

.monaco-editor .monaco-hover .hover-copy-button .codicon {
	font-size: 16px;
	color: var(--vscode-foreground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor.vs .dnd-target,
.monaco-editor.hc-light .dnd-target {
	border-right: 2px dotted black;
	color: white; /* opposite of black */
}
.monaco-editor.vs-dark .dnd-target {
	border-right: 2px dotted #AEAFAD;
	color: #51504f; /* opposite of #AEAFAD */
}
.monaco-editor.hc-black .dnd-target {
	border-right: 2px dotted #fff;
	color: #000; /* opposite of #fff */
}

.monaco-editor.mouse-default .view-lines,
.monaco-editor.vs-dark.mac.mouse-default .view-lines,
.monaco-editor.hc-black.mac.mouse-default .view-lines,
.monaco-editor.hc-light.mac.mouse-default .view-lines {
	cursor: default;
}
.monaco-editor.mouse-copy .view-lines,
.monaco-editor.vs-dark.mac.mouse-copy .view-lines,
.monaco-editor.hc-black.mac.mouse-copy .view-lines,
.monaco-editor.hc-light.mac.mouse-copy .view-lines {
	cursor: copy;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .findOptionsWidget {
	background-color: var(--vscode-editorWidget-background);
	color: var(--vscode-editorWidget-foreground);
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 2px solid var(--vscode-contrastBorder);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.monaco-editor .margin-view-overlays .codicon-folding-expanded,
.monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 140%;
	margin-left: 2px;
}

.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-expanded,
.monaco-reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	transition: initial;
}

.monaco-editor .margin-view-overlays:hover .codicon,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons {
	opacity: 1;
}

.monaco-editor .inline-folded:after {
	color: var(--vscode-editor-foldPlaceholderForeground);
	margin: 0.1em 0.2em 0 0.2em;
	content: "\22EF"; /* ellipses unicode character */
	display: inline;
	line-height: 1em;
	cursor: pointer;
}

.monaco-editor .folded-background {
	background-color: var(--vscode-editor-foldBackground);
}

.monaco-editor .cldr.codicon.codicon-folding-expanded,
.monaco-editor .cldr.codicon.codicon-folding-collapsed,
.monaco-editor .cldr.codicon.codicon-folding-manual-expanded,
.monaco-editor .cldr.codicon.codicon-folding-manual-collapsed {
	color: var(--vscode-editorGutter-foldingControlForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .snippet-placeholder {
	min-width: 2px;
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetTabstopHighlightBorder, transparent);
}

.monaco-editor .finish-snippet-placeholder {
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetFinalTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder, transparent);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Suggest widget*/

.monaco-editor .suggest-widget {
	width: 430px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	border-radius: 3px;
}

.monaco-editor .suggest-widget.message {
	flex-direction: row;
	align-items: center;
}

.monaco-editor .suggest-widget,
.monaco-editor .suggest-details {
	flex: 0 1 auto;
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: var(--vscode-editorSuggestWidget-border);
	background-color: var(--vscode-editorSuggestWidget-background);
}

.monaco-editor.hc-black .suggest-widget,
.monaco-editor.hc-black .suggest-details,
.monaco-editor.hc-light .suggest-widget,
.monaco-editor.hc-light .suggest-details {
	border-width: 2px;
}

/* Styles for status bar part */


.monaco-editor .suggest-widget .suggest-status-bar {
	box-sizing: border-box;
	display: none;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	font-size: 80%;
	padding: 0 4px 0 4px;
	border-top: 1px solid var(--vscode-editorSuggestWidget-border);
	overflow: hidden;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar {
	display: flex;
}

.monaco-editor .suggest-widget .suggest-status-bar .left {
	padding-right: 8px;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label {
	color: var(--vscode-editorSuggestWidgetStatus-foreground);
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label {
	margin-right: 0;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label::after {
	content: ', ';
	margin-right: 0.3em;
}

.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row > .contents > .main > .right > .readMore,
.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: none;
}

.monaco-editor .suggest-widget.with-status-bar:not(.docs-side) .monaco-list .monaco-list-row:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: 100%;
}

/* Styles for Message element for when widget is loading or is empty */

.monaco-editor .suggest-widget > .message {
	padding-left: 22px;
}

/** Styles for the list element **/

.monaco-editor .suggest-widget > .tree {
	height: 100%;
	width: 100%;
}

.monaco-editor .suggest-widget .monaco-list {
	user-select: none;
	-webkit-user-select: none;
}

/** Styles for each row in the list element **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
	display: flex;
	-mox-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 10px;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
	color: var(--vscode-editorSuggestWidget-selectedForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .codicon {
	color: var(--vscode-editorSuggestWidget-selectedIconForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents {
	flex: 1;
	height: 100%;
	overflow: hidden;
	padding-left: 2px;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	justify-content: space-between;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	display: flex;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused) > .contents > .main .monaco-icon-label {
	color: var(--vscode-editorSuggestWidget-foreground);
}

.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight {
	font-weight: bold;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-highlightForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-focusHighlightForeground);
}

/** ReadMore Icon styles **/

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore::before {
	color: inherit;
	opacity: 1;
	font-size: 14px;
	cursor: pointer;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close {
	position: absolute;
	top: 6px;
	right: 2px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close:hover,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore:hover {
	opacity: 1;
}

/** signature, qualifier, type/details opacity **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	opacity: 0.7;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label {
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.6;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .qualifier-label {
	margin-left: 12px;
	opacity: 0.4;
	font-size: 85%;
	line-height: initial;
	text-overflow: ellipsis;
	overflow: hidden;
	align-self: center;
}

/** Type Info and icon next to the label in the focused completion item **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	font-size: 85%;
	margin-left: 1.1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label > .monaco-tokenized-source {
	display: inline;
}

/** Details: if using CompletionItem#details, show on focus **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	display: none;
}

.monaco-editor .suggest-widget:not(.shows-details) .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label {
	display: inline;
}

/** Details: if using CompletionItemLabel#details, always show **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .right > .details-label,
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused:not(.string-label) > .contents > .main > .right > .details-label {
	display: inline;
}

/** Ellipsis on hover **/

.monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: calc(100% - 26px);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 0;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .left > .monaco-icon-label {
	max-width: 100%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 1;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	overflow: hidden;
	flex-shrink: 4;
	max-width: 70%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: inline-block;
	position: absolute;
	right: 10px;
	width: 18px;
	height: 18px;
	visibility: hidden;
}

/** Do NOT display ReadMore when docs is side/below **/

.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: none !important;
}

/** Do NOT display ReadMore when using plain CompletionItemLabel (details/documentation might not be resolved) **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .right > .readMore {
	display: none;
}

/** Focused item can show ReadMore, but can't when docs is side/below **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: inline-block;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right > .readMore {
	visibility: visible;
}

/** Styles for each row in the list **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated {
	opacity: 0.66;
	text-decoration: unset;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated > .monaco-icon-label-container > .monaco-icon-name-container {
	text-decoration: line-through;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label::before {
	height: 100%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
	display: block;
	height: 16px;
	width: 16px;
	margin-left: 2px;
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide {
	display: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon {
	display: flex;
	align-items: center;
	margin-right: 4px;
}

.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon,
.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .suggest-icon::before {
	display: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan {
	margin: 0 0 0 0.3em;
	border: 0.1em solid #000;
	width: 0.7em;
	height: 0.7em;
	display: inline-block;
}

/** Styles for the docs of the completion item in focus **/

.monaco-editor .suggest-details-container {
	z-index: 41;
}

.monaco-editor .suggest-details {
	display: flex;
	flex-direction: column;
	cursor: default;
	color: var(--vscode-editorSuggestWidget-foreground);
}

.monaco-editor .suggest-details:focus {
	border-color: var(--vscode-focusBorder);
}

.monaco-editor .suggest-details a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .suggest-details a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .suggest-details code {
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .suggest-details.no-docs {
	display: none;
}

.monaco-editor .suggest-details > .monaco-scrollable-element {
	flex: 1;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type {
	flex: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.7;
	white-space: pre;
	margin: 0 24px 0 0;
	padding: 4px 0 4px 5px;
}

.monaco-editor .suggest-details.detail-and-doc > .monaco-scrollable-element > .body > .header > .type {
	padding-bottom: 12px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type.auto-wrap {
	white-space: normal;
	word-break: break-all;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs {
	margin: 0;
	padding: 4px 5px;
	white-space: pre-wrap;
}

.monaco-editor .suggest-details.no-type > .monaco-scrollable-element > .body > .docs {
	margin-right: 24px;
	overflow: hidden;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs {
	padding: 0;
	white-space: initial;
	min-height: calc(1rem + 8px);
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div,
.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > span:not(:empty) {
	padding: 4px 5px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:first-child {
	margin-top: 0;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:last-child {
	margin-bottom: 0;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .monaco-tokenized-source {
	white-space: pre;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs .code {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .codicon {
	vertical-align: sub;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > p:empty {
	display: none;
}

.monaco-editor .suggest-details code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.monaco-editor .suggest-details ul {
	padding-left: 20px;
}

.monaco-editor .suggest-details ol {
	padding-left: 20px;
}

.monaco-editor .suggest-details p code {
	font-family: var(--monaco-monospace-font);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .suggest-preview-additional-widget {
	white-space: nowrap;
}

.monaco-editor .suggest-preview-additional-widget .content-spacer {
	color: transparent;
	white-space: pre;
}

.monaco-editor .suggest-preview-additional-widget .button {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-hidden {
	opacity: 0;
	font-size: 0;
}

.monaco-editor .ghost-text-decoration,
.monaco-editor .suggest-preview-text .ghost-text {
	font-style: italic;
}

.monaco-editor .suggest-preview-text.clickable .view-line {
	z-index: 1;
}

.monaco-editor .ghost-text-decoration.clickable,
.monaco-editor .ghost-text-decoration-preview.clickable,
.monaco-editor .suggest-preview-text.clickable .ghost-text {
	cursor: pointer;
}

.monaco-editor .inline-completion-text-to-replace {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-decoration,
.monaco-editor .ghost-text-decoration-preview,
.monaco-editor .suggest-preview-text .ghost-text {
	&.syntax-highlighted {
		opacity: 0.7;
	}
	&:not(.syntax-highlighted) {
		color: var(--vscode-editorGhostText-foreground);
	}
	background-color: var(--vscode-editorGhostText-background);
	border: 1px solid var(--vscode-editorGhostText-border);
}

.monaco-editor .ghost-text-decoration.warning,
.monaco-editor .ghost-text-decoration-preview.warning,
.monaco-editor .suggest-preview-text .ghost-text.warning {
	background: var(--monaco-editor-warning-decoration) repeat-x bottom left;
	border-bottom: 4px double var(--vscode-editorWarning-border);
}

.ghost-text-view-warning-widget-icon {
	.codicon {
		color: var(--vscode-editorWarning-foreground) !important;
	}
}

.monaco-editor {
	.edits-fadeout-decoration {
		opacity: var(--animation-opacity, 1);
		background-color: var(--vscode-inlineEdit-modifiedChangedTextBackground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .sticky-widget {
	overflow: hidden;
	border-bottom: 1px solid var(--vscode-editorStickyScroll-border);
	width: 100%;
	box-shadow: var(--vscode-editorStickyScroll-shadow) 0 4px 2px -2px;
	z-index: 4;
	right: initial !important;
	margin-left: '0px';
}

.monaco-editor .sticky-widget .sticky-widget-line-numbers {
	float: left;
	background-color: var(--vscode-editorStickyScrollGutter-background);
}

.monaco-editor .sticky-widget.peek .sticky-widget-line-numbers {
	background-color: var(--vscode-peekViewEditorStickyScrollGutter-background);
}

.monaco-editor .sticky-widget .sticky-widget-lines-scrollable {
	display: inline-block;
	position: absolute;
	overflow: hidden;
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: var(--vscode-editorStickyScroll-background);
}

.monaco-editor .sticky-widget.peek .sticky-widget-lines-scrollable {
	background-color: var(--vscode-peekViewEditorStickyScroll-background);
}

.monaco-editor .sticky-widget .sticky-widget-lines {
	position: absolute;
	background-color: inherit;
}

.monaco-editor .sticky-widget .sticky-line-number,
.monaco-editor .sticky-widget .sticky-line-content {
	color: var(--vscode-editorLineNumber-foreground);
	white-space: nowrap;
	display: inline-block;
	position: absolute;
	background-color: inherit;
}

.monaco-editor .sticky-widget .sticky-line-number .codicon-folding-expanded,
.monaco-editor .sticky-widget .sticky-line-number .codicon-folding-collapsed {
	float: right;
	transition: var(--vscode-editorStickyScroll-foldingOpacityTransition);
	position: absolute;
	margin-left: 2px;
}

.monaco-editor .sticky-widget .sticky-line-content {
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: inherit;
	white-space: nowrap;
}

.monaco-editor .sticky-widget .sticky-line-number-inner {
	display: inline-block;
	text-align: right;
}

.monaco-editor .sticky-widget .sticky-line-content:hover {
	background-color: var(--vscode-editorStickyScrollHover-background);
	cursor: pointer;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	@keyframes blink { 50% { border-color: orange; }  }
*/

.monaco-editor {
	.inline-edits-view-indicator {
		display: flex;

		z-index: 34; /* Below the find widget */
		height: 20px;

		color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
		background-color: var(--vscode-inlineEdit-gutterIndicator-background);
		border: 1px solid var(--vscode-inlineEdit-gutterIndicator-primaryBorder);
		border-radius: 3px;

		align-items: center;
		padding: 2px;
		padding-right: 10px;
		margin: 0 4px;

		/*
		animation: blink 1s;
		animation-iteration-count: 3;
		*/

		opacity: 0;

		&.contained {
			transition: opacity 0.2s ease-in-out;
			transition-delay: 0.4s;
		}

		&.visible {
			opacity: 1;
		}

		&.top {
			opacity: 1;

			.icon {
				transform: rotate(90deg);
			}
		}

		&.bottom {
			opacity: 1;

			.icon {
				transform: rotate(-90deg);
			}
		}

		.icon {
			display: flex;
			align-items: center;
			margin: 0 2px;
			transform: none;
			transition: transform 0.2s ease-in-out;
			.codicon {
				color: var(--vscode-inlineEdit-gutterIndicator-primaryForeground);
			}
		}

		.label {
			margin: 0 2px;

			display: flex;
			justify-content: center;
			width: 100%;
		}
	}

	.inline-edits-view .editorContainer {
		.preview .monaco-editor {
			.view-overlays .current-line-exact {
				border: none;
			}

			.current-line-margin {
				border: none;
			}
		}

		.inline-edits-view-zone.diagonal-fill {
			opacity: 0.5;
		}
	}

	.strike-through {
		text-decoration: line-through;
	}

	.inlineCompletions-line-insert {
		background: var(--vscode-inlineEdit-modifiedChangedLineBackground);
	}

	.inlineCompletions-line-delete {
		background: var(--vscode-inlineEdit-originalChangedLineBackground);
	}

	.inlineCompletions-char-insert {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground);
		cursor: pointer;
	}

	.inlineCompletions-char-delete {
		background: var(--vscode-inlineEdit-originalChangedTextBackground);
	}

	.inlineCompletions-char-delete.diff-range-empty {
		margin-left: -1px;
		border-left: solid var(--vscode-inlineEdit-originalChangedTextBackground) 3px;
	}

	.inlineCompletions-char-insert.diff-range-empty {
		border-left: solid var(--vscode-inlineEdit-modifiedChangedTextBackground) 3px;
	}

	.inlineCompletions-char-delete.single-line-inline { /* Editor Decoration */
		border: 1px solid var(--vscode-editorHoverWidget-border);
		margin: -2px 0 0 -2px;
	}

	.inlineCompletions-char-insert.single-line-inline { /* Inline Decoration */
		border-top: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
		border-bottom: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}
	.inlineCompletions-char-insert.single-line-inline.start {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border-left: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}
	.inlineCompletions-char-insert.single-line-inline.end {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-right: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */
	}

	.inlineCompletions-char-delete.single-line-inline.empty,
	.inlineCompletions-char-insert.single-line-inline.empty {
		display: none;
	}

	.inlineCompletions.strike-through {
		text-decoration-thickness: 1px;
	}

	/* line replacement bubbles */

	.inlineCompletions-modified-bubble {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground);
	}

	.inlineCompletions-original-bubble {
		background: var(--vscode-inlineEdit-originalChangedTextBackground);
	}

	.inlineCompletions-modified-bubble,
	.inlineCompletions-original-bubble {
		pointer-events: none;
		display: inline-block;
	}

	.inline-edit.ghost-text,
	.inline-edit.ghost-text-decoration,
	.inline-edit.ghost-text-decoration-preview,
	.inline-edit.suggest-preview-text .ghost-text {
		&.syntax-highlighted {
			opacity: 1 !important;
		}
		font-style: normal !important;
	}

	.inline-edit.modified-background.ghost-text,
	.inline-edit.modified-background.ghost-text-decoration,
	.inline-edit.modified-background.ghost-text-decoration-preview,
	.inline-edit.modified-background.suggest-preview-text .ghost-text {
		background: var(--vscode-inlineEdit-modifiedChangedTextBackground) !important;
		display: inline-block !important;
	}

	.inlineCompletions-original-lines {
		background: var(--vscode-editor-background);
	}
}

.monaco-menu-option {
	color: var(--vscode-editorActionList-foreground);
	font-size: 13px;
	padding: 0 4px;
	line-height: 28px;
	display: flex;
	gap: 4px;
	align-items: center;
	border-radius: 3px;
	cursor: pointer;

	.monaco-keybinding-key {
		font-size: 13px;
		opacity: 0.7;
	}

	&.active {
		background: var(--vscode-editorActionList-focusBackground);
		color: var(--vscode-editorActionList-focusForeground);
		outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
		outline-offset: -1px;

		.monaco-keybinding-key {
			color: var(--vscode-editorActionList-focusForeground);
		}
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .goto-definition-link {
	text-decoration: underline;
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


.monaco-editor.vs .valueSetReplacement {
	outline: solid 2px var(--vscode-editorBracketMatch-border);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .linked-editing-decoration {
	background-color: var(--vscode-editor-linkedEditingBackground);

	/* Ensure decoration is visible even if range is empty */
	min-width: 1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .detected-link,
.monaco-editor .detected-link-active {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .detected-link-active {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor {
	.scroll-editor-on-middle-click-dot {
		cursor: all-scroll;
		position: absolute;
		z-index: 1;
		background-color: var(--vscode-editor-foreground, white);
		border: 1px solid var(--vscode-editor-background, black);
		opacity: 0.5;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		transform: translate(-50%, -50%);

		&.hidden {
			display: none;
		}
	}

	&.scroll-editor-on-middle-click-editor * {
		cursor: all-scroll;
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .focused .selectionHighlight {
	background-color: var(--vscode-editor-selectionHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-selectionHighlightBorder);
}
.monaco-editor.hc-black .focused .selectionHighlight, .monaco-editor.hc-light .focused .selectionHighlight {
	border-style: dotted;
}

.monaco-editor .wordHighlight {
	background-color: var(--vscode-editor-wordHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightBorder);
}
.monaco-editor.hc-black .wordHighlight, .monaco-editor.hc-light .wordHighlight {
	border-style: dotted;
}

.monaco-editor .wordHighlightStrong {
	background-color: var(--vscode-editor-wordHighlightStrongBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightStrongBorder);
}
.monaco-editor.hc-black .wordHighlightStrong, .monaco-editor.hc-light .wordHighlightStrong {
	border-style: dotted;
}

.monaco-editor .wordHighlightText {
	background-color: var(--vscode-editor-wordHighlightTextBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightTextBorder);
}
.monaco-editor.hc-black .wordHighlightText, .monaco-editor.hc-light .wordHighlightText {
	border-style: dotted;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .parameter-hints-widget {
	/* Must be higher than the sash's z-index and terminal canvases but lower than the suggest widget */
	z-index: 39;
	display: flex;
	flex-direction: column;
	line-height: 1.5em;
	cursor: default;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.hc-black .monaco-editor .parameter-hints-widget,
.hc-light .monaco-editor .parameter-hints-widget {
	border-width: 2px;
}

.monaco-editor .parameter-hints-widget > .phwrapper {
	max-width: 440px;
	display: flex;
	flex-direction: row;
}

.monaco-editor .parameter-hints-widget.multiple {
	min-height: 3.3em;
	padding: 0;
}

.monaco-editor .parameter-hints-widget.multiple .body::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	opacity: 0.5;
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .parameter-hints-widget p,
.monaco-editor .parameter-hints-widget ul {
	margin: 8px 0;
}

.monaco-editor .parameter-hints-widget .monaco-scrollable-element,
.monaco-editor .parameter-hints-widget .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 100%;
}

.monaco-editor .parameter-hints-widget .signature {
	padding: 4px 5px;
	position: relative;
}

.monaco-editor .parameter-hints-widget .signature.has-docs::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding-top: 4px;
	opacity: 0.5;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .parameter-hints-widget .code {
	font-family: var(--vscode-parameterHintsWidget-editorFontFamily), var(--vscode-parameterHintsWidget-editorFontFamilyDefault);
}

.monaco-editor .parameter-hints-widget .docs {
	padding: 0 10px 0 5px;
	white-space: pre-wrap;
}

.monaco-editor .parameter-hints-widget .docs.empty {
	display: none;
}

.monaco-editor .parameter-hints-widget .docs a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .parameter-hints-widget .docs a:hover {
	color: var(--vscode-textLink-activeForeground);
	cursor: pointer;
}

.monaco-editor .parameter-hints-widget .docs .markdown-docs {
	white-space: initial;
}

.monaco-editor .parameter-hints-widget .docs code {
	font-family: var(--monaco-monospace-font);
	border-radius: 3px;
	padding: 0 0.4em;
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .parameter-hints-widget .docs .monaco-tokenized-source,
.monaco-editor .parameter-hints-widget .docs .code {
	white-space: pre-wrap;
}

.monaco-editor .parameter-hints-widget .controls {
	display: none;
	flex-direction: column;
	align-items: center;
	min-width: 22px;
	justify-content: flex-end;
}

.monaco-editor .parameter-hints-widget.multiple .controls {
	display: flex;
	padding: 0 2px;
}

.monaco-editor .parameter-hints-widget.multiple .button {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.monaco-editor .parameter-hints-widget .button.previous {
	bottom: 24px;
}

.monaco-editor .parameter-hints-widget .overloads {
	text-align: center;
	height: 12px;
	line-height: 12px;
	font-family: var(--monaco-monospace-font);
}

.monaco-editor .parameter-hints-widget .signature .parameter.active {
	color: var(--vscode-editorHoverWidget-highlightForeground);
	font-weight: bold;
}

.monaco-editor .parameter-hints-widget .documentation-parameter > .parameter {
	font-weight: bold;
	margin-right: 0.5em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor {
	.editorPlaceholder {
		top: 0px;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
		pointer-events: none;

		color: var(--vscode-editor-placeholder-foreground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .rename-box {
	z-index: 100;
	color: inherit;
	border-radius: 4px;
}

.monaco-editor .rename-box.preview {
	padding: 4px 4px 0 4px;
}

.monaco-editor .rename-box .rename-input-with-button {
	padding: 3px;
	border-radius: 2px;
	width: calc(100% - 8px); /* 4px padding on each side */
}

.monaco-editor .rename-box .rename-input {
	width: calc(100% - 8px); /* 4px padding on each side */
	padding: 0;
}

.monaco-editor .rename-box .rename-input:focus {
	outline: none;
}

.monaco-editor .rename-box .rename-suggestions-button {
	display: flex;
	align-items: center;
	padding: 3px;
	background-color: transparent;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.monaco-editor .rename-box .rename-suggestions-button:hover {
	background-color: var(--vscode-toolbar-hoverBackground)
}

.monaco-editor .rename-box .rename-candidate-list-container .monaco-list-row {
	border-radius: 2px;
}

.monaco-editor .rename-box .rename-label {
	display: none;
	opacity: .8;
}

.monaco-editor .rename-box.preview .rename-label {
	display: inherit;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .unicode-highlight {
	border: 1px solid var(--vscode-editorUnicodeHighlight-border);
	background-color: var(--vscode-editorUnicodeHighlight-background);
	box-sizing: border-box;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.editor-banner {
	box-sizing: border-box;
	cursor: default;
	width: 100%;
	font-size: 12px;
	display: flex;
	overflow: visible;

	height: 26px;

	background: var(--vscode-banner-background);
}


.editor-banner .icon-container {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 6px 0 10px;
}

.editor-banner .icon-container.custom-icon {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px;
	width: 16px;
	padding: 0;
	margin: 0 6px 0 10px;
}

.editor-banner .message-container {
	display: flex;
	align-items: center;
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.editor-banner .message-container p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.editor-banner .message-actions-container {
	flex-grow: 1;
	flex-shrink: 0;
	line-height: 26px;
	margin: 0 4px;
}

.editor-banner .message-actions-container a.monaco-button {
	width: inherit;
	margin: 2px 8px;
	padding: 0px 12px;
}

.editor-banner .message-actions-container a {
	padding: 3px;
	margin-left: 12px;
	text-decoration: underline;
}

.editor-banner .action-container {
	padding: 0 10px 0 6px;
}

.editor-banner {
	background-color: var(--vscode-banner-background);
}

.editor-banner,
.editor-banner .action-container .codicon,
.editor-banner .message-actions-container .monaco-link {
	color: var(--vscode-banner-foreground);
}

.editor-banner .icon-container .codicon {
	color: var(--vscode-banner-iconForeground);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-link {
	color: var(--vscode-textLink-foreground);
}

.monaco-link:hover {
	color: var(--vscode-textLink-activeForeground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.floating-menu-overlay-widget {
	padding: 0px;
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
	border-radius: 2px;
	border: 1px solid var(--vscode-contrastBorder);
	display: flex;
	align-items: center;
	z-index: 10;
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
	overflow: hidden;

	.action-item > .action-label {
		padding: 5px;
		font-size: 12px;
		border-radius: 2px;
	}

	.action-item > .action-label.codicon {
		color: var(--vscode-button-foreground);
	}

	.action-item > .action-label.codicon:not(.separator) {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.action-item:first-child > .action-label {
		padding-left: 7px;
	}

	.action-item:last-child > .action-label {
		padding-right: 7px;
	}

	.action-item .action-label.separator {
		background-color: var(--vscode-menu-separatorBackground);
	}
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .iPadShowKeyboard {
	width: 58px;
	min-width: 0;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	resize: none;
	overflow: hidden;
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjNDI0MjQyIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
	border: 4px solid #F6F6F6;
	border-radius: 4px;
}

.monaco-editor.vs-dark .iPadShowKeyboard {
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjQzVDNUM1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") center center no-repeat;
	border: 4px solid #252526;
}/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .tokens-inspect-widget {
	z-index: 50;
	user-select: text;
	-webkit-user-select: text;
	padding: 10px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}
.monaco-editor.hc-black .tokens-inspect-widget, .monaco-editor.hc-light .tokens-inspect-widget {
	border-width: 2px;
}

.monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
	height: 1px;
	border: 0;
	background-color: var(--vscode-editorHoverWidget-border);
}

.monaco-editor .tokens-inspect-widget .tm-token {
	font-family: var(--monaco-monospace-font);
}

.monaco-editor .tokens-inspect-widget .tm-token-length {
	font-weight: normal;
	font-size: 60%;
	float: right;
}

.monaco-editor .tokens-inspect-widget .tm-metadata-table {
	width: 100%;
}

.monaco-editor .tokens-inspect-widget .tm-metadata-value {
	font-family: var(--monaco-monospace-font);
	text-align: right;
}

.monaco-editor .tokens-inspect-widget .tm-token-type {
	font-family: var(--monaco-monospace-font);
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


/* Default standalone editor fonts */
.monaco-editor {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
	--monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
}

.monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.monaco-editor.hc-light .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.monaco-hover p {
	margin: 0;
}

/* See https://github.com/microsoft/monaco-editor/issues/2168#issuecomment-780078600 */
.monaco-aria-container {
	position: absolute !important;
	top: 0; /* avoid being placed underneath a sibling element */
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.monaco-editor .synthetic-focus, .monaco-diff-editor .synthetic-focus,
.monaco-editor [tabindex="0"]:focus, .monaco-diff-editor [tabindex="0"]:focus,
.monaco-editor [tabindex="-1"]:focus, .monaco-diff-editor [tabindex="-1"]:focus,
.monaco-editor button:focus, .monaco-diff-editor button:focus,
.monaco-editor input[type=button]:focus, .monaco-diff-editor input[type=button]:focus,
.monaco-editor input[type=checkbox]:focus, .monaco-diff-editor input[type=checkbox]:focus,
.monaco-editor input[type=search]:focus, .monaco-diff-editor input[type=search]:focus,
.monaco-editor input[type=text]:focus, .monaco-diff-editor input[type=text]:focus,
.monaco-editor select:focus, .monaco-diff-editor select:focus,
.monaco-editor textarea:focus, .monaco-diff-editor textarea:focus {
	outline-width: 1px;
	outline-style: solid;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
	opacity: 1
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* stylelint-disable layer-checker */

.monaco-hover.workbench-hover {
	position: relative;
	font-size: 13px;
	line-height: 19px;
	/* Must be higher than sash's z-index and terminal canvases */
	z-index: 40;
	overflow: hidden;
	max-width: 700px;
	background: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 5px;
	color: var(--vscode-editorHoverWidget-foreground);
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.monaco-hover.workbench-hover .monaco-action-bar .action-item .codicon {
	/* Given our font-size, adjust action icons accordingly */
	width: 13px;
	height: 13px;
}

.monaco-hover.workbench-hover hr {
	border-bottom: none;
}

.monaco-hover.workbench-hover.compact {
	font-size: 12px;
}

.monaco-hover.workbench-hover.compact .monaco-action-bar .action-item .codicon {
	/* Given our font-size, adjust action icons accordingly */
	width: 12px;
	height: 12px;
}

.monaco-hover.workbench-hover.compact .hover-contents {
	padding: 2px 8px;
}

.workbench-hover-container.locked .monaco-hover.workbench-hover {
	outline: 1px solid var(--vscode-editorHoverWidget-border);
}
.workbench-hover-container:focus-within.locked .monaco-hover.workbench-hover {
	outline-color: var(--vscode-focusBorder);
}

.workbench-hover-pointer {
	position: absolute;
	/* Must be higher than workbench hover z-index */
	z-index: 41;
	pointer-events: none;
}

.workbench-hover-pointer:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: var(--vscode-editorHoverWidget-background);
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}
.workbench-hover-container:not(:focus-within).locked .workbench-hover-pointer:after {
	width: 4px;
	height: 4px;
	border-right-width: 2px;
	border-bottom-width: 2px;
}
.workbench-hover-container:focus-within .workbench-hover-pointer:after {
	border-right: 1px solid var(--vscode-focusBorder);
	border-bottom: 1px solid var(--vscode-focusBorder);
}

.workbench-hover-pointer.left   { left: -3px; }
.workbench-hover-pointer.right  { right: 3px; }
.workbench-hover-pointer.top    { top: -3px; }
.workbench-hover-pointer.bottom { bottom: 3px; }

.workbench-hover-pointer.left:after {
	transform: rotate(135deg);
}

.workbench-hover-pointer.right:after {
	transform: rotate(315deg);
}

.workbench-hover-pointer.top:after {
	transform: rotate(225deg);
}

.workbench-hover-pointer.bottom:after {
	transform: rotate(45deg);
}

.monaco-hover.workbench-hover a {
	color: var(--vscode-textLink-foreground);
}

.monaco-hover.workbench-hover a:focus {
	outline: 1px solid;
	outline-offset: -1px;
	text-decoration: underline;
	outline-color: var(--vscode-focusBorder);
}

.monaco-hover.workbench-hover a.codicon:focus,
.monaco-hover.workbench-hover a.monaco-button:focus {
	text-decoration: none;
}

.monaco-hover.workbench-hover a:hover,
.monaco-hover.workbench-hover a:active {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-hover.workbench-hover code {
	background: var(--vscode-textCodeBlock-background);
}

.monaco-hover.workbench-hover .hover-row .actions {
	background: var(--vscode-editorHoverWidget-statusBarBackground);
}

.monaco-hover.workbench-hover.right-aligned {
	/* The context view service wraps strangely when it's right up against the edge without this */
	left: 1px;
}

.monaco-hover.workbench-hover.right-aligned .hover-row.status-bar .actions {
	flex-direction: row-reverse;
}

.monaco-hover.workbench-hover.right-aligned .hover-row.status-bar .actions .action-container {
	margin-right: 0;
	margin-left: 16px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.context-view {
	position: absolute;
}

.context-view.fixed {
	all: initial;
	font-family: inherit;
	font-size: 13px;
	position: fixed;
	color: inherit;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.quick-input-widget {
	font-size: 13px;
}

.quick-input-widget .monaco-highlighted-label .highlight,
.quick-input-widget .monaco-highlighted-label .highlight {
	color: #0066BF;
}

.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight,
.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: #9DDDFF;
}

.vs-dark .quick-input-widget .monaco-highlighted-label .highlight,
.vs-dark .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0097fb;
}

.hc-black .quick-input-widget .monaco-highlighted-label .highlight,
.hc-black .quick-input-widget .monaco-highlighted-label .highlight {
	color: #F38518;
}

.hc-light .quick-input-widget .monaco-highlighted-label .highlight,
.hc-light .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0F4A85;
}

.monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(221, 221, 221, 0.4);
	border: solid 1px rgba(204, 204, 204, 0.4);
	border-bottom-color: rgba(187, 187, 187, 0.4);
	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
	color: #555;
}

.hc-black .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px rgb(111, 195, 223);
	box-shadow: none;
	color: #fff;
}

.hc-light .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px #0F4A85;
	box-shadow: none;
	color: #292929;
}

.vs-dark .monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(128, 128, 128, 0.17);
	border: solid 1px rgba(51, 51, 51, 0.6);
	border-bottom-color: rgba(68, 68, 68, 0.6);
	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
	color: #ccc;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.quick-input-widget {
	position: absolute;
	width: 600px;
	z-index: 2550;
	left: 50%;
	-webkit-app-region: no-drag;
	border-radius: 6px;
}

.quick-input-titlebar {
	cursor: grab;
	display: flex;
	align-items: center;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.quick-input-left-action-bar {
	display: flex;
	margin-left: 4px;
	flex: 1;
}

/* give some space between input and action bar */
.quick-input-inline-action-bar > .actions-container > .action-item:first-child {
	margin-left: 5px;
}

/* center horizontally */
.quick-input-inline-action-bar > .actions-container > .action-item {
	margin-top: 2px;
}

.quick-input-title {
	cursor: grab;
	padding: 3px 0px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
}

.quick-input-right-action-bar {
	display: flex;
	margin-right: 4px;
	flex: 1;
}

.quick-input-right-action-bar > .actions-container {
	justify-content: flex-end;
}

.quick-input-right-action-bar > .actions-container > .action-item {
	margin-left: 4px;
}

.quick-input-titlebar .monaco-action-bar .action-label.codicon {
	background-position: center;
	background-repeat: no-repeat;
	padding: 2px;
}

.quick-input-description {
	margin: 6px 6px 6px 11px;
}

.quick-input-header .quick-input-description {
	margin: 4px 2px;
	flex: 1;
}

.quick-input-header {
	cursor: grab;
	display: flex;
	padding: 6px 6px 2px 6px;
}

.quick-input-widget.hidden-input .quick-input-header {
	/* reduce margins and paddings when input box hidden */
	padding: 0;
	margin-bottom: 0;
}

.quick-input-and-message {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	position: relative;
}

.quick-input-check-all {
	align-self: center;
	margin: 0;
}

.quick-input-widget .quick-input-header .monaco-checkbox {
	margin-top: 6px;
}

.quick-input-filter {
	flex-grow: 1;
	display: flex;
	position: relative;
}

.quick-input-box {
	flex-grow: 1;
}

.quick-input-widget.show-checkboxes .quick-input-box,
.quick-input-widget.show-checkboxes .quick-input-message {
	margin-left: 5px;
}

.quick-input-visible-count {
	position: absolute;
	left: -10000px;
}

.quick-input-count {
	align-self: center;
	position: absolute;
	right: 4px;
	display: flex;
	align-items: center;
}

.quick-input-count .monaco-count-badge {
	vertical-align: middle;
	padding: 2px 4px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}

.quick-input-action {
	margin-left: 6px;
}

.quick-input-action .monaco-text-button {
	font-size: 11px;
	padding: 0 6px;
	display: flex;
	height: 25px;
	align-items: center;
}

.quick-input-message {
	margin-top: -1px;
	padding: 5px;
	overflow-wrap: break-word;
}

.quick-input-message > .codicon {
	margin: 0 0.2em;
	vertical-align: text-bottom;
}

/* Links in descriptions & validations */
.quick-input-message a {
	color: inherit;
}

.quick-input-progress.monaco-progress-container {
	position: relative;
}

.quick-input-list {
	line-height: 22px;
}

.quick-input-widget.hidden-input .quick-input-list {
	margin-top: 4px;
	/* reduce margins when input box hidden */
	padding-bottom: 4px;
}

.quick-input-list .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.quick-input-list .monaco-scrollable-element {
	padding: 0px 6px;
}

.quick-input-list .quick-input-list-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	padding: 0 6px;
}

.quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
	border-top-width: 1px;
	border-top-style: solid;
}

.quick-input-list .monaco-list-row {
	border-radius: 3px;
}

.quick-input-list .monaco-list-row[data-index="0"] .quick-input-list-entry.quick-input-list-separator-border {
	border-top-style: none;
}

.quick-input-list .quick-input-list-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.quick-input-widget .monaco-checkbox {
	margin-right: 0;
}

.quick-input-widget .quick-input-list .monaco-checkbox,
.quick-input-widget .quick-input-tree .monaco-checkbox {
	margin-top: 4px;
}

.quick-input-list .quick-input-list-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-input-list .quick-input-list-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row {
	display: flex;
	align-items: center;
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label,
.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1;
	/* make sure the icon label grows within the row */
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.quick-input-list .quick-input-list-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding {
	margin-right: 8px;
	/* separate from the separator label or scrollbar if any */
}

.quick-input-list .quick-input-list-label-meta {
	opacity: 0.7;
	line-height: normal;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* preserve list-like styling instead of tree-like styling */
.quick-input-list .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
	font-weight: bold;
	background-color: unset;
	color: var(--vscode-list-highlightForeground) !important;
}

/* preserve list-like styling instead of tree-like styling */
.quick-input-list .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: var(--vscode-list-focusHighlightForeground) !important;
}

.quick-input-list .quick-input-list-entry .quick-input-list-separator {
	margin-right: 4px;
	/* separate from keybindings or actions */
}

.quick-input-list .quick-input-list-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.quick-input-list .quick-input-list-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 2px;
}

.quick-input-list .quick-input-list-entry-action-bar {
	margin-top: 1px;
}

.quick-input-list .quick-input-list-entry-action-bar {
	margin-right: 4px;
	/* separate from scrollbar */
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible,
.quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar .action-label,
.quick-input-list .quick-input-list-entry.focus-inside .quick-input-list-entry-action-bar .action-label,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry-action-bar .action-label,
.quick-input-list .monaco-list-row.passive-focused .quick-input-list-entry-action-bar .action-label {
	display: flex;
}

.quick-input-list > .monaco-list:focus .monaco-list-row.focused {
	outline: 1px solid var(--vscode-list-focusOutline) !important;
	outline-offset: -1px;
}

.quick-input-list > .monaco-list:focus .monaco-list-row.focused .quick-input-list-entry.quick-input-list-separator-border {
	border-color: transparent;
}

/* focused items in quick pick */
.quick-input-list .monaco-list-row.focused .monaco-keybinding-key,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator {
	color: inherit
}

.quick-input-list .monaco-list-row.focused .monaco-keybinding-key {
	background: none;
}

.quick-input-list .quick-input-list-separator-as-item {
	padding: 4px 6px;
	font-size: 12px;
}

/* Quick input separators as full-row item */
.quick-input-list .quick-input-list-separator-as-item .label-name {
	font-weight: 600;
}

.quick-input-list .quick-input-list-separator-as-item .label-description {
	/* Override default description opacity so we don't have a contrast ratio issue. */
	opacity: 1 !important;
}

/* Hide border when the item becomes the sticky one */
.quick-input-list .monaco-tree-sticky-row .quick-input-list-entry.quick-input-list-separator-as-item.quick-input-list-separator-border {
	border-top-style: none;
}

/* Give sticky row the same padding as the scrollable list */
.quick-input-list .monaco-tree-sticky-row {
	padding: 0 5px;
}

/* Hide the twistie containers so that there isn't blank indent */
.quick-input-list .monaco-tl-twistie {
	display: none !important;
}

/* Tree */

.quick-input-tree .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.quick-input-tree .quick-input-tree-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	padding: 0 6px;
}

.quick-input-tree .quick-input-tree-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.quick-input-tree .quick-input-tree-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-input-tree .quick-input-tree-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row {
	display: flex;
	align-items: center;
}

.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .monaco-icon-label,
.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1;
	/* make sure the icon label grows within the row */
}

.quick-input-tree .quick-input-tree-rows > .quick-input-tree-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.quick-input-tree .quick-input-tree-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.quick-input-tree .quick-input-tree-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.quick-input-tree .quick-input-tree-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.quick-input-tree .quick-input-tree-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 2px;
}

.quick-input-tree .quick-input-tree-entry-action-bar {
	margin-top: 1px;
}

.quick-input-tree .quick-input-tree-entry-action-bar {
	margin-right: 4px;
	/* separate from scrollbar */
}

.quick-input-tree .quick-input-tree-entry .quick-input-tree-entry-action-bar .action-label.always-visible,
.quick-input-tree .quick-input-tree-entry:hover .quick-input-tree-entry-action-bar .action-label,
.quick-input-tree .quick-input-tree-entry.focus-inside .quick-input-tree-entry-action-bar .action-label,
.quick-input-tree .monaco-list-row.focused .quick-input-tree-entry-action-bar .action-label,
.quick-input-tree .monaco-list-row.passive-focused .quick-input-tree-entry-action-bar .action-label {
	display: flex;
}

.quick-input-tree > .monaco-list:focus .monaco-list-row.focused {
	outline: 1px solid var(--vscode-list-focusOutline) !important;
	outline-offset: -1px;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-progress-container {
	width: 100%;
	height: 2px;
	overflow: hidden; /* keep progress bit in bounds */
}

.monaco-progress-container .progress-bit {
	width: 2%;
	height: 2px;
	position: absolute;
	left: 0;
	display: none;
}

.monaco-progress-container.active .progress-bit {
	display: inherit;
}

.monaco-progress-container.discrete .progress-bit {
	left: 0;
	transition: width 100ms linear;
}

.monaco-progress-container.discrete.done .progress-bit {
	width: 100%;
}

.monaco-progress-container.infinite .progress-bit {
	animation-name: progress;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
}

.monaco-progress-container.infinite.infinite-long-running .progress-bit {
	/*
		The more smooth `linear` timing function can cause
		higher GPU consumption as indicated in
		https://github.com/microsoft/vscode/issues/97900 &
		https://github.com/microsoft/vscode/issues/138396
	*/
	animation-timing-function: steps(100);
}

/**
 * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
 * that container. Since translateX is relative to the progress bit size, we have to multiple it with
 * its relative size to the parent container:
 * parent width: 5000%
 *    bit width: 100%
 * translateX should be as follow:
 *  50%: 5000% * 50% - 50% (set to center) = 2450%
 * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
 */
@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .rendered-markdown kbd {
	background-color: var(--vscode-keybindingLabel-background);
	color: var(--vscode-keybindingLabel-foreground);
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	border-color: var(--vscode-keybindingLabel-border);
	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
	vertical-align: middle;
	padding: 1px 3px;
}

.rendered-markdown li:has(input[type=checkbox]) {
	list-style-type: none;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-component.multiDiffEditor {
	background: var(--vscode-multiDiffEditor-background);

	position: relative;

	height: 100%;
	width: 100%;

	overflow-y: hidden;

	> div {
		position: absolute;
		top: 0px;
		left: 0px;

		height: 100%;
		width: 100%;

		&.placeholder {
			visibility: hidden;

			&.visible {
				visibility: visible;
			}

			display: grid;
			place-items: center;
			place-content: center;
		}
	}

	.active {
		--vscode-multiDiffEditor-border: var(--vscode-focusBorder);
	}

	.multiDiffEntry {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;


		.collapse-button {
			margin: 0 5px;
			cursor: pointer;

			a {
				display: block;
			}
		}

		.header {
			z-index: 1000;
			background: var(--vscode-editor-background);

			&:not(.collapsed) .header-content {
				border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
			}

			.header-content {
				margin: 8px 0px 0px 0px;
				padding: 4px 5px;

				border-top: 1px solid var(--vscode-multiDiffEditor-border);

				display: flex;
				align-items: center;

				color: var(--vscode-foreground);
				background: var(--vscode-multiDiffEditor-headerBackground);

				&.shadow {
					box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px;
				}

				.file-path {
					display: flex;
					flex: 1;
					min-width: 0;

					.title {
						font-size: 14px;
						line-height: 22px;

						&.original {
							flex: 1;
							min-width: 0;
							text-overflow: ellipsis;
						}
					}

					.status {
						font-weight: 600;
						opacity: 0.75;
						margin: 0px 10px;
						line-height: 22px;

						/*
							TODO@hediet: move colors from git extension to core!
						&.renamed {
							color: v ar(--vscode-gitDecoration-renamedResourceForeground);
						}

						&.deleted {
							color: v ar(--vscode-gitDecoration-deletedResourceForeground);
						}

						&.added {
							color: v ar(--vscode-gitDecoration-addedResourceForeground);
						}
						*/
					}
				}

				.actions {
					padding: 0 8px;
				}
			}


		}

		.editorParent {
			flex: 1;
			display: flex;
			flex-direction: column;

			border-bottom: 1px solid var(--vscode-multiDiffEditor-border);
			overflow: hidden;
		}

		.editorContainer {
			flex: 1;
		}
	}
}
.general-settings-content.message-opt-out-content { display: flex; flex-direction: column; overflow: hidden; }
.message-opt-out-settings { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 14px; }
.message-opt-out-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message-opt-out-heading h3 { margin: 0; font-size: 16px; }
.message-opt-out-search { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg-primary); }
.message-opt-out-search:focus-within { border-color: var(--accent-primary); }
.message-opt-out-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 13px; }
.message-opt-out-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.message-opt-out-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; font-size: 13px; text-align: left; }
.message-opt-out-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-elevated); white-space: nowrap; font-weight: 600; }
.message-opt-out-table th, .message-opt-out-table td { padding: 10px; border-bottom: 1px solid var(--border-default); vertical-align: middle; }
.message-opt-out-table td { max-width: 240px; overflow-wrap: anywhere; }
.message-opt-out-table th:nth-child(-n + 2), .message-opt-out-table td:nth-child(-n + 2) { text-align: center; }
.message-opt-out-table tbody tr:last-child td { border-bottom: 0; }
.message-opt-out-table tbody tr:hover { background: var(--bg-primary); }
.message-opt-out-table .message-opt-out-empty { padding: 42px 16px; text-align: center; color: var(--text-secondary); }
.message-opt-out-empty button { margin-top: 12px; }
.message-opt-out-avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-inline: auto; border-radius: 50%; overflow: hidden; background: var(--bg-elevated); color: var(--text-secondary); }
.message-opt-out-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-opt-out-nowrap { white-space: nowrap; }
.message-opt-out-detail { display: flex; flex-direction: column; gap: 4px; }
.message-opt-out-detail span:nth-child(2) { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.message-opt-out-success { color: var(--success, #22a06b); font-size: 12px; }
.message-opt-out-pagination, .message-opt-out-pagination > div { display: flex; align-items: center; gap: 12px; }
.message-opt-out-pagination { justify-content: space-between; color: var(--text-secondary); font-size: 13px; }
.campaign-type-visibility { --ctv-accent: #5b57e8; display: flex; flex-direction: column; gap: 16px; color: var(--text-primary, #0f172a); font-size: 13px; }
.campaign-type-visibility * { box-sizing: border-box; }
.ctv-heading { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.ctv-heading > div { flex: 1 1 360px; min-width: 0; }
.ctv-heading h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.ctv-heading p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary, #5b6b80); }
.ctv-heading strong { color: var(--text-primary, #334155); }
.ctv-save-state { display: flex; align-items: center; gap: 7px; flex: none; height: 30px; padding: 0 11px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 600; background: var(--bg-primary, #eef1f6); color: var(--text-secondary, #5b6b80); }
.ctv-save-state.is-saving { background: #f1f0ff; color: #4338ca; }
.ctv-save-state.is-saved { background: #e9f8f1; color: #0f7a56; }
.ctv-spinner { animation: ctv-spin .8s linear infinite; }
@keyframes ctv-spin { to { transform: rotate(360deg); } }
.ctv-platform-section, .ctv-catalog { border: 1px solid var(--border-default, #dfe5ee); border-radius: 12px; background: var(--bg-secondary, #fff); }
.ctv-platform-section { padding: 15px 16px 16px; }
.ctv-section-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; margin-bottom: 11px; }
.ctv-section-label strong, .ctv-toolbar > strong { font-size: 13.5px; }
.ctv-section-label > span { font-size: 12px; color: var(--text-secondary, #5b6b80); }
.ctv-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.ctv-platform { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--border-default, #dfe5ee); background: var(--bg-primary, #f7f9fc); cursor: pointer; }
.ctv-platform.is-on { background: color-mix(in srgb, var(--ctv-accent) 3%, var(--bg-secondary, #fff)); border-color: #c9c6f6; }
.ctv-platform.is-off { opacity: .85; }
.ctv-platform strong { display: block; font-size: 13.5px; }
.ctv-platform small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-secondary, #5b6b80); }
.ctv-dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.campaign-type-visibility input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--ctv-accent); cursor: pointer; }
.campaign-type-visibility input:disabled, .campaign-type-visibility button:disabled { cursor: default; opacity: .6; }
.campaign-type-visibility button { font: inherit; cursor: pointer; }
.campaign-type-visibility :focus-visible { outline: 2px solid var(--ctv-accent); outline-offset: 3px; }
.ctv-catalog { overflow: hidden; }
.ctv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-default, #eef2f7); }
.ctv-toolbar > strong { flex: 1 1 200px; }
.ctv-search { display: flex; align-items: center; gap: 7px; flex: 0 1 240px; min-width: 150px; height: 34px; padding: 0 10px; border: 1px solid var(--border-default, #dfe5ee); border-radius: 9px; background: var(--bg-primary, #f7f9fc); color: var(--text-secondary, #7b8ca3); }
.ctv-search:focus-within { border-color: #a5a2f3; background: var(--bg-secondary, #fff); }
.ctv-search input { flex: 1; width: 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--text-primary, #0f172a); outline: none; }
.ctv-reset { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--border-default, #dfe5ee); border-radius: 9px; background: var(--bg-secondary, #fff); color: var(--text-secondary, #475569); font-size: 12.5px !important; font-weight: 600 !important; }
.ctv-reset:hover:not(:disabled) { border-color: #c7c8f7; color: #4338ca; }
.ctv-group { border-bottom: 1px solid var(--border-default, #eef2f7); }
.ctv-group-heading { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--bg-primary, #fafbfd); }
.ctv-group-heading label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ctv-group-heading strong { font-size: 13.5px; }
.ctv-group-heading > span { font-size: 12px; color: var(--text-secondary, #5b6b80); white-space: nowrap; }
.ctv-group-heading button { display: flex; align-items: center; justify-content: center; margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary, #5b6b80); }
.ctv-group-heading button:hover { background: var(--bg-elevated, #eef1f6); }
.ctv-group-heading svg { transition: transform .15s; }
.ctv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; padding: 10px 12px 13px 34px; }
.ctv-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0; border-radius: 9px; border: 1px solid var(--border-default, #e4e9f1); background: var(--bg-secondary, #fff); cursor: pointer; }
.ctv-item.is-off { background: var(--bg-primary, #f7f9fc); color: var(--text-secondary, #5b6b80); }
.ctv-item input[type=checkbox] { width: 16px; height: 16px; }
.ctv-item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ctv-item-text strong { display: block; font-size: 13px; font-weight: 600; }
.ctv-item-text code { padding: 0; background: transparent; border: 0; border-radius: 0; display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-secondary, #7b8ca3); }
.ctv-count { flex: none; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: #eef0ff; color: #4338ca; }
.ctv-item.is-off .ctv-count { background: #fff4e5; color: #a35a00; }
.ctv-hidden { margin: 0; padding: 10px 16px 13px 44px; font-size: 12px; color: var(--text-secondary, #5b6b80); }
.ctv-no-match { margin: 0; padding: 6px 4px; font-size: 12px; color: var(--text-secondary, #5b6b80); }
.ctv-footnote { display: flex; align-items: flex-start; gap: 9px; padding: 12px 16px; background: var(--bg-primary, #fafbfd); font-size: 12px; line-height: 1.6; color: var(--text-secondary, #5b6b80); }
.ctv-footnote svg { flex: none; margin-top: 2px; }
.ctv-error { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 9px; background: #fff4e5; color: #9a4100; }
.ctv-error button { padding: 5px 10px; border-radius: 6px; border: 1px solid currentColor; color: inherit; background: transparent; }
.ctv-readonly { margin: 0; color: var(--text-secondary, #5b6b80); font-size: 12px; }
@media (max-width: 760px) {
  .ctv-items { padding-left: 12px; }
  .ctv-search { flex: 1 1 180px; }
}

.ctv-search input:focus, .ctv-search input:focus-visible { box-shadow: none; outline: none; }
/* =============================================
   akaBizAuto Design System
   Dark theme inspired by Gumloop
   ============================================= */

:root {
  /* Colors - HND ZALO Deep Cyber Navy Palette */
  --bg-primary: #060b18;
  --bg-secondary: #0b1326;
  --bg-tertiary: #111d38;
  --bg-elevated: #162447;
  --bg-node: #132040;
  --bg-hover: rgba(0, 104, 255, 0.16);
  --bg-accent-subtle: rgba(0, 104, 255, 0.18);

  /* Topbar */
  --bg-topbar: #080f20;
  --text-topbar: #f1f5f9;
  --text-topbar-muted: #94a3b8;
  --border-topbar: rgba(56, 189, 248, 0.16);
  --bg-topbar-hover: rgba(0, 104, 255, 0.18);
  --bg-topbar-active: rgba(0, 104, 255, 0.24);

  /* Accent colors - HND ZALO Electric Blue & Cyber Cyan */
  --accent-primary: #0068ff;
  --accent-primary-hover: #1d7dff;
  --accent-secondary: #00d4ff;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #f43f5e;
  --accent-info: #38bdf8;

  /* Category colors */
  --cat-navigation: #38bdf8;
  --cat-interaction: #0068ff;
  --cat-data: #10b981;
  --cat-control: #f59e0b;
  --cat-utility: #fb923c;
  --cat-block: #0068ff;

  /* Text */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #060b18;

  /* Borders */
  --border-default: #1e2f52;
  --border-hover: #2d4678;
  --border-active: #0068ff;
  --border-strong: #3b5998;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(2, 6, 23, 0.45);
  --shadow-md: 0 8px 24px rgba(2, 6, 23, 0.55);
  --shadow-lg: 0 16px 44px rgba(2, 6, 23, 0.7);
  --shadow-glow: 0 0 24px rgba(0, 104, 255, 0.28);
  --card-shadow: var(--shadow-sm);
  --card-radius: 10px;

  /* Modal backdrops */
  --modal-backdrop: rgba(3, 7, 18, 0.68);
  --modal-backdrop-soft: rgba(6, 11, 24, 0.48);
  --modal-backdrop-strong: rgba(2, 6, 23, 0.82);

  /* Sizing */
  --sidebar-width: 280px;
  --config-panel-width: 340px;
  --toolbar-height: 48px;
  --titlebar-height: 36px;
  --utility-topbar-height: 36px;
  --mac-titlebar-safe-left: 84px;
  --windows-titlebar-control-width: 138px;

  /* Radius */
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.16s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-normal: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.42s cubic-bezier(0.22, 1, 0.36, 1);

  /* Font */
  --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Legacy aliases used by older v2 editor components */
  --border: var(--border-default);
  --text: var(--text-primary);
  --accent: var(--accent-primary);
}

body.theme-light {
  /* Colors - HND ZALO Crisp Ice Light Palette */
  --bg-primary: #e8f1fc;
  --bg-secondary: #f8fbff;
  --bg-tertiary: #edf4fc;
  --bg-elevated: #ffffff;
  --bg-node: #f1f7fe;
  --bg-hover: rgba(0, 104, 255, 0.08);
  --bg-accent-subtle: rgba(0, 104, 255, 0.12);

  /* Topbar */
  --bg-topbar: #f0f6ff;
  --text-topbar: #0f172a;
  --text-topbar-muted: #475569;
  --border-topbar: #cbd5e1;
  --bg-topbar-hover: #e2eeff;
  --bg-topbar-active: rgba(0, 104, 255, 0.14);

  /* Accent colors */
  --accent-primary: #0068ff;
  --accent-primary-hover: #0052cc;
  --accent-secondary: #0ea5e9;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;
  --accent-info: #0284c7;

  /* Category colors */
  --cat-navigation: #0284c7;
  --cat-interaction: #0068ff;
  --cat-data: #10b981;
  --cat-control: #f59e0b;
  --cat-utility: #f97316;
  --cat-block: #0068ff;

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-inverse: #ffffff;

  /* Borders */
  --border-default: #cbd8ea;
  --border-hover: #94b4d8;
  --border-active: #0068ff;
  --border-strong: #6488b4;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 10px 24px rgba(0, 104, 255, 0.09), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 44px rgba(0, 104, 255, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 0 18px rgba(0, 104, 255, 0.22);

  /* Keep the page visibly light when a modal is open. */
  --modal-backdrop: rgba(15, 23, 42, 0.28);
  --modal-backdrop-soft: rgba(15, 23, 42, 0.18);
  --modal-backdrop-strong: rgba(15, 23, 42, 0.4);

  /* Card */
  --card-shadow: 0 6px 18px rgba(0, 104, 255, 0.07), 0 1px 4px rgba(15, 23, 42, 0.05);
  --card-radius: 10px;

  /* Legacy aliases used by older v2 editor components */
  --border: var(--border-default);
  --text: var(--text-primary);
  --accent: var(--accent-primary);
}

/* =========== RESET =========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* Electron titlebar drag region */
body {
  padding-top: var(--titlebar-height);
}

/* =========== SCROLLBAR =========== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* =========== APP LAYOUT =========== */
.app-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.app-layout-authenticated {
  flex-direction: column;
}

.app-window-drag-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--titlebar-height);
  z-index: 90;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-topbar);
  -webkit-app-region: drag;
}

.platform-win32 .app-window-drag-frame,
.platform-linux .app-window-drag-frame {
  right: var(--windows-titlebar-control-width);
}

.app-utility-topbar {
  position: relative;
  z-index: 130;
  flex: 0 0 var(--utility-topbar-height);
  height: var(--utility-topbar-height);
  padding: 0 12px;
  border-bottom: 1px solid var(--border-topbar);
  background: var(--bg-topbar);
  color: var(--text-topbar);
  -webkit-app-region: drag;
}

.platform-darwin .app-utility-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--titlebar-height);
  padding-left: var(--mac-titlebar-safe-left);
  z-index: 150;
}

.app-utility-title {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: min(360px, calc(100% - 360px));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  color: var(--text-topbar);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  pointer-events: none;
}

.app-utility-actions {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.app-utility-version {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border-topbar);
  border-radius: var(--radius-sm);
  color: var(--text-topbar-muted);
  background: var(--bg-topbar-hover);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.app-utility-button {
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--border-topbar);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-topbar);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-app-region: no-drag;
}

.app-utility-button:hover:not(:disabled) {
  background: var(--bg-topbar-hover);
  border-color: var(--border-hover);
}

.app-utility-button.has-update:not(:disabled) {
  background: rgba(124, 92, 252, 0.2);
  border-color: rgba(167, 139, 250, 0.58);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(124, 92, 252, 0.12), 0 0 14px rgba(124, 92, 252, 0.2);
}

.app-utility-button.has-update:hover:not(:disabled) {
  background: rgba(124, 92, 252, 0.3);
  border-color: rgba(196, 181, 253, 0.78);
}

.app-utility-button:disabled {
  cursor: progress;
  opacity: 0.68;
}

.app-utility-logout {
  color: var(--accent-error);
}

.app-utility-logout:hover:not(:disabled) {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.24);
}

.app-utility-update-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.app-utility-update-icon svg {
  position: absolute;
  inset: 0;
  color: currentColor;
}

.app-utility-update-icon svg:last-child {
  inset: auto;
}

.app-update-available-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: var(--accent-warning);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14), 0 0 10px rgba(245, 158, 11, 0.72);
}

.app-content-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-notification-bar {
  position: relative;
  z-index: 125;
  min-height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 10%, var(--bg-secondary));
  color: var(--accent-info);
  -webkit-app-region: no-drag;
}

.app-notification-bar-success {
  color: var(--accent-success);
}

.app-notification-bar-warning {
  color: var(--accent-warning);
}

.app-notification-bar-error {
  color: var(--accent-error);
}

.app-notification-icon {
  flex: 0 0 auto;
}

.app-notification-content {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.35;
}

.app-notification-content strong {
  flex: 0 0 auto;
  color: currentColor;
  font-weight: 750;
}

.app-notification-content span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-notification-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.app-notification-link:hover {
  text-decoration: underline;
}

.app-main {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
}

.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* =========== TOOLBAR =========== */
.toolbar {
  height: var(--toolbar-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  -webkit-app-region: no-drag;
  z-index: 100;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-section.center {
  flex: 1;
  justify-content: center;
}

.toolbar-section.right {
  margin-left: auto;
}

.toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-title .logo {
  width: 22px;
  height: 22px;
  background: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-secondary)
  );
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========== BUTTONS =========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn svg {
  flex-shrink: 0;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-primary {
  background: var(--accent-primary);
  color: white;
}

.btn-primary:not(:disabled):hover {
  background: var(--accent-primary-hover);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-secondary:not(:disabled):hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:not(:disabled):hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-icon {
  padding: 6px;
  border-radius: var(--radius-sm);
}

button.btn-icon:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

button.btn-icon:not(.btn):hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
  color: var(--text-primary);
}

button.btn-icon:not(.btn):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-success {
  background: var(--accent-success);
  color: var(--text-inverse);
}

.btn-success:not(:disabled):hover {
  filter: brightness(1.1);
}

.btn-danger {
  background: var(--accent-error);
  color: white;
}

.btn-danger:not(:disabled):hover {
  filter: brightness(1.1);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* =========== STATUS INDICATOR =========== */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.connected {
  background: var(--accent-success);
  box-shadow: 0 0 6px var(--accent-success);
}

.status-dot.disconnected {
  background: var(--text-tertiary);
}

.status-dot.running {
  background: var(--accent-warning);
  box-shadow: 0 0 6px var(--accent-warning);
  animation: pulse 1.5s infinite;
}

.status-dot.error {
  background: var(--accent-error);
  box-shadow: 0 0 6px var(--accent-error);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* =========== SIDEBAR =========== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-tabs {
  display: flex;
  padding: 14px 16px 0;
  gap: 16px;
  border-bottom: 1px solid var(--border-default);
}

.sidebar-tab {
  background: transparent;
  color: var(--text-tertiary);
  border: none;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 8px;
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
}

.sidebar-tab:hover {
  color: var(--text-secondary);
}

.sidebar-tab.active {
  color: var(--text-primary);
  font-weight: 600;
}

.sidebar-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-primary);
  border-radius: 2px 2px 0 0;
}

.sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
}

.sidebar-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.sidebar-search:focus {
  border-color: var(--accent-primary);
}

.sidebar-search::placeholder {
  color: var(--text-tertiary);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.sidebar-category {
  margin-bottom: 8px;
}

.sidebar-category-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 8px 10px 4px;
}

/* =========== ACTION CARD (draggable) =========== */
.action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: all var(--transition-fast);
  user-select: none;
}

.action-card:hover {
  background: var(--bg-hover);
}

.action-card:active {
  cursor: grabbing;
  opacity: 0.7;
}

.action-card-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-card-icon.navigation {
  background: rgba(56, 189, 248, 0.15);
  color: var(--cat-navigation);
}
.action-card-icon.interaction {
  background: rgba(167, 139, 250, 0.15);
  color: var(--cat-interaction);
}
.action-card-icon.data {
  background: rgba(52, 211, 153, 0.15);
  color: var(--cat-data);
}
.action-card-icon.control {
  background: rgba(251, 191, 36, 0.15);
  color: var(--cat-control);
}
.action-card-icon.utility {
  background: rgba(251, 146, 60, 0.15);
  color: var(--cat-utility);
}
.action-card-icon.block {
  background: rgba(124, 92, 252, 0.15);
  color: var(--cat-block);
}

.action-card-info {
  flex: 1;
  min-width: 0;
}

.action-card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.action-card-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========== CANVAS =========== */
.canvas-wrapper {
  flex: 1;
  position: relative;
  background: var(--bg-primary);
}

.react-flow__background {
  background: var(--bg-primary) !important;
}

.react-flow__minimap {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
}

.react-flow__controls {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

.react-flow__controls-button {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-default) !important;
  width: 28px !important;
  height: 28px !important;
}

.react-flow__controls-button:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.react-flow__controls-button svg {
  fill: currentColor !important;
}

/* =========== CUSTOM NODES =========== */
.flow-node {
  min-width: 200px;
  background: var(--bg-node);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.flow-node:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.flow-node.selected {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

.flow-node.running {
  border-color: var(--accent-warning);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.2);
}

.flow-node.success {
  border-color: var(--accent-success);
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.2);
}

.flow-node.error {
  border-color: var(--accent-error);
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.2);
}

.flow-node-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-default);
}

.flow-node-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flow-node-icon.navigation {
  background: rgba(56, 189, 248, 0.15);
  color: var(--cat-navigation);
}
.flow-node-icon.interaction {
  background: rgba(167, 139, 250, 0.15);
  color: var(--cat-interaction);
}
.flow-node-icon.data {
  background: rgba(52, 211, 153, 0.15);
  color: var(--cat-data);
}
.flow-node-icon.control {
  background: rgba(251, 191, 36, 0.15);
  color: var(--cat-control);
}
.flow-node-icon.utility {
  background: rgba(251, 146, 60, 0.15);
  color: var(--cat-utility);
}
.flow-node-icon.block {
  background: rgba(124, 92, 252, 0.15);
  color: var(--cat-block);
}

.flow-node-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.flow-node-subtitle {
  font-size: 10px;
  color: var(--text-tertiary);
}

.flow-node-body {
  padding: 10px 14px;
}

.flow-node-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 11px;
}

.flow-node-field-label {
  color: var(--text-tertiary);
}

.flow-node-field-value {
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-node-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 10px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-default);
}

/* React Flow handles */
.react-flow__handle {
  width: 10px !important;
  height: 10px !important;
  background: var(--bg-elevated) !important;
  border: 2px solid var(--accent-primary) !important;
  transition: all var(--transition-fast);
}

.react-flow__handle:hover {
  transform: scale(1.3);
  background: var(--accent-primary) !important;
}

/* React Flow edges */
.react-flow__edge-path {
  stroke: var(--border-hover) !important;
  stroke-width: 2 !important;
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--accent-primary) !important;
  stroke-width: 2.5 !important;
}

/* =========== LOOP NODE =========== */
.flow-node.loop-node {
  border-left: 3px solid var(--cat-control);
  overflow: visible;
}

.loop-handle-labels {
  display: flex;
  justify-content: space-around;
  padding: 4px 14px 8px;
}

.loop-handle-label-text {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
}

.loop-handle-body {
  background: var(--accent-success) !important;
  border-color: var(--accent-success) !important;
}

.loop-handle-done {
  background: var(--accent-info) !important;
  border-color: var(--accent-info) !important;
}

/* =========== CONFIG PANEL =========== */
.config-panel {
  width: var(--config-panel-width);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.config-panel input,
.config-panel textarea,
.config-panel select {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.config-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
}

.config-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.config-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.config-section {
  margin-bottom: 20px;
}

.config-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.config-field {
  margin-bottom: 14px;
}

.config-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.config-field input,
.config-field select,
.config-field textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.config-field input:focus,
.config-field select:focus,
.config-field textarea:focus {
  border-color: var(--accent-primary);
}

.config-field textarea {
  resize: vertical;
  min-height: 60px;
}

.config-field input::placeholder,
.config-field textarea::placeholder {
  color: var(--text-tertiary);
}

.config-field .config-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-field .config-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

/* =========== FLOW LIST MODAL =========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Blocking handoff prompt: Zalo runtime mode only changes after app restart. */
.zalo-runtime-restart-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--modal-backdrop-strong);
  backdrop-filter: blur(7px);
}

.zalo-runtime-restart-modal {
  width: min(440px, calc(100vw - 48px));
  padding: 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  text-align: center;
}

.zalo-runtime-restart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
}

.zalo-runtime-restart-modal h2 {
  margin: 0 0 12px;
  font-size: 19px;
}

.zalo-runtime-restart-modal p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.zalo-runtime-restart-modal .zalo-runtime-restart-detail {
  margin-top: 8px;
}

.zalo-runtime-restart-quit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 168px;
  margin-top: 24px;
}

.general-settings-modal-overlay {
  z-index: 9500 !important;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-default);
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.change-password-modal {
  width: min(440px, calc(100vw - 32px));
  max-height: none;
}

.change-password-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.change-password-body {
  display: grid;
  gap: 16px;
}

.change-password-body .stepper-form-group {
  margin-bottom: 0;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-default);
}

/* =========== CUSTOMER FEEDBACK =========== */
.customer-feedback-launcher {
  position: fixed;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  -webkit-app-region: no-drag;
}

.customer-feedback-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-info), var(--accent-primary));
  color: #ffffff;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.customer-feedback-button:hover,
.customer-feedback-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-lg), 0 0 22px rgba(56, 189, 248, 0.22);
  outline: none;
}

.customer-feedback-launcher.is-dragging .customer-feedback-button {
  cursor: grabbing;
}

.customer-feedback-menu {
  position: absolute;
  width: min(268px, calc(100vw - 24px));
  max-height: calc(100vh - var(--titlebar-height) - 24px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  animation: contextMenuIn 0.12s ease-out;
}

.customer-feedback-menu button {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.customer-feedback-menu button:hover,
.customer-feedback-menu button:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.customer-feedback-menu button svg {
  color: var(--accent-info);
  flex-shrink: 0;
}

.customer-feedback-overlay {
  z-index: 5200;
}

.customer-feedback-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
}

.customer-feedback-body {
  padding: 18px 20px 8px;
}

.customer-feedback-textarea {
  min-height: 118px;
  resize: vertical;
}

.customer-feedback-textarea.compact {
  min-height: 82px;
}

.customer-feedback-rating,
.customer-feedback-segmented,
.customer-feedback-image-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-feedback-rating button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.customer-feedback-rating button.active {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.12);
  color: var(--accent-warning);
}

.customer-feedback-rating button:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.45);
  color: var(--accent-warning);
}

.customer-feedback-rating button:disabled,
.customer-feedback-segmented button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.customer-feedback-segmented button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.customer-feedback-segmented button.active {
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(56, 189, 248, 0.12);
  color: var(--text-primary);
}

.customer-feedback-segmented button:hover:not(:disabled) {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.customer-feedback-image-count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 12px;
  font-weight: 650;
}

.customer-feedback-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.customer-feedback-image-item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-tertiary);
}

.customer-feedback-image-item img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-primary);
}

.customer-feedback-image-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customer-feedback-image-meta span,
.customer-feedback-image-meta small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-feedback-image-meta span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.customer-feedback-image-meta small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.customer-feedback-image-remove {
  color: var(--accent-error);
}

@media (max-width: 640px) {
  .customer-feedback-image-list {
    grid-template-columns: 1fr;
  }
}

.campaign-import-modal-overlay {
  z-index: 5100;
  padding: calc(var(--titlebar-height) + 16px) 16px 16px;
}

.campaign-form-modal-overlay:has(.campaign-import-modal-overlay) {
  z-index: 5100;
}

.campaign-import-modal {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - var(--titlebar-height) - 32px);
}

.campaign-import-modal.is-data-group {
  width: min(1080px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - var(--titlebar-height) - 32px));
}

.campaign-import-modal.is-data-group .modal-header {
  padding: 15px 18px;
}

.campaign-import-modal.is-data-group .modal-title {
  font-weight: 700;
}

.campaign-import-modal.is-data-group .modal-body {
  padding: 16px 18px;
}

.campaign-import-modal.is-data-group .modal-footer {
  padding: 13px 18px;
}

.campaign-import-modal.is-data-group .modal-footer .btn {
  min-height: 36px;
  padding-inline: 16px;
  font-size: 12.5px;
}

.campaign-import-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campaign-import-dataset-name {
  margin-bottom: 2px;
}

.campaign-import-dataset-name .stepper-input {
  max-width: 560px;
}

.campaign-import-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  min-height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--border-default);
  scrollbar-width: thin;
}

.campaign-import-tab {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--accent-primary);
  padding: 12px 10px 13px;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.campaign-import-tab:hover:not(:disabled):not(.active) {
  color: var(--accent-primary-hover);
  background: var(--bg-hover);
}

.campaign-import-tab:focus-visible {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: inset 0 0 0 2px var(--border-active);
}

.campaign-import-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.campaign-import-tab.active {
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-bottom-color: var(--bg-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
}

.campaign-import-tab-panel {
  display: grid;
  gap: 10px;
}

.campaign-import-label {
  color: var(--text-primary);
  font-weight: 600;
}

.campaign-import-textarea {
  min-height: 220px;
  resize: vertical;
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

.campaign-import-textarea:focus {
  border-color: var(--accent-primary);
}

.campaign-import-hint {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: italic;
}

.campaign-import-file-button {
  width: fit-content;
}

.campaign-import-file-name {
  font-size: 12px;
}

.campaign-import-file-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.campaign-import-modal.is-data-group .campaign-import-tab {
  padding: 11px 6px 12px;
  font-size: 13.5px;
}

.campaign-import-modal.is-data-group .campaign-import-tab.active {
  margin-bottom: 0;
  border: 0;
  border-bottom: 2px solid var(--accent-primary);
  border-radius: 0;
  background: transparent;
}

.campaign-import-modal.is-data-group .campaign-import-textarea {
  min-height: 210px;
}

.campaign-import-modal.is-data-group .campaign-import-hint {
  font-style: normal;
}

.campaign-import-modal.is-data-group .campaign-import-image-drop {
  min-height: 210px;
}

.data-group-file-import-context {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
}

.data-group-file-import-destination {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-accent-subtle);
  color: var(--text-secondary);
  font-size: 12.5px;
}

.data-group-file-import-destination strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-file-import-type {
  width: min(560px, 100%);
  display: grid;
  gap: 5px;
}

.data-group-file-import-type > span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.data-group-file-import-type .stepper-input {
  height: 42px;
}

.data-group-file-import-type > small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-import-template-file {
  position: relative;
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  padding: 0;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.campaign-import-template-file:hover:not(:has(.campaign-import-template-file-input:disabled)) {
  border-color: var(--border-hover);
  background: var(--bg-tertiary);
}

.campaign-import-template-file:focus-within {
  border-color: var(--border-active);
  box-shadow: 0 0 0 2px var(--bg-accent-subtle);
}

.campaign-import-template-file:has(.campaign-import-template-file-input:disabled),
.campaign-import-template-file[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.campaign-import-template-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.campaign-import-template-file-picker {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 66px 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.campaign-import-template-file:not(.has-file) .campaign-import-template-file-picker {
  padding-right: 16px;
}

.campaign-import-template-file-picker:disabled {
  cursor: not-allowed;
}

.campaign-import-template-file-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.campaign-import-template-file-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.campaign-import-template-file-title,
.campaign-import-template-file-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-import-template-file-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.campaign-import-template-file-meta {
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-import-template-file-remove {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.campaign-import-template-file-remove:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.campaign-import-template-file-remove:focus-visible {
  box-shadow: 0 0 0 2px var(--border-active);
}

.campaign-import-template-file-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.campaign-import-template-status {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  font-size: 13px;
  font-weight: 600;
}

.campaign-import-template-status svg {
  flex: 0 0 auto;
}

.campaign-import-template-status.success {
  color: var(--accent-success);
}

.campaign-import-template-status.error {
  color: var(--accent-error);
}

.campaign-import-template-status.reading {
  color: var(--text-secondary);
}

.campaign-import-template-status.reading svg {
  animation: spin 0.8s linear infinite;
}

.campaign-import-image-drop {
  min-height: 240px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  outline: none;
  padding: 16px;
}

.campaign-import-image-drop:focus {
  border-color: var(--accent-primary);
}

.campaign-import-image-drop img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
}

.campaign-import-empty-media {
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--text-tertiary);
}

.campaign-import-skip-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  width: fit-content;
}

.campaign-import-skip-header input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}

.campaign-import-column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.campaign-import-column-field {
  display: grid;
  gap: 4px;
}

.campaign-import-column-field span {
  color: var(--text-secondary);
  font-size: 12px;
}

.campaign-import-excel-preview {
  display: grid;
  gap: 8px;
}

.campaign-import-preview-scroll {
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.campaign-import-format-row {
  display: flex;
  justify-content: flex-end;
}

.campaign-import-preview-summary {
  color: var(--text-secondary);
  font-size: 12px;
}

.campaign-import-sheet-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
}
.campaign-import-sheet-picker > span { flex: 0 0 auto; }
.campaign-import-sheet-picker .stepper-input {
  width: 200px;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
}
.campaign-import-template-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.campaign-import-template-meta .campaign-import-template-status { font-size: 12px; }
.campaign-import-template-meta .campaign-import-template-status.error { flex-basis: 100%; }
.campaign-import-table-options { display: grid; gap: 14px; min-width: 0; margin-top: 12px; }
.campaign-import-table-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.campaign-import-phone-policy {
  min-width: 0;
  padding: 8px 12px 12px;
  margin: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.campaign-import-phone-policy legend {
  padding: 0 6px;
}
.campaign-import-phone-policy-options { display: flex; align-items: flex-start; gap: 24px; }
.campaign-import-phone-policy label { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; cursor: pointer; }
.campaign-import-phone-policy input { flex-shrink: 0; margin: 3px 0 0; accent-color: var(--accent-primary); }
.campaign-import-phone-policy:disabled label { cursor: default; opacity: 0.6; }
.campaign-import-results { display: grid; gap: 8px; }
.campaign-import-result-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.campaign-import-result-group {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}
.campaign-import-result-group.active { border-color: var(--accent-primary); background: var(--bg-accent-subtle); }
.campaign-import-result-group > button:first-child {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.campaign-import-result-group > button:first-child:focus-visible { outline: 2px solid var(--border-active); outline-offset: -2px; }
.campaign-import-result-group > button:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-import-result-group strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.campaign-import-result-group > .btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  border-color: transparent;
  background: transparent;
}
.campaign-import-result-group > .btn:hover:not(:disabled) { background: var(--bg-hover); }
.campaign-import-submit-hint { margin-right: auto; color: var(--text-secondary); font-size: 13px; }
.campaign-import-preview-table { overflow-x: auto; }
@media (max-width: 720px) {
  .campaign-import-submit-hint { max-width: 50%; }
}
@media (max-width: 540px) {
  .campaign-import-result-groups { grid-template-columns: 1fr; }
}

.campaign-import-preview-table {
  min-height: 180px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.campaign-import-preview-table .campaign-grid {
  min-width: 760px;
}

@media (max-width: 1100px) {
  .campaign-import-tabs {
    gap: 6px;
  }

  .campaign-import-tab {
    padding-inline: 8px;
  }
}

@media (max-width: 900px) {
  .campaign-import-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .data-group-file-import-type {
    width: 100%;
  }

  .campaign-import-template-file-icon,
  .campaign-import-template-file-remove {
    width: 32px;
    height: 32px;
  }

  .campaign-import-template-file-picker {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 56px 12px 12px;
  }

  .campaign-import-template-file:not(.has-file) .campaign-import-template-file-picker {
    padding-right: 12px;
  }

  .campaign-import-column-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-import-tab,
  .campaign-import-template-file,
  .campaign-import-template-file-remove {
    transition: none;
  }

  .campaign-import-template-status.reading svg {
    animation: none;
  }
}

/* =========== MEDIA LIBRARY MODAL =========== */
.media-library-overlay {
  z-index: 9400 !important;
}

.media-library-modal {
  width: min(1180px, calc(100vw - 32px));
  height: min(860px, calc(100vh - 32px));
  max-height: min(860px, calc(100vh - 32px));
}

.media-library-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.media-library-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.media-library-list-section {
  flex: 1 1 auto;
  min-height: 0;
}

.media-library-split {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.media-group-panel,
.media-files-panel {
  min-height: 0;
}

.media-group-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
}

.media-files-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.media-group-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.media-group-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

.media-group-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.media-group-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.media-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}

.media-group-row.active {
  background: var(--bg-accent-subtle);
}

.media-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}

.media-group-item:hover,
.media-group-item.active,
.media-group-row.active .media-group-item {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.media-group-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.media-group-item-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.media-group-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}

.media-group-row-actions .btn-icon {
  width: 26px;
  height: 26px;
}

.media-group-empty {
  padding: 12px 8px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.media-library-section-title,
.media-library-toolbar,
.media-library-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.media-library-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.media-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

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

.media-settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.media-library-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.media-library-toolbar {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}

.media-library-toolbar-main,
.media-library-toolbar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.media-library-toolbar-main {
  flex: 0 0 auto;
}

.media-library-toolbar-tools {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.media-library-upload-button {
  min-height: 34px;
  padding-inline: 14px;
}

.media-library-paste-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.media-library-paste-hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: inherit;
  font-size: 10px;
  line-height: 16px;
}

.media-library-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 180px;
  width: auto;
  min-width: 140px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.media-library-search:focus-within {
  border-color: var(--border-active);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 2px var(--bg-accent-subtle);
}

.media-library-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
}

.media-library-active-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  max-width: 220px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.media-library-active-group span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-library-refresh {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--text-secondary);
}

.media-library-refresh:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.media-library-bulk-action-bar {
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.media-group-manage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.media-group-manage-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  min-width: 0;
  min-height: 0;
}

.media-group-manage-head,
.media-group-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.media-group-manage-head {
  justify-content: space-between;
  min-height: 34px;
}

.media-group-manage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.media-group-manage-item {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  cursor: pointer;
}

.media-group-manage-item:hover {
  border-color: var(--border-active);
  background: var(--bg-hover);
}

.media-group-manage-column:last-child .media-group-manage-item {
  cursor: default;
}

.media-group-manage-item .media-library-name-cell {
  flex: 1 1 auto;
  min-width: 0;
}

.media-group-manage-meta {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 11px;
  white-space: nowrap;
}

.media-group-manage-empty {
  padding: 10px 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.media-library-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 30px;
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.media-library-pagination > span:first-child {
  margin-right: auto;
}

.media-library-pagination .btn {
  min-width: 30px;
  min-height: 28px;
  padding-inline: 7px;
}

.media-library-modal .media-library-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.media-library-grid .campaign-grid {
  min-width: 1184px;
  table-layout: fixed;
}

.media-library-grid .campaign-grid tr.selected td {
  background: rgba(99, 102, 241, 0.12);
}

.media-library-grid .campaign-grid tr.is-disabled td {
  color: var(--text-tertiary);
}

.media-library-grid .campaign-grid tr.is-disabled .media-library-name-cell {
  color: var(--text-tertiary);
}

.media-library-row-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.media-library-file-name-cell {
  padding-right: 24px;
}

.media-library-grid .media-library-name-cell {
  width: 100%;
  min-width: 0;
}

.media-hover-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-hover-preview-button {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
}

.media-hover-preview-button:hover,
.media-hover-preview-button:focus-visible {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.media-hover-preview-popover {
  position: fixed;
  z-index: 5000;
  width: 308px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.media-hover-preview-title {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-hover-preview-popover img,
.media-hover-preview-popover video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.media-hover-preview-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 128px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-align: center;
  font-size: 12px;
}

.media-hover-preview-file small {
  color: var(--text-tertiary);
}

.media-library-name-cell {
  min-width: 160px;
  color: var(--text-primary);
}

.media-library-name-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-type-cell,
.media-library-path-cell,
.media-library-url-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-url-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.media-url-cell > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-inline-source {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 14px;
  vertical-align: middle;
}

@media (max-width: 860px) {
  .media-library-split {
    grid-template-columns: 1fr;
  }

  .media-group-panel {
    max-height: 260px;
  }

  .media-group-manage {
    grid-template-columns: 1fr;
  }

  .media-library-toolbar {
    flex-wrap: wrap;
  }

  .media-settings-grid {
    grid-template-columns: 1fr;
  }

  .media-library-toolbar-main,
  .media-library-toolbar-tools {
    width: 100%;
  }

  .media-library-toolbar-main {
    flex-wrap: wrap;
  }

  .media-library-toolbar-tools {
    flex-basis: 100%;
  }

  .media-library-search {
    flex: 1;
    min-width: 0;
  }
}

/* Media library redesign — follows the source layout in Modal Media.dc.html. */
.media-library-modal {
  width: min(1280px, calc(100vw - 32px));
  height: min(880px, calc(100vh - 32px));
  max-height: min(880px, calc(100vh - 32px));
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}

.media-library-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #e8edf4;
  background: var(--bg-elevated);
}

.media-library-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #e9e7fb;
  color: #4f46e5;
}

.media-library-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.media-library-heading h2,
.media-library-heading p {
  margin: 0;
}

.media-library-heading h2 {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.media-library-heading p {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 12.5px;
}

.media-library-header-usage {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid #e4eaf2;
  border-radius: 10px;
  background: #fbfcfe;
}

.media-library-usage-count {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-library-usage-count > span {
  color: #7b8ca3;
  font-size: 11px;
}

.media-library-usage-count > strong {
  margin-top: 1px;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.media-library-usage-count > strong small {
  margin-left: 1px;
  color: #9aa8b9;
  font-size: inherit;
  font-weight: 600;
}

.media-library-usage-meter {
  flex: 0 0 70px;
  width: 70px;
}

.media-library-usage-meter > span {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.media-library-usage-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #5b57e8;
}

.media-library-usage-meter > small {
  display: block;
  margin-top: 4px;
  color: #9aa8b9;
  font-size: 10.5px;
  white-space: nowrap;
}

button.btn-icon.media-library-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  border-radius: 8px;
  color: #7b8ca3;
}

.media-library-body {
  position: relative;
  flex: 1 1 auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.media-library-body > .media-library-split {
  flex: 1 1 auto;
  height: 100%;
}

.media-library-split {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 0;
}

.media-settings-panel {
  position: absolute;
  top: 12px;
  left: 248px;
  right: 12px;
  z-index: 45;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}

.media-group-panel {
  gap: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #e8edf4;
  border-radius: 0;
  background: #fbfcfe;
}

.media-group-panel-top {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 13px 10px;
}

.media-group-panel-head {
  min-height: 24px;
  color: #8b9aab;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.media-group-add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  color: #4f46e5;
  cursor: pointer;
}

.media-group-add-button:hover {
  border-color: #c7cbf5;
  background: #eceafd;
}

.media-group-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  background: #fff;
  color: #9aa8b9;
}

.media-group-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #334155;
  font-size: 12px;
}

.media-group-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 0;
  border: 0;
}

.media-group-form .stepper-input {
  min-width: 0;
  height: 32px;
  border-color: #5b57e8;
}

.media-group-form .btn,
.media-group-form .btn-icon {
  min-height: 32px;
  height: 32px;
}

.media-group-form .media-group-form-actions {
  gap: 4px;
  flex-wrap: nowrap;
}

.media-group-list {
  gap: 2px;
  flex: 1 1 auto;
  padding: 0 9px 10px;
}

.media-group-row {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.media-group-item {
  min-height: 35px;
  padding: 0 9px;
  border-radius: 9px;
  color: #475569;
  font-size: 12.5px;
}

.media-group-item:hover,
.media-group-item.active,
.media-group-row.active .media-group-item {
  background: #eef0fe;
  color: #0f172a;
}

.media-group-item.active,
.media-group-row.active .media-group-item {
  box-shadow: inset 2px 0 0 #5b57e8;
  font-weight: 700;
}

.media-group-item-main svg {
  color: #9aa8b9;
}

.media-group-item.active .media-group-item-main svg,
.media-group-row.active .media-group-item-main svg {
  color: #5b57e8;
}

.media-group-count {
  min-width: 25px;
  height: 19px;
  border-radius: 999px;
  background: #eef2f7;
  color: #8b9aab;
  font-weight: 600;
}

.media-group-item.active .media-group-count,
.media-group-row.active .media-group-count {
  background: #e0e2fb;
  color: #4f46e5;
}

.media-group-row-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  padding: 0;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.media-group-row:hover .media-group-row-actions,
.media-group-row-actions:hover {
  display: inline-flex;
}

.media-group-storage-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 45px;
  margin-top: auto;
  padding: 9px 11px 9px 13px;
  border-top: 1px solid #e8edf4;
  background: #fff;
  color: #7b8ca3;
  font-size: 11.5px;
}

.media-group-storage-status span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-files-panel {
  gap: 0;
  background: var(--bg-elevated);
}

.media-library-viewbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #eef2f7;
}

.media-category-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: #f1f4f9;
}

.media-category-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7b8ca3;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.media-category-tabs button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.media-category-tabs button span {
  padding: 1px 6px;
  border-radius: 999px;
  background: #e7ecf3;
  color: #9aa8b9;
  font-size: 10.5px;
  font-weight: 700;
}

.media-category-tabs button.active span {
  background: #eceafd;
  color: #4f46e5;
}

.media-sort-menu {
  position: relative;
  margin-left: auto;
}

.media-sort-menu > button,
.media-filter-menu > button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.media-sort-menu > button.active,
.media-filter-menu > button.active {
  border-color: #c7cbf5;
  background: #eceafd;
  color: #4f46e5;
}

.media-sort-popover {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 40;
  width: 212px;
  padding: 5px;
  border: 1px solid #e4eaf2;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.media-sort-popover button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.media-sort-popover button span {
  flex: 1 1 auto;
  text-align: left;
}

.media-sort-popover button:hover,
.media-sort-popover button.active {
  background: #f5f5ff;
  color: #4f46e5;
}

.media-sort-popover button.active {
  font-weight: 600;
}

.media-view-switcher {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: #f1f4f9;
}

.media-view-switcher button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7b8ca3;
  cursor: pointer;
}

.media-view-switcher button.active {
  background: #fff;
  color: #4f46e5;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.media-library-toolbar {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 9px;
  padding: 11px 16px;
  border-bottom: 1px solid #eef2f7;
}

.media-library-upload-split {
  display: flex;
  align-items: stretch;
  height: 36px;
  overflow: hidden;
  border-radius: 9px;
  background: #5b57e8;
}

.media-library-upload-split > span {
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.media-library-upload-button,
.media-library-upload-chevron {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.media-library-upload-button {
  gap: 7px;
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.media-library-upload-chevron {
  justify-content: center;
  width: 32px;
  padding: 0;
}

.media-library-upload-button:disabled,
.media-library-upload-chevron:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.media-library-paste-hint {
  min-height: 36px;
  height: 36px;
  border-color: #d7dfea;
  border-style: dashed;
  border-radius: 9px;
  background: #fff;
  color: #7b8ca3;
}

.media-library-search {
  flex: 1 1 220px;
  min-width: 140px;
  min-height: 36px;
  height: 36px;
  border-color: #dbe3ec;
  border-radius: 9px;
  background: #fff;
}

.media-library-search input {
  font-size: 12.5px;
}

.media-filter-menu,
.media-selection-group-menu {
  position: relative;
}

.media-selection-group-menu > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.media-selection-group-menu > summary::-webkit-details-marker {
  display: none;
}

.media-filter-popover,
.media-selection-group-menu > div {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  width: 250px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.media-filter-scroll {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}

.media-extension-popover label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.media-date-popover .media-filter-scroll button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.media-extension-popover label.active,
.media-date-popover .media-filter-scroll button.active {
  background: #f5f5ff;
  color: #4f46e5;
}

.media-date-popover .media-filter-scroll button.active {
  font-weight: 600;
}

.media-extension-popover label > span:nth-child(3),
.media-date-popover .media-filter-scroll button > span:first-child {
  flex: 1 1 auto;
  text-align: left;
}

.media-extension-popover label > small,
.media-date-popover .media-filter-scroll button > small {
  color: #9aa8b9;
  font-size: 11.5px;
  font-weight: 400;
}

.media-extension-popover input[type='checkbox'] {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 15px;
  appearance: none;
  border: 1.5px solid #c3cad6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.media-extension-popover input[type='checkbox']:checked {
  border: 1px solid #5b57e8;
  background: #5b57e8;
}

.media-extension-popover input[type='checkbox']:checked::before {
  display: block;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: '';
  transform: translateY(-1px) rotate(45deg);
}

.media-filter-popover-actions {
  display: flex;
  gap: 8px;
  margin: 6px -6px -6px;
  padding: 9px 10px;
  border-top: 1px solid #eef2f7;
  background: #fbfcfe;
}

.media-filter-popover-actions .btn {
  flex: 1 1 0;
  justify-content: center;
  height: 31px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.media-date-popover {
  width: 264px;
}

.media-custom-date {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px -6px -6px;
  padding: 10px;
  border-top: 1px solid #eef2f7;
  background: #fbfcfe;
}

.media-custom-date strong {
  color: #8b9aab;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.media-custom-date > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.media-custom-date input {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 0 6px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
}

.media-library-refresh {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

.media-filter-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 43px;
  padding: 7px 16px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}

.media-filter-chips > span,
.media-filter-chips small {
  color: #8b9aab;
  font-size: 11.5px;
}

.media-filter-chips button:not(.clear) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #ddd9fb;
  border-radius: 999px;
  background: #eceafd;
  color: #4f46e5;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.media-filter-chips button.clear {
  border: 0;
  background: transparent;
  color: #7b8ca3;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.media-filter-chips small {
  margin-left: auto;
}

.media-library-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
}

.media-library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 260px;
  color: #8b9aab;
  font-size: 13px;
}

.media-card-grid {
  display: grid;
  gap: 12px;
}

.media-card-grid.is-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.media-card-grid.is-large {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-card-grid.is-grid.category-video,
.media-card-grid.is-overview.category-video {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-card-grid.is-large.category-video {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-card-grid.is-grid.category-document {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.media-card-grid.is-large.category-document {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-card-grid.is-overview.category-image {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.media-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4eaf2;
  border-radius: 11px;
  background: #fff;
  color: #0f172a;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.media-card.selectable {
  cursor: pointer;
}

.media-card.selectable:hover,
.media-card.selectable:focus-visible {
  border-color: #c7cbf5;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
  outline: 0;
  transform: translateY(-1px);
}

.media-card.selected {
  border-color: #5b57e8;
  box-shadow: 0 0 0 3px rgba(91, 87, 232, 0.16);
}

.media-card.is-disabled {
  opacity: 0.56;
}

.media-card-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8eef7;
  color: #64748b;
}

.media-card-preview.is-video {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #475569, #1e293b);
  color: #fff;
}

.media-card-preview.is-document {
  height: 94px;
  aspect-ratio: auto;
  background: #f7f9fc;
}

.media-card.category-document .media-card-details {
  padding: 0 11px 12px;
}

.media-card.category-video .media-card-details {
  padding: 9px 10px 10px;
}

.media-card.category-image .media-card-name,
.media-card.category-video .media-card-name,
.media-card.category-document .media-card-name {
  font-size: 12.5px;
}

.media-card.category-video .media-card-meta,
.media-card.category-document .media-card-meta {
  margin-top: 3px;
  font-size: 11px;
}

.media-card.category-document .media-card-extension {
  display: none;
}

.media-card.category-video .media-card-extension {
  right: auto;
  left: 8px;
}

.media-card-preview img,
.media-card-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  transform: translate(-50%, -50%);
}

.media-video-play::after {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
  content: '';
  transform: translate(-50%, -50%);
}

.media-card-grid.is-overview .media-card-extension,
.media-card-grid.is-overview.category-video .media-card-check,
.media-card-grid.is-overview .media-card-actions {
  display: none;
}

.media-card-grid.is-overview.category-image .media-card-details {
  padding: 7px 8px 8px;
}

.media-card-grid.is-overview.category-image .media-card-name {
  font-size: 11.5px;
}

.media-card-extension {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

.media-card-check {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #cfd8e4;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: #fff;
}

.media-card-check.checked {
  border-color: #5b57e8;
  background: #5b57e8;
}

.media-card-details {
  padding: 8px 9px 9px;
}

.media-card-name {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-meta {
  margin-top: 2px;
  overflow: hidden;
  color: #9aa8b9;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.media-card:hover .media-card-actions,
.media-card:focus-within .media-card-actions {
  display: flex;
}

.media-card-actions .media-hover-preview-button,
.media-card-actions .btn-icon {
  width: 26px;
  height: 26px;
}

.media-file-extension-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 58px;
  padding: 0 8px;
  border-radius: 14px;
  background: #e3ecfd;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.media-file-extension-badge.extension-jpg,
.media-file-extension-badge.extension-doc,
.media-file-extension-badge.extension-docx {
  background: #e3ecfd;
  color: #1d4ed8;
}

.media-file-extension-badge.extension-png {
  background: #dff0fb;
  color: #0369a1;
}

.media-file-extension-badge.extension-webp {
  background: #ddf2ee;
  color: #0f766e;
}

.media-file-extension-badge.extension-gif {
  background: #ece5fd;
  color: #7c3aed;
}

.media-file-extension-badge.extension-mp4 {
  background: #fdefd9;
  color: #b45309;
}

.media-file-extension-badge.extension-mov {
  background: #fdeadf;
  color: #c2410c;
}

.media-file-extension-badge.extension-pdf {
  background: #fde8e8;
  color: #b91c1c;
}

.media-file-extension-badge.extension-xls,
.media-file-extension-badge.extension-xlsx {
  background: #ddf5ec;
  color: #047857;
}

.media-file-extension-badge.extension-txt {
  background: #eef2f7;
  color: #475569;
}

.media-file-extension-badge.is-compact {
  min-width: auto;
  height: auto;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 10.5px;
}

.media-overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.media-overview-section {
  min-width: 0;
}

.media-overview-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.media-overview-head strong {
  color: #0f172a;
  font-size: 13px;
}

.media-overview-head > span {
  padding: 2px 7px;
  border-radius: 6px;
  background: #eef2f7;
  color: #5b6b80;
  font-size: 11px;
  font-weight: 600;
}

.media-overview-head button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #4f46e5;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.media-overview-doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.media-overview-doc-list > button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #e4eaf2;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.media-overview-doc-list > button:hover,
.media-overview-doc-list > button.selected {
  border-color: #c7cbf5;
  background: #f5f5ff;
}

.media-overview-doc-list > button:disabled {
  cursor: default;
  opacity: 1;
}

.media-overview-doc-list strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-overview-doc-list > button > span:nth-last-child(2) {
  width: 90px;
  color: #7b8ca3;
  font-size: 11.5px;
}

.media-overview-doc-list time {
  width: 130px;
  color: #9aa8b9;
  font-size: 11.5px;
}

.media-list-shell {
  overflow: hidden;
  border: 1px solid #e4eaf2;
  border-radius: 11px;
}

.media-list-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.media-list-table th,
.media-list-table td {
  height: 43px;
  padding: 7px 10px;
  border-bottom: 1px solid #f0f3f8;
  color: #475569;
  font-size: 12px;
  text-align: left;
}

.media-list-table th {
  height: 38px;
  background: #f8fafc;
  color: #7b8ca3;
  font-size: 11.5px;
  font-weight: 500;
}

.media-list-table tbody tr:last-child td {
  border-bottom: 0;
}

.media-list-table tbody tr.selectable {
  cursor: pointer;
}

.media-list-table tbody tr.selectable:hover td {
  background: #fbfcfe;
}

.media-list-table tbody tr.selected td {
  background: #f5f5ff;
}

.media-list-table tbody tr.is-disabled {
  opacity: 0.55;
}

.media-list-check-cell {
  width: 36px;
  text-align: center !important;
}

.media-list-preview-cell {
  width: 54px;
}

.media-list-shell.category-video .media-list-preview-cell {
  width: 76px;
}

.media-list-extension-cell {
  width: 88px;
}

.media-list-shell.category-video .media-list-extension-cell {
  width: 80px;
}

.media-list-shell.category-document .media-list-extension-cell {
  width: 56px;
}

.media-list-size-cell {
  width: 96px;
}

.media-list-date-cell {
  width: 150px;
}

.media-list-group-cell {
  width: 130px;
}

.media-list-group-cell > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-list-action-cell {
  width: 40px;
  text-align: right !important;
  white-space: nowrap;
}

.media-list-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
  overflow: hidden;
  border-radius: 6px;
  background: #e8eef7;
  color: #64748b;
}

.media-list-thumbnail.is-video {
  width: 54px;
  height: 32px;
  background: #334155;
  color: #fff;
}

.media-list-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-list-file-name {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-selection-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 16px;
  border-top: 1px solid #e4eaf2;
  background: #eef0fe;
  color: #3730a3;
  font-size: 12.5px;
}

.media-library-selection-bar .spacer {
  flex: 1 1 auto;
}

.media-selection-group-menu > summary {
  height: 32px;
  border-color: #c7cbf5;
  border-radius: 8px;
  color: #4f46e5;
}

.media-selection-group-menu > div {
  top: auto;
  right: auto;
  bottom: calc(100% + 5px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 230px;
  max-height: 260px;
  overflow-y: auto;
}

.media-selection-group-menu > div > button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.media-selection-group-menu > div > button:hover {
  background: #f5f5ff;
  color: #4f46e5;
}

.media-selection-group-menu > div > button small {
  margin-left: auto;
  color: #9aa8b9;
}

.media-library-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid #e4eaf2;
  background: #fbfcfe;
}

.media-library-footer > span {
  min-width: 0;
  overflow: hidden;
  color: #7b8ca3;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-footer-actions,
.media-library-pager {
  display: flex;
  align-items: center;
  gap: 12px;
}

.media-library-footer-actions > .btn {
  height: 34px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
}

.media-library-footer-actions > .btn.btn-primary {
  padding-inline: 16px;
}

.media-library-pager button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
}

.media-library-pager button:disabled {
  color: #c3cad6;
  cursor: default;
}

.media-library-pager span {
  color: #475569;
  font-size: 12.5px;
  white-space: nowrap;
}

.media-library-footer-actions > i {
  width: 1px;
  height: 20px;
  background: #e4eaf2;
}

/* Keep the Media modal consistent with the app's active dark theme. */
body:not(.theme-light) .media-library-modal {
  border-color: var(--border-strong);
  color-scheme: dark;
}

body:not(.theme-light) .media-library-header,
body:not(.theme-light) .media-settings-panel,
body:not(.theme-light) .media-files-panel,
body:not(.theme-light) .media-library-content,
body:not(.theme-light) .media-group-storage-status,
body:not(.theme-light) .media-library-footer {
  background: var(--bg-elevated);
}

body:not(.theme-light) .media-group-panel,
body:not(.theme-light) .media-library-header-usage,
body:not(.theme-light) .media-filter-chips,
body:not(.theme-light) .media-filter-popover-actions,
body:not(.theme-light) .media-custom-date,
body:not(.theme-light) .media-list-table th {
  background: var(--bg-secondary);
}

body:not(.theme-light) .media-group-add-button,
body:not(.theme-light) .media-group-search,
body:not(.theme-light) .media-group-row-actions,
body:not(.theme-light) .media-card-actions,
body:not(.theme-light) .media-category-tabs button.active,
body:not(.theme-light) .media-sort-menu > button,
body:not(.theme-light) .media-sort-popover,
body:not(.theme-light) .media-view-switcher button.active,
body:not(.theme-light) .media-library-paste-hint,
body:not(.theme-light) .media-library-search,
body:not(.theme-light) .media-filter-menu > button,
body:not(.theme-light) .media-filter-popover,
body:not(.theme-light) .media-custom-date input,
body:not(.theme-light) .media-card,
body:not(.theme-light) .media-overview-doc-list > button,
body:not(.theme-light) .media-selection-group-menu > summary,
body:not(.theme-light) .media-selection-group-menu > div,
body:not(.theme-light) .media-library-pager button {
  background: var(--bg-node);
}

body:not(.theme-light) .media-category-tabs,
body:not(.theme-light) .media-view-switcher,
body:not(.theme-light) .media-card-preview,
body:not(.theme-light) .media-card-preview.is-document,
body:not(.theme-light) .media-list-thumbnail,
body:not(.theme-light) .media-library-usage-meter > span {
  background: var(--bg-tertiary);
}

body:not(.theme-light) .media-library-header-icon,
body:not(.theme-light) .media-group-add-button:hover,
body:not(.theme-light) .media-filter-chips button:not(.clear) {
  background: var(--bg-accent-subtle);
  color: var(--accent-primary-hover);
}

body:not(.theme-light) .media-group-item:hover,
body:not(.theme-light) .media-group-item.active,
body:not(.theme-light) .media-group-row.active .media-group-item,
body:not(.theme-light) .media-sort-menu > button.active,
body:not(.theme-light) .media-filter-menu > button.active,
body:not(.theme-light) .media-sort-popover button:hover,
body:not(.theme-light) .media-sort-popover button.active,
body:not(.theme-light) .media-extension-popover label.active,
body:not(.theme-light) .media-date-popover .media-filter-scroll button.active,
body:not(.theme-light) .media-overview-doc-list > button:hover,
body:not(.theme-light) .media-overview-doc-list > button.selected,
body:not(.theme-light) .media-list-table tbody tr.selected td,
body:not(.theme-light) .media-selection-group-menu > div > button:hover {
  background: var(--bg-accent-subtle);
}

body:not(.theme-light) .media-library-selection-bar {
  background: var(--bg-accent-subtle);
  color: #c4b5fd;
}

body:not(.theme-light) .media-sort-menu > button.active,
body:not(.theme-light) .media-filter-menu > button.active,
body:not(.theme-light) .media-sort-popover button.active,
body:not(.theme-light) .media-date-popover .media-filter-scroll button.active {
  color: #a78bfa;
}

body:not(.theme-light) .media-group-count,
body:not(.theme-light) .media-category-tabs button span,
body:not(.theme-light) .media-overview-head > span {
  background: var(--bg-tertiary);
}

body:not(.theme-light) .media-group-item.active .media-group-count,
body:not(.theme-light) .media-group-row.active .media-group-count,
body:not(.theme-light) .media-category-tabs button.active span {
  background: var(--bg-accent-subtle);
  color: #a78bfa;
}

body:not(.theme-light) .media-library-heading h2,
body:not(.theme-light) .media-library-header-usage strong,
body:not(.theme-light) .media-group-item:hover,
body:not(.theme-light) .media-group-item.active,
body:not(.theme-light) .media-group-row.active .media-group-item,
body:not(.theme-light) .media-category-tabs button.active,
body:not(.theme-light) .media-card,
body:not(.theme-light) .media-card-name,
body:not(.theme-light) .media-overview-head strong,
body:not(.theme-light) .media-overview-doc-list strong,
body:not(.theme-light) .media-list-file-name {
  color: var(--text-primary);
}

body:not(.theme-light) .media-library-usage-count > span,
body:not(.theme-light) .media-library-usage-count > strong small,
body:not(.theme-light) .media-library-usage-meter > small {
  color: var(--text-tertiary);
}

body:not(.theme-light) .media-library-usage-meter i {
  background: var(--accent-primary);
}

body:not(.theme-light) .media-extension-popover input[type='checkbox'] {
  border-color: var(--border-strong);
  background: var(--bg-node);
}

body:not(.theme-light) .media-extension-popover input[type='checkbox']:checked {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

body:not(.theme-light) .media-group-item,
body:not(.theme-light) .media-sort-menu > button,
body:not(.theme-light) .media-sort-popover button,
body:not(.theme-light) .media-filter-menu > button,
body:not(.theme-light) .media-extension-popover label,
body:not(.theme-light) .media-date-popover .media-filter-scroll button,
body:not(.theme-light) .media-custom-date input,
body:not(.theme-light) .media-overview-doc-list > button,
body:not(.theme-light) .media-list-table th,
body:not(.theme-light) .media-list-table td,
body:not(.theme-light) .media-library-pager span,
body:not(.theme-light) .media-library-pager button,
body:not(.theme-light) .media-selection-group-menu > summary,
body:not(.theme-light) .media-selection-group-menu > div > button {
  color: var(--text-secondary);
}

body:not(.theme-light) .media-library-pager button:disabled {
  color: var(--text-tertiary);
}

body:not(.theme-light) .media-library-heading p,
body:not(.theme-light) .media-group-panel-head,
body:not(.theme-light) .media-group-search,
body:not(.theme-light) .media-group-search input,
body:not(.theme-light) .media-group-storage-status,
body:not(.theme-light) .media-category-tabs button,
body:not(.theme-light) .media-category-tabs button span,
body:not(.theme-light) .media-card-meta,
body:not(.theme-light) .media-filter-chips > span,
body:not(.theme-light) .media-filter-chips small,
body:not(.theme-light) .media-library-footer > span {
  color: var(--text-tertiary);
}

body:not(.theme-light) .media-library-modal :is(
  .media-library-header,
  .media-library-header-usage,
  .media-settings-panel,
  .media-group-panel,
  .media-group-search,
  .media-group-storage-status,
  .media-library-viewbar,
  .media-library-toolbar,
  .media-sort-menu > button,
  .media-sort-popover,
  .media-library-paste-hint,
  .media-library-search,
  .media-filter-menu > button,
  .media-filter-popover,
  .media-filter-popover-actions,
  .media-custom-date,
  .media-custom-date input,
  .media-filter-chips,
  .media-card,
  .media-overview-doc-list > button,
  .media-list-shell,
  .media-list-table th,
  .media-list-table td,
  .media-library-selection-bar,
  .media-selection-group-menu > summary,
  .media-selection-group-menu > div,
  .media-library-footer,
  .media-library-pager button
) {
  border-color: var(--border-default);
}

body:not(.theme-light) .media-list-table tbody tr.selectable:hover td {
  background: var(--bg-hover);
}

body:not(.theme-light) .media-library-footer-actions > i {
  background: var(--border-default);
}

@media (max-width: 1100px) {
  .media-library-split {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .media-settings-panel {
    left: 222px;
  }

  .media-category-tabs button {
    padding: 0 9px;
  }

  .media-library-toolbar {
    flex-wrap: wrap;
  }

  .media-library-search {
    order: 3;
    flex-basis: 100%;
  }
}

@media (max-width: 820px) {
  .media-library-header-usage,
  .media-library-heading p {
    display: none;
  }

  .media-library-split {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .media-group-panel {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid #e8edf4;
  }

  .media-group-storage-status {
    display: none;
  }

  .media-files-panel {
    min-height: 560px;
  }

  .media-library-viewbar,
  .media-library-footer {
    flex-wrap: wrap;
  }

  .media-sort-menu {
    margin-left: 0;
  }

  .media-category-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .media-library-footer-actions {
    margin-left: auto;
  }

  .media-settings-panel {
    left: 12px;
  }
}

.general-settings-modal {
  width: min(1480px, calc(100vw - 32px));
  height: min(740px, calc(100vh - 32px));
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.general-settings-header {
  min-height: 74px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-secondary);
}

.general-settings-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

.general-settings-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.general-settings-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

.general-settings-sidebar {
  padding: 14px;
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.general-settings-nav-item {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.general-settings-nav-item.active,
.general-settings-nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-default);
}

.general-settings-content {
  min-width: 0;
  overflow-y: auto;
  padding: 18px;
}

.content-template-manager-modal {
  width: min(1120px, calc(100vw - 32px));
}

.content-template-manager-content {
  flex: 1;
  min-height: 0;
}

.general-settings-content.zalo-blocklist-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-sync-settings {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-sync-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.chat-sync-settings-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}

.chat-sync-settings-head p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.chat-sync-effective-status {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  font-size: 12px;
  font-weight: 700;
}

.chat-sync-effective-status.is-enabled {
  color: var(--accent-success);
  border-color: var(--accent-success);
  background: rgba(52, 211, 153, 0.1);
}

.chat-sync-product-list,
.chat-sync-empty {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  overflow: hidden;
}

.chat-sync-empty {
  padding: 20px;
  color: var(--text-secondary);
  font-size: 13px;
}

.chat-sync-product-row {
  min-height: 58px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border-default);
}

.chat-sync-product-row:last-child {
  border-bottom: 0;
}

.chat-sync-product-header {
  min-height: 40px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  font-size: 12px;
  font-weight: 700;
}

.chat-sync-product-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chat-sync-product-name strong {
  color: var(--text-primary);
  font-size: 13px;
}

.chat-sync-product-name span {
  color: var(--text-secondary);
  font-size: 12px;
}

.chat-sync-product-name .chat-sync-product-expired {
  color: var(--accent-error);
}

.chat-sync-readonly-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.chat-sync-readonly-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

.akabiz-integration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.akabiz-integration-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.5fr) 132px;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  overflow: hidden;
}

.akabiz-integration-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.akabiz-integration-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: rgba(124, 92, 252, 0.14);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.akabiz-integration-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.akabiz-integration-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.akabiz-username-field {
  min-width: 0;
}

.akabiz-edit-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.akabiz-username-field label {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.akabiz-integration-status {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  color: var(--accent-success);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  min-width: 0;
}

.akabiz-integration-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.akabiz-integration-summary.desktop {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.5fr);
}

.akabiz-integration-info {
  min-width: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  padding: 8px 10px;
}

.akabiz-integration-info span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
}

.akabiz-integration-info strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.akabiz-integration-status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.akabiz-action-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.akabiz-integration-card.editing .akabiz-action-stack {
  padding-top: 24px;
}

.akabiz-integrate-button {
  width: 100%;
  justify-content: center;
}

.akabiz-cancel-button {
  width: 100%;
  justify-content: center;
}

.akabiz-path-input-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
}

.akabiz-path-button {
  width: 36px;
  height: 36px;
}

.content-template-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-template-editor {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  padding: 14px;
}

.content-template-editor-head,
.content-template-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.content-template-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.content-template-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.content-template-field {
  min-width: 0;
}

.content-template-field.full {
  grid-column: auto;
}

.content-template-field label {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.content-template-textarea {
  min-height: 160px;
}

.content-template-editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.akabiz-tag-editor {
  max-width: 640px;
  padding: 12px;
}

.akabiz-tag-editor .content-template-editor-head {
  margin-bottom: 10px;
}

.akabiz-tag-form-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.akabiz-tag-save-button {
  min-width: 126px;
  height: 36px;
  white-space: nowrap;
}

.content-template-search {
  min-width: 260px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-tertiary);
  padding: 0 10px;
}

.content-template-search input {
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
}

.content-template-table-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  overflow: auto;
}

.content-template-table {
  min-width: 720px;
}

.content-template-name {
  width: 220px;
  max-width: 220px;
  color: var(--text-primary);
  font-weight: 700;
}

.content-template-preview {
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

.content-template-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.zalo-blocklist-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  height: 100%;
}

.zalo-blocklist-editor {
  flex: 0 0 auto;
  padding: 16px;
}

.zalo-blocklist-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) 112px;
  gap: 16px;
  align-items: end;
}

.zalo-blocklist-toolbar .stepper-select,
.zalo-blocklist-toolbar .stepper-input {
  width: 100%;
}

.zalo-account-select-wrap {
  position: relative;
}

.zalo-account-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.zalo-account-select {
  height: 40px;
  padding: 0 38px 0 12px;
  appearance: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.zalo-account-select:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.zalo-account-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12);
}

.zalo-account-select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.zalo-account-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.zalo-blocklist-toolbar .stepper-input {
  height: 40px;
}

.zalo-blocklist-create-btn {
  height: 40px;
  justify-content: center;
}

.zalo-blocklist-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) repeat(2, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.zalo-blocklist-panel {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  padding: 12px;
  overflow: hidden;
}

.zalo-blocklist-panel-head {
  flex: 0 0 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.zalo-blocklist-panel-title {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zalo-blocklist-panel-meta {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.3;
}

.zalo-blocklist-search {
  min-width: 0;
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-tertiary);
  padding: 0 10px;
}

.zalo-blocklist-search input {
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
}

.zalo-blocklist-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
}

.zalo-blocklist-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 30px;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
}

.zalo-blocklist-row:hover,
.zalo-blocklist-row.is-active {
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
}

.zalo-blocklist-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.zalo-blocklist-row-main strong,
.zalo-blocklist-row-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zalo-blocklist-row-main strong {
  color: var(--text-primary);
  font-size: 13px;
}

.zalo-blocklist-row-main span {
  color: var(--text-tertiary);
  font-size: 12px;
}

.zalo-blocklist-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: auto;
}

.zalo-blocklist-table-wrap .content-template-table {
  min-width: 100%;
}

.zalo-blocklist-table {
  width: 100%;
  table-layout: fixed;
}

.zalo-blocklist-table th,
.zalo-blocklist-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zalo-blocklist-table .zalo-blocklist-check-col {
  width: 42px;
  text-align: center;
}

.zalo-blocklist-table .zalo-blocklist-uid-col {
  width: 46%;
  text-align: right;
}

.zalo-blocklist-name-cell {
  color: var(--text-primary);
}

.zalo-blocklist-panel-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.zalo-blocklist-pagination {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.zalo-blocklist-pagination > span:first-child {
  margin-right: auto;
}

@media (max-width: 1180px) {
  .general-settings-content.zalo-blocklist-content {
    overflow-y: auto;
  }

  .zalo-blocklist-settings {
    height: auto;
  }

  .zalo-blocklist-layout {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .zalo-blocklist-panel {
    max-height: none;
  }

  .zalo-blocklist-list,
  .zalo-blocklist-table-wrap {
    max-height: 360px;
  }

  .zalo-blocklist-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.email-notification-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.email-notification-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.email-notification-toggle {
  width: fit-content;
}

.email-notification-recipient-input {
  width: 100%;
}

.email-notification-option-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.email-notification-time-field {
  max-width: 240px;
}

.btn-icon.danger {
  color: var(--accent-danger, #ef4444);
}

.btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 900px) {
  .content-template-form-grid,
  .content-template-editor-head,
  .content-template-list-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .content-template-search {
    min-width: 0;
    width: 100%;
  }

  .akabiz-tag-editor {
    max-width: none;
  }

  .akabiz-tag-form-row {
    grid-template-columns: 1fr;
  }

  .akabiz-tag-save-button {
    width: 100%;
  }

  .email-notification-option-list {
    grid-template-columns: 1fr;
  }
}

.external-campaign-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* =========== ACTION MANAGER MODAL =========== */
.action-manager-modal {
  width: min(1080px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.action-manager-header {
  height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.action-manager-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.action-manager-header span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.action-manager-mode-bar {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.action-manager-mode-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-manager-mode-copy strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.action-manager-mode-copy span {
  color: var(--text-tertiary);
  font-size: 12px;
}

.action-manager-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.action-manager-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(460px, 1.25fr);
  overflow: hidden;
}

.action-manager-list-pane {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.action-manager-list-toolbar {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-default);
}

.action-manager-list-toolbar strong {
  color: var(--text-primary);
  font-size: 13px;
}

.action-manager-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.action-manager-list-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.action-manager-list-item + .action-manager-list-item {
  margin-top: 6px;
}

.action-manager-list-item:hover {
  background: var(--bg-hover);
}

.action-manager-list-item.active {
  background: rgba(99, 102, 241, 0.09);
  border-color: rgba(99, 102, 241, 0.32);
}

.action-manager-list-item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.action-manager-list-item-main span {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-manager-list-item-main code,
.action-manager-code-line,
.action-code-option code {
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
}

.action-manager-list-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.action-manager-code-line {
  margin-top: 6px;
  white-space: normal;
  line-height: 1.35;
}

.action-manager-editor-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  overflow: hidden;
}

.action-manager-editor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.action-manager-editor-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.action-manager-editor-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.action-manager-editor-header span {
  display: block;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.action-manager-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

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

.action-manager-form .form-group {
  min-width: 0;
}

.action-manager-form .form-group label {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}

.action-manager-toggle-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}

.action-manager-toggle {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.action-code-picker-block {
  margin-top: 18px;
}

.action-code-picker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.action-code-picker-title strong {
  color: var(--text-primary);
  font-size: 13px;
}

.action-code-picker-title span {
  color: var(--text-tertiary);
  font-size: 12px;
}

.action-code-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.action-code-option {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  background: var(--bg-elevated);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-code-option:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.action-code-option.selected {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.08);
}

.action-code-option input {
  grid-row: span 2;
  margin-top: 2px;
}

.action-code-option span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-manager-empty {
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 16px;
  text-align: center;
}

.action-manager-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 920px) {
  .action-manager-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .action-manager-list-pane {
    max-height: 260px;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }

  .action-code-picker,
  .action-manager-form-grid {
    grid-template-columns: 1fr;
  }
}

.account-info-modal {
  width: min(960px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
}

.account-form-modal {
  width: min(680px, calc(100vw - 48px));
  max-height: min(780px, calc(100vh - 48px));
}

.account-form-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-form-grid,
.account-form-email-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.account-form-grid .stepper-form-group,
.account-form-email-grid .stepper-form-group {
  margin-bottom: 0;
}

.account-form-inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-form-inline-field .stepper-input {
  min-width: 0;
  flex: 1;
}

.account-form-inline-field .btn-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.account-form-email-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}

.account-form-section-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.account-form-port-row {
  align-items: center;
}

.account-form-port-row .account-form-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: stretch;
  min-width: 96px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.account-form-port-row .account-form-checkbox:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.account-form-port-row .account-form-checkbox input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-primary);
}

.account-form-test-button {
  align-self: flex-start;
}

.account-info-subtitle {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
}

.account-info-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-info-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
}

.account-info-dock-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.account-info-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-info-body-dock {
  padding: 12px 14px 16px;
}

.account-info-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-info-field {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 10px 12px;
  min-width: 0;
}

.account-info-field span {
  display: block;
  color: var(--text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.account-info-field strong {
  color: var(--text-primary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.account-info-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-error);
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.2);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  font-size: 12px;
}

.account-info-actions-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.account-info-loading {
  padding: 18px 0;
}

.account-info-actions-table {
  font-size: 12px;
}

.account-info-run-now-btn {
  white-space: nowrap;
}

.account-info-code {
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
}

.account-info-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  white-space: nowrap;
}

.account-info-status-ok {
  color: var(--accent-success);
}

.account-info-status-limited {
  color: var(--accent-warning);
}

.account-info-status-muted {
  color: var(--text-tertiary);
}

.account-group-modal {
  width: min(1100px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
}

.account-group-modal-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.account-group-list-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border-default);
  padding-right: 14px;
}

.account-group-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.account-group-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.account-group-empty {
  padding: 14px 4px;
  font-size: 12px;
}

.account-group-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.account-group-list-item:hover,
.account-group-list-item.active {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.account-group-list-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-group-list-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.account-group-list-item em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
}

.account-group-list-item svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.account-group-list-item svg:hover {
  color: var(--accent-error);
}

.account-group-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.account-group-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.account-group-editor-heading > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-group-editor-heading strong {
  color: var(--text-primary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-group-editor-heading span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.account-group-editor-heading em {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
}

.account-group-editor-heading.is-editing em {
  color: var(--accent-primary);
  background: rgba(59, 130, 246, 0.1);
}

.account-group-basic-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.account-group-members-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-group-members-section.is-creating {
  grid-template-columns: 1fr;
}

.account-group-member-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.account-group-member-pane > .btn {
  justify-content: center;
  margin-top: auto;
}

.account-group-member-pane-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.account-group-member-pane-header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-group-member-pane-header strong {
  color: var(--text-primary);
  font-size: 12px;
}

.account-group-member-pane-header span,
.account-group-member-pane-header label {
  color: var(--text-tertiary);
  font-size: 11px;
}

.account-group-member-pane-header label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.account-group-member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  max-height: 190px;
  overflow-y: auto;
}

.account-group-member-empty {
  padding: 12px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 12px;
}

.account-group-member-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
}

.account-group-member-option:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.account-group-member-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.account-group-member-option.is-disabled:hover {
  border-color: var(--border-default);
  background: var(--bg-elevated);
}

.account-group-member-option input {
  flex-shrink: 0;
}

.account-group-member-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-group-member-option strong,
.account-group-member-option em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-group-member-option strong {
  color: var(--text-primary);
  font-size: 12px;
}

.account-group-member-option em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
}

.account-group-limit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-group-limit-header strong {
  color: var(--text-primary);
  font-size: 13px;
}

.account-group-limit-header span {
  color: var(--text-tertiary);
  font-size: 12px;
}

.account-group-limit-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.account-group-limit-sleep-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.account-group-limit-sleep-row label {
  color: var(--text-secondary);
  font-size: 12px;
  flex: 0 0 auto;
}

.account-group-limit-sleep-row .stepper-input {
  width: 150px;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.account-group-limit-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  padding-right: 2px;
}

.account-group-limit-table-header,
.account-group-action-limit-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 170px) minmax(150px, 170px);
  align-items: center;
  gap: 10px;
}

.account-group-limit-table-header {
  padding: 0 9px 2px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.account-group-action-limit-row {
  padding: 7px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.account-group-action-limit-row strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-group-action-limit-row .stepper-input {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.account-group-assign-modal {
  width: min(460px, calc(100vw - 32px));
  max-height: none;
}

.account-group-assign-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proxy-manager-modal {
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
}

.proxy-manager-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  min-height: 560px;
}

.proxy-list-pane,
.proxy-editor {
  min-width: 0;
}

.proxy-list-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--border-default);
  padding-right: 14px;
}

.proxy-toolbar {
  display: flex;
  justify-content: flex-start;
}

.proxy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.proxy-empty {
  padding: 16px 4px;
  font-size: 12px;
}

.proxy-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.proxy-list-item:hover,
.proxy-list-item.active {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}

.proxy-list-item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proxy-list-item strong,
.proxy-list-item em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proxy-list-item strong {
  font-size: 12px;
  font-weight: 600;
}

.proxy-list-item em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
}

.proxy-list-item svg {
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.proxy-list-item svg:hover {
  color: var(--accent-error);
}

.proxy-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
}

.proxy-import-row,
.proxy-test-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

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

.proxy-clear-password {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.proxy-test-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-secondary);
}

.proxy-test-controls {
  grid-template-columns: 140px minmax(0, 1fr) auto;
}

.proxy-test-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
}

.proxy-test-result.is-ok {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-success);
}

.proxy-test-result.is-fail {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-error);
}

.proxy-test-result span,
.proxy-test-result em {
  color: var(--text-secondary);
  font-style: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .account-info-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-form-grid,
  .account-form-email-grid {
    grid-template-columns: 1fr;
  }

  .account-group-modal-body,
  .account-group-members-section {
    grid-template-columns: 1fr;
  }

  .account-group-limit-sleep-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-group-limit-sleep-row .stepper-input {
    width: 100%;
  }

  .account-group-limit-table-header {
    display: none;
  }

  .account-group-action-limit-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .account-group-list-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .proxy-manager-body,
  .proxy-form-grid,
  .proxy-test-controls {
    grid-template-columns: 1fr;
  }

  .proxy-list-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
    padding-right: 0;
    padding-bottom: 12px;
  }

}

/* Flow list items */
.flow-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.flow-list-item:hover {
  background: var(--bg-hover);
}

.flow-list-item-info {
  flex: 1;
}

.flow-list-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.flow-list-item-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* =========== EMPTY STATE =========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-tertiary);
  text-align: center;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  opacity: 0.3;
}

.empty-state-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.campaign-assistant-menu {
  position: fixed;
  z-index: 1200;
  width: 285px;
  max-width: calc(100vw - 16px);
  padding: 5px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.log-panel-header .campaign-panel-title { flex-shrink: 0; white-space: nowrap; }
.campaign-assistant-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 5px; background: transparent; color: var(--text-primary);
  text-align: left; font: inherit; font-size: 12px; cursor: pointer;
}
.campaign-assistant-menu button svg { flex-shrink: 0; }
.campaign-assistant-menu button:hover, .campaign-assistant-menu button:focus-visible { background: var(--bg-secondary); }
.campaign-support-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }
.campaign-support-heading > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-secondary); }
.campaign-support-turn { display: flex; flex-direction: column; gap: 8px; }
.campaign-support-notice { display: flex; gap: 6px; padding: 8px 10px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.campaign-support-status { padding: 8px 12px; border-top: 1px solid var(--border-default); font-size: 11px; color: var(--text-secondary); }
.campaign-support-status > div { display: flex; align-items: center; gap: 6px; }
.campaign-support-status p { margin: 5px 0; max-height: 90px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.campaign-support-status button { margin-top: 6px; }
.campaign-support-status svg, .campaign-support-error > svg { flex-shrink: 0; }
.campaign-support-error { margin: 6px 10px; flex-wrap: wrap; max-height: 140px; overflow: auto; flex-shrink: 0; }
.campaign-support-error > span { flex: 1; min-width: 100px; overflow-wrap: anywhere; }
.campaign-support-composer { padding: 8px 10px; border-top: 1px solid var(--border-default); background: var(--bg-secondary); }
.campaign-support-composer textarea { width: 100%; box-sizing: border-box; }
.campaign-support-composer-actions { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.campaign-support-composer-actions small { flex: 1; color: var(--text-tertiary); text-align: right; font-size: 10px; }
.campaign-support-panel button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.campaign-support-images { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.campaign-support-image { position: relative; width: 54px; height: 54px; }
.campaign-support-image > button:first-child { padding: 0; border: 0; background: none; cursor: pointer; width: 100%; height: 100%; }
.campaign-support-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.campaign-support-remove-image { position: absolute; top: -3px; right: -3px; display: flex; padding: 2px; border: 0; border-radius: 50%; color: white; background: #374151; cursor: pointer; }
.campaign-support-sent-image { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; overflow-wrap: anywhere; }
.campaign-support-sent-image svg { flex-shrink: 0; }
.campaign-support-preview { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 42px; }
.campaign-support-preview > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.campaign-support-preview > button { position: absolute; right: 14px; top: 14px; padding: 5px; background: none; color: white; border: 0; cursor: pointer; }

/* =========== ANIMATIONS =========== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fadeIn {
  animation: fadeIn 0.2s ease;
}

.animate-slideIn {
  animation: slideInRight 0.2s ease;
}

/* =========== RUN HISTORY PANEL =========== */
.history-panel {
  position: absolute;
  right: 0;
  top: var(--titlebar-height);
  height: calc(100% - var(--titlebar-height));
  width: 360px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: var(--shadow-lg);
  animation: slideInRight var(--transition-normal);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.history-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
}

.history-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.history-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.history-run-item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.history-run-item:hover {
  border-color: var(--border-hover);
}

.history-run-item.active {
  border-color: var(--accent-primary);
}

.history-run-header {
  padding: 12px;
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-run-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-run-details {
  display: flex;
  flex-direction: column;
}

.history-run-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.history-run-id {
  font-size: 10px;
  color: var(--text-tertiary);
}

.history-run-body {
  padding: 12px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-default);
}

.history-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-step-item {
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.history-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.history-step-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  padding: 1px 4px;
  border-radius: 3px;
}

.history-step-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}

.history-error-msg {
  font-size: 10px;
  color: var(--accent-error);
  background: rgba(244, 63, 94, 0.1);
  padding: 6px;
  border-radius: 4px;
  margin-top: 6px;
  white-space: pre-wrap;
  border: 1px solid rgba(244, 63, 94, 0.2);
}

.history-footer {
  padding: 16px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-elevated);
}

/* =========== STEP DETAIL SECTIONS =========== */
.step-detail-sections {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-detail-section {
  padding: 6px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}

.step-detail-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-info);
  margin-bottom: 4px;
}

.step-json-viewer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-json-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10px;
  line-height: 1.4;
}

.step-json-key {
  color: var(--cat-interaction);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 60px;
}

.step-json-key::after {
  content: ":";
}

.step-json-value {
  color: var(--text-secondary);
  word-break: break-all;
  cursor: default;
}

/* =========== TOP BAR NAVIGATION =========== */
.topbar {
  height: 52px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-topbar);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 8px;
  -webkit-app-region: no-drag;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.topbar-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.topbar-logo:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.topbar-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-topbar);
  letter-spacing: 0;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 24px;
}

.topbar-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-topbar-muted);
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.topbar-nav-item:hover {
  background: var(--bg-topbar-hover);
  color: var(--text-topbar);
}

.topbar-nav-item.active {
  background: var(--bg-topbar-active);
  color: var(--text-topbar);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.16);
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar .btn-ghost {
  color: var(--text-topbar-muted);
}

.topbar .btn-ghost:hover {
  background: var(--bg-topbar-hover);
  color: var(--text-topbar);
}

.topbar-version-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  flex-shrink: 0;
}

.topbar-version-chip,
.topbar-update-button {
  height: 30px;
  border: 1px solid var(--border-topbar);
  border-radius: var(--radius-sm);
}

.topbar-version-chip {
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: var(--text-topbar-muted);
  background: var(--bg-primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar-update-button {
  padding: 0 10px;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.topbar-update-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.topbar-settings-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-settings-button {
  padding: 6px 8px;
  color: var(--text-topbar-muted);
}

.topbar-settings-button.active {
  background: var(--bg-topbar-active);
  color: var(--text-topbar);
}

.topbar-settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2200;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: contextMenuIn 0.12s ease-out;
}

.topbar-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.topbar-settings-item:hover {
  background: var(--bg-hover);
}

.topbar-settings-item svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.topbar-settings-item:hover svg {
  color: var(--accent-primary);
}

.topbar-theme-toggle-item {
  justify-content: flex-start;
}

.topbar-theme-toggle-item span:nth-child(2) {
  flex: 1;
}

.topbar-theme-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.topbar-theme-switch.on {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.topbar-theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.topbar-theme-switch.on .topbar-theme-switch-thumb {
  transform: translateX(16px);
  background: #ffffff;
}

/* =========== APP SIDEBAR NAVIGATION =========== */
.app-sidebar {
  width: 64px;
  height: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 8px;
  overflow: visible;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-default);
  box-shadow: none;
  color: var(--text-topbar);
  -webkit-app-region: no-drag;
  z-index: 120;
  transition: width var(--transition-normal);
}

.app-sidebar.is-expanded {
  width: 240px;
}

.app-sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-sidebar.is-expanded .app-sidebar-header {
  flex-direction: row;
  justify-content: space-between;
}

.app-sidebar-brand {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.app-sidebar.is-expanded .app-sidebar-brand {
  width: auto;
  flex: 1;
  justify-content: flex-start;
}

.app-sidebar-logo,
.app-sidebar-flyout-avatar,
.app-sidebar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-sidebar-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.app-sidebar-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.app-sidebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-brand-name {
  color: var(--text-topbar);
  font-size: 15px;
  font-weight: 750;
}

.app-sidebar.is-collapsed .app-sidebar-label,
.app-sidebar.is-collapsed .app-sidebar-account-chevron {
  display: none;
}

.app-sidebar-toggle {
  width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-topbar);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-topbar-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.app-sidebar-toggle:hover {
  background: var(--bg-topbar-hover);
  color: var(--text-topbar);
  border-color: var(--border-hover);
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.app-sidebar-nav-item,
.app-sidebar-account-button {
  width: 100%;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-topbar-muted);
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-sidebar.is-collapsed .app-sidebar-nav-item,
.app-sidebar.is-collapsed .app-sidebar-account-button {
  justify-content: center;
  padding: 0;
}

.app-sidebar-nav-item:hover,
.app-sidebar-account-button:hover {
  background: var(--bg-topbar-hover);
  color: var(--text-topbar);
}

.app-sidebar-nav-item.active,
.app-sidebar-account-button.active {
  background: var(--bg-topbar-active);
  color: var(--text-topbar);
  border-color: rgba(124, 92, 252, 0.2);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.12);
}

.app-sidebar-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-sidebar-footer {
  position: relative;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-default);
}

.app-sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--accent-info);
  background: rgba(56, 189, 248, 0.12);
}

.app-sidebar-account-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-sidebar-account-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-topbar);
  font-size: 12px;
  line-height: 1.2;
}

.app-sidebar-account-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-topbar-muted);
  font-size: 10px;
  line-height: 1.2;
}

.app-sidebar-account-chevron {
  flex-shrink: 0;
  color: var(--text-topbar-muted);
}

.app-sidebar-account-flyout {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  z-index: 2400;
  width: 270px;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
  animation: contextMenuIn 0.12s ease-out;
}

.app-sidebar-flyout-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 11px;
}

.app-sidebar-flyout-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--accent-info);
  background: rgba(56, 189, 248, 0.12);
}

.app-sidebar-flyout-user {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar-flyout-user strong,
.app-sidebar-flyout-user span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-flyout-user strong {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.25;
}

.app-sidebar-flyout-user span {
  color: var(--text-secondary);
  font-size: 11px;
}

.app-sidebar-flyout-section {
  padding: 6px 0;
  border-top: 1px solid var(--border-default);
}

.app-sidebar-flyout-item {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-sidebar-flyout-item:hover {
  background: var(--bg-hover);
}

.app-sidebar-flyout-item.has-update:not(:disabled) {
  background: rgba(124, 92, 252, 0.14);
  color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.28);
}

.app-sidebar-flyout-item.has-update:hover:not(:disabled) {
  background: rgba(124, 92, 252, 0.2);
}

.app-sidebar-flyout-item.has-update svg {
  color: var(--accent-primary);
}

.app-sidebar-flyout-item .app-update-available-dot {
  margin-left: auto;
}

.app-sidebar-flyout-item:disabled {
  cursor: progress;
  opacity: 0.68;
}

.app-sidebar-flyout-item svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.app-sidebar-update-icon {
  position: relative;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.app-sidebar-update-icon svg {
  position: absolute;
  inset: 0;
  color: currentColor;
}

.app-sidebar-update-icon svg:last-child {
  inset: auto;
}

.app-sidebar-flyout-item:hover svg {
  color: var(--accent-primary);
}

.app-sidebar-flyout-item:hover .app-sidebar-update-icon {
  color: var(--accent-primary);
}

.app-sidebar-theme-toggle-item span:nth-child(2) {
  flex: 1;
}

.app-sidebar-theme-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.app-sidebar-theme-switch.on {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.app-sidebar-theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.app-sidebar-theme-switch.on .app-sidebar-theme-switch-thumb {
  transform: translateX(16px);
  background: #ffffff;
}

.app-sidebar-flyout-danger {
  color: var(--accent-error);
}

.app-sidebar-flyout-danger svg,
.app-sidebar-flyout-danger:hover svg {
  color: var(--accent-error);
}

.app-sidebar-flyout-danger:hover {
  background: rgba(244, 63, 94, 0.1);
}

.account-profile-modal {
  width: 520px;
  max-width: calc(100vw - 32px);
}

.account-profile-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 750;
}

.account-profile-modal .modal-title svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  flex-shrink: 0;
  border-radius: 9px;
  color: var(--accent-info);
  background: rgba(56, 189, 248, 0.12);
}

.account-profile-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-profile-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-profile-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-primary);
}

.account-profile-info-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  color: var(--accent-info);
  background: rgba(56, 189, 248, 0.12);
}

.account-profile-info-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-profile-info-copy span {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.account-profile-info-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-profile-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}

.account-profile-section-title svg {
  color: var(--accent-primary);
}

.account-profile-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-profile-product-card,
.account-profile-empty {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-primary);
}

.account-profile-product-card {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
}

.account-profile-product-main {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-profile-product-main > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-profile-product-main strong,
.account-profile-product-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-product-main strong {
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 750;
}

.account-profile-product-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;
}

.account-profile-product-status.is-active {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.account-profile-product-status.is-expired {
  color: var(--accent-error);
  background: rgba(244, 63, 94, 0.12);
}

.account-profile-product-expiration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 700;
}

.account-profile-product-date-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.account-profile-product-date-chip.is-active {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.account-profile-product-date-chip.is-expired {
  color: var(--accent-error);
  background: rgba(244, 63, 94, 0.12);
}

.account-profile-product-limit-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.account-profile-empty {
  padding: 18px 12px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 560px) {
  .account-profile-summary {
    grid-template-columns: 1fr;
  }
}

/* =========== CAMPAIGN PAGE LAYOUT =========== */
.campaign-page {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: var(--bg-primary);
  padding: 8px;
  gap: 6px;
}

.campaign-page-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--card-radius, var(--radius-md));
  box-shadow: var(--card-shadow, var(--shadow-sm));
  border: 1px solid var(--border-default);
}

.resize-handle {
  width: 3px;
  cursor: col-resize;
  background: transparent;
  transition: background var(--transition-fast);
  flex-shrink: 0;
  border-radius: 4px;
  margin: 16px 0;
}

.resize-handle:hover,
.resize-handle:active {
  background: var(--accent-primary);
}

/* =========== REPORT PAGE =========== */
.report-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
  padding: 12px;
  gap: 12px;
}

.report-filter-panel,
.report-main-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius, var(--radius-md));
  background: var(--bg-secondary);
  box-shadow: var(--card-shadow, var(--shadow-sm));
}

.report-filter-panel {
  width: auto;
  min-width: 0;
  overflow: visible;
  flex-shrink: 0;
}

.report-main-panel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.report-panel-header,
.report-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.report-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.report-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-load-button {
  min-width: 128px;
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
}

.report-filter-content {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(240px, 1fr) minmax(220px, 0.9fr) minmax(260px, 1.1fr);
  align-items: start;
  flex: 1;
  min-height: 0;
  overflow: visible;
  padding: 12px 16px 14px;
  gap: 12px;
}

.report-dropdown-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.report-field,
.report-filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
}

.report-field > span,
.report-dropdown-field > span,
.report-filter-section-header > span,
.report-date-grid label span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-field select,
.report-filter-section select,
.report-date-grid input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  outline: none;
}

.report-filter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.report-filter-button:hover,
.report-filter-button.active {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.report-filter-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.report-filter-button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.report-filter-button svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.report-filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: 100%;
  min-width: 260px;
  max-height: min(360px, calc(100vh - 240px));
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.08);
  animation: contextMenuIn 0.12s ease-out;
}

.report-filter-popover.compact {
  min-width: 180px;
}

.report-filter-popover.wide {
  min-width: 380px;
}

.report-filter-popover.align-right {
  right: 0;
  left: auto;
}

.report-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 8px;
  color: var(--text-secondary);
  font-size: 11px;
}

.report-option-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-option-button {
  width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.report-option-button:hover,
.report-option-button.selected {
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.report-field select:focus,
.report-filter-section select:focus,
.report-date-grid input:focus {
  border-color: var(--accent-primary);
}

.report-filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.report-account-tree,
.report-action-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.report-action-list {
  max-height: 260px;
}

.report-account-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-account-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
}

.report-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.report-check-row:hover {
  background: var(--bg-hover);
}

.report-check-row input {
  flex-shrink: 0;
}

.report-check-row span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-check-row em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
}

.report-check-row-group {
  font-weight: 700;
}

.report-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.report-filter-popover .report-date-grid {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
}

.report-date-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-muted {
  padding: 8px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.report-main-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.report-main-meta {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.report-main-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-table-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg-secondary);
}

.report-grid {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 12px;
}

.report-grid th,
.report-grid td {
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.report-grid th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 9px 10px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: center;
}

.report-grid thead tr:nth-child(2) th {
  top: 37px;
  background: var(--bg-tertiary);
}

.report-grid td {
  height: 42px;
  padding: 7px 10px;
  background: var(--bg-secondary);
}

.report-grid tbody tr:hover td {
  background: var(--bg-hover);
}

.report-account-col {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 260px;
  max-width: 320px;
  text-align: left;
  background: var(--bg-secondary);
}

th.report-account-col {
  z-index: 4;
  background: var(--bg-elevated);
}

td.report-account-col {
  display: table-cell;
}

td.report-account-col strong,
td.report-account-col span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.report-account-col strong {
  color: var(--text-primary);
  font-weight: 700;
}

td.report-account-col span {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.report-action-col {
  min-width: 210px;
}

.report-status-col {
  min-width: 92px;
  font-size: 11px;
}

.report-status-col.success,
.report-count.success {
  color: var(--accent-success);
}

.report-status-col.skipped,
.report-count.skipped {
  color: var(--accent-warning);
}

.report-status-col.failure,
.report-count.failure {
  color: #ef4444;
}

.report-status-col.pending,
.report-count.pending {
  color: var(--accent-info);
}

.report-count {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.report-count-button {
  color: var(--text-primary);
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.report-count-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
  transform: translateY(-1px);
}

.report-count-button.pending:hover {
  border-color: var(--accent-info);
}

.report-count-button.success:hover {
  border-color: var(--accent-success);
}

.report-count-button.skipped:hover {
  border-color: var(--accent-warning);
}

.report-count-button.failure:hover {
  border-color: #ef4444;
}

.report-empty-state,
.report-table-note {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.report-table-note {
  position: sticky;
  left: 0;
  min-height: 42px;
  justify-content: flex-start;
  padding: 10px 14px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.report-detail-overlay {
  z-index: 1600;
}

.report-detail-modal {
  width: min(1320px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
}

.report-detail-header {
  gap: 16px;
}

.report-detail-subtitle {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}

.report-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.report-detail-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.report-detail-table-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--bg-secondary);
}

.report-detail-grid {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  font-size: 12px;
}

.report-detail-grid th,
.report-detail-grid td {
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.report-detail-grid th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.report-detail-grid td {
  max-width: 260px;
  height: 38px;
  padding: 7px 10px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-detail-grid tbody tr:hover td {
  background: var(--bg-hover);
}

.report-detail-grid a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-info);
  text-decoration: none;
  font-weight: 700;
}

.report-detail-grid a:hover {
  text-decoration: underline;
}

.report-detail-empty {
  height: 220px !important;
  max-width: none !important;
  color: var(--text-tertiary) !important;
  text-align: center;
}

.report-detail-status {
  font-weight: 700;
}

.report-detail-status.pending {
  color: var(--accent-info);
}

.report-detail-status.success {
  color: var(--accent-success);
}

.report-detail-status.skipped {
  color: var(--accent-warning);
}

.report-detail-status.failure {
  color: #ef4444;
}

.report-detail-footer {
  justify-content: space-between;
  gap: 12px;
}

.report-detail-page-info {
  color: var(--text-tertiary);
  font-size: 12px;
}

.report-detail-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-detail-pagination span {
  min-width: 64px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* =========== CAMPAIGN PANEL =========== */
.campaign-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-secondary);
  border-radius: inherit;
  overflow: hidden;
}

.campaign-panel:last-child {
  border-right: none;
}

.campaign-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.campaign-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
}

.campaign-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.campaign-panel-content.campaign-table-scroll {
  padding: 0 8px 8px;
  overflow: auto;
}

.campaign-panel-top {
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  overflow: visible;
}

.campaign-zalo-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--modal-backdrop-soft);
}

.campaign-zalo-login-modal {
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.campaign-zalo-login-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.campaign-zalo-login-header div div {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-zalo-login-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.campaign-zalo-login-qr,
.campaign-zalo-login-placeholder {
  width: 220px;
  height: 220px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.campaign-zalo-login-qr {
  object-fit: contain;
  background: #fff;
}

.campaign-zalo-login-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}

.campaign-zalo-login-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}

.campaign-zalo-login-message {
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

.campaign-work-area {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/* =========== PANEL FORM =========== */
.panel-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  animation: fadeIn 0.15s ease;
}

.panel-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.panel-input:focus {
  border-color: var(--accent-primary);
}

.panel-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.panel-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-input-row .panel-input {
  min-width: 0;
  flex: 1;
}

.campaign-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-panel-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.account-panel-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
}

.account-panel-filters select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 10px;
}

.account-panel-filters select:focus {
  border-color: var(--accent-primary);
}

/* =========== ACCOUNT CARD (single-column table) =========== */
.account-card {
  --account-card-accent: var(--border-default);
  --account-card-bg: var(--bg-secondary);
  --account-card-hover-bg: var(--bg-hover);
  --account-card-status-bg: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--account-card-accent);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: all var(--transition-fast);
  background: var(--account-card-bg);
  cursor: pointer;
}

.account-card:hover {
  border-color: var(--border-hover);
  border-left-color: var(--account-card-accent);
  background: var(--account-card-hover-bg);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}

.account-card:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -1px;
}

.account-card.status-ready {
  --account-card-accent: var(--accent-success);
  --account-card-bg: rgba(34, 197, 94, 0.12);
  --account-card-hover-bg: rgba(34, 197, 94, 0.18);
  --account-card-status-bg: rgba(34, 197, 94, 0.13);
}

.account-card.status-running {
  --account-card-accent: var(--accent-warning);
  --account-card-bg: rgba(251, 191, 36, 0.04);
  --account-card-hover-bg: rgba(251, 191, 36, 0.08);
  --account-card-status-bg: rgba(251, 191, 36, 0.13);
}

.account-card.status-blocked {
  --account-card-accent: var(--accent-error);
  --account-card-bg: rgba(244, 63, 94, 0.22);
  --account-card-hover-bg: rgba(244, 63, 94, 0.3);
  --account-card-status-bg: rgba(244, 63, 94, 0.12);
}

.account-card.status-restricted {
  --account-card-accent: #a855f7;
  --account-card-bg: rgba(168, 85, 247, 0.045);
  --account-card-hover-bg: rgba(168, 85, 247, 0.09);
  --account-card-status-bg: rgba(168, 85, 247, 0.14);
}

.account-card.status-disabled {
  --account-card-accent: var(--text-tertiary);
  --account-card-bg: rgba(107, 114, 128, 0.035);
  --account-card-hover-bg: rgba(107, 114, 128, 0.07);
  --account-card-status-bg: rgba(107, 114, 128, 0.13);
}

.account-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.account-card-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
}

.account-card-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-card-status {
  color: var(--account-card-accent);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--account-card-status-bg);
}

.account-card-login-status {
  font-size: 10px;
}

.account-restricted-tag {
  color: #c084fc;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.14);
}

.account-group-tag {
  min-width: 0;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.11);
}

.account-group-campaign-note {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 9px 11px;
}

.account-card-running-campaign {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: 5px;
  padding: 4px 6px;
  overflow: hidden;
  color: var(--accent-warning);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.08);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}

.account-card-running-campaign svg {
  flex-shrink: 0;
}

.account-card-running-campaign strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-tag {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(56, 189, 248, 0.1);
}

.account-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--account-card-accent);
  box-shadow: 0 0 0 3px var(--account-card-status-bg);
  flex-shrink: 0;
}

.account-status-dot.is-disabled {
  background: var(--text-tertiary);
  box-shadow: 0 0 0 3px rgba(107, 107, 130, 0.14);
}

.account-tag.inactive {
  background: rgba(244, 63, 94, 0.1);
  color: var(--accent-error);
}

.account-card-actions {
  display: flex;
  gap: 2px;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.account-card:hover .account-card-actions {
  opacity: 1;
}

.account-card-actions .btn-icon {
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.account-card-actions .btn-icon:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* =========== CAMPAIGN TABLE (multi-column) =========== */
.campaign-table {
  width: 100%;
  min-width: 1510px;
  font-size: 12px;
}

.campaign-table-header,
.campaign-table-row {
  display: grid;
  grid-template-columns:
    minmax(280px, 2.2fr)
    92px
    minmax(150px, 1fr)
    112px
    126px
    minmax(170px, 1.2fr)
    minmax(200px, 1.35fr)
    minmax(160px, 1fr)
    minmax(132px, 0.9fr);
  column-gap: 8px;
  align-items: center;
}

.campaign-table-header {
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
  background: var(--bg-elevated);
  z-index: 3;
  box-shadow: 0 -8px 0 var(--bg-elevated);
}

.campaign-table-header .campaign-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaign-table-header .col-campaign {
  align-items: center;
}

.campaign-table-row {
  --campaign-row-accent: var(--text-tertiary);
  --campaign-row-bg: transparent;
  --campaign-row-hover-bg: var(--bg-hover);
  --campaign-row-selected-bg: rgba(99, 102, 241, 0.08);
  --campaign-row-multi-bg: rgba(99, 102, 241, 0.05);
  --campaign-row-status-bg: rgba(0, 0, 0, 0.04);
  min-height: 72px;
  padding: 8px 12px 8px 9px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border-default);
  transition: all var(--transition-fast);
  border-radius: 0;
  background: var(--campaign-row-bg);
  position: relative;
}

.campaign-table-row:hover {
  background: var(--campaign-row-hover-bg);
}

.campaign-table-row:has(.campaign-action-menu) {
  z-index: 5;
}

.campaign-table-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 76px;
  padding: 18px 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}

.campaign-table-row.status-pending {
  --campaign-row-accent: var(--accent-info);
  --campaign-row-bg: rgba(56, 189, 248, 0.025);
  --campaign-row-hover-bg: rgba(56, 189, 248, 0.065);
  --campaign-row-selected-bg: rgba(56, 189, 248, 0.11);
  --campaign-row-multi-bg: rgba(56, 189, 248, 0.08);
  --campaign-row-status-bg: rgba(56, 189, 248, 0.12);
  border-left-color: var(--campaign-row-accent);
}

.campaign-table-row.status-running {
  --campaign-row-accent: var(--accent-warning);
  --campaign-row-bg: rgba(251, 191, 36, 0.03);
  --campaign-row-hover-bg: rgba(251, 191, 36, 0.075);
  --campaign-row-selected-bg: rgba(251, 191, 36, 0.12);
  --campaign-row-multi-bg: rgba(251, 191, 36, 0.09);
  --campaign-row-status-bg: rgba(251, 191, 36, 0.13);
  border-left-color: var(--campaign-row-accent);
}

.campaign-table-row.status-completed {
  --campaign-row-accent: var(--accent-success);
  --campaign-row-bg: rgba(52, 211, 153, 0.025);
  --campaign-row-hover-bg: rgba(52, 211, 153, 0.065);
  --campaign-row-selected-bg: rgba(52, 211, 153, 0.11);
  --campaign-row-multi-bg: rgba(52, 211, 153, 0.08);
  --campaign-row-status-bg: rgba(52, 211, 153, 0.12);
  border-left-color: var(--campaign-row-accent);
}

.campaign-table-row.status-paused,
.campaign-table-row.status-error {
  --campaign-row-accent: var(--accent-error);
  --campaign-row-bg: rgba(244, 63, 94, 0.025);
  --campaign-row-hover-bg: rgba(244, 63, 94, 0.065);
  --campaign-row-selected-bg: rgba(244, 63, 94, 0.11);
  --campaign-row-multi-bg: rgba(244, 63, 94, 0.08);
  --campaign-row-status-bg: rgba(244, 63, 94, 0.12);
  border-left-color: var(--campaign-row-accent);
}

.campaign-table-row.selected {
  background: var(--campaign-row-selected-bg);
  border-left: 3px solid var(--accent-primary);
  padding-left: 9px;
}

.campaign-table-row.is-draft {
  --campaign-row-accent: var(--text-secondary);
  --campaign-row-status-bg: var(--bg-hover);
  border-left-color: var(--campaign-row-accent);
  cursor: pointer;
}

.campaign-draft-name {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.campaign-draft-name:hover {
  text-decoration: underline;
}

.campaign-draft-actions {
  display: flex;
  gap: 6px;
}

.campaign-col {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  min-width: 0;
}

.campaign-col > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-campaign {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.campaign-row-select {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 18px;
  min-width: 18px;
  overflow: visible;
}

.campaign-list-select-checkbox {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

.campaign-main-cell,
.campaign-two-line-cell,
.campaign-status-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.campaign-status-stack {
  align-items: flex-start;
}

.campaign-name-line,
.campaign-strong-line {
  min-width: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-meta-line {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-account-login-badge {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 7px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-account-login-badge.is-success {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
}

.campaign-account-login-badge.is-warning {
  color: var(--accent-warning);
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.12);
}

.campaign-account-login-badge.is-danger {
  color: var(--accent-error);
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(244, 63, 94, 0.12);
}

.campaign-account-login-badge.is-muted {
  color: var(--text-tertiary);
}

.campaign-data-group-list-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.campaign-data-group-list-cell .campaign-strong-line.is-deleted {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.campaign-data-group-intake-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: visible;
}

.campaign-data-group-intake-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.campaign-data-group-intake-badge.is-active {
  border-color: color-mix(in srgb, var(--accent-success) 30%, transparent);
  background: color-mix(in srgb, var(--accent-success) 12%, transparent);
  color: var(--accent-success);
}

.campaign-data-group-intake-badge.is-stopped {
  border-color: var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.campaign-data-group-intake-badge.is-loading {
  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}

.campaign-data-group-intake-badge.is-error {
  border-color: color-mix(in srgb, var(--accent-warning) 30%, transparent);
  background: color-mix(in srgb, var(--accent-warning) 12%, transparent);
  color: var(--accent-warning);
}

button.campaign-data-group-intake-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 43px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}

button.campaign-data-group-intake-toggle:hover:not(:disabled) {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
  color: var(--text-primary);
}

button.campaign-data-group-intake-toggle.is-enable {
  color: var(--accent-success);
}

button.campaign-data-group-intake-toggle.is-disable {
  color: var(--text-secondary);
}

button.campaign-data-group-intake-toggle.is-retry {
  color: var(--accent-warning);
}

button.campaign-data-group-intake-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.campaign-send-time-line {
  min-width: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-schedule-type-badge {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 7px;
  border: 1px solid rgba(124, 92, 252, 0.24);
  border-radius: 999px;
  color: var(--accent-primary);
  background: rgba(124, 92, 252, 0.1);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-pending-reason-button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  max-width: 100%;
  padding: 2px 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--accent-primary);
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
  cursor: pointer;
}

.campaign-pending-reason-button:hover:not(:disabled) {
  text-decoration: underline;
}

.campaign-pending-reason-button:disabled {
  color: var(--text-tertiary);
  cursor: default;
}

.campaign-note-line {
  width: fit-content;
  max-width: 100%;
  color: var(--accent-warning);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  padding: 2px 7px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campaign-cell-muted {
  color: var(--text-tertiary);
}

.col-toggle,
.col-assistant,
.col-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

button.btn-icon.campaign-control-button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
}

button.btn-icon.campaign-label-button {
  width: auto;
  height: 30px;
  min-width: 0;
  max-width: 100%;
  padding: 0 9px;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

button.btn-icon.campaign-control-button:hover {
  background: var(--bg-elevated);
  border-color: var(--border-default);
  color: var(--text-primary);
}

button.btn-icon.campaign-control-button.assistant {
  color: var(--accent-primary);
}

.status-badge {
  color: var(--campaign-row-accent);
  font-weight: 600;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--campaign-row-status-bg);
  white-space: nowrap;
}

.campaign-progress-count {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.campaign-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

.campaign-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
  transition: width var(--transition-fast);
}

.campaign-action-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.campaign-col > .campaign-action-dropdown {
  overflow: visible;
}

.campaign-action-menu {
  position: fixed;
  z-index: 2400;
  width: max-content;
  min-width: min(230px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - var(--titlebar-height, 0px) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-app-region: no-drag;
  padding: 7px 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.campaign-action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-family);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.campaign-action-menu-item svg {
  flex-shrink: 0;
}

.campaign-action-menu-item:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.campaign-action-menu-item.danger:hover:not(:disabled) {
  color: var(--accent-error);
}

.campaign-action-menu-item.danger:not(:disabled) {
  color: var(--accent-error);
}

.campaign-action-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.campaign-action-menu-separator {
  height: 1px;
  margin: 7px 0;
  background: var(--border-default);
}

.campaign-table-row.multi-selected {
  background: var(--campaign-row-multi-bg);
}

.campaign-table-row.multi-selected.selected {
  background: var(--campaign-row-selected-bg);
}

.campaign-bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
  color: var(--text-secondary);
}

.bulk-action-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bulk-action-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 8px;
}

.bulk-action-buttons .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========== LOG PANEL =========== */
.log-panel-header {
  min-height: 45px;
  gap: 10px;
}

.log-panel-header-assistant {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.log-panel-header-context {
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  background: var(--bg-accent-subtle);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.log-panel-campaign-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.log-panel-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.log-panel-tab {
  flex: 1;
  min-width: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.log-panel-tab:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.log-panel-tab.active {
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent-primary);
}

.log-panel-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.log-panel-filter select {
  min-width: 0;
  width: 100%;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  outline: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
}

.log-panel-filter select:hover {
  border-color: var(--border-hover);
}

.log-panel-filter select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

.log-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.55;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-default);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
}

.log-time {
  color: var(--accent-primary);
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  opacity: 0.7;
}

.log-source-server {
  flex-shrink: 0;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 48%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.log-message {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.log-entry-action {
  flex-shrink: 0;
  border: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--accent-primary);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.log-entry-action:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent-primary);
}

.log-panel-error {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* =========== CAMPAIGN ASSISTANT =========== */
.assistant-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg-secondary);
}

.assistant-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.assistant-campaign-name {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.assistant-campaign-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-reset-btn,
.assistant-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.assistant-reset-btn {
  height: 28px;
  padding: 0 8px;
  flex-shrink: 0;
}

.assistant-start-btn {
  height: 34px;
  padding: 0 12px;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.assistant-reset-btn:hover,
.assistant-start-btn:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.assistant-empty,
.assistant-loading,
.assistant-error {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  text-align: center;
  color: var(--text-secondary);
}

.assistant-empty-icon {
  color: var(--accent-primary);
}

.assistant-empty-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.assistant-empty-campaign {
  max-width: 100%;
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-empty-desc {
  max-width: 300px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.assistant-error {
  color: var(--accent-error);
}

.assistant-loading {
  flex-direction: row;
  font-size: 12px;
}

.assistant-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-primary);
}

.assistant-context-time,
.assistant-messages-empty {
  align-self: center;
  max-width: 100%;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
  line-height: 1.45;
}

.assistant-messages-empty {
  margin-top: 8px;
  max-width: 310px;
}

.assistant-message {
  display: flex;
  min-width: 0;
}

.assistant-message.user {
  justify-content: flex-end;
}

.assistant-message.assistant {
  justify-content: flex-start;
}

.assistant-message-content {
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.assistant-message.user .assistant-message-content {
  background: var(--accent-primary);
  color: white;
  border-bottom-right-radius: 3px;
}

.assistant-message.assistant .assistant-message-content {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-bottom-left-radius: 3px;
}

.assistant-typing {
  color: var(--text-tertiary);
  font-style: italic;
}

.assistant-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(244, 63, 94, 0.28);
  border-radius: 6px;
  background: rgba(244, 63, 94, 0.08);
  color: var(--accent-error);
  font-size: 12px;
  line-height: 1.45;
}

.assistant-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.assistant-chat-textarea {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 130px;
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.45;
  outline: none;
}

.assistant-chat-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.16);
}

.assistant-chat-textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.assistant-chat-send {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 6px;
  background: var(--accent-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--transition-fast);
}

.assistant-chat-send:hover:not(:disabled) {
  filter: brightness(0.95);
}

.assistant-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========== ANIMATIONS =========== */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 0.8s linear infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* =========== CAMPAIGN FORM MODAL (Stepper) =========== */
.campaign-full-modal {
  background: var(--bg-primary);
  width: 90vw;
  max-width: 1200px;
  height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.campaign-quick-edit-modal {
  background: var(--bg-primary);
  width: min(940px, calc(100vw - 32px));
  max-height: min(840px, calc(100vh - 32px));
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.campaign-quick-edit-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.campaign-quick-edit-content {
  padding: 18px;
  gap: 14px;
}

.campaign-quick-edit-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
}

.campaign-quick-edit-summary strong {
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-quick-edit-summary span {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.campaign-quick-edit-empty {
  color: var(--text-secondary);
  font-size: 13px;
}

.campaign-quick-edit-modal .stepper-section-header.static {
  cursor: default;
}

.campaign-quick-edit-modal .stepper-section-header.static:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(56, 189, 248, 0.06));
}

.campaign-quick-edit-number-field {
  max-width: 340px;
}

.campaign-quick-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 16px;
}

.campaign-quick-media-panel {
  margin-top: 18px;
  border-top: 1px solid var(--border-default);
  padding-top: 14px;
}

.campaign-quick-media-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.campaign-quick-media-header strong {
  color: var(--text-primary);
  font-size: 13px;
}

.campaign-quick-media-header span {
  color: var(--text-secondary);
  font-size: 12px;
}

.campaign-quick-media-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.campaign-quick-media-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.campaign-quick-random-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
}

.campaign-quick-media-table-wrap {
  margin: 0;
  max-height: 280px;
  overflow: auto;
}

.campaign-quick-media-table-wrap .campaign-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (max-width: 760px) {
  .campaign-quick-media-layout {
    grid-template-columns: 1fr;
  }

  .campaign-quick-edit-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

.data-group-manager-source-button {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.data-group-manager-source-button > svg {
  flex: none;
}

.data-group-manager-source-button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-manager-group-row.is-dragging {
  opacity: 0.5;
}

.data-group-manager-drag-handle {
  flex: none;
  color: var(--text-tertiary);
  cursor: grab;
}

.data-group-manager-drag-handle.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.data-group-manager-group-row:active .data-group-manager-drag-handle:not(.is-disabled) {
  cursor: grabbing;
}

.data-group-manager-source-button:hover {
  text-decoration: underline;
}

.data-group-manager-source-button em {
  flex: none;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.data-group-provenance-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-xl);
}

.data-group-provenance-modal > header,
.data-group-provenance-modal > footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-provenance-modal > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border-default);
  border-bottom: 0;
}

.data-group-provenance-modal > header > div {
  min-width: 0;
}

.data-group-provenance-modal h3,
.data-group-provenance-modal p {
  margin: 0;
}

.data-group-provenance-modal > header p {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 12px;
}

.data-group-provenance-list {
  flex: 1;
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: 520px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 18px;
}

.data-group-provenance-list article {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-tertiary);
}

.data-group-provenance-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.data-group-provenance-card-body {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.data-group-provenance-card-body > strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

.data-group-provenance-list article p {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.data-group-provenance-list article p > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.data-group-provenance-list article p > svg {
  flex: none;
}

.data-group-provenance-list article small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.data-group-provenance-list article small em {
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger-color) 12%, transparent);
  color: var(--danger-color);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.data-group-provenance-kind,
.data-group-provenance-state {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.data-group-provenance-state.is-current {
  background: color-mix(in srgb, var(--success-color) 14%, transparent);
  color: var(--success-color);
}

.data-group-provenance-state.is-history {
  color: var(--text-tertiary);
}

/* =========== CAMPAIGN DETAIL AUTOMATION =========== */
.campaign-automation-detail-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-automation-role-summary,
.campaign-automation-role-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-automation-toolbar,
.campaign-automation-history-toolbar {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  flex-wrap: wrap;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-automation-toolbar p,
.campaign-automation-history-toolbar p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.campaign-automation-role-summary {
  margin-left: auto;
}

.campaign-automation-summary-badge,
.campaign-automation-row-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-default));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-automation-summary-badge i,
.campaign-automation-row-type i {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  color: white;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.campaign-automation-summary-badge.is-a,
.campaign-automation-row-type.is-a {
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.campaign-automation-summary-badge.is-a i,
.campaign-automation-row-type.is-a i {
  background: var(--accent-primary);
}

.campaign-automation-summary-badge.is-b,
.campaign-automation-row-type.is-b {
  border-color: color-mix(in srgb, var(--accent-info) 30%, var(--border-default));
  background: color-mix(in srgb, var(--accent-info) 10%, transparent);
  color: var(--accent-info);
}

.campaign-automation-summary-badge.is-b i,
.campaign-automation-row-type.is-b i {
  background: var(--accent-info);
}

.campaign-automation-row-type {
  padding: 4px 8px;
}

.campaign-automation-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.campaign-automation-state i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.campaign-automation-state.is-active {
  color: var(--accent-success);
}

.campaign-automation-state.is-inactive {
  color: var(--text-tertiary);
}

.campaign-automation-table-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.campaign-automation-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 12px;
}

.campaign-automation-table.is-history {
  min-width: 1280px;
}

.detail-dock-tab-content .campaign-automation-table th,
.campaign-automation-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.campaign-automation-table td {
  max-width: 340px;
  padding: 8px 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.campaign-automation-table tbody tr:hover td {
  background: var(--bg-hover);
}

.campaign-automation-name-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.5;
}

.campaign-automation-name-cell button {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.campaign-automation-name-cell button:hover {
  color: var(--accent-primary);
}

.campaign-automation-name-cell small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-automation-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.campaign-automation-history-toolbar {
  gap: 10px;
}

.campaign-automation-history-toolbar label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.campaign-automation-history-toolbar label > span {
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.campaign-automation-history-toolbar select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

.campaign-automation-history-toolbar select:focus {
  border-color: var(--accent-primary);
}

.campaign-automation-history-data {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}

.campaign-automation-history-data strong,
.campaign-automation-history-data small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-automation-history-data strong {
  color: var(--text-primary);
  font-weight: 600;
}

.campaign-automation-history-data small {
  color: var(--text-tertiary);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.campaign-automation-link {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  font: inherit;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.campaign-automation-link:disabled {
  cursor: default;
  opacity: 0.78;
}

.campaign-automation-inline-links {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.campaign-automation-history-type {
  width: 25px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
}

.campaign-automation-history-type.is-a {
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.campaign-automation-history-type.is-b {
  color: var(--accent-info);
  background: color-mix(in srgb, var(--accent-info) 10%, transparent);
}

.campaign-automation-destination-list {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.campaign-automation-destination {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.campaign-automation-destination > svg {
  flex: none;
}

.campaign-automation-destination > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-automation-destination.is-campaign {
  border-color: color-mix(in srgb, var(--accent-info) 42%, var(--border-default));
  background: color-mix(in srgb, var(--accent-info) 10%, transparent);
  color: var(--accent-info);
}

.campaign-automation-destination.is-group {
  border-color: color-mix(in srgb, var(--accent-success) 42%, var(--border-default));
  background: color-mix(in srgb, var(--accent-success) 10%, transparent);
  color: var(--accent-success);
}

.campaign-automation-history-detail {
  max-width: 280px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.campaign-automation-result {
  font-weight: 600;
}

.campaign-automation-result.is-success {
  color: var(--accent-success);
}

.campaign-automation-result.is-warning {
  color: var(--accent-warning);
}

.campaign-automation-result.is-error {
  color: var(--accent-error);
}

.campaign-automation-result.is-neutral {
  color: var(--text-tertiary);
}

.campaign-automation-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.campaign-automation-info-modal {
  width: min(480px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.campaign-automation-info-modal > header,
.campaign-automation-info-modal > footer {
  display: flex;
  align-items: center;
  gap: 11px;
}

.campaign-automation-info-modal > header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-automation-info-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 9px;
  background: var(--bg-accent-subtle);
  color: var(--accent-primary);
}

.campaign-automation-info-heading {
  min-width: 0;
  flex: 1;
}

.campaign-automation-info-heading span,
.campaign-automation-info-list > span {
  color: var(--text-tertiary);
}

.campaign-automation-info-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.campaign-automation-info-heading span {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-automation-info-modal > header .btn-icon {
  margin-left: auto;
}

.campaign-automation-info-list {
  min-height: 0;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 11px 14px;
  padding: 16px 18px;
  overflow-y: auto;
  font-size: 12.5px;
}

.campaign-automation-info-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-weight: 650;
}

.campaign-automation-info-list strong.is-a {
  color: var(--accent-primary);
}

.campaign-automation-info-list strong.is-b,
.campaign-automation-info-list strong.is-linked {
  color: var(--accent-info);
}

.campaign-automation-info-list strong.is-active {
  color: var(--accent-success);
}

.campaign-automation-info-list strong.is-paused {
  color: var(--accent-warning);
}

.campaign-automation-info-modal > footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--border-default);
}

.campaign-automation-info-modal > footer .btn {
  min-height: 36px;
  padding-right: 16px;
  padding-left: 16px;
}

@media (max-width: 760px) {
  .campaign-automation-toolbar,
  .campaign-automation-history-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .campaign-automation-role-summary,
  .campaign-automation-history-toolbar label {
    margin-left: 0;
  }

  .campaign-automation-info-list {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

.campaign-feedback-modal .campaign-modal-top,
.campaign-feedback-modal .campaign-modal-body,
.campaign-feedback-modal .modal-footer {
  background: transparent;
}

.stepper-modal .modal-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.stepper-modal .modal-footer {
  flex-shrink: 0;
}

.campaign-form-save-footer {
  align-items: center;
}

.campaign-save-progress {
  flex: 1 1 360px;
  min-width: 220px;
  max-width: 560px;
  margin-right: auto;
  display: grid;
  gap: 6px;
}

.campaign-save-progress-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.campaign-save-progress-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-save-progress-percent {
  flex-shrink: 0;
  color: var(--accent-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.campaign-save-progress-fill {
  background: linear-gradient(90deg, var(--accent-primary), #22c55e);
  transition: width 180ms ease;
}

.campaign-save-progress-count {
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .campaign-form-save-footer {
    flex-wrap: wrap;
  }

  .campaign-save-progress {
    flex-basis: 100%;
    max-width: none;
    order: -1;
  }
}

/* --- Stepper Layout (sidebar + content) --- */
.stepper-layout {
  flex: 1;
  display: flex;
  min-height: 0; /* Important for flex children scrolling */
  overflow: hidden;
}

/* --- Stepper Sidebar --- */
.stepper-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-default);
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stepper-step {
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.stepper-step:hover {
  background: var(--bg-hover);
}

.stepper-step.active {
  background: rgba(124, 92, 252, 0.08);
  border-color: rgba(124, 92, 252, 0.2);
}

.stepper-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.stepper-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 2px solid var(--border-default);
  transition: all var(--transition-fast);
}

.stepper-number.complete {
  background: var(--accent-success);
  color: white;
  border-color: var(--accent-success);
}

.stepper-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.stepper-step-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.stepper-step-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 38px;
}

.stepper-field-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.stepper-field-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-hover);
  transition: all var(--transition-fast);
}

.stepper-field-dot.complete {
  background: var(--accent-success);
  border-color: var(--accent-success);
  box-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
}

.stepper-field-label {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* --- Stepper Content Area --- */
.stepper-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-primary);
}

/* --- Stepper Sections --- */
.stepper-section {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  transition: border-color var(--transition-fast);
  flex-shrink: 0; /* Prevents squishing */
}

.stepper-section.has-message-personalization {
  overflow: visible;
}

.stepper-section.has-floating-dropdown {
  overflow: visible;
  position: relative;
  z-index: 20;
}

.stepper-section:hover {
  border-color: var(--border-hover);
}

.stepper-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(56, 189, 248, 0.06));
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
  color: var(--text-secondary);
}

.stepper-section-header:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(56, 189, 248, 0.1));
}

.stepper-section-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stepper-section-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent-success);
  color: white;
  flex-shrink: 0;
}

.stepper-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.stepper-section-summary {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
}

.stepper-section-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(124, 92, 252, 0.15);
  color: var(--accent-primary);
}

.stepper-section-body {
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

/* --- Stepper Form Fields --- */
.stepper-form-group {
  margin-bottom: 16px;
  min-width: 0;
}

.stepper-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.stepper-form-group label .required {
  color: var(--accent-error);
  margin-left: 2px;
}

.campaign-action-platform-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.campaign-action-platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.campaign-action-platform-tag:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.campaign-action-platform-tag.is-active {
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(56, 189, 248, 0.12);
  color: var(--text-primary);
}

.campaign-action-platform-tag.is-facebook.is-active {
  border-color: rgba(92, 140, 252, 0.48);
  background: rgba(92, 140, 252, 0.13);
}

.campaign-action-platform-tag.is-zalo.is-active {
  border-color: rgba(56, 189, 248, 0.48);
  background: rgba(56, 189, 248, 0.13);
}

.campaign-action-platform-tag.is-email.is-active {
  border-color: rgba(52, 211, 153, 0.48);
  background: rgba(52, 211, 153, 0.13);
}

.campaign-action-platform-tag:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.campaign-action-platform-mark {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-info);
}

.campaign-action-platform-mark.is-facebook {
  background: var(--accent-secondary);
}

.campaign-action-platform-mark.is-zalo {
  background: var(--accent-info);
}

.campaign-action-platform-mark.is-email {
  background: var(--accent-success);
}

.campaign-action-platform-name {
  line-height: 1;
}

@media (max-width: 760px) {
  .campaign-action-platform-tag {
    flex: 1 0 auto;
    justify-content: center;
  }
}

.stepper-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stepper-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.stepper-input::placeholder {
  color: var(--text-tertiary);
}

.zalo-group-combobox {
  position: relative;
  flex: 1 1 320px;
  min-width: min(320px, 100%);
}

.zalo-group-combobox-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.zalo-group-combobox-search-icon {
  position: absolute;
  left: 11px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.zalo-group-combobox-input {
  min-height: 38px;
  padding-left: 34px;
  padding-right: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zalo-group-combobox-toggle {
  position: absolute;
  right: 6px;
  color: var(--text-secondary);
}

.zalo-group-combobox-menu {
  position: absolute;
  z-index: 3200;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(280px, 36vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  scrollbar-gutter: stable;
}

.zalo-group-combobox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.zalo-group-combobox-option:hover,
.zalo-group-combobox-option.is-selected {
  background: var(--bg-hover);
}

.zalo-group-combobox-option.is-selected {
  color: var(--accent-info);
}

.zalo-group-combobox-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zalo-group-combobox-empty {
  padding: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.account-select-menu {
  margin-top: 4px;
  max-height: min(280px, 38vh);
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.account-checkbox-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  scrollbar-gutter: stable;
}

.account-checkbox-option {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  cursor: pointer;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}

.account-checkbox-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-select-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}

.account-select-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-select-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
}

.account-select-group-row,
.account-select-account-row {
  min-height: 24px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.account-select-group-row {
  font-weight: 700;
}

.account-select-group-row:hover,
.account-select-account-row:hover {
  background: var(--bg-hover);
}

.account-select-group-row > span,
.account-select-account-label {
  min-width: 0;
  flex: 1;
}

.account-checkbox-option .account-select-account-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-checkbox-option .account-select-account-name,
.account-checkbox-option .account-select-login-status {
  overflow: visible;
  text-overflow: clip;
}

.account-select-login-status.is-success {
  color: #22c55e;
}

.account-select-login-status.is-warning {
  color: var(--accent-warning);
}

.account-select-login-status.is-danger {
  color: var(--accent-error);
}

.account-select-login-status.is-muted {
  color: var(--text-tertiary);
}

.campaign-target-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.campaign-target-label {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.campaign-target-option {
  min-width: 0;
}

.campaign-target-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-picker-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.campaign-picker-select-button {
  width: auto;
  min-height: 30px;
  padding-inline: 12px;
}

.source-campaign-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.source-campaign-add-button {
  min-height: 30px;
  padding-inline: 12px;
}

.source-campaign-list-title {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.source-campaign-kind-list {
  gap: 14px;
  width: 100%;
}

.source-campaign-kind-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-top: 2px;
}

.source-campaign-kind-block + .source-campaign-kind-block {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.source-campaign-kind-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.campaign-picker-confirm-button {
  min-width: 92px;
}

.campaign-picker-empty-summary,
.campaign-picker-muted {
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-picker-summary-table-wrap {
  width: 100%;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.campaign-picker-summary-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 12px;
}

.campaign-picker-target-table {
  min-width: 1040px;
}

.campaign-picker-summary-table th,
.campaign-picker-summary-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
}

.campaign-picker-summary-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.campaign-picker-summary-table tbody tr:last-child td {
  border-bottom: 0;
}

.campaign-picker-summary-actions-col {
  width: 112px;
  text-align: center !important;
}

.campaign-picker-summary-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.source-campaign-table-wrap {
  max-height: 240px;
}

.source-campaign-table {
  min-width: 1120px;
}

.source-campaign-actions-col {
  width: 112px;
  text-align: center !important;
}

.source-campaign-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.source-campaign-view-modal {
  width: min(980px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.source-campaign-view-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 20px;
}

.campaign-picker-modal-overlay {
  padding: 24px;
}

.campaign-picker-modal {
  width: min(1120px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-picker-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 20px;
}

.campaign-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.campaign-picker-search-input {
  flex: 1;
  min-width: 0;
}

.campaign-picker-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.campaign-picker-add-button {
  min-height: 42px;
  padding-inline: 18px;
  font-size: 14px;
  font-weight: 700;
}

.campaign-picker-table-wrap {
  min-height: 260px;
  max-height: min(440px, 58vh);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.campaign-picker-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 13px;
}

.campaign-picker-table th,
.campaign-picker-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
}

.campaign-picker-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.campaign-picker-table tr {
  cursor: pointer;
}

.campaign-picker-table tbody tr:hover,
.campaign-picker-table tbody tr.selected {
  background: var(--bg-tertiary);
}

.campaign-picker-check-col {
  width: 72px;
  text-align: center !important;
}

.campaign-picker-table-name {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 600;
}

.campaign-picker-table-schedule {
  display: block;
  max-width: 190px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.campaign-picker-text-list {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.campaign-picker-empty-cell {
  height: 180px;
  text-align: center !important;
  vertical-align: middle !important;
  color: var(--text-tertiary);
  font-size: 13px;
}

.campaign-picker-readonly-note {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.find-data-config-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.find-data-config-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.find-data-config-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.find-data-config-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 24px;
}

.stepper-form-row {
  display: flex;
  gap: 16px;
}

.stepper-form-group.half {
  flex: 1;
}

.stepper-form-group.third {
  flex: 1;
  min-width: 0;
}

.schedule-run-row .schedule-time-field {
  flex: 2 1 0;
  min-width: 120px;
}

.schedule-run-row .schedule-date-field,
.schedule-run-row .schedule-end-date-field {
  flex: 4 1 0;
  min-width: 180px;
}

.schedule-run-row .schedule-placeholder-field {
  visibility: hidden;
  pointer-events: none;
}

.action-limit-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.action-limit-card {
  --action-limit-success: var(--accent-success);
  --action-limit-success-bg: rgba(16, 185, 129, 0.15);
  --action-limit-warning: var(--accent-warning);
  --action-limit-warning-bg: rgba(245, 158, 11, 0.15);
  --action-limit-danger: var(--accent-error);
  --action-limit-danger-bg: rgba(239, 68, 68, 0.15);
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-elevated);
  padding: 14px 16px;
}

body.theme-light .action-limit-card {
  --action-limit-success: #047857;
  --action-limit-success-bg: #ddf5ec;
  --action-limit-warning: #92600c;
  --action-limit-warning-bg: #fdf0d5;
  --action-limit-danger: #b91c1c;
  --action-limit-danger-bg: #fde8e8;
}

.action-limit-card.disabled {
  opacity: 0.62;
}

.action-limit-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.action-limit-check-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}

.action-limit-card-header strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

.action-limit-card-header .action-limit-check-text {
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}

.action-limit-continue-option {
  margin-top: 14px;
}

.action-limit-continue-option span {
  color: var(--accent-danger, #ef4444);
  font-weight: 700;
}

.action-limit-continue-note {
  margin-left: 24px;
  margin-top: 4px;
}

.action-limit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 18px;
}

.action-limit-fields > .stepper-form-group {
  margin-bottom: 0;
}

.action-limit-fields .stepper-input {
  height: 40px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
}

.action-limit-fields .stepper-input-unit {
  font-size: 13px;
  font-weight: 500;
}

.action-limit-usage {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.action-limit-usage-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.action-limit-usage-track {
  flex: 1;
  min-width: 24px;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--border-default);
}

.action-limit-usage-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.action-limit-usage-row.is-success .action-limit-usage-fill {
  background: #10b981;
}

.action-limit-usage-row.is-warning .action-limit-usage-fill {
  background: #f59e0b;
}

.action-limit-usage-row.is-danger .action-limit-usage-fill {
  background: #ef4444;
}

.action-limit-usage-row.is-info .action-limit-usage-fill {
  background: #4f7df3;
}

.action-limit-usage-caption {
  flex-shrink: 0;
}

.action-limit-usage-caption.is-full {
  color: var(--action-limit-danger);
  font-weight: 700;
}

.action-limit-used-pill {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.action-limit-used-pill.is-success {
  color: var(--action-limit-success);
  background: var(--action-limit-success-bg);
}

.action-limit-used-pill.is-warning {
  color: var(--action-limit-warning);
  background: var(--action-limit-warning-bg);
}

.action-limit-used-pill.is-danger {
  color: var(--action-limit-danger);
  background: var(--action-limit-danger-bg);
}

.action-limit-usage-source {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.action-limit-label-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  min-height: 22px;
  margin-bottom: 7px;
}

.action-limit-label-row label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
}

.action-limit-minute-toggle {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--accent-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}

.action-limit-minute-toggle:hover {
  text-decoration: underline;
}

.action-limit-minute-field {
  margin-top: 12px;
}

.action-limit-minute-field.is-hidden {
  display: none;
}

.stepper-input-unit-wrap {
  position: relative;
}

.stepper-input-with-unit {
  padding-right: 88px;
}

.stepper-input-unit {
  position: absolute;
  top: 50%;
  right: 12px;
  max-width: 72px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  text-align: right;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  white-space: nowrap;
}

.newsfeed-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.newsfeed-duration-row {
  display: flex;
  align-items: flex-start;
}

.newsfeed-duration-field {
  width: min(220px, 100%);
  margin-bottom: 2px;
}

.newsfeed-action-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 14px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.newsfeed-action-card.is-disabled {
  border-color: color-mix(in srgb, var(--border-default) 82%, transparent);
}

.newsfeed-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.newsfeed-action-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.newsfeed-action-toggle input[type="checkbox"],
.newsfeed-ai-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.newsfeed-action-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.newsfeed-action-title svg {
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.newsfeed-action-code {
  display: inline-flex;
  align-items: center;
  max-width: 45%;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsfeed-action-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.newsfeed-action-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 170px);
  gap: 14px;
  align-items: end;
}

.newsfeed-action-fields .stepper-form-group,
.newsfeed-action-body > .stepper-form-group {
  margin-bottom: 0;
}

.newsfeed-limit-field {
  min-width: 0;
}

.newsfeed-comment-textarea {
  min-height: 104px;
}

.newsfeed-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}

.newsfeed-ai-toggle input[type="checkbox"]:disabled,
.newsfeed-ai-toggle input[type="checkbox"]:disabled + span {
  cursor: not-allowed;
}

.newsfeed-action-card .stepper-input:disabled,
.newsfeed-action-card .stepper-textarea:disabled {
  opacity: 0.66;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--bg-tertiary) 72%, var(--bg-elevated));
}

.newsfeed-action-card.is-disabled .newsfeed-action-title,
.newsfeed-action-card.is-disabled .newsfeed-action-title svg,
.newsfeed-action-card.is-disabled .newsfeed-ai-toggle {
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .newsfeed-action-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .newsfeed-action-code {
    max-width: 100%;
  }

  .newsfeed-action-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsfeed-limit-field {
    max-width: 180px;
  }
}

.ai-content-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 8px 0 12px;
  padding: 0;
}

.ai-content-count-label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.ai-content-count-input {
  flex: 0 0 92px;
  width: 100%;
  height: 40px;
}

.ai-content-action-button {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 14px;
  white-space: nowrap;
  line-height: 1.35;
}

.content-editor-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 6px;
}

.content-editor-toolbar-row .ai-content-toolbar {
  flex: 1 1 520px;
  min-width: 280px;
  margin: 0;
}

.content-template-inline-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 0;
  margin: 0 0 0 auto;
}

.content-template-inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.content-preview-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.stepper-form-group .content-preview-field-header label {
  margin-bottom: 0;
}

.content-template-picker-modal,
.content-template-save-modal {
  width: min(720px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-template-picker-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
}

.content-template-save-modal {
  width: min(560px, calc(100vw - 48px));
}

.content-template-picker-modal > .modal-header,
.content-template-picker-modal > .modal-footer,
.content-template-save-modal > .modal-header,
.content-template-save-modal > .modal-footer {
  flex: 0 0 auto;
  background: var(--bg-secondary);
}

.content-template-picker-body,
.content-template-save-body {
  padding: 16px;
  min-height: 0;
  overflow-y: auto;
}

.content-template-picker-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.content-template-save-form .stepper-form-group:last-child {
  margin-bottom: 0;
}

.content-template-save-form .stepper-input,
.content-template-save-form .stepper-select,
.content-template-save-form .stepper-textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.content-template-save-form .stepper-input,
.content-template-save-form .stepper-select {
  height: 38px;
  min-height: 38px;
}

.content-template-save-form .stepper-select,
.content-template-picker-group-select {
  appearance: none;
  padding: 0 36px 0 11px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  cursor: pointer;
}

.content-template-save-form .stepper-input:hover:not(:disabled),
.content-template-save-form .stepper-select:hover:not(:disabled),
.content-template-save-form .stepper-textarea:hover:not(:disabled),
.content-template-picker-group-select:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.content-template-save-form .stepper-input:focus,
.content-template-save-form .stepper-select:focus,
.content-template-save-form .stepper-textarea:focus,
.content-template-picker-group-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.content-template-save-form .stepper-select option,
.content-template-picker-group-select option {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.content-preview-modal {
  width: min(920px, calc(100vw - 48px));
  max-height: min(780px, calc(100vh - 48px));
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-preview-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.content-preview-body {
  padding: 16px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-preview-variant-tabs {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.content-preview-variant-tabs button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.content-preview-variant-tabs button:hover,
.content-preview-variant-tabs button.active {
  border-color: var(--accent-primary);
  background: rgba(124, 92, 252, 0.16);
  color: var(--text-primary);
}

.content-preview-notes {
  width: 100%;
  max-width: 640px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
}

.content-preview-notes span::before {
  content: '- ';
  color: var(--text-tertiary);
}

.content-preview-showcase {
  width: 100%;
  display: flex;
  justify-content: center;
}

.content-preview-phone {
  width: min(390px, calc(100vw - 96px));
  height: clamp(540px, 70vh, 680px);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  background: #111827;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  color: #050505;
}

.content-preview-phone-speaker {
  width: 72px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.content-preview-platform-bar {
  min-height: 54px;
  padding: 9px 13px;
  border-radius: 24px 24px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.content-preview-platform-bar.facebook,
.content-preview-platform-bar.messenger {
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #e4e6eb;
  color: #050505;
}

.content-preview-platform-bar.facebook strong {
  color: #1877f2;
  font-size: 20px;
  letter-spacing: 0;
}

.content-preview-platform-bar.facebook span {
  color: #65676b;
  font-size: 12px;
  font-weight: 700;
}

.content-preview-platform-bar.messenger {
  justify-content: flex-start;
}

.content-preview-platform-bar.zalo {
  background: #0068ff;
  color: #ffffff;
}

.content-preview-platform-bar.messenger strong,
.content-preview-platform-bar.zalo strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

.content-preview-platform-bar.messenger span,
.content-preview-platform-bar.zalo span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.78;
}

.content-preview-feed-screen,
.content-preview-chat-screen,
.content-preview-story-screen {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.content-preview-feed-screen {
  padding: 8px;
  background: #f0f2f5;
}

.content-preview-fb-post {
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.content-preview-fb-post.compact {
  padding-bottom: 14px;
}

.content-preview-fb-post-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.content-preview-fb-post-head.story {
  color: #ffffff;
}

.content-preview-fb-post-head strong {
  display: block;
  font-size: 13px;
  color: inherit;
  line-height: 1.25;
}

.content-preview-fb-post-head span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #65676b;
}

.content-preview-fb-post-head.story span {
  color: rgba(255, 255, 255, 0.78);
}

.content-preview-avatar,
.content-preview-zalo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.content-preview-avatar.small {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.content-preview-avatar.facebook {
  background: linear-gradient(135deg, #1877f2, #42b72a);
}

.content-preview-avatar.messenger {
  background: linear-gradient(135deg, #0084ff, #a033ff);
}

.content-preview-zalo-avatar {
  background: rgba(255, 255, 255, 0.22);
}

.content-preview-fb-text,
.content-preview-email-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #050505;
  font-size: 14px;
  line-height: 1.45;
}

.content-preview-fb-text.muted {
  color: #65676b;
  font-size: 13px;
}

.content-preview-fb-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e4e6eb;
  color: #65676b;
  font-size: 12px;
  font-weight: 700;
}

.content-preview-fb-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.content-preview-comment-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.content-preview-comment-bubble {
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 16px;
  background: #f0f2f5;
}

.content-preview-comment-bubble strong {
  display: block;
  margin-bottom: 2px;
  color: #050505;
  font-size: 12px;
}

.content-preview-comment-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #050505;
  font-size: 13px;
  line-height: 1.42;
}

.content-preview-chat-screen {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.content-preview-chat-screen.messenger {
  background: #ffffff;
}

.content-preview-chat-screen.zalo {
  background: linear-gradient(180deg, #eef6ff 0%, #dfefff 100%);
}

.content-preview-chat-day,
.content-preview-chat-system {
  align-self: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: #65676b;
  font-size: 11px;
  font-weight: 700;
}

.content-preview-chat-system {
  background: rgba(0, 104, 255, 0.1);
  color: #0068ff;
}

.content-preview-outgoing-row {
  display: flex;
  justify-content: flex-end;
}

.content-preview-chat-bubble {
  max-width: 78%;
  padding: 9px 11px;
  border-radius: 18px 18px 4px 18px;
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.42;
}

.content-preview-phone.facebook .content-preview-chat-bubble,
.content-preview-phone.generic .content-preview-chat-bubble {
  background: #0084ff;
}

.content-preview-phone.zalo .content-preview-chat-bubble {
  background: #0068ff;
}

.content-preview-chat-bubble.media-only {
  padding: 0;
  background: transparent !important;
}

.content-preview-chat-bubble.media-only .content-preview-media-grid.bubble {
  margin-top: 0;
}

.content-preview-chat-composer {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 0 0 24px 24px;
  background: #ffffff;
  border-top: 1px solid #e4e6eb;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #65676b;
  font-size: 12px;
}

.content-preview-chat-composer span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0f2f5;
}

.content-preview-chat-composer.zalo svg:last-child {
  color: #0068ff;
}

.content-preview-story-screen {
  padding: 10px;
  background: #050505;
}

.content-preview-story-card {
  min-height: 100%;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1)),
    linear-gradient(135deg, #1877f2, #7c5cfc);
  display: flex;
  flex-direction: column;
}

.content-preview-story-text {
  margin: auto 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.content-preview-media-grid {
  display: grid;
  gap: 3px;
  overflow: hidden;
  border-radius: 10px;
}

.content-preview-media-grid.feed,
.content-preview-media-grid.email {
  margin-top: 10px;
}

.content-preview-media-grid.bubble {
  margin-top: 8px;
  max-width: 230px;
}

.content-preview-media-grid.count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.content-preview-media-grid.count-2,
.content-preview-media-grid.count-3,
.content-preview-media-grid.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-preview-media-grid.count-3 .content-preview-media-tile:first-child {
  grid-row: span 2;
}

.content-preview-media-tile {
  min-height: 92px;
  background: #f0f2f5;
  overflow: hidden;
}

.content-preview-media-grid.feed.count-1 .content-preview-media-tile {
  min-height: 220px;
}

.content-preview-media-grid.feed:not(.count-1) .content-preview-media-tile {
  min-height: 124px;
}

.content-preview-media-grid.bubble .content-preview-media-tile {
  min-height: 82px;
}

.content-preview-media-tile img,
.content-preview-media-tile video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.content-preview-file-chip {
  min-height: inherit;
  padding: 10px;
  display: grid;
  place-items: center;
  gap: 5px;
  color: #4b5563;
  text-align: center;
  font-size: 11px;
  background: #f8fafc;
  overflow-wrap: anywhere;
}

.content-preview-file-chip small {
  color: #dc2626;
  font-size: 10px;
}

.content-preview-email-client {
  width: min(640px, 100%);
  border: 1px solid #d7dce6;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  color: #111827;
}

.content-preview-email-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.content-preview-email-toolbar span,
.content-preview-email-meta span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.content-preview-email-toolbar strong {
  display: block;
  margin-top: 2px;
  color: #111827;
  font-size: 15px;
}

.content-preview-email-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.content-preview-email-meta strong {
  display: block;
  margin-top: 2px;
  color: #111827;
  font-size: 13px;
}

.content-preview-email-body {
  background: #ffffff;
  overflow: hidden;
}

.content-preview-email-text {
  padding: 16px;
  min-height: 140px;
}

.content-preview-email-body iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  background: white;
}

.content-preview-answer-label {
  margin-bottom: 8px;
  color: #65676b;
  font-size: 12px;
  font-weight: 800;
}

.content-preview-answer-question {
  margin-bottom: 10px;
  color: #050505;
  font-size: 14px;
  font-weight: 800;
}

.content-preview-answer-box {
  padding: 10px 12px;
  border: 1px solid #d8dadf;
  border-radius: 12px;
  background: #f7f8fa;
  color: #050505;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .content-preview-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .content-preview-body {
    padding: 12px;
  }

  .content-preview-phone {
    width: min(360px, calc(100vw - 56px));
    height: min(620px, calc(100vh - 190px));
    min-height: 460px;
  }

  .content-preview-fb-actions {
    font-size: 11px;
  }
}

.content-template-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) 34px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
}

.content-template-picker-search {
  height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  padding: 0 10px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.content-template-picker-search:hover {
  border-color: var(--border-hover);
}

.content-template-picker-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.content-template-picker-search > svg {
  flex: 0 0 auto;
}

.content-template-picker-search input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
}

.content-template-picker-search input::placeholder {
  color: var(--text-tertiary);
}

.content-template-picker-group-select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

button.content-template-picker-refresh.btn-icon:not(.btn) {
  width: 34px;
  height: 34px;
  color: var(--text-secondary);
}

.content-template-picker-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  max-height: 440px;
  padding-right: 3px;
  overflow-y: auto;
}

.content-template-picker-item {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 12px 14px;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.content-template-picker-item:hover {
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

.content-template-picker-item:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.content-template-picker-item-header {
  min-width: 0;
}

.content-template-picker-item-title {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}

.content-template-picker-group-badge,
.content-template-picker-channel-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

.content-template-picker-group-badge {
  max-width: 240px;
  overflow: hidden;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-channel-badge.sms {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.content-template-picker-channel-badge.base {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.content-template-picker-channel-badge.zalo,
.content-template-picker-channel-badge.zalo_message {
  color: #1687ef;
  background: rgba(22, 135, 239, 0.12);
  border-color: rgba(22, 135, 239, 0.25);
}

.content-template-picker-channel-badge.facebook,
.content-template-picker-channel-badge.facebook_post,
.content-template-picker-channel-badge.facebook_message,
.content-template-picker-channel-badge.facebook_comment {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}

.content-template-picker-channel-badge.email {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.content-template-picker-item-excerpt {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.content-template-picker-item-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.4;
}

.content-template-picker-item-footer span:last-child:not(:first-child) {
  margin-left: auto;
}

.content-template-picker-empty {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 24px;
  text-align: center;
  font-size: 13px;
}

.content-template-picker-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.content-template-picker-sidebar {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.content-template-picker-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  color: var(--text-primary);
  font-size: 12px;
}

.content-template-picker-pane-header > span {
  min-width: 25px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.content-template-picker-sidebar .content-template-picker-list {
  min-height: 0;
  max-height: none;
  padding: 0 11px 12px;
}

.content-template-picker-sidebar .content-template-picker-item {
  position: relative;
  background: var(--bg-secondary);
}

.content-template-picker-sidebar .content-template-picker-item.is-selected {
  border-color: var(--accent-primary);
  background: var(--bg-accent-subtle);
  box-shadow: inset 3px 0 0 var(--accent-primary);
  transform: none;
}

.content-template-picker-sidebar .content-template-picker-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.content-template-picker-sidebar .content-template-picker-item-title {
  flex: 1 1 auto;
  min-width: 0;
}

.content-template-picker-preview {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
}

.content-template-picker-preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.content-template-picker-preview-header > div {
  min-width: 0;
}

.content-template-picker-preview-header > div > strong,
.content-template-picker-preview-header > div > span {
  display: block;
}

.content-template-picker-preview-header strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-preview-header > div > span {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.content-template-picker-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 18px 0;
  color: var(--text-tertiary);
  font-size: 11px;
}

.content-template-picker-preview-meta strong {
  color: var(--text-primary);
  font-size: 12px;
}

.content-template-picker-preview-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 18px 18px;
  overflow-y: auto;
}

.content-template-picker-preview-scroll > .ctw-preview-panel {
  min-height: 0;
}

.content-template-picker-preview-scroll .ctw-preview-stage {
  min-height: 390px;
}

.content-template-picker-preview-empty {
  display: flex;
  flex: 1 1 auto;
  min-height: 280px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 28px;
  color: var(--text-tertiary);
  text-align: center;
}

.content-template-picker-preview-empty strong {
  color: var(--text-secondary);
  font-size: 13px;
}

.content-template-picker-preview-empty span {
  font-size: 11.5px;
}

.content-template-picker-modal.content-template-picker-v2 {
  width: min(1360px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 18px;
}

.content-template-picker-v2-header {
  min-height: 64px;
  padding: 12px 18px;
}

.content-template-picker-v2-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.content-template-picker-v2-heading-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
  color: var(--accent-primary);
}

.content-template-picker-v2-heading > div {
  min-width: 0;
}

.content-template-picker-v2-heading .modal-title,
.content-template-picker-v2-heading > div > span:last-child {
  display: block;
}

.content-template-picker-v2-heading > div > span:last-child {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.content-template-picker-v2-body {
  display: grid;
  grid-template-columns: 256px minmax(420px, 1fr) 404px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.content-template-picker-v2-groups,
.content-template-picker-v2-library,
.content-template-picker-v2-preview {
  min-width: 0;
  min-height: 0;
}

.content-template-picker-v2-groups {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.content-template-picker-v2-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px 10px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.content-template-picker-v2-panel-title > span {
  min-width: 23px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: center;
}

.content-template-picker-v2-compact-search {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.content-template-picker-v2-compact-search:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.content-template-picker-v2-compact-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

.content-template-picker-v2-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-top: 9px;
  padding: 3px;
  border-radius: 9px;
  background: var(--bg-tertiary);
}

.content-template-picker-v2-segments button {
  height: 27px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
}

.content-template-picker-v2-segments button.active {
  background: var(--bg-secondary);
  color: var(--accent-primary);
  box-shadow: var(--shadow-sm);
}

.content-template-picker-v2-match-chip {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, var(--border-default));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-secondary));
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 650;
}

.content-template-picker-v2-group-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  margin-top: 9px;
  overflow-y: auto;
}

.content-template-picker-v2-group-list > button {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 47px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.content-template-picker-v2-group-list > button:hover {
  background: var(--bg-tertiary);
}

.content-template-picker-v2-group-list > button.active {
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
  color: var(--accent-primary);
  box-shadow: inset 2px 0 0 var(--accent-primary);
}

.content-template-picker-v2-group-list > button.inactive {
  opacity: 0.62;
}

.content-template-picker-v2-group-list > button > span {
  min-width: 0;
}

.content-template-picker-v2-group-list strong,
.content-template-picker-v2-group-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-v2-group-list strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
}

.content-template-picker-v2-group-list small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.content-template-picker-v2-group-list em {
  min-width: 25px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.content-template-picker-v2-group-list > button.active em {
  background: color-mix(in srgb, var(--accent-primary) 17%, transparent);
  color: var(--accent-primary);
}

.content-template-picker-v2-groups-note {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px dashed var(--border-default);
  border-radius: 9px;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}

.content-template-picker-v2-library {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.content-template-picker-v2-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto 34px;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
}

.content-template-picker-v2-toolbar .content-template-picker-search {
  height: 34px;
}

.content-template-picker-v2-channel-filter {
  display: flex;
  height: 34px;
  max-width: 180px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.content-template-picker-v2-channel-filter svg {
  color: var(--accent-primary);
}

.content-template-picker-v2-listbar {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.content-template-picker-v2-listbar > div:first-child {
  min-width: 0;
  margin-right: auto;
}

.content-template-picker-v2-listbar strong,
.content-template-picker-v2-listbar > div:first-child > span {
  display: block;
}

.content-template-picker-v2-listbar strong {
  color: var(--text-primary);
  font-size: 12px;
}

.content-template-picker-v2-listbar > div:first-child > span {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.content-template-picker-v2-listbar > select {
  height: 30px;
  max-width: 145px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  outline: 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 0 8px;
  font: inherit;
  font-size: 10.5px;
}

.content-template-picker-v2-view-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--bg-tertiary);
}

.content-template-picker-v2-view-switch button {
  display: grid;
  width: 28px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.content-template-picker-v2-view-switch button.active {
  background: var(--bg-secondary);
  color: var(--accent-primary);
  box-shadow: var(--shadow-sm);
}

.content-template-picker-v2-results {
  min-height: 0;
  flex: 1 1 auto;
  padding: 12px;
  overflow-y: auto;
}

.content-template-picker-v2-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.content-template-picker-v2-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.content-template-picker-v2-card:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-default));
  transform: translateY(-1px);
}

.content-template-picker-v2-card.is-selected {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 13%, transparent);
}

.content-template-picker-v2-card-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}

.content-template-picker-v2-mark {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg-secondary);
  color: #fff;
}

.content-template-picker-v2-mark.is-selected {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.content-template-picker-v2-card-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-v2-card .content-template-picker-item-excerpt {
  min-height: 38px;
  font-size: 11px;
  line-height: 1.45;
}

.content-template-picker-v2-card .content-template-picker-item-footer {
  gap: 5px 9px;
  padding-top: 7px;
  font-size: 9.5px;
}

.content-template-picker-v2-card .content-template-picker-item-footer span:last-child {
  margin-left: 0;
}

.content-template-picker-v2-table {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-primary);
}

.content-template-picker-v2-table-head,
.content-template-picker-v2-table > button {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(100px, 150px) 65px 55px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 11px;
}

.content-template-picker-v2-table-head {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content-template-picker-v2-table > button {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 10.5px;
  text-align: left;
  cursor: pointer;
}

.content-template-picker-v2-table > button:hover,
.content-template-picker-v2-table > button.is-selected {
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-primary));
}

.content-template-picker-v2-table-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.content-template-picker-v2-table-name strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-v2-detail-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.content-template-picker-v2-detail-list > button {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.content-template-picker-v2-detail-list > button:hover,
.content-template-picker-v2-detail-list > button.is-selected {
  border-color: var(--accent-primary);
}

.content-template-picker-v2-detail-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.content-template-picker-v2-detail-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-v2-detail-head > span:last-child {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 10px;
}

.content-template-picker-v2-variant-lines {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding-left: 25px;
}

.content-template-picker-v2-variant-lines > span {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.35;
}

.content-template-picker-v2-variant-lines > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-v2-variant-lines em {
  width: fit-content;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.content-template-picker-v2-variant-lines small {
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.content-template-picker-v2-preview {
  border-left: 1px solid var(--border-default);
}

.content-template-picker-v2-preview .content-template-picker-preview-header {
  padding: 13px 15px 10px;
}

.content-template-picker-v2-platform-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px 0;
}

.content-template-picker-v2-platform-chip span,
.content-template-picker-v2-platform-chip em {
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.content-template-picker-v2-platform-chip span {
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-primary));
  color: var(--accent-primary);
}

.content-template-picker-v2-platform-chip em {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.content-template-picker-v2-preview .content-template-picker-preview-scroll {
  padding: 9px 15px 11px;
}

.content-template-picker-v2-preview .content-template-picker-preview-scroll .ctw-preview-stage {
  min-height: 350px;
}

.content-template-picker-v2-sample-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  padding: 10px 15px 12px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 10px;
}

.content-template-picker-v2-sample-data strong {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

.content-template-picker-v2-sample-data code {
  display: inline-block;
  min-width: 92px;
  margin-right: 8px;
  color: var(--accent-primary);
  font-size: 9.5px;
}

.content-template-picker-v2-footer {
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
}

.content-template-picker-v2-footer > span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-template-picker-v2-footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

@media (max-width: 1180px) {
  .content-template-picker-v2-body {
    grid-template-columns: 220px minmax(360px, 1fr) 340px;
  }

  .content-template-picker-v2-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .content-template-picker-v2-body {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .content-template-picker-v2-preview {
    display: none;
  }
}

.campaign-group-picker-v2-modal {
  width: min(1180px, calc(100vw - 32px));
  height: min(820px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.campaign-group-picker-v2-body {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.campaign-group-picker-v2-groups {
  min-width: 0;
  min-height: 0;
}

.campaign-group-picker-v2-group-list > button {
  grid-template-columns: 17px minmax(0, 1fr) auto;
}

.campaign-group-picker-v2-radio {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1.5px solid var(--border-hover);
  border-radius: 50%;
  color: #fff;
  background: var(--bg-secondary);
}

.campaign-group-picker-v2-radio.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.campaign-group-picker-v2-no-groups {
  padding: 20px 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
}

.campaign-group-picker-v2-manage {
  display: flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  border: 1px dashed var(--border-default);
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.campaign-group-picker-v2-manage:hover:not(:disabled) {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.campaign-group-picker-v2-manage:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.campaign-group-picker-v2-main {
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow-y: auto;
  background: var(--bg-secondary);
}

.campaign-group-picker-v2-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-primary);
}

.campaign-group-picker-v2-hero-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
}

.campaign-group-picker-v2-hero > div {
  min-width: 0;
  flex: 1 1 auto;
}

.campaign-group-picker-v2-hero strong,
.campaign-group-picker-v2-hero > div > span {
  display: block;
}

.campaign-group-picker-v2-hero strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-group-picker-v2-hero > div > span {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-group-picker-v2-status {
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-error) 28%, var(--border-default));
  border-radius: 999px;
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 8%, var(--bg-primary));
  font-size: 10px;
  font-weight: 700;
}

.campaign-group-picker-v2-status.active {
  border-color: color-mix(in srgb, var(--accent-success) 28%, var(--border-default));
  color: var(--accent-success);
  background: color-mix(in srgb, var(--accent-success) 9%, var(--bg-primary));
}

.campaign-group-picker-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.campaign-group-picker-v2-stats article {
  padding: 11px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-primary);
}

.campaign-group-picker-v2-stats strong,
.campaign-group-picker-v2-stats span {
  display: block;
}

.campaign-group-picker-v2-stats strong {
  color: var(--text-primary);
  font-size: 18px;
}

.campaign-group-picker-v2-stats span {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.campaign-group-picker-v2-stats article.success strong { color: var(--accent-success); }
.campaign-group-picker-v2-stats article.warning strong { color: var(--accent-warning); }

.campaign-group-picker-v2-ready,
.campaign-group-picker-v2-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-success) 28%, var(--border-default));
  border-radius: 9px;
  color: var(--accent-success);
  background: color-mix(in srgb, var(--accent-success) 8%, var(--bg-primary));
  font-size: 11px;
  line-height: 1.45;
}

.campaign-group-picker-v2-warning {
  border-color: color-mix(in srgb, var(--accent-error) 30%, var(--border-default));
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 8%, var(--bg-primary));
}

.campaign-group-picker-v2-ready svg,
.campaign-group-picker-v2-warning svg { flex: 0 0 auto; margin-top: 1px; }

.campaign-group-picker-v2-section {
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-primary);
}

.campaign-group-picker-v2-section-heading {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
}

.campaign-group-picker-v2-section-heading > div { min-width: 0; }
.campaign-group-picker-v2-section-heading strong,
.campaign-group-picker-v2-section-heading > div > span { display: block; }
.campaign-group-picker-v2-section-heading strong { color: var(--text-secondary); font-size: 10px; letter-spacing: 0.06em; }
.campaign-group-picker-v2-section-heading > div > span { margin-top: 2px; color: var(--text-tertiary); font-size: 9.5px; }
.campaign-group-picker-v2-section-heading > span { padding: 3px 8px; border-radius: 999px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 10px; font-weight: 700; }

.campaign-group-picker-v2-template-list {
  display: flex;
  max-height: 330px;
  flex-direction: column;
  overflow-y: auto;
}

.campaign-group-picker-v2-template-list > article {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-default);
}

.campaign-group-picker-v2-template-list > article:first-child { border-top: 0; }
.campaign-group-picker-v2-template-list > article.skipped { opacity: 0.62; }

.campaign-group-picker-v2-order {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 10px;
  font-weight: 700;
}

.campaign-group-picker-v2-template-list article > div { min-width: 0; }
.campaign-group-picker-v2-template-list article > div > strong,
.campaign-group-picker-v2-template-list article > div > p,
.campaign-group-picker-v2-template-list article > div > span { display: block; }
.campaign-group-picker-v2-template-list article > div > strong { overflow: hidden; color: var(--text-primary); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.campaign-group-picker-v2-template-list article > div > p { overflow: hidden; margin: 3px 0 0; color: var(--text-secondary); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.campaign-group-picker-v2-template-list article > div > span { margin-top: 3px; color: var(--text-tertiary); font-size: 9.5px; }

.campaign-group-picker-v2-template-status {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 8%, var(--bg-secondary));
  font-size: 9.5px;
  font-weight: 700;
}

.campaign-group-picker-v2-template-list > article.will-use .campaign-group-picker-v2-template-status {
  color: var(--accent-success);
  background: color-mix(in srgb, var(--accent-success) 9%, var(--bg-secondary));
}

.campaign-group-picker-v2-empty {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px;
  color: var(--text-tertiary);
  text-align: center;
}

.campaign-group-picker-v2-empty strong { color: var(--text-secondary); font-size: 13px; }
.campaign-group-picker-v2-empty span { font-size: 11px; }

.campaign-group-picker-v2-rotation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-primary);
}

.campaign-group-picker-v2-rotation > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.campaign-group-picker-v2-rotation > div > svg { flex: 0 0 auto; color: var(--accent-primary); }
.campaign-group-picker-v2-rotation strong,
.campaign-group-picker-v2-rotation small { display: block; }
.campaign-group-picker-v2-rotation strong { color: var(--text-primary); font-size: 11.5px; }
.campaign-group-picker-v2-rotation small { margin-top: 2px; color: var(--text-tertiary); font-size: 9.5px; }
.campaign-group-picker-v2-rotation > span { padding: 4px 8px; border-radius: 7px; color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary)); font-size: 10px; font-weight: 700; }

.campaign-group-picker-v2-footer { flex: 0 0 auto; }

@media (max-width: 760px) {
  .campaign-group-picker-v2-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(190px, 38%) minmax(0, 1fr); }
  .campaign-group-picker-v2-groups { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .campaign-group-picker-v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.campaign-group-preview-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.campaign-group-preview-modal > .modal-header,
.campaign-group-preview-modal > .modal-footer {
  flex: 0 0 auto;
  background: var(--bg-secondary);
}

.campaign-group-preview-modal > .modal-footer {
  align-items: center;
  flex-wrap: wrap;
}

.campaign-group-preview-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.campaign-group-preview-title > div {
  min-width: 0;
}

.campaign-group-preview-title .modal-title,
.campaign-group-preview-title > div > span:last-child {
  display: block;
}

.campaign-group-preview-title .modal-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-group-preview-title > div > span:last-child {
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.campaign-group-preview-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 308px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.campaign-group-preview-sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 12px;
  border-right: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.campaign-group-preview-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 10px;
  color: var(--text-primary);
  font-size: 12px;
}

.campaign-group-preview-sidebar-heading span {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.campaign-group-preview-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding-right: 3px;
  overflow-y: auto;
}

.campaign-group-preview-list-item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.campaign-group-preview-list-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

.campaign-group-preview-list-item.active {
  border-color: var(--accent-primary);
  background: var(--bg-accent-subtle);
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.campaign-group-preview-list-item .content-template-picker-item-header,
.campaign-group-preview-template-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.campaign-group-preview-list-item .content-template-picker-item-header {
  padding-right: 32px;
}

.campaign-group-preview-list-item .content-template-picker-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
}

.campaign-group-preview-list-item .content-template-picker-channel-badge {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-group-preview-status-icon {
  display: inline-grid;
  flex: 0 0 auto;
  align-items: center;
  justify-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
}

.campaign-group-preview-list-item .campaign-group-preview-status-icon {
  position: absolute;
  top: 9px;
  right: 9px;
}

.campaign-group-preview-status-icon.will-use {
  border-color: color-mix(in srgb, var(--accent-success) 32%, var(--border-default));
  color: var(--accent-success);
  background: color-mix(in srgb, var(--accent-success) 10%, var(--bg-primary));
}

.campaign-group-preview-status-icon.skipped {
  border-color: color-mix(in srgb, var(--accent-error) 26%, var(--border-default));
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 8%, var(--bg-primary));
}

.campaign-group-preview-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-secondary);
}

.campaign-group-preview-main-header {
  flex: 0 0 auto;
  padding: 14px 18px 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.campaign-group-preview-template-title > div {
  min-width: 0;
}

.campaign-group-preview-template-title strong,
.campaign-group-preview-template-title > div > span {
  display: block;
}

.campaign-group-preview-template-title strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-group-preview-template-title > div > span {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-group-preview-platform-tabs,
.campaign-group-preview-facebook-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.campaign-group-preview-platform-tabs {
  margin-top: 12px;
}

.campaign-group-preview-platform-tabs button,
.campaign-group-preview-facebook-tabs button {
  flex: 0 0 auto;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.campaign-group-preview-platform-tabs button {
  padding: 8px 12px 9px;
  border-bottom-width: 2px;
}

.campaign-group-preview-platform-tabs button:hover,
.campaign-group-preview-platform-tabs button.active {
  color: var(--text-primary);
}

.campaign-group-preview-platform-tabs button.unavailable:not(.active) {
  opacity: 0.48;
}

.campaign-group-preview-platform-tabs button.active {
  border-bottom-color: var(--accent-primary);
}

.campaign-group-preview-facebook-tabs {
  padding: 8px 0 10px;
  border-top: 1px solid var(--border-default);
}

.campaign-group-preview-facebook-tabs button {
  padding: 5px 9px;
  border-color: var(--border-default);
  border-radius: var(--radius-full);
}

.campaign-group-preview-facebook-tabs button.active {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.campaign-group-preview-stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px 18px;
  overflow-y: auto;
}

.campaign-group-preview-stage > .campaign-advanced-group-warning {
  margin: 0 0 12px;
}

.campaign-group-preview-channel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-group-preview-channel-meta strong {
  color: var(--text-primary);
  font-size: 12px;
}

.campaign-group-preview-stage > .ctw-preview-panel {
  min-height: 0;
}

.campaign-group-preview-stage .ctw-preview-stage {
  min-height: 360px;
}

.campaign-group-preview-disabled-channel,
.campaign-group-preview-no-selection {
  display: flex;
  flex: 1 1 auto;
  min-height: 280px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px;
  color: var(--text-tertiary);
  text-align: center;
}

.campaign-group-preview-disabled-channel {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}

.campaign-group-preview-disabled-channel strong,
.campaign-group-preview-no-selection strong {
  color: var(--text-secondary);
  font-size: 13px;
}

.campaign-group-preview-disabled-channel span,
.campaign-group-preview-no-selection span {
  font-size: 11.5px;
}

.campaign-group-preview-footer-note {
  flex: 1 1 300px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.45;
}

.campaign-group-preview-footer-note.error {
  color: var(--accent-error);
}

.campaign-group-preview-footer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 760px) {
  .content-template-picker-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(170px, 36%) minmax(0, 1fr);
  }

  .content-template-picker-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .campaign-group-preview-modal {
    width: calc(100vw - 48px);
    height: calc(100vh - 48px);
  }

  .campaign-group-preview-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(150px, 34%) minmax(0, 1fr);
  }

  .campaign-group-preview-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .campaign-group-preview-footer-note {
    flex-basis: 100%;
  }

  .campaign-group-preview-footer-actions {
    width: 100%;
  }
}

.content-template-save-form .content-template-save-textarea {
  min-height: 150px;
  resize: none;
  cursor: default;
}

@media (max-width: 640px) {
  .content-template-picker-modal,
  .content-template-save-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .content-template-picker-modal {
    height: calc(100vh - 24px);
  }

  .content-template-picker-body {
    padding: 0;
  }

  .content-template-save-body {
    padding: 12px;
  }

  .content-template-picker-toolbar {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .content-template-picker-search {
    grid-column: 1 / -1;
  }

  .content-template-picker-group-select {
    grid-column: 1;
  }

  .content-template-picker-refresh {
    grid-column: 2;
  }

  .content-template-picker-list {
    min-height: 140px;
  }

  .content-template-picker-item {
    padding: 11px 12px;
  }
}

.stepper-textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stepper-textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.stepper-textarea::placeholder {
  color: var(--text-tertiary);
}

.campaign-content-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.campaign-content-template-layout.full-width {
  grid-template-columns: minmax(0, 1fr);
}

.campaign-message-content-layout {
  display: flex;
  flex-direction: column;
}

.campaign-message-content-tools {
  margin-bottom: 8px;
}

.campaign-content-hint {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-content-mode-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.campaign-content-mode-segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.campaign-content-mode-segmented button {
  min-width: 96px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  padding: 8px 12px;
}

.campaign-content-mode-segmented button.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.campaign-content-mode-segmented button:hover:not(.active) {
  color: var(--text-primary);
}

.campaign-content-mode-segmented button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.campaign-content-mode-segmented button.active:disabled {
  opacity: 1;
}

.campaign-content-mode-segmented button:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.campaign-content-mode-note {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.45;
}

.campaign-content-mode-row > .campaign-content-mode-note {
  flex: 1 1 360px;
  max-width: 760px;
}

.campaign-advanced-source-card {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.campaign-advanced-source-card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary)), var(--bg-primary));
}

.campaign-advanced-source-card-icon,
.campaign-advanced-group-summary-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, var(--border-default));
  background: var(--bg-accent-subtle);
}

.campaign-advanced-source-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.campaign-advanced-source-card-copy {
  min-width: 0;
}

.campaign-advanced-source-card-copy strong,
.campaign-advanced-source-card-copy span {
  display: block;
}

.campaign-advanced-source-card-copy strong {
  color: var(--text-primary);
  font-size: 14px;
}

.campaign-advanced-source-card-copy span {
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-advanced-source-card-body {
  padding: 15px 16px 16px;
}

.campaign-advanced-source-mode-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.campaign-advanced-source-mode-note {
  flex: 1 1 320px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.campaign-advanced-group-picker > label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.campaign-advanced-group-picker-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.campaign-advanced-group-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  min-width: 240px;
}

.campaign-advanced-group-select {
  width: 100%;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 42px 0 14px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  outline: none;
  color: var(--text-primary);
  background: var(--bg-secondary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.campaign-advanced-group-select:hover:not(:disabled) {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}

.campaign-advanced-group-select:focus {
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 14%, transparent);
}

.campaign-advanced-group-select:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

.campaign-advanced-group-select option {
  color: var(--text-primary);
  background: var(--bg-secondary);
  font-weight: 500;
}

.campaign-advanced-group-select-wrap > svg {
  position: absolute;
  right: 13px;
  color: var(--text-tertiary);
  pointer-events: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.campaign-advanced-group-select-wrap:hover > svg,
.campaign-advanced-group-select-wrap:focus-within > svg {
  color: var(--accent-primary);
}

button.campaign-advanced-group-refresh.btn-icon:not(.btn) {
  width: 38px;
  height: 38px;
}

.campaign-advanced-group-row-action,
.campaign-advanced-group-manage {
  min-height: 42px;
  gap: 7px;
  padding: 0 13px;
  white-space: nowrap;
}

.campaign-advanced-group-manage {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-default));
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.campaign-advanced-saved-snapshot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-success) 28%, var(--border-default));
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-success) 7%, var(--bg-primary));
  font-size: 11.5px;
  line-height: 1.5;
}

.campaign-advanced-saved-snapshot > svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent-success);
}

.campaign-advanced-group-summary {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-elevated) 64%, var(--bg-primary));
}

.campaign-advanced-group-summary.has-warning {
  border-color: color-mix(in srgb, var(--accent-error) 42%, var(--border-default));
}

.campaign-advanced-group-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-advanced-group-summary-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.campaign-advanced-group-summary-copy {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-advanced-group-summary-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 2px;
}

.campaign-advanced-group-summary-title strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-advanced-group-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 14px 3px;
}

.campaign-advanced-group-badges > span:not(.content-template-picker-channel-badge) {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-primary);
  font-size: 10.5px;
  font-weight: 700;
}

.campaign-advanced-group-badges > span.active {
  border-color: color-mix(in srgb, var(--accent-success) 34%, var(--border-default));
  color: var(--accent-success);
  background: color-mix(in srgb, var(--accent-success) 10%, var(--bg-primary));
}

.campaign-advanced-group-badges > span.error {
  border-color: color-mix(in srgb, var(--accent-error) 34%, var(--border-default));
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 9%, var(--bg-primary));
}

.campaign-advanced-group-summary-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px 13px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.campaign-advanced-group-summary-detail > svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent-success);
}

.campaign-advanced-group-summary-detail.error > svg {
  color: var(--accent-error);
}

.campaign-advanced-group-warning {
  margin: 0 14px 13px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-error) 34%, var(--border-default));
  border-radius: var(--radius-md);
  color: var(--accent-error);
  background: color-mix(in srgb, var(--accent-error) 8%, var(--bg-primary));
  font-size: 11.5px;
  line-height: 1.5;
}

.campaign-advanced-group-empty,
.campaign-advanced-source-manual-note {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.campaign-advanced-group-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.campaign-advanced-source-manual-note {
  margin-top: 0;
}

.campaign-advanced-content-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campaign-manual-content-launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.campaign-manual-content-launcher-copy,
.campaign-manual-content-launcher-actions,
.campaign-manual-content-modal-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.campaign-manual-content-launcher-copy > div,
.campaign-manual-content-modal-title > div {
  min-width: 0;
}

.campaign-manual-content-launcher-copy strong,
.campaign-manual-content-launcher-copy > div > span,
.campaign-manual-content-modal-title .modal-title,
.campaign-manual-content-modal-title > div > span:last-child {
  display: block;
}

.campaign-manual-content-launcher-copy strong {
  color: var(--text-primary);
  font-size: 13px;
}

.campaign-manual-content-launcher-copy > div > span,
.campaign-manual-content-modal-title > div > span:last-child {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.45;
}

.campaign-manual-content-launcher-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-tertiary));
  color: var(--accent-primary);
}

.campaign-manual-content-launcher-actions {
  flex: 0 0 auto;
}

.campaign-manual-content-modal {
  width: min(1360px, calc(100vw - 32px));
  height: min(880px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.campaign-manual-content-modal > .modal-header,
.campaign-manual-content-modal > .modal-footer {
  flex: 0 0 auto;
  background: var(--bg-secondary);
}

.campaign-manual-content-modal > .campaign-manual-content-modal-header {
  min-height: 60px;
  gap: 16px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bg-tertiary) 74%, var(--bg-secondary));
  -webkit-app-region: no-drag;
}

.campaign-manual-content-modal-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  -webkit-app-region: no-drag;
}

.campaign-manual-content-modal-header-actions .btn {
  min-height: 34px;
  border-color: var(--border-default);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-secondary);
}

.campaign-manual-content-modal-header-actions .btn:first-child {
  border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-default));
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-primary));
  color: var(--accent-primary);
}

.campaign-manual-content-modal-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: row;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.campaign-manual-content-rail {
  display: flex;
  width: 224px;
  min-width: 0;
  flex: 0 0 224px;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--bg-primary) 76%, var(--bg-secondary));
}

.campaign-manual-content-rail-head {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-tertiary);
}

.campaign-manual-content-rail-head strong {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-manual-content-rail-head span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.campaign-manual-content-rail-list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  padding: 8px;
}

.campaign-manual-content-rail-item {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--border-default) 64%, transparent);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

.campaign-manual-content-rail-item:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-default));
}

.campaign-manual-content-rail-item.is-selected {
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-default));
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-primary));
}

.campaign-manual-content-rail-item:focus-within {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-default));
}

.campaign-manual-content-rail-select {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0 8px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.campaign-manual-content-rail-select:focus-visible,
.campaign-manual-content-rail-delete:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.campaign-manual-content-rail-number {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.campaign-manual-content-rail-item.is-selected .campaign-manual-content-rail-number {
  background: var(--accent-primary);
  color: #fff;
}

.campaign-manual-content-rail-copy {
  min-width: 0;
  flex: 1;
}

.campaign-manual-content-rail-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-manual-content-rail-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.campaign-manual-content-rail-copy small em {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

.campaign-manual-content-rail-delete {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 9px 0 7px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0.62;
}

.campaign-manual-content-rail-delete:hover {
  color: var(--accent-error);
  opacity: 1;
}

.campaign-advanced-media-panel.is-blocked .campaign-advanced-media-layout {
  opacity: 0.62;
}

.campaign-manual-content-rail-empty {
  padding: 22px 12px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.campaign-manual-content-rail-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px;
  border-top: 1px solid var(--border-default);
}

.campaign-manual-content-rail-footer .btn {
  justify-content: center;
}

.campaign-manual-content-rail-footer small {
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
}

.campaign-manual-content-editor-pane {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.campaign-manual-content-editor-scroll {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 14px 16px 18px;
}

.campaign-manual-content-editor-scroll > * {
  flex: 0 0 auto;
}

.campaign-manual-content-editor-heading,
.campaign-manual-content-editor-heading > div,
.campaign-manual-content-editor-actions,
.campaign-manual-content-editor-toolbar,
.campaign-manual-content-item-meta {
  display: flex;
  align-items: center;
}

.campaign-manual-content-editor-heading {
  gap: 12px;
  justify-content: space-between;
}

.campaign-manual-content-editor-heading > div:first-child {
  min-width: 0;
  gap: 9px;
}

.campaign-manual-content-editor-heading > div:first-child > strong {
  color: var(--text-primary);
  font-size: 14px;
}

.campaign-manual-content-editor-heading > div:first-child > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-manual-content-editor-heading > div:first-child > span.is-template {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}

.campaign-manual-content-editor-actions {
  flex: 0 0 auto;
  gap: 7px;
}

.campaign-manual-content-item-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  overflow: visible;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-tertiary) 58%, var(--bg-primary));
}

.campaign-manual-content-setting-row {
  display: flex;
  min-width: 100%;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1.35;
}

.campaign-manual-content-setting-row + .campaign-manual-content-setting-row {
  border-top: 1px solid var(--border-default);
}

.campaign-manual-content-setting-row.compact {
  min-width: 250px;
  flex-basis: 50%;
}

.campaign-manual-content-setting-row.compact + .campaign-manual-content-setting-row.compact {
  border-top: 0;
  border-left: 1px solid var(--border-default);
}

.campaign-manual-content-setting-row input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--accent-primary);
}

.campaign-manual-content-setting-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.campaign-manual-content-setting-row strong {
  color: var(--text-primary);
  font-size: 12.5px;
}

.campaign-manual-content-setting-row small {
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
}

.campaign-manual-content-setting-row.is-disabled {
  cursor: default;
  opacity: 0.62;
}

.campaign-manual-content-email-subject {
  margin: 0;
}

.campaign-manual-content-composer {
  overflow: visible;
}

.campaign-manual-content-editor-toolbar {
  min-height: 43px;
  flex-wrap: wrap;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--bg-tertiary) 58%, var(--bg-primary));
}

.campaign-manual-content-editor-toolbar .message-personalization-dropdown {
  z-index: 82;
}

.campaign-manual-content-editor-toolbar .message-personalization-popover {
  left: 0;
  transform: none;
}

.campaign-manual-content-editor-toolbar .message-personalization-dropdown.action-token-dropdown .message-personalization-popover {
  right: auto;
  left: 0;
  width: min(620px, calc(100vw - 80px));
  transform: none;
}

.campaign-manual-content-editor-toolbar .message-personalization-dropdown.action-token-dropdown::after {
  right: auto;
  left: 0;
  width: min(620px, calc(100vw - 80px));
  transform: none;
}

.campaign-manual-content-toolbar-hint {
  flex: 1 1 auto;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: right;
}

.campaign-manual-content-textarea.stepper-textarea {
  min-height: 166px;
  resize: vertical;
  border-radius: 0 0 10px 10px;
  font-size: 13px;
  line-height: 1.65;
}

.campaign-manual-content-textarea.stepper-textarea:focus {
  position: relative;
  z-index: 1;
}

.campaign-manual-content-textarea.stepper-textarea.is-background {
  min-height: 180px;
  padding: 24px 28px;
  border-color: transparent;
  background: linear-gradient(135deg, #5b57e8, #8b5cf6);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.campaign-manual-content-composer > .email-html-editor {
  border-radius: 0 0 10px 10px;
}

.campaign-manual-content-item-meta {
  min-height: 22px;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.campaign-manual-content-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #b45309;
  font-weight: 600;
}

.campaign-manual-content-editor-pane .campaign-advanced-media-panel {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-primary);
}

.campaign-manual-content-editor-pane .campaign-advanced-media-panel > .schedule-hint {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-primary));
}

.campaign-manual-content-editor-pane .campaign-advanced-media-layout {
  gap: 16px;
  padding: 11px 12px 12px;
}

.campaign-manual-content-editor-pane .campaign-advanced-media-options {
  flex-basis: min(330px, 48%);
  gap: 10px;
}

.campaign-manual-content-editor-pane .campaign-advanced-media-options .btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 12px;
}

.campaign-manual-content-editor-pane .campaign-advanced-media-selected-title {
  font-size: 12.5px;
}

.campaign-manual-content-editor-pane .campaign-advanced-media-table-wrap {
  max-height: 184px;
}

.campaign-manual-content-empty-state {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
}

.campaign-manual-content-empty-state > span {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.campaign-manual-content-empty-state > div:nth-child(2) {
  display: flex;
  max-width: 430px;
  flex-direction: column;
  gap: 4px;
}

.campaign-manual-content-empty-state strong {
  color: var(--text-primary);
  font-size: 14px;
}

.campaign-manual-content-empty-state small {
  color: var(--text-tertiary);
  font-size: 12.5px;
  line-height: 1.55;
}

.campaign-manual-content-empty-state > div:last-child {
  display: flex;
  gap: 9px;
}

.campaign-manual-content-preview-pane {
  display: flex;
  width: 412px;
  min-width: 0;
  flex: 0 0 412px;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-primary) 76%, var(--bg-secondary));
}

.campaign-manual-content-preview-pane.is-empty {
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-manual-content-preview-header {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.campaign-manual-content-preview-header > div {
  min-width: 0;
  flex: 1;
}

.campaign-manual-content-preview-header strong,
.campaign-manual-content-preview-header span {
  display: block;
}

.campaign-manual-content-preview-header strong {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-manual-content-preview-header span {
  overflow: hidden;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-manual-content-preview-header .btn {
  min-height: 28px;
  flex: 0 0 auto;
  padding-inline: 9px;
  font-size: 11.5px;
}

.campaign-manual-content-preview-nav {
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.campaign-manual-content-preview-nav > strong {
  color: var(--text-secondary);
  font-size: 12px;
}

.campaign-manual-content-preview-nav .btn-icon {
  width: 26px;
  height: 26px;
  min-height: 26px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
}

.campaign-manual-content-sample-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
}

.campaign-manual-content-sample-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent-primary);
}

.campaign-manual-content-preview-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.campaign-manual-preview-card,
.campaign-manual-preview-notes {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-primary);
}

.campaign-manual-preview-post-head,
.campaign-manual-preview-chat-head,
.campaign-manual-preview-sms-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.campaign-manual-preview-post-head {
  padding: 11px 12px;
}

.campaign-manual-preview-avatar {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dbe7fb;
  color: #1877f2;
  font-size: 14px;
  font-weight: 700;
}

.campaign-manual-preview-post-head > span:last-child,
.campaign-manual-preview-chat-head > span:last-child,
.campaign-manual-preview-sms-head > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.campaign-manual-preview-post-head strong,
.campaign-manual-preview-chat-head strong,
.campaign-manual-preview-sms-head strong {
  color: var(--text-primary);
  font-size: 12.5px;
}

.campaign-manual-preview-post-head small,
.campaign-manual-preview-chat-head small,
.campaign-manual-preview-sms-head small {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.campaign-manual-preview-body {
  padding: 0 12px 12px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.campaign-manual-preview-body.is-background {
  min-height: 190px;
  margin: 0 12px 11px;
  padding: 24px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b57e8, #8b5cf6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.campaign-manual-preview-rich p:first-child,
.campaign-manual-preview-rich ul:first-child,
.campaign-manual-preview-rich ol:first-child {
  margin-top: 0;
}

.campaign-manual-preview-rich p:last-child,
.campaign-manual-preview-rich ul:last-child,
.campaign-manual-preview-rich ol:last-child {
  margin-bottom: 0;
}

.campaign-manual-preview-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--bg-tertiary);
}

.campaign-manual-preview-media-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 106px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, #dbe7fb 70%, var(--bg-primary));
  color: #8ba6cc;
}

.campaign-manual-preview-media-tile:nth-child(even) {
  background: color-mix(in srgb, #e6e2fb 70%, var(--bg-primary));
  color: #a29ecb;
}

.campaign-manual-preview-media-tile > img,
.campaign-manual-preview-media-tile > video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 106px;
  object-fit: cover;
}

.campaign-manual-preview-media-fallback {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
}

.campaign-manual-preview-media-fallback small,
.campaign-manual-preview-media-name {
  width: 100%;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-manual-preview-media-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px 8px 6px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.78));
  color: #fff;
}

.campaign-manual-preview-media-grid.count-1 {
  grid-template-columns: minmax(0, 1fr);
}

.campaign-manual-preview-media-grid.count-1 .campaign-manual-preview-media-tile,
.campaign-manual-preview-media-grid.count-1 .campaign-manual-preview-media-tile > img,
.campaign-manual-preview-media-grid.count-1 .campaign-manual-preview-media-tile > video {
  min-height: 210px;
}

.campaign-manual-preview-media-grid.count-2 .campaign-manual-preview-media-tile,
.campaign-manual-preview-media-grid.count-2 .campaign-manual-preview-media-tile > img,
.campaign-manual-preview-media-grid.count-2 .campaign-manual-preview-media-tile > video {
  min-height: 170px;
}

.campaign-manual-preview-media-grid.count-3 {
  grid-template-rows: repeat(2, 105px);
}

.campaign-manual-preview-media-grid.count-3 .campaign-manual-preview-media-tile:first-child {
  grid-row: 1 / span 2;
}

.campaign-manual-preview-media-grid.count-3 .campaign-manual-preview-media-tile,
.campaign-manual-preview-media-grid.count-3 .campaign-manual-preview-media-tile > img,
.campaign-manual-preview-media-grid.count-3 .campaign-manual-preview-media-tile > video {
  min-height: 0;
  height: 100%;
}

.campaign-manual-preview-post-actions {
  display: flex;
  padding: 9px 12px;
  border-top: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-manual-preview-post-actions span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.campaign-manual-preview-card.comment {
  overflow: hidden;
}

.campaign-manual-preview-comment-source {
  margin: 0 12px 12px;
  padding: 10px 11px;
  border-radius: 9px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.5;
}

.campaign-manual-preview-comment-thread {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px 13px;
  border-top: 1px solid var(--border-default);
}

.campaign-manual-preview-avatar.small {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  font-size: 11px;
}

.campaign-manual-preview-comment-thread > div {
  min-width: 0;
  flex: 1;
}

.campaign-manual-preview-comment-thread strong {
  color: var(--text-primary);
  font-size: 11.5px;
}

.campaign-manual-preview-comment-thread small {
  display: block;
  margin-top: 5px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.campaign-manual-preview-comment-bubble {
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 8px 10px;
  border-radius: 4px 12px 12px;
  background: color-mix(in srgb, var(--bg-tertiary) 82%, var(--bg-primary));
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.campaign-manual-preview-card.reels {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0b0d12;
}

.campaign-manual-preview-reels-stage {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: linear-gradient(145deg, #202635, #08090d);
  color: #fff;
}

.campaign-manual-preview-reels-stage > .campaign-manual-preview-media-tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 0;
  background: #111827;
}

.campaign-manual-preview-reels-stage > .campaign-manual-preview-media-tile > img,
.campaign-manual-preview-reels-stage > .campaign-manual-preview-media-tile > video {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.campaign-manual-preview-reels-stage .campaign-manual-preview-media-name {
  display: none;
}

.campaign-manual-preview-reels-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11.5px;
}

.campaign-manual-preview-reels-shade {
  position: absolute;
  inset: 36% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  pointer-events: none;
}

.campaign-manual-preview-reels-copy {
  position: absolute;
  right: 58px;
  bottom: 18px;
  left: 14px;
  z-index: 1;
  font-size: 12px;
  line-height: 1.5;
}

.campaign-manual-preview-reels-copy strong,
.campaign-manual-preview-reels-copy small {
  display: block;
}

.campaign-manual-preview-reels-copy > div {
  margin-top: 5px;
  white-space: pre-wrap;
}

.campaign-manual-preview-reels-copy small {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
}

.campaign-manual-preview-reels-actions {
  position: absolute;
  right: 13px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.campaign-manual-preview-reels-actions span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: 9px;
}

.campaign-manual-preview-card.chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, #e9eff7 72%, var(--bg-primary));
}

.campaign-manual-preview-card.chat .campaign-manual-preview-chat-head strong {
  color: #172033;
}

.campaign-manual-preview-card.chat .campaign-manual-preview-chat-head small,
.campaign-manual-preview-card.chat .campaign-manual-preview-sent {
  color: #667085;
}

.campaign-manual-preview-card.chat .campaign-manual-preview-chat-head {
  border-bottom-color: rgba(51, 65, 85, 0.35);
}

.campaign-manual-preview-chat-head {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-manual-preview-card.chat.zalo .campaign-manual-preview-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  background: #cfe0f7;
  color: #0068ff;
}

.campaign-manual-preview-card.chat.zalo.group .campaign-manual-preview-avatar {
  background: #d8e6f8;
}

.campaign-manual-preview-chat-bubble {
  max-width: 88%;
  align-self: flex-end;
  padding: 10px 12px;
  border-radius: 14px 14px 4px 14px;
  background: #cfe4ff;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.campaign-manual-preview-media-grid.compact {
  display: flex;
  align-self: flex-end;
  justify-content: flex-end;
  gap: 5px;
  background: transparent;
}

.campaign-manual-preview-media-grid.compact > span {
  width: 72px;
  height: 72px;
  min-height: 72px;
  flex: 0 0 72px;
  border-radius: 10px;
}

.campaign-manual-preview-media-grid.compact .campaign-manual-preview-media-tile,
.campaign-manual-preview-media-grid.compact .campaign-manual-preview-media-tile > img,
.campaign-manual-preview-media-grid.compact .campaign-manual-preview-media-tile > video {
  width: 72px;
  height: 72px;
  min-height: 72px;
}

.campaign-manual-preview-sent {
  align-self: flex-end;
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.campaign-manual-preview-card.sms {
  padding: 13px;
}

.campaign-manual-preview-sms-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-manual-preview-sms-head > svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 8px;
  background: #ddf5ec;
  color: #047857;
}

.campaign-manual-preview-sms-bubble {
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.campaign-manual-preview-sms-meta {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.campaign-manual-preview-email-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-manual-preview-email-head small,
.campaign-manual-preview-email-head span {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.campaign-manual-preview-email-head strong {
  color: var(--text-primary);
  font-size: 13px;
}

.campaign-manual-preview-email-head span {
  margin-top: 3px;
  font-size: 11px;
}

.campaign-manual-preview-card.email .campaign-manual-preview-body {
  padding: 12px 13px;
}

.campaign-manual-preview-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 13px 13px;
}

.campaign-manual-preview-files span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-manual-preview-notes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  padding: 11px 12px;
}

.campaign-manual-preview-notes > strong {
  margin-bottom: 1px;
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-manual-preview-notes > span {
  display: flex;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.campaign-manual-preview-notes i {
  color: var(--accent-primary);
  font-style: normal;
}

.campaign-manual-content-modal-footer {
  min-height: 61px;
  align-items: center;
  background: color-mix(in srgb, var(--bg-tertiary) 74%, var(--bg-secondary)) !important;
}

.campaign-manual-content-modal-footer-note {
  flex: 1 1 auto;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.campaign-manual-template-picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: var(--modal-backdrop-soft);
}

.campaign-manual-template-picker {
  display: flex;
  width: min(940px, calc(100% - 32px));
  height: min(600px, calc(100% - 32px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: 0 26px 64px rgba(15, 23, 42, 0.3);
}

.campaign-manual-template-picker > .modal-header > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.campaign-manual-template-picker > .modal-header small {
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-manual-template-picker-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 12px 14px;
}

.campaign-manual-template-card {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-primary);
}

.campaign-manual-template-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg-tertiary) 48%, var(--bg-primary));
}

.campaign-manual-template-card-head > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.campaign-manual-template-card-head strong {
  color: var(--text-primary);
  font-size: 12.5px;
}

.campaign-manual-template-card-head small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-manual-template-card-head em {
  padding: 3px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: #047857;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.campaign-manual-template-variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 10px;
}

.campaign-manual-template-variants > button {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--border-default) 64%, transparent);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.campaign-manual-template-variants > button.is-picked {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-primary));
}

.campaign-manual-template-check {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  color: #fff;
}

.campaign-manual-template-variants > button.is-picked .campaign-manual-template-check {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.campaign-manual-template-variants > button > em {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.campaign-manual-template-variants > button > span:last-child {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.campaign-manual-template-picker-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 12.5px;
}

.campaign-manual-template-picker > .modal-footer {
  align-items: center;
  background: color-mix(in srgb, var(--bg-tertiary) 48%, var(--bg-primary));
}

.campaign-manual-template-picker > .modal-footer > span {
  flex: 1;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.campaign-advanced-content-header,
.campaign-advanced-content-card-header,
.campaign-advanced-media-options,
.campaign-advanced-random-media-row,
.campaign-advanced-content-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.campaign-advanced-content-header {
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}

.campaign-advanced-content-heading {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  padding-top: 7px;
}

.campaign-advanced-content-header > .content-template-inline-toolbar {
  flex: 1 1 480px;
  align-self: flex-start;
  flex-direction: row;
}

.campaign-advanced-content-header strong,
.campaign-advanced-content-card-header strong {
  color: var(--text-primary);
  font-size: 13px;
}

.campaign-advanced-content-count {
  color: var(--text-tertiary);
  font-size: 12px;
}

.campaign-advanced-content-card,
.campaign-advanced-content-empty {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.campaign-advanced-content-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campaign-advanced-content-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.campaign-advanced-content-empty {
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}

.campaign-advanced-content-card-header {
  justify-content: space-between;
}

.campaign-advanced-content-add-row {
  display: flex;
  justify-content: flex-start;
}

.campaign-advanced-media-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.campaign-advanced-media-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.campaign-advanced-media-options {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.campaign-advanced-media-selected {
  flex: 1;
  min-width: 0;
}

.campaign-advanced-media-selected-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.campaign-advanced-random-media-row input {
  width: 64px;
  padding: 4px 8px;
}

.campaign-advanced-media-table-wrap {
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .campaign-advanced-media-layout {
    flex-direction: column;
  }

  .campaign-advanced-media-options {
    flex-basis: auto;
    width: 100%;
  }

  .campaign-advanced-media-selected {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .campaign-content-mode-segmented {
    width: 100%;
  }

  .campaign-content-mode-segmented button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
  }

  .campaign-manual-content-launcher {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-manual-content-launcher-actions {
    justify-content: space-between;
  }

  .campaign-manual-content-modal-overlay {
    padding: 12px;
  }

  .campaign-manual-content-modal {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }

  .campaign-manual-content-modal-body {
    padding: 12px;
  }

  .campaign-manual-content-modal > .modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-advanced-content-header > .content-template-inline-toolbar {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.sms-content-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
  margin-bottom: 2px;
}

.sms-content-counts {
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.sms-content-count-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 71, 126, 0.12);
  color: var(--accent-error);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.sms-content-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.sms-content-option {
  color: var(--text-secondary);
  font-weight: 500;
}

.sms-content-option span {
  white-space: nowrap;
}

.campaign-rewrite-run-toggle {
  margin-top: 8px;
}

.campaign-zalo-opt-out-option {
  margin-top: 8px;
}

.campaign-content-template-layout .stepper-form-group {
  margin-bottom: 0;
  min-width: 0;
}

.campaign-content-template-layout .message-content-textarea {
  height: 100%;
  min-height: 0;
}

.message-personalization-dropdown {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.message-personalization-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 79;
  display: none;
  width: min(700px, calc(100vw - 56px));
  height: 12px;
  transform: translateX(-50%);
}

.message-personalization-dropdown.two-token-sections.has-excel-tokens::after {
  width: min(560px, calc(100vw - 56px));
}

.message-personalization-dropdown.two-token-sections.no-excel-tokens::after {
  width: min(470px, calc(100vw - 56px));
}

.message-personalization-dropdown.single-token-section::after {
  width: min(360px, calc(100vw - 56px));
}

.message-personalization-dropdown.field-token-dropdown::after {
  left: 0;
  transform: none;
}

.message-personalization-button {
  color: var(--accent-primary);
}

.message-personalization-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 6px;
}

.message-personalization-field-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.stepper-form-group .message-personalization-field-title label {
  margin-bottom: 0;
}

.message-personalization-field-count {
  flex: 0 0 auto;
  font-size: 12px;
}

.message-personalization-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 80;
  display: none;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  width: min(700px, calc(100vw - 56px));
  max-height: 72vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--border-default), var(--border-default)) calc(12px + (100% - 24px - 28px) * 0.283333) 12px / 1px calc(100% - 24px) no-repeat,
    linear-gradient(var(--border-default), var(--border-default)) calc(12px + 14px + (100% - 24px - 28px) * 0.666667) 12px / 1px calc(100% - 24px) no-repeat,
    var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  transform: translateX(-50%);
}

.message-personalization-popover.two-token-sections {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  width: min(560px, calc(100vw - 56px));
  background:
    linear-gradient(var(--border-default), var(--border-default)) calc(12px + ((100% - 24px - 14px) * 0.487179) + 7px) 12px / 1px calc(100% - 24px) no-repeat,
    var(--bg-secondary);
}

.message-personalization-popover.two-token-sections.no-excel-tokens {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr);
  width: min(470px, calc(100vw - 56px));
  background:
    linear-gradient(var(--border-default), var(--border-default)) calc(12px + (100% - 24px - 14px) * 0.447368) 12px / 1px calc(100% - 24px) no-repeat,
    var(--bg-secondary);
}

.message-personalization-popover.single-token-section {
  grid-template-columns: minmax(0, 1fr);
  width: min(360px, calc(100vw - 56px));
  background: var(--bg-secondary);
}

.message-personalization-dropdown.field-token-dropdown .message-personalization-popover {
  left: 0;
  transform: none;
}

.message-personalization-dropdown.action-token-dropdown::after {
  right: 0;
  left: auto;
  transform: none;
}

.message-personalization-dropdown.action-token-dropdown .message-personalization-popover {
  right: 0;
  left: auto;
  transform: none;
}

.message-personalization-dropdown:hover::after,
.message-personalization-dropdown:focus-within::after {
  display: block;
}

.message-personalization-dropdown:hover .message-personalization-popover,
.message-personalization-dropdown:focus-within .message-personalization-popover {
  display: grid;
}

.message-personalization-popover .message-template-title {
  grid-column: 1 / -1;
  font-size: 14px;
  margin-bottom: 0;
}

.message-personalization-popover .message-template-section {
  position: relative;
  min-width: 0;
  margin-bottom: 0;
  gap: 2px;
  overflow: visible;
}

.message-personalization-popover .message-template-section + .message-template-section {
  padding-left: 14px;
}

.message-personalization-popover .message-template-section-title {
  font-size: 13px;
}

.message-personalization-popover .message-template-section-title svg {
  flex: 0 0 auto;
}

.message-personalization-popover .message-template-token {
  padding: 6px 9px;
  font-size: 11px;
}

.message-personalization-popover .message-template-token + label {
  margin-top: 8px;
}

.message-personalization-popover .message-template-token-row {
  gap: 5px;
}

.message-personalization-popover .message-template-control-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.message-personalization-popover .message-template-control-row + label {
  margin-top: 6px;
}

.message-template-dropdown {
  position: relative;
  min-width: 0;
  width: min(180px, 100%);
  z-index: 1;
}

.message-template-dropdown-button {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.message-template-dropdown-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-template-dropdown-button svg {
  flex: 0 0 auto;
}

.message-template-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 95;
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 132px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

.message-template-dropdown.open .message-template-dropdown-list {
  display: flex;
}

.message-template-dropdown.open {
  z-index: 2;
}

.message-template-dropdown:hover .message-template-dropdown-button,
.message-template-dropdown.open .message-template-dropdown-button,
.message-template-dropdown-button:hover {
  border-color: var(--accent-primary);
  background: rgba(124, 92, 252, 0.16);
  color: var(--text-primary);
}

.message-template-dropdown-item {
  width: 100%;
  min-height: 28px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.message-template-dropdown-item:hover,
.message-template-dropdown-item.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.message-template-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  padding: 16px;
  min-width: 0;
}

.message-template-title {
  color: var(--accent-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
}

.message-template-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.message-template-section:last-child {
  margin-bottom: 0;
}

.message-template-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.message-template-section label,
.message-template-control label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.message-template-token {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 8px 12px;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.message-template-token:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.message-template-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message-template-control-row {
  display: grid;
  grid-template-columns: minmax(96px, 116px) minmax(128px, 1fr);
  gap: 12px;
}

.message-template-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.email-html-editor-shell {
  width: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  overflow: hidden;
}

.email-html-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.email-html-toolbar-select {
  min-width: 108px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0 8px;
  font-size: 13px;
  outline: none;
}

.email-html-toolbar-button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.email-html-toolbar-button:hover:not(:disabled) {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.email-html-toolbar-button.active {
  background: rgba(124, 92, 252, 0.16);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.email-html-toolbar-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.email-html-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border-default);
  margin: 0 2px;
}

.email-html-editor-content {
  min-height: 300px;
  padding: 16px;
  color: var(--text-primary);
  outline: none;
  background: var(--bg-primary);
  font-size: 14px;
  line-height: 1.65;
}

.email-html-editor-content p {
  margin: 0 0 10px;
}

.email-html-editor-content h1,
.email-html-editor-content h2,
.email-html-editor-content h3 {
  margin: 12px 0 8px;
  line-height: 1.25;
  color: var(--text-primary);
}

.email-html-editor-content ul,
.email-html-editor-content ol {
  margin: 8px 0 12px 22px;
  padding: 0;
}

.email-html-editor-content blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent-primary);
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.content-preview-rich-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.content-preview-rich-text > :first-child {
  margin-top: 0;
}

.content-preview-rich-text > :last-child {
  margin-bottom: 0;
}

.content-preview-rich-text p,
.content-preview-rich-text h1,
.content-preview-rich-text h2,
.content-preview-rich-text h3,
.content-preview-rich-text blockquote,
.content-preview-rich-text ul,
.content-preview-rich-text ol {
  margin: 0 0 0.55em;
}

.content-preview-rich-text h1,
.content-preview-rich-text h2,
.content-preview-rich-text h3 {
  font-size: 1.15em;
}

.content-preview-rich-text ul,
.content-preview-rich-text ol {
  padding-left: 1.4em;
}

.content-preview-rich-text blockquote {
  margin-left: 1.25em;
  padding-left: 0.75em;
  border-left: 2px solid currentColor;
}

.content-preview-rich-text .zalo-preview-heading {
  font-size: 1.18em;
  line-height: 1.35;
}

.content-preview-rich-text .zalo-preview-indent {
  margin: 0 0 0.55em 1.25em;
}

.content-preview-rich-text .zalo-preview-link-url {
  text-decoration: none;
}

.content-preview-rich-text .zalo-preview-list {
  margin-left: 0;
}

@media (max-width: 980px) {
  .campaign-content-template-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .message-personalization-popover {
    grid-template-columns: minmax(0, 1fr);
    width: min(420px, calc(100vw - 40px));
    background: var(--bg-secondary);
  }

  .message-personalization-popover.no-excel-tokens {
    grid-template-columns: minmax(0, 1fr);
    width: min(420px, calc(100vw - 40px));
    background: var(--bg-secondary);
  }

  .message-personalization-popover .message-template-section + .message-template-section {
    padding-left: 0;
  }

  .message-personalization-dropdown::after {
    width: min(420px, calc(100vw - 40px));
  }

  .message-personalization-dropdown.no-excel-tokens::after {
    width: min(420px, calc(100vw - 40px));
  }
}

@media (max-width: 520px) {
  .content-editor-toolbar-row {
    align-items: stretch;
  }

  .content-editor-toolbar-row .ai-content-toolbar {
    flex-basis: 100%;
    min-width: 0;
  }

  .content-template-inline-toolbar {
    width: 100%;
    justify-content: flex-end;
  }

  .ai-content-toolbar {
    align-items: stretch;
  }

  .ai-content-count-label,
  .ai-content-count-input,
  .ai-content-action-button {
    flex-basis: 100%;
  }
}

/* --- Schedule Section Styles --- */
.schedule-radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.schedule-radio-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 0 !important;
}

.schedule-radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
  cursor: pointer;
  margin: 0;
}

.schedule-weekday-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.schedule-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 0 !important;
}

.schedule-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent-primary);
  cursor: pointer;
  margin: 0;
}

.schedule-checkbox-label input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.schedule-checkbox-label input[type="checkbox"]:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

.find-data-source-option {
  align-items: flex-start;
  gap: 8px;
}

.find-data-source-option input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
}

.find-data-source-option-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.find-data-source-option-title {
  color: var(--text-primary);
  font-weight: 500;
}

.find-data-source-option-description {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.stepper-form-group > .schedule-checkbox-label:has(+ .stepper-input),
.stepper-form-group > .schedule-checkbox-label:has(+ .stepper-textarea) {
  margin-bottom: 8px !important;
}

.schedule-option-label {
  padding: 10px 0 0 0;
  border-top: 1px solid var(--border-default);
  margin-top: 4px;
}

.schedule-option-label span {
  font-size: 12px;
  line-height: 1.4;
}

.schedule-hint {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-style: italic;
}

.schedule-hint-inline {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: italic;
}

.schedule-hint.action-limit-continue-note {
  font-size: 13px;
}

.schedule-multi-window-panel {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}

.schedule-multi-window-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.schedule-multi-window-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.schedule-multi-window-checkbox {
  font-size: 14px;
}

.schedule-multi-window-input {
  max-width: 100%;
}

.schedule-multi-window-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
}

.stepper-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-elevated);
}

.zalo-friend-blocklist-picker {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 96px;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.zalo-friend-blocklist-select-wrap {
  position: relative;
  min-width: 0;
}

.zalo-friend-blocklist-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.zalo-friend-blocklist-select {
  width: 100%;
  height: 36px;
  padding: 0 38px 0 12px;
  appearance: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.zalo-friend-blocklist-select:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.zalo-friend-blocklist-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.12);
}

.zalo-friend-blocklist-select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.zalo-friend-blocklist-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.zalo-friend-blocklist-manage-btn {
  width: 96px;
  height: 36px;
  justify-content: center;
  padding: 0 12px;
}

@media (max-width: 680px) {
  .zalo-friend-blocklist-picker {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}

/* --- Extra Settings Section --- */
.extra-comment-options {
  padding-left: 24px;
  border-left: 2px solid var(--border-hover);
  margin-bottom: 8px;
}

.found-data-handling-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.found-data-handling-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.found-data-handling-group-title {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.found-data-handling-group-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.found-data-handling-group-options .extra-comment-options {
  margin-bottom: 0;
}

.found-data-entitlement-note {
  margin-top: 6px;
  padding-left: 32px;
  color: var(--accent-warning);
}

.external-sms-section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.external-sms-section-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.45;
}

.external-sms-section-note .btn {
  flex-shrink: 0;
}

.external-sms-section-body .stepper-form-group {
  margin-bottom: 0;
}

.external-sms-section-fields {
  display: grid;
  gap: 12px;
}

.external-sms-option-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.external-sms-option-list.compact {
  max-height: none;
}

.extra-image-upload {
  display: flex;
  align-items: center;
  gap: 8px;
}

.extra-image-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}

.extra-image-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.extra-image-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* --- Stepper Grid (details table) --- */
.stepper-grid-toolbar {
  margin-bottom: 12px;
}

.campaign-details-grid {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.stepper-grid-container {
  overflow: auto;
  max-height: 350px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.campaign-local-data-pager {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
}

.campaign-local-data-pager > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.campaign-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.campaign-grid th {
  background: var(--bg-elevated);
  padding: 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text-tertiary);
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border-default);
}

.campaign-grid td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-default);
}

.campaign-grid .campaign-grid-index-col {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
  color: var(--text-tertiary);
}

.campaign-grid input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  outline: none;
}

.campaign-grid input:focus,
.campaign-grid input:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--border-hover);
}

.campaign-grid input:disabled {
  color: var(--text-tertiary);
}

/* =========== DATA SCAN MODAL =========== */
.data-scan-overlay {
  z-index: 2100;
  padding: calc(var(--titlebar-height) + 12px) 12px 12px;
}

.data-scan-overlay.minimized {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.data-scan-modal {
  max-width: 1180px;
  height: min(960px, calc(100vh - var(--titlebar-height) - 24px));
  max-height: calc(100vh - var(--titlebar-height) - 24px);
}

.data-scan-modal.minimized {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(420px, calc(100vw - 40px));
  height: auto;
  min-height: 0;
  max-width: none;
  pointer-events: auto;
}

.data-scan-header {
  align-items: center;
  flex-shrink: 0;
}

.data-scan-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-scan-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 4px;
}

.data-scan-target-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 2px 8px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.data-scan-target-group strong {
  max-width: 360px;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-target-group-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.data-scan-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
}

.data-scan-body.is-page-inbox {
  gap: 10px;
}

.data-scan-body .stepper-form-group {
  margin-bottom: 0;
}

.data-scan-load-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 232px);
  column-gap: 20px;
  row-gap: 12px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

.data-scan-load-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.data-scan-load-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 0;
  min-width: 0;
}

.data-scan-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(180px, 1fr) minmax(140px, 0.7fr);
  gap: 12px;
  align-items: end;
}

.data-scan-post-commenters-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  gap: 12px;
  align-items: end;
}

.data-scan-zalo-group-member-controls {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.data-scan-page-inbox-load-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.data-scan-page-inbox-load-controls > .stepper-form-group {
  max-width: 420px;
}

.data-scan-page-inbox-scan-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-size: 13px;
}

.data-scan-page-inbox-scan-options legend {
  padding: 0 5px;
  color: var(--text-secondary);
}

.data-scan-page-inbox-radio,
.data-scan-page-inbox-days-row,
.data-scan-page-inbox-limit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-scan-page-inbox-radio input {
  flex-shrink: 0;
  margin: 0;
}

.data-scan-page-inbox-days-row,
.data-scan-page-inbox-limit-row {
  flex-wrap: wrap;
}

.stepper-form-group.data-scan-page-inbox-limit-row > label {
  margin-bottom: 0;
}

.data-scan-page-inbox-number {
  width: 115px;
}

.data-scan-page-inbox-scan-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger-color, #dc2626);
}

.data-scan-zalo-member-mode {
  min-width: 0;
}

.data-scan-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.stepper-form-group .data-scan-field-label-row > label {
  margin-bottom: 0;
}

.data-scan-inline-load-button {
  min-height: 22px;
  margin: -3px 0;
  padding: 2px 5px;
  color: var(--accent-primary);
  font-size: 12px;
}

.campaign-other-data-source {
  position: relative;
  display: inline-flex;
}

.campaign-other-data-source > .btn {
  white-space: nowrap;
}

.campaign-other-data-source-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 3200;
  min-width: 260px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
  animation: contextMenuIn 0.12s ease-out;
}

.campaign-other-data-source-item {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.campaign-other-data-source-item:hover {
  background: var(--bg-tertiary);
}

.data-scan-zalo-member-group,
.data-scan-zalo-member-linked-group,
.data-scan-zalo-member-link {
  min-width: 0;
}

.data-scan-zalo-member-link-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(360px, 1.25fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.data-scan-zalo-link-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.data-scan-zalo-link-input-wrap:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.data-scan-zalo-link-input-wrap.is-disabled {
  opacity: 0.55;
}

.data-scan-zalo-link-icon {
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.data-scan-zalo-link-input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
}

.data-scan-zalo-link-input::placeholder {
  color: var(--text-tertiary);
}

.data-scan-zalo-qr-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(124, 92, 252, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(124, 92, 252, 0.12);
  color: var(--accent-primary-hover);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.data-scan-zalo-qr-button:not(:disabled):hover {
  border-color: var(--accent-primary);
  background: rgba(124, 92, 252, 0.2);
  color: var(--text-primary);
}

.data-scan-zalo-qr-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.data-scan-hidden-file-input {
  display: none;
}

.data-scan-zalo-member-link-row .stepper-form-group {
  min-width: 0;
}

.data-scan-zalo-remarketing-controls {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(160px, 240px) minmax(160px, 240px);
  gap: 12px;
  align-items: end;
}

.data-scan-zalo-remarketing-action-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
}

.data-scan-zalo-remarketing-action-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.data-scan-zalo-remarketing-action-trigger:hover:not(:disabled) {
  background: var(--bg-hover);
}

.data-scan-zalo-remarketing-action-trigger.is-open {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.data-scan-zalo-remarketing-action-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.data-scan-zalo-remarketing-action-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-zalo-remarketing-action-trigger svg {
  flex: 0 0 auto;
  transition: transform var(--transition-fast);
}

.data-scan-zalo-remarketing-action-trigger.is-open svg {
  transform: rotate(180deg);
}

.data-scan-zalo-remarketing-action-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 45;
  width: max(100%, 320px);
  max-height: min(240px, 42vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.data-scan-zalo-remarketing-action-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.data-scan-zalo-remarketing-action-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.data-scan-zalo-remarketing-action-option.selected {
  color: var(--accent-primary);
  background: transparent;
}

.data-scan-zalo-remarketing-action-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  color: #ffffff;
  background: var(--bg-secondary);
}

.data-scan-zalo-remarketing-action-option.selected .data-scan-zalo-remarketing-action-check {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.data-scan-zalo-remarketing-action-divider {
  height: 1px;
  margin: 5px 2px;
  background: var(--border-default);
}

.data-scan-zalo-remarketing-action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-page-inbox-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.data-scan-page-inbox-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent-primary);
}

.data-scan-readonly-field {
  display: flex;
  align-items: center;
  min-height: 38px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.data-scan-filter-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.data-scan-filter-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 232px);
  column-gap: 20px;
  row-gap: 12px;
  align-items: start;
}

.data-scan-filter-header.has-contact-group-filter.has-status-filter {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(180px, 232px));
}

.data-scan-filter-header.has-dataset-filter.has-contact-group-filter {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(170px, 225px));
}

.data-scan-filter-header.has-dataset-filter.has-contact-group-filter.has-status-filter {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(160px, 220px));
}

.data-scan-filter-header.has-zalo-tags {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(170px, 220px));
  column-gap: 12px;
}

.data-scan-filter-header.has-zalo-tags.has-status-filter {
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 220px)) minmax(130px, 180px);
}

.data-scan-filter-header.has-zalo-tags.has-dataset-filter {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 210px));
}

.data-scan-filter-header.has-zalo-tags.has-dataset-filter.has-status-filter {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(140px, 200px)) minmax(130px, 180px);
}

.data-scan-filter-header.has-zalo-tags.has-contact-group-filter {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(150px, 210px));
}

.data-scan-filter-header.has-zalo-tags.has-contact-group-filter.has-status-filter {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(140px, 200px)) minmax(130px, 180px);
}

.data-scan-filter-header.has-zalo-tags.has-dataset-filter.has-contact-group-filter {
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(135px, 195px));
}

.data-scan-filter-header.has-zalo-tags.has-dataset-filter.has-contact-group-filter.has-status-filter {
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(125px, 185px)) minmax(120px, 170px);
}

.data-scan-search-group {
  min-width: 0;
}

.data-scan-search-group > label:first-child {
  visibility: hidden;
}

.data-scan-search-group .data-scan-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  min-width: 0;
  margin-bottom: 0;
  color: var(--text-tertiary);
  font-weight: 400;
}

.data-scan-filter-header .data-scan-search-group:only-child {
  grid-column: 1 / -1;
}

.data-scan-filter-status,
.data-scan-filter-contact-group,
.data-scan-filter-dataset {
  min-width: 0;
}

.data-scan-tag-filter-dropdown {
  position: relative;
  width: 100%;
  min-width: 0;
}

.data-scan-tag-filter-trigger {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.data-scan-tag-filter-trigger:hover:not(:disabled) {
  background: var(--bg-hover);
}

.data-scan-tag-filter-trigger.is-open {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.data-scan-tag-filter-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.data-scan-tag-filter-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-tag-filter-trigger svg {
  flex: 0 0 auto;
  color: var(--text-secondary);
  transition: transform var(--transition-fast);
}

.data-scan-tag-filter-trigger.is-open svg {
  transform: rotate(180deg);
}

.data-scan-tag-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: max(100%, 260px);
  max-height: min(260px, 42vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.data-scan-tag-filter-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.data-scan-tag-filter-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.data-scan-tag-filter-option.selected {
  color: var(--accent-primary);
}

.data-scan-tag-filter-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  color: #ffffff;
  background: var(--bg-secondary);
}

.data-scan-tag-filter-option.selected .data-scan-tag-filter-check {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.data-scan-tag-filter-divider {
  height: 1px;
  margin: 5px 2px;
  background: var(--border-default);
}

.data-scan-tag-filter-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-page-inbox-controls {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(180px, 1fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr) minmax(220px, 1.1fr);
  gap: 12px;
  align-items: end;
}

.data-scan-page-inbox-keywords {
  grid-column: 1 / -1;
}

.data-scan-page-inbox-time-status {
  grid-column: span 2;
}

.data-scan-range {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  flex-wrap: wrap;
}

.data-scan-range .stepper-input {
  width: 80px;
}

.data-scan-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
  max-width: 420px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.data-scan-load-button {
  height: 38px;
  min-width: 132px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.data-scan-search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  width: 100%;
  font-size: 13px;
  line-height: 18px;
}

.data-scan-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 12px;
  flex-wrap: wrap;
  min-height: 22px;
}

.data-scan-checkbox-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.data-scan-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
}

.data-scan-pagination-summary {
  margin-right: auto;
}

.data-scan-loading-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
}

.data-scan-progress {
  position: relative;
  min-height: 112px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 38px 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.data-scan-progress.is-collapsed {
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.data-scan-progress-messages {
  min-width: 0;
}

.data-scan-progress.is-collapsed .data-scan-progress-messages {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.data-scan-progress-toggle {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
}

.data-scan-progress-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.data-scan-minimized-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-default);
}

.data-scan-minimized-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.data-scan-minimized-message {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.data-scan-minimized-actions {
  display: flex;
  justify-content: flex-end;
}

.data-scan-table-wrap {
  flex: 1 1 240px;
  max-height: none;
  min-height: 180px;
  overflow: auto;
}

.data-scan-table tbody tr {
  cursor: pointer;
}

.data-scan-table.is-upload-data {
  min-width: 1480px;
}

.data-scan-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-scan-selected-row {
  background: rgba(124, 92, 252, 0.12);
}

.data-scan-table tbody tr.data-scan-disabled-row {
  cursor: not-allowed;
  opacity: 0.55;
}

.data-scan-table tbody tr.data-scan-disabled-row:hover {
  background: transparent;
}

.data-scan-table td {
  height: 34px;
  vertical-align: middle;
}

.data-scan-table .data-scan-avatar-col {
  width: 112px;
  min-width: 112px;
  text-align: center;
  white-space: nowrap;
}

.data-scan-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.data-scan-text-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.data-scan-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.data-scan-name-cell {
  max-width: 220px;
}

.data-scan-uid-cell {
  max-width: 220px;
}

.data-scan-link-cell {
  max-width: 360px;
}

.data-scan-tag-cell {
  min-width: 150px;
  max-width: 220px;
}

.data-scan-tag-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  vertical-align: middle;
}

.data-scan-tag-chip {
  min-width: 0;
  max-width: 118px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  border: 1px solid rgba(124, 92, 252, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(124, 92, 252, 0.12);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 0 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-tag-chip.is-zalo {
  border-color: rgba(6, 182, 212, 0.32);
  background: rgba(6, 182, 212, 0.12);
}

.data-scan-tag-chip.is-more {
  max-width: none;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.data-scan-tag-empty {
  color: var(--text-tertiary);
  font-size: 12px;
}

.data-scan-number-cell {
  min-width: 104px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.data-scan-phone-cell {
  max-width: 120px;
}

.data-scan-message-cell {
  max-width: 320px;
}

.data-scan-date-cell {
  max-width: 150px;
}

.data-scan-group-contact-list .data-scan-name-cell,
.data-scan-group-contact-list .data-scan-uid-cell {
  max-width: 180px;
}

.data-scan-group-contact-list .data-scan-link-cell {
  max-width: 260px;
}

.data-scan-group-contact-list .data-scan-tag-cell {
  max-width: 180px;
}

.data-scan-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.data-scan-status-badge.is-active {
  color: var(--accent-success);
}

.data-scan-status-badge.is-muted {
  color: var(--text-tertiary);
}

.data-scan-groups-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
}

.data-scan-groups-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.data-scan-groups-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.data-scan-groups-subtitle,
.data-scan-group-count {
  color: var(--text-tertiary);
  font-size: 11px;
}

.data-scan-group-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(360px, 1.3fr);
  gap: 12px;
  min-height: 170px;
}

.data-scan-group-list,
.data-scan-group-contact-list {
  min-height: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
}

.data-scan-group-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.data-scan-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.data-scan-group-row:hover,
.data-scan-group-row.is-active {
  background: var(--bg-hover);
}

.data-scan-group-row.is-output-disabled input[type="checkbox"] {
  cursor: not-allowed;
  opacity: 0.45;
}

.data-scan-group-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.data-scan-group-row-main {
  min-width: 0;
  flex: 1;
}

.data-scan-group-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-group-rename-input {
  width: 100%;
  height: 30px;
}

.data-scan-group-empty {
  padding: 18px 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.data-scan-group-table-wrap {
  max-height: 220px;
  border: none;
  border-radius: 0;
}

.data-scan-below-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.data-scan-group-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.data-scan-group-action-button {
  height: 38px;
  justify-content: center;
  white-space: nowrap;
}

.data-scan-group-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
}

.data-group-manager-backdrop {
  z-index: 3450;
}

.data-scan-group-modal {
  width: min(520px, 100%);
  max-height: min(620px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.data-scan-groups-management-modal {
  width: min(980px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.data-scan-group-modal-header,
.data-scan-group-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
}

.data-scan-group-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--border-default);
  border-bottom: none;
}

.data-scan-group-modal-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

.data-scan-group-modal-subtitle,
.data-scan-group-modal-label {
  color: var(--text-tertiary);
  font-size: 11px;
}

.data-scan-group-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.data-scan-groups-management-body {
  flex: 1;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: hidden;
}

.data-scan-groups-management-modal .data-scan-group-grid {
  min-height: 360px;
}

.data-scan-groups-management-modal .data-scan-group-table-wrap {
  max-height: 430px;
}

.data-group-manager-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.data-group-manager-field {
  min-width: 0;
}

.data-group-manager-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-group-manager-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.data-group-manager-search svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.data-group-manager-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  outline: none;
}

.data-scan-group-modal-list {
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.data-scan-group-modal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.data-scan-group-modal-option:last-child {
  border-bottom: none;
}

.data-scan-group-modal-option:hover {
  background: var(--bg-hover);
}

.data-scan-group-modal-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.data-scan-group-modal-option.is-disabled:hover {
  background: transparent;
}

.data-scan-group-modal-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.data-scan-group-modal-option-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-scan-group-modal-option-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-scan-contact-type-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.data-scan-new-group-toggle {
  align-self: flex-start;
}

.data-scan-new-group-field {
  display: grid;
  gap: 6px;
}

.data-scan-new-group-field > label,
.data-group-manager-create-name-field > label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.data-scan-new-group-field .required,
.data-group-manager-create-name-field .required {
  margin-left: 2px;
  color: var(--accent-error);
}

.data-scan-new-group-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-scan-new-group-row .stepper-input {
  flex: 1;
  min-width: 0;
}

.data-scan-footer {
  justify-content: space-between;
  flex-shrink: 0;
}

.data-scan-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .data-scan-load-section {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .data-scan-load-actions {
    align-items: stretch;
    justify-content: stretch;
  }

  .data-scan-controls {
    grid-template-columns: 1fr;
  }

  .data-scan-post-commenters-controls {
    grid-template-columns: 1fr;
  }

  .data-scan-zalo-group-member-controls {
    grid-template-columns: 1fr;
  }

  .data-scan-zalo-member-link-row {
    grid-template-columns: 1fr;
  }

  .data-scan-page-inbox-controls {
    grid-template-columns: 1fr;
  }

  .data-scan-page-inbox-load-controls {
    grid-template-columns: 1fr;
  }

  .data-scan-zalo-remarketing-controls {
    grid-template-columns: 1fr;
  }

  .data-scan-zalo-remarketing-action-menu {
    width: 100%;
  }

  .data-scan-page-inbox-keywords {
    grid-column: auto;
  }

  .data-scan-page-inbox-time-status {
    grid-column: auto;
  }

  .data-scan-filter-header {
    grid-template-columns: 1fr;
  }

  .data-scan-filter-header.has-zalo-tags,
  .data-scan-filter-header.has-dataset-filter,
  .data-scan-filter-header.has-dataset-filter.has-contact-group-filter,
  .data-scan-filter-header.has-dataset-filter.has-contact-group-filter.has-status-filter,
  .data-scan-filter-header.has-zalo-tags.has-status-filter,
  .data-scan-filter-header.has-zalo-tags.has-dataset-filter,
  .data-scan-filter-header.has-zalo-tags.has-dataset-filter.has-status-filter,
  .data-scan-filter-header.has-contact-group-filter,
  .data-scan-filter-header.has-contact-group-filter.has-status-filter,
  .data-scan-filter-header.has-zalo-tags.has-contact-group-filter,
  .data-scan-filter-header.has-zalo-tags.has-contact-group-filter.has-status-filter,
  .data-scan-filter-header.has-zalo-tags.has-dataset-filter.has-contact-group-filter,
  .data-scan-filter-header.has-zalo-tags.has-dataset-filter.has-contact-group-filter.has-status-filter {
    grid-template-columns: 1fr;
  }

  .data-scan-tag-filter-menu {
    width: 100%;
  }

  .data-scan-search-group > label:first-child {
    display: none;
  }

  .data-scan-search {
    max-width: none;
    min-width: 0;
  }

  .data-scan-groups-header {
    align-items: stretch;
    flex-direction: column;
  }

  .data-scan-group-grid {
    grid-template-columns: 1fr;
  }

  .data-scan-groups-management-modal .data-scan-group-grid {
    min-height: 0;
  }

  .data-scan-groups-management-body {
    overflow-y: auto;
  }

  .data-group-manager-toolbar {
    grid-template-columns: 1fr;
  }

  .data-scan-group-action-button,
  .data-scan-load-button {
    flex: 1;
    min-width: 140px;
  }

  .data-scan-load-button {
    width: 100%;
  }

  .data-scan-below-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .data-scan-group-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .data-scan-new-group-row {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Create and edit use the same modal, independent of the sidebar layout. */
.data-group-form-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3460;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop-strong, rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(3px);
}

.data-group-form-modal {
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.28);
  outline: none;
}

.data-group-form-header {
  display: flex;
  align-items: center;
  flex: none;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-form-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--bg-accent-subtle, rgba(99, 102, 241, 0.12));
  color: var(--accent-primary, #6366f1);
}

.data-group-form-header h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; }
.data-group-form-header .btn-icon { width: 36px; height: 36px; flex: none; }
.data-group-form { display: flex; flex-direction: column; min-height: 0; }
.data-group-form-fields { display: grid; gap: 20px; padding: 24px; overflow-y: auto; min-height: 0; }
.data-group-form-fields .data-group-form-field { display: grid; gap: 8px; min-width: 0; margin: 0; font-size: 13px; font-weight: 500; }
.data-group-form-fields input:not([type="color"]),
.data-group-form-fields select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  font-weight: 400;
}
.data-group-form-fields input:focus,
.data-group-form-fields select:focus { border-color: var(--accent-primary, #6366f1); outline: 2px solid var(--bg-accent-subtle, rgba(99, 102, 241, 0.12)); }
.data-group-form-fields input[type="color"] { appearance: none; width: 38px; height: 38px; padding: 3px; overflow: hidden; border: 1px solid var(--border-default); border-radius: 50%; background: var(--bg-primary); cursor: pointer; }
.data-group-form-fields input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.data-group-form-fields input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.data-group-form-fields input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.data-group-form-fields .required,
.data-group-form-fields [role="alert"] { color: var(--danger, #ef4444); }
.data-group-form-fields small { white-space: normal; font-weight: 400; }
.data-group-form-actions { display: flex; justify-content: flex-end; gap: 10px; flex: none; padding: 16px 24px; border-top: 1px solid var(--border-default); }
.data-group-form-actions .btn { min-height: 40px; padding: 8px 18px; }
@media (max-width: 540px) {
  .data-group-form-backdrop { padding: 16px; }
  .data-group-form-modal { max-height: calc(100dvh - 32px); }
  .data-group-form-header { padding: 16px; }
  .data-group-form-fields { padding: 20px 16px; }
  .data-group-form-actions { padding: 16px; }
}

/* =========== STAFF-SHARED DATA GROUPS =========== */
.data-group-manager-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--modal-backdrop-soft);
  backdrop-filter: blur(3px);
}

.data-group-manager-modal {
  position: relative;
  width: 100%;
  height: 90%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.data-group-manager-modal.is-fullscreen { height: 100%; border-radius: 0; }

.data-group-manager-header {
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.data-group-manager-list-refresh.btn-icon { width: 28px; height: 28px; flex: none; }
.data-group-manager-section-title > .data-group-manager-list-refresh { margin-left: auto; }

.data-group-manager-header-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 9px;
  background: var(--bg-accent-subtle);
  color: var(--accent-primary);
}

.data-group-manager-heading {
  min-width: 0;
  flex: 1;
}

.data-group-manager-heading h2,
.data-group-manager-active-title h3,
.data-group-import-modal h3,
.data-group-move-modal h3 {
  margin: 0;
  color: var(--text-primary);
}

.data-group-manager-heading h2 {
  font-size: 16px;
  line-height: 1.25;
}

.data-group-manager-heading p,
.data-group-manager-active-title p,
.data-group-import-modal header p,
.data-group-move-modal header p {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.35;
}

.data-group-manager-workspace {
  min-height: 0;
  display: flex;
  flex: 1;
}

.data-group-panel-resizer {
  position: relative;
  width: 6px;
  flex: 0 0 6px;
  cursor: col-resize;
  touch-action: none;
  background: var(--bg-secondary);
}
.data-group-panel-resizer::after { content: ''; position: absolute; inset: 0 2px; background: var(--border-default); }
.data-group-panel-resizer:hover::after,
.data-group-panel-resizer:focus-visible::after { background: var(--accent-primary); }
.data-group-panel-resizer:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.data-group-manager-workspace.is-resizing,
.data-group-manager-workspace.is-resizing * { cursor: col-resize !important; user-select: none; }
@media (max-width: 1050px) { .data-group-panel-resizer.is-info { display: none; } }
@media (max-width: 760px) { .data-group-panel-resizer { display: none; } }

.data-group-manager-sidebar {
  width: var(--data-group-sidebar-width, 280px);
  min-width: 260px;
  min-height: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.data-group-manager-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: none;
  padding: 13px 14px 12px;
}

.data-group-manager-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.data-group-manager-count-pill,
.data-group-manager-selection-pill {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-accent-subtle);
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.data-group-manager-search-field {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.data-group-manager-search-field:focus-within {
  border-color: var(--border-active);
  box-shadow: 0 0 0 2px var(--bg-accent-subtle);
}

.data-group-manager-search-field svg {
  flex: none;
}

.data-group-manager-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12.5px;
}

.data-group-manager-search-field input::placeholder {
  color: var(--text-tertiary);
}

.data-group-manager-create-button {
  width: 100%;
  height: 36px;
  justify-content: center;
}

.data-group-manager-sidebar-type-filter {
  width: 100%;
  height: 36px;
  padding-top: 4px;
  padding-bottom: 5px;
  font-size: 12.5px;
  line-height: 20px;
}

.data-group-color-input {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  cursor: pointer;
  overflow: hidden;
}

.data-group-color-input span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.data-group-color-input input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.data-group-color-input.is-compact {
  width: 22px;
  height: 28px;
  border-color: transparent;
  background: transparent;
}

.data-group-color-input.is-compact:hover {
  border-color: var(--border-default);
  background: var(--bg-hover);
}

.data-group-color-input.is-compact span {
  width: 10px;
  height: 10px;
}

.data-group-manager-group-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--border-default);
}

.data-group-manager-group-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px 5px 6px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.data-group-manager-group-row:hover {
  background: var(--bg-hover);
}

.data-group-manager-group-row.is-active {
  background: var(--bg-accent-subtle);
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.data-group-manager-group-main {
  min-width: 0;
  flex: 1;
}

.data-group-manager-group-name-row,
.data-group-manager-active-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-group-manager-group-name,
.data-group-manager-group-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-manager-group-name {
  min-width: 0;
  flex: 0 1 auto;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-manager-id-copy {
  height: 19px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 0 5px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: 9.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.data-group-manager-id-copy:hover {
  border-color: var(--border-active);
  background: var(--bg-hover);
  color: var(--accent-primary);
}

.data-group-manager-id-copy:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.data-group-manager-id-copy.is-active-header {
  height: 21px;
  padding: 0 6px;
  font-size: 10px;
}

.data-group-manager-group-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.data-group-manager-group-meta > span:first-child {
  flex: none;
}

.data-group-manager-group-meta .data-group-manager-type-badge {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-group-manager-edit-type-select {
  width: 100%;
  height: 30px;
  padding: 3px 26px 4px 7px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 11.5px;
  line-height: 18px;
}

.data-group-manager-edit-type-select:focus {
  border-color: var(--border-active);
}

.data-group-manager-edit-type-select:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.data-group-manager-group-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: none;
  opacity: 0.68;
}

.data-group-manager-group-row:hover .data-group-manager-group-actions,
.data-group-manager-group-row.is-active .data-group-manager-group-actions {
  opacity: 1;
}

.data-group-manager-group-actions .btn-icon {
  width: 24px;
  height: 24px;
}

.data-group-manager-group-actions .btn-icon.is-success {
  color: var(--accent-success);
}

.data-group-manager-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 24px 16px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.data-group-manager-empty svg:not(.spin) {
  opacity: 0.58;
}

.data-group-manager-sidebar-pager,
.data-group-manager-member-pager {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 10px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 11px;
}

.data-group-manager-sidebar-pager > div,
.data-group-manager-member-pager > div {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.data-group-manager-sidebar-pager .btn-icon,
.data-group-manager-member-pager .btn-icon {
  width: 28px;
  height: 28px;
}

.data-group-manager-content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--bg-primary);
}

.data-group-manager-active-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.data-group-manager-active-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}

.data-group-manager-active-title > div {
  min-width: 0;
}

.data-group-manager-active-name-row h3 {
  min-width: 0;
  flex: 0 1 auto;
}

.data-group-manager-copy-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: 11.5px;
  font-weight: 500;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.data-group-manager-copy-notice.is-success svg {
  color: var(--accent-success);
}

.data-group-manager-copy-notice.is-error svg {
  color: var(--accent-error);
}

.data-group-manager-active-title h3 {
  overflow: hidden;
  font-size: 14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-manager-active-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.data-group-manager-active-meta > span:first-child {
  flex: none;
}

.data-group-manager-active-color {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex: none;
  border-radius: 50%;
}

.data-group-manager-context-filters {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  flex: none;
}

.data-group-manager-context-filters label,
.data-group-import-fields label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-group-manager-context-filters label > span,
.data-group-import-fields label > span {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-group-manager-context-filters select,
.data-group-manager-inline-filter select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12.5px;
}

.data-group-manager-context-filters label:first-child select {
  width: 190px;
}

.data-group-manager-context-filters label:last-child select {
  width: 158px;
}

.data-group-manager-filter-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-manager-search-field.is-member-search {
  max-width: none;
  flex: 1;
}

.data-group-manager-inline-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.data-group-manager-inline-filter > span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.data-group-manager-inline-filter select {
  height: 34px;
  max-width: 190px;
}

.data-group-manager-action-bar {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 18px;
  background: var(--bg-primary);
}

.data-group-manager-selection-actions,
.data-group-manager-action-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.data-group-manager-selection-pill {
  border-radius: var(--radius-sm);
}

.data-group-manager-action-hint {
  color: var(--text-tertiary);
  font-size: 12px;
}

.data-group-manager-action-right {
  margin-left: auto;
  flex: none;
}

.data-group-manager-add-menu-wrap {
  position: relative;
}

.data-group-manager-add-button {
  height: 36px;
  gap: 8px;
  padding: 0 8px 0 14px;
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-manager-add-divider {
  width: 1px;
  height: 18px;
  margin: 0 1px;
  background: rgba(255, 255, 255, 0.34);
}

.data-group-manager-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 292px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.data-group-manager-add-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}

.data-group-manager-add-menu button:hover {
  background: var(--bg-hover);
}

.data-group-manager-add-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.data-group-manager-add-menu button > span:first-child {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 8px;
}

.data-group-manager-add-menu button > span:first-child.is-file {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-success);
}

.data-group-manager-add-menu button > span:first-child.is-scan {
  background: var(--bg-accent-subtle);
  color: var(--accent-primary);
}

.data-group-manager-add-menu button > span:last-child {
  min-width: 0;
}

.data-group-manager-add-menu strong,
.data-group-manager-add-menu small {
  display: block;
}

.data-group-manager-add-menu strong {
  font-size: 12.5px;
}

.data-group-manager-add-menu small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.35;
}

.data-group-manager-table-wrap {
  min-height: 0;
  flex: 1;
  overflow: auto;
  border-top: 1px solid var(--border-default);
  background: var(--bg-primary);
}

.data-group-manager-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: auto;
}

.data-group-manager-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.data-group-manager-table td {
  max-width: 170px;
  height: 34px;
  padding: 0 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.data-group-manager-table tbody tr:hover td {
  background: var(--bg-hover);
}

.data-group-manager-table tbody tr.is-selected td {
  background: var(--bg-accent-subtle);
}

.data-group-manager-table th.is-checkbox,
.data-group-manager-table td.is-checkbox {
  width: 42px;
  min-width: 42px;
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}

.data-group-manager-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.data-group-manager-table input[type="checkbox"]:disabled {
  cursor: wait;
  opacity: 0.6;
}

.data-group-manager-table td.is-name {
  min-width: 150px;
  color: var(--text-primary);
  font-weight: 600;
}

.data-group-manager-name-button {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.data-group-manager-name-button:hover {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-group-manager-table td.is-uid,
.data-group-manager-table td.is-link {
  min-width: 120px;
  max-width: 190px;
}

.data-group-manager-table td.is-dataset,
.data-group-manager-table td.is-source,
.data-group-manager-table td.is-automation {
  min-width: 140px;
  max-width: 220px;
}

.data-group-manager-table th.is-source,
.data-group-manager-table th.is-automation {
  min-width: 140px;
}

.data-group-manager-table th.is-action,
.data-group-manager-table td.is-action {
  width: 42px;
  min-width: 42px;
  padding-right: 7px;
  padding-left: 7px;
  text-align: center;
}

.data-group-manager-table-empty {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.data-group-manager-table-empty > svg:not(.spin) {
  opacity: 0.55;
}

.data-group-manager-account-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.data-group-manager-account-cell > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-group-manager-account-cell em {
  flex: none;
  padding: 1px 5px;
  border: 1px solid rgba(244, 63, 94, 0.34);
  border-radius: var(--radius-full);
  background: rgba(244, 63, 94, 0.09);
  color: var(--accent-error);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.data-group-manager-accountless {
  color: var(--text-tertiary);
}

.data-group-manager-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.data-group-manager-delete-action {
  color: var(--text-tertiary);
}

.data-group-manager-delete-action:hover {
  background: rgba(244, 63, 94, 0.12);
  color: var(--accent-error);
}

.data-group-manager-status {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
}

.data-group-manager-status.is-active {
  color: var(--accent-success);
}

.data-group-manager-status.is-muted {
  color: var(--text-tertiary);
}

.data-group-manager-member-pager {
  min-height: 48px;
  padding: 10px 18px;
}

.data-group-manager-member-pager > div > span {
  min-width: 88px;
  text-align: center;
}

.data-group-manager-picker-footer {
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 18px;
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.data-group-manager-picker-footer > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.data-group-manager-picker-footer strong {
  max-width: 300px;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-manager-picker-footer small {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

.data-group-manager-picker-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.data-group-manager-picker-actions .btn {
  height: 36px;
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-submodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop-strong);
  backdrop-filter: blur(3px);
}

.data-group-import-modal,
.data-group-move-modal,
.data-group-delete-modal {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.data-group-import-modal {
  width: min(760px, 100%);
}

.data-group-move-modal {
  width: min(470px, 100%);
}

.data-group-delete-modal {
  width: min(510px, 100%);
}

.data-group-import-modal > header,
.data-group-move-modal > header,
.data-group-delete-modal > header {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 12px 17px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-import-modal > header > div,
.data-group-move-modal > header > div,
.data-group-delete-modal > header > div {
  min-width: 0;
  flex: 1;
}

.data-group-import-modal h3,
.data-group-move-modal h3,
.data-group-delete-modal h3 {
  font-size: 15px;
}

.data-group-delete-modal > header p {
  margin-top: 3px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.data-group-delete-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 17px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.data-group-delete-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  cursor: pointer;
}

.data-group-delete-option input {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent-primary);
}

.data-group-delete-option span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.data-group-delete-option strong {
  color: var(--text-primary);
  font-size: 12px;
}

.data-group-delete-option small,
.data-group-delete-note {
  color: var(--text-tertiary);
  font-size: 11px;
}

.data-group-delete-modal > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 17px;
  border-top: 1px solid var(--border-default);
}

.data-group-import-body {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13px;
  padding: 15px 17px;
  overflow-y: auto;
}

.data-group-import-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr);
  gap: 12px;
}

.data-group-import-fields .stepper-input {
  width: 100%;
  height: 36px;
}

.data-group-import-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-import-tabs button {
  padding: 9px 4px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12.5px;
  cursor: pointer;
}

.data-group-import-tabs button.is-active {
  border-bottom-color: var(--accent-primary);
  color: var(--text-primary);
  font-weight: 700;
}

.data-group-import-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.data-group-import-text label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.data-group-import-text textarea {
  width: 100%;
  min-height: 250px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12.5px;
  line-height: 1.55;
}

.data-group-import-text textarea:focus {
  border-color: var(--border-active);
}

.data-group-import-text > span,
.data-group-import-dropzone > span {
  color: var(--text-tertiary);
  font-size: 11.5px;
}

.data-group-import-dropzone {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--accent-primary);
  text-align: center;
  cursor: pointer;
}

.data-group-import-dropzone:hover {
  border-color: var(--border-active);
  background: var(--bg-accent-subtle);
}

.data-group-import-dropzone strong {
  color: var(--text-primary);
  font-size: 13px;
}

.data-group-import-dropzone input {
  display: none;
}

.data-group-import-modal > footer,
.data-group-move-modal > footer {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 11px 17px;
  border-top: 1px solid var(--border-default);
}

.data-group-move-list {
  min-height: 170px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
}

.data-group-move-list > button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}

.data-group-move-list > button:hover {
  background: var(--bg-hover);
}

.data-group-move-list > button.is-selected {
  border-color: var(--border-active);
  background: var(--bg-accent-subtle);
}

.data-group-move-list > button strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-move-list > button small {
  color: var(--text-tertiary);
  font-size: 11px;
  white-space: nowrap;
}

.data-group-move-list > button > svg {
  flex: none;
  color: var(--accent-primary);
}

.data-group-scan-layer {
  position: fixed;
  inset: 0;
  z-index: 3600;
  pointer-events: none;
}

.data-group-scan-layer .data-scan-overlay {
  pointer-events: auto;
}

.data-group-scan-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--modal-backdrop-strong);
  color: var(--text-primary);
  font-size: 13px;
  pointer-events: auto;
}

/* Data Group design 1a: contextual information rail */
.data-group-info-panel {
  width: var(--data-group-info-width, 372px);
  min-width: 330px;
  min-height: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.data-group-info-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-info-header > div,
.data-group-info-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.data-group-info-header > div:first-child {
  color: var(--text-primary);
  font-size: 12.5px;
}

.data-group-info-header > div:first-child svg {
  color: var(--accent-primary);
}

.data-group-info-header-actions {
  gap: 2px;
}

.data-group-info-header-actions .btn-icon {
  width: 27px;
  height: 27px;
}

.data-group-info-header-actions .btn-icon.is-primary {
  background: var(--accent-primary);
  color: var(--text-on-accent, #fff);
}

.data-group-info-tabs {
  align-self: stretch;
  gap: 16px !important;
}

.data-group-info-tabs > button {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 1px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font: 700 12.5px/1 var(--font-family);
  cursor: pointer;
}

.data-group-info-tabs > button::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: '';
}

.data-group-info-tabs > button.is-active {
  color: var(--accent-primary);
}

.data-group-info-tabs > button.is-active::after {
  background: var(--accent-primary);
}

.data-group-info-tabs > button span {
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: inherit;
  font-size: 10px;
  text-align: center;
}

.data-group-info-scroll {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: 16px;
  flex: 1;
  padding: 14px 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg-primary);
}

.data-group-info-scroll > * {
  min-width: 0;
  max-width: 100%;
}

/* Data Group dynamic-filter rail */
.data-group-dynamic-scroll {
  gap: 14px;
  padding: 14px 13px 18px;
}

.data-group-dynamic-toggle-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-secondary);
}

.data-group-dynamic-toggle-card.is-enabled {
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-default));
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-secondary));
}

.data-group-dynamic-toggle-card > div {
  min-width: 0;
}

.data-group-dynamic-toggle-card strong {
  color: var(--text-primary);
  font-size: 13px;
}

.data-group-dynamic-toggle-card p {
  margin: 4px 0 0;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.5;
}

.data-group-dynamic-toggle {
  width: 37px;
  height: 22px;
  display: flex;
  flex: none;
  align-items: center;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong, var(--text-tertiary));
  cursor: pointer;
  transition: background .15s ease;
}

.data-group-dynamic-toggle i {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 28%);
  transition: transform .15s ease;
}

.data-group-dynamic-toggle-card.is-enabled .data-group-dynamic-toggle {
  background: var(--accent-primary);
}

.data-group-dynamic-toggle-card.is-enabled .data-group-dynamic-toggle i {
  transform: translateX(15px);
}

.data-group-dynamic-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-secondary);
}

.data-group-dynamic-metrics > div {
  display: grid;
  gap: 2px;
  padding: 12px 5px;
  text-align: center;
}

.data-group-dynamic-metrics > div + div {
  border-left: 1px solid var(--border-default);
}

.data-group-dynamic-metrics strong {
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
}

.data-group-dynamic-metrics > div:nth-child(2) strong { color: var(--accent-success); }
.data-group-dynamic-metrics > div:nth-child(3) strong { color: var(--accent-error); }

.data-group-dynamic-metrics span {
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.data-group-dynamic-explanation {
  padding: 10px 11px;
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-secondary));
}

.data-group-dynamic-explanation strong {
  color: var(--text-primary);
  font-size: 11px;
}

.data-group-dynamic-explanation p {
  margin: 4px 0 6px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.data-group-dynamic-explanation code {
  color: var(--accent-primary);
  font: 700 10px/1.3 var(--font-family);
}

.data-group-dynamic-scope {
  display: grid;
  gap: 9px;
}

.data-group-dynamic-scope-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
}

.data-group-dynamic-scope-heading > strong {
  flex: 1;
  font-size: 11px;
}

.data-group-dynamic-scope-heading > em {
  min-width: 23px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font: 700 10px/1.2 var(--font-family);
  text-align: center;
}

.data-group-dynamic-scope-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-success) 13%, var(--bg-secondary));
  color: var(--accent-success);
}

.data-group-dynamic-scope.is-leave .data-group-dynamic-scope-icon {
  background: color-mix(in srgb, var(--accent-error) 10%, var(--bg-secondary));
  color: var(--accent-error);
}

.data-group-dynamic-scope-empty {
  margin: 0;
  padding: 10px 11px;
  border: 1px dashed var(--border-default);
  border-radius: 9px;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

.data-group-dynamic-rule-wrap {
  display: grid;
  gap: 6px;
}

.data-group-dynamic-join {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-group-dynamic-join span {
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
  color: var(--accent-primary);
  font-size: 9px;
  font-weight: 800;
}

.data-group-dynamic-join.is-or span {
  background: color-mix(in srgb, var(--accent-warning) 17%, var(--bg-secondary));
  color: var(--accent-warning);
}

.data-group-dynamic-join i {
  height: 1px;
  flex: 1;
  background: var(--border-default);
}

.data-group-dynamic-rule {
  padding: 10px 11px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.data-group-dynamic-rule:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-default));
  box-shadow: 0 4px 12px rgb(15 23 42 / 6%);
}

.data-group-dynamic-rule:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-primary) 55%, transparent);
  outline-offset: 2px;
}

.data-group-dynamic-rule header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.data-group-dynamic-rule header > span {
  min-width: 22px;
  padding: 4px 6px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
  color: var(--accent-primary);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.data-group-dynamic-rule header > strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-dynamic-rule header > button,
.data-group-dynamic-editor > header button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.data-group-dynamic-rule header > button:hover {
  background: color-mix(in srgb, var(--accent-error) 9%, transparent);
  color: var(--accent-error);
}

.data-group-dynamic-rule-body {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.data-group-dynamic-rule-body b,
.data-group-dynamic-rule-body span {
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.2;
}

.data-group-dynamic-rule-body b {
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-secondary));
  color: var(--accent-primary);
}

.data-group-dynamic-rule-body span {
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
}

.data-group-dynamic-rule footer {
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.data-group-dynamic-add-rule {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed color-mix(in srgb, var(--accent-primary) 55%, var(--border-default));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-primary) 3%, transparent);
  color: var(--accent-primary);
  font: 700 11px/1 var(--font-family);
  cursor: pointer;
}

.data-group-dynamic-runtime {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.data-group-dynamic-runtime button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  margin-top: 3px;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
  color: var(--accent-primary);
  font: 700 9.5px/1 var(--font-family);
  cursor: pointer;
}

.data-group-dynamic-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 7px;
  margin: 0 -13px -18px;
  padding: 10px 13px 13px;
  border-top: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  backdrop-filter: blur(8px);
}

.data-group-dynamic-actions .btn {
  justify-content: center;
  font-size: 11px;
}

.data-group-dynamic-unsupported {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 24px 18px;
  color: var(--text-tertiary);
  text-align: center;
}

.data-group-dynamic-unsupported svg { color: var(--accent-primary); }
.data-group-dynamic-unsupported strong { color: var(--text-primary); font-size: 12px; }
.data-group-dynamic-unsupported p { margin: 0; font-size: 10.5px; line-height: 1.55; }

.data-group-dynamic-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--modal-backdrop-strong);
}

.data-group-dynamic-editor {
  width: min(520px, 94vw);
  max-height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl);
}

.data-group-dynamic-editor > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-dynamic-editor h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
}

.data-group-dynamic-editor header p {
  margin: 4px 0 0;
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.data-group-dynamic-editor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 17px;
  overflow-y: auto;
}

.data-group-dynamic-editor-body > label {
  display: grid;
  gap: 6px;
}

.data-group-dynamic-editor-body > label > span,
.data-group-dynamic-editor-body legend {
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
}

.data-group-dynamic-editor-body select {
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: 11px/1 var(--font-family);
}

.data-group-dynamic-editor-body fieldset {
  min-width: 0;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
}

.data-group-dynamic-value-list {
  max-height: 240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
  padding: 9px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-secondary);
}

.data-group-dynamic-value-list > label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border-radius: 7px;
  background: var(--bg-primary);
  cursor: pointer;
}

.data-group-dynamic-value-list > label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.data-group-dynamic-value-list strong,
.data-group-dynamic-value-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-dynamic-value-list strong { color: var(--text-primary); font-size: 10.5px; }
.data-group-dynamic-value-list small { color: var(--text-tertiary); font-size: 9px; }
.data-group-dynamic-value-list > p { grid-column: 1 / -1; margin: 6px; color: var(--text-tertiary); font-size: 10.5px; text-align: center; }

.data-group-dynamic-editor > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 17px;
  border-top: 1px solid var(--border-default);
}

@media (max-width: 620px) {
  .data-group-dynamic-editor-body,
  .data-group-dynamic-value-list { grid-template-columns: 1fr; }
}

/* Dynamic filter — structure and measurements from the approved Data Group design. */
.data-group-dynamic-scroll,
.data-group-dynamic-actions,
.data-group-dynamic-modal-backdrop {
  --dynamic-bg-canvas: var(--bg-primary);
  --dynamic-bg-surface: var(--bg-secondary);
  --dynamic-bg-subtle: var(--bg-tertiary);
  --dynamic-bg-muted: var(--bg-tertiary);
  --dynamic-border: var(--border-default);
  --dynamic-border-soft: var(--border-default);
  --dynamic-border-strong: var(--border-hover);
  --dynamic-text-primary: var(--text-primary);
  --dynamic-text-secondary: var(--text-secondary);
  --dynamic-text-label: var(--text-secondary);
  --dynamic-text-muted: var(--text-tertiary);
  --dynamic-text-subtle: var(--text-tertiary);
  --dynamic-text-faint: var(--text-tertiary);
  --dynamic-primary: var(--accent-primary);
  --dynamic-primary-strong: var(--accent-primary);
  --dynamic-primary-dark: var(--accent-primary);
  --dynamic-primary-selected: var(--accent-primary);
  --dynamic-primary-soft: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
  --dynamic-primary-tint: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-secondary));
  --dynamic-primary-faint: color-mix(in srgb, var(--accent-primary) 3%, var(--bg-secondary));
  --dynamic-primary-border: color-mix(in srgb, var(--accent-primary) 55%, var(--border-default));
  --dynamic-primary-border-soft: color-mix(in srgb, var(--accent-primary) 38%, var(--border-default));
  --dynamic-on-accent: #fff;
  --dynamic-success: var(--accent-success);
  --dynamic-success-soft: color-mix(in srgb, var(--accent-success) 13%, var(--bg-secondary));
  --dynamic-warning: var(--accent-warning);
  --dynamic-warning-selected: var(--accent-warning);
  --dynamic-warning-soft: color-mix(in srgb, var(--accent-warning) 17%, var(--bg-secondary));
  --dynamic-danger: var(--accent-error);
  --dynamic-danger-soft: color-mix(in srgb, var(--accent-error) 10%, var(--bg-secondary));
  --dynamic-danger-border: color-mix(in srgb, var(--accent-error) 45%, var(--border-default));
  --dynamic-danger-border-soft: color-mix(in srgb, var(--accent-error) 28%, var(--border-default));
  --dynamic-danger-tint: color-mix(in srgb, var(--accent-error) 5%, var(--bg-secondary));
  --dynamic-neutral-badge: var(--bg-tertiary);
  --dynamic-join-and-bg: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
  --dynamic-radio-border: var(--border-strong);
}

body.theme-light :is(
  .data-group-dynamic-scroll,
  .data-group-dynamic-actions,
  .data-group-dynamic-modal-backdrop
) {
  --dynamic-bg-canvas: #fbfcfe;
  --dynamic-bg-surface: #fff;
  --dynamic-bg-subtle: #f6f8fb;
  --dynamic-bg-muted: #f1f4f9;
  --dynamic-border: #e4eaf2;
  --dynamic-border-soft: #e8edf4;
  --dynamic-border-strong: #dbe3ec;
  --dynamic-text-primary: #0f172a;
  --dynamic-text-secondary: #475569;
  --dynamic-text-label: #5b6b80;
  --dynamic-text-muted: #7b8ca3;
  --dynamic-text-subtle: #8b9aab;
  --dynamic-text-faint: #9aa8b9;
  --dynamic-primary: #7c3aed;
  --dynamic-primary-strong: #6d28d9;
  --dynamic-primary-dark: #4338ca;
  --dynamic-primary-selected: #4f46e5;
  --dynamic-primary-soft: #f1eafe;
  --dynamic-primary-tint: #f5f2ff;
  --dynamic-primary-faint: #faf7ff;
  --dynamic-primary-border: #c7b8f7;
  --dynamic-primary-border-soft: #ddd0fb;
  --dynamic-on-accent: #fff;
  --dynamic-success: #047857;
  --dynamic-success-soft: #ddf5ec;
  --dynamic-warning: #b45309;
  --dynamic-warning-selected: #d97706;
  --dynamic-warning-soft: #fdf0d5;
  --dynamic-danger: #b91c1c;
  --dynamic-danger-soft: #fdeeee;
  --dynamic-danger-border: #f0b8b8;
  --dynamic-danger-border-soft: #f2d4d4;
  --dynamic-danger-tint: #fdf7f7;
  --dynamic-neutral-badge: #eef2f7;
  --dynamic-join-and-bg: #e6e6fb;
  --dynamic-radio-border: #cfd8e4;
}

.data-group-dynamic-scroll {
  gap: 13px;
  padding: 13px 15px 16px;
  background: var(--dynamic-bg-canvas);
}

.data-group-dynamic-toggle-card {
  gap: 10px;
  padding: 10px 12px;
  border-color: var(--dynamic-border);
  border-radius: 11px;
  background: var(--dynamic-bg-subtle);
}

.data-group-dynamic-toggle-card.is-enabled {
  border-color: var(--dynamic-primary-border-soft);
  background: var(--dynamic-primary-tint);
}

.data-group-dynamic-toggle-card strong {
  color: var(--dynamic-text-primary);
  font-size: 12.5px;
}

.data-group-dynamic-toggle-card p {
  margin-top: 2px;
  color: var(--dynamic-text-muted);
  font-size: 11px;
}

.data-group-dynamic-toggle {
  width: 32px;
  height: 18px;
  margin-top: 1px;
}

.data-group-dynamic-toggle i {
  width: 14px;
  height: 14px;
  box-shadow: none;
}

.data-group-dynamic-toggle-card.is-enabled .data-group-dynamic-toggle {
  background: var(--dynamic-primary);
}

.data-group-dynamic-toggle-card.is-enabled .data-group-dynamic-toggle i {
  transform: translateX(14px);
}

.data-group-dynamic-metrics {
  border-color: var(--dynamic-border);
  border-radius: 11px;
  background: var(--dynamic-bg-surface);
}

.data-group-dynamic-metrics > div {
  gap: 1px;
  padding: 10px 5px;
}

.data-group-dynamic-metrics > div + div {
  border-color: var(--dynamic-border);
}

.data-group-dynamic-metrics strong {
  color: var(--dynamic-text-primary);
  font-size: 16px;
}

.data-group-dynamic-metrics > div:nth-child(2) strong { color: var(--dynamic-success); }
.data-group-dynamic-metrics > div:nth-child(3) strong { color: var(--dynamic-warning); }

.data-group-dynamic-metrics span {
  color: var(--dynamic-text-muted);
  font-size: 10.5px;
}

.data-group-dynamic-rules {
  display: grid;
  gap: 18px;
  transition: opacity .15s ease;
}

.data-group-dynamic-rules.is-disabled {
  opacity: .5;
  pointer-events: none;
}

.data-group-dynamic-scope {
  gap: 0;
}

.data-group-dynamic-scope-heading {
  gap: 7px;
  margin-bottom: 8px;
  color: var(--dynamic-text-primary);
}

.data-group-dynamic-scope-heading > strong {
  font-size: 11.5px;
  letter-spacing: .03em;
}

.data-group-dynamic-scope-heading > em {
  min-width: 23px;
  padding: 2px 7px;
  background: var(--dynamic-neutral-badge);
  color: var(--dynamic-text-label);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.data-group-dynamic-scope-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--dynamic-success-soft);
  color: var(--dynamic-success);
}

.data-group-dynamic-scope.is-leave .data-group-dynamic-scope-icon {
  background: var(--dynamic-danger-soft);
  color: var(--dynamic-danger);
}

.data-group-dynamic-scope-empty {
  margin-bottom: 0;
  padding: 9px 10px;
  border-color: var(--dynamic-border-strong);
  color: var(--dynamic-text-subtle);
  font-size: 10.5px;
}

.data-group-dynamic-rule-wrap {
  gap: 0;
}

.data-group-dynamic-join {
  gap: 8px;
  padding: 6px 0;
}

.data-group-dynamic-join button {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--dynamic-join-and-bg);
  color: var(--dynamic-primary-dark);
  font: 700 10.5px/1.2 var(--font-family);
  letter-spacing: .04em;
  cursor: pointer;
}

.data-group-dynamic-join.is-or button {
  background: var(--dynamic-warning-soft);
  color: var(--dynamic-warning);
}

.data-group-dynamic-join i {
  background: var(--dynamic-border-soft);
}

.data-group-dynamic-rule {
  padding: 10px 11px;
  border-color: var(--dynamic-border);
  border-radius: 11px;
  background: var(--dynamic-bg-surface);
  box-shadow: none;
}

.data-group-dynamic-rule:hover {
  border-color: var(--dynamic-primary-border);
  box-shadow: none;
}

.data-group-dynamic-scope.is-leave .data-group-dynamic-rule:hover {
  border-color: var(--dynamic-danger-border);
}

.data-group-dynamic-rule header > span {
  width: 19px;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  background: var(--dynamic-primary-soft);
  color: var(--dynamic-primary-strong);
  font-size: 10.5px;
}

.data-group-dynamic-scope.is-leave .data-group-dynamic-rule header > span {
  background: var(--dynamic-danger-soft);
  color: var(--dynamic-danger);
}

.data-group-dynamic-rule header > strong {
  color: var(--dynamic-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.data-group-dynamic-rule header > button {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--dynamic-text-label);
}

.data-group-dynamic-rule-body {
  gap: 6px;
  margin-top: 8px;
}

.data-group-dynamic-rule-body > strong {
  color: var(--dynamic-text-primary);
  font-size: 12.5px;
}

.data-group-dynamic-rule-body b {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--dynamic-primary-soft);
  color: var(--dynamic-primary-strong);
  font-size: 11px;
}

.data-group-dynamic-rule-body span {
  padding: 3px 8px;
  border-color: var(--dynamic-border);
  border-radius: 999px;
  background: var(--dynamic-bg-muted);
  color: var(--dynamic-text-secondary);
  font-size: 11.5px;
}

.data-group-dynamic-rule footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--dynamic-text-label);
  font-size: 11.5px;
}

.data-group-dynamic-rule footer svg { flex: none; }

.data-group-dynamic-add-rule {
  height: 34px;
  min-height: 34px;
  margin-top: 9px;
  border-color: var(--dynamic-primary-border);
  border-radius: 10px;
  background: var(--dynamic-primary-faint);
  color: var(--dynamic-primary-strong);
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-dynamic-actions {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 11px 15px;
  border-top: 1px solid var(--dynamic-border-soft);
  background: var(--dynamic-bg-surface);
  backdrop-filter: none;
}

.data-group-dynamic-actions > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--dynamic-text-subtle);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-dynamic-actions .btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-dynamic-actions .btn-primary {
  padding-inline: 15px;
  background: var(--dynamic-primary);
}

.data-group-dynamic-modal-backdrop {
  padding: 26px;
  background: var(--modal-backdrop-strong);
}

.data-group-dynamic-editor {
  width: min(520px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 10px));
  border: 0;
  background: var(--dynamic-bg-surface);
  box-shadow: var(--shadow-lg);
}

.data-group-dynamic-editor > header {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border-color: var(--dynamic-border-soft);
}

.data-group-dynamic-editor > header > div {
  min-width: 0;
  flex: 1;
}

.data-group-dynamic-editor-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 9px;
  background: var(--dynamic-primary-soft);
  color: var(--dynamic-primary-strong);
}

.data-group-dynamic-editor-icon.is-leave {
  background: var(--dynamic-danger-soft);
  color: var(--dynamic-danger);
}

.data-group-dynamic-editor h3 {
  color: var(--dynamic-text-primary);
  font-size: 15px;
}

.data-group-dynamic-editor header p {
  margin-top: 2px;
  color: var(--dynamic-text-muted);
  font-size: 11.5px;
}

.data-group-dynamic-editor > header > button {
  width: 28px;
  height: 28px;
  color: var(--dynamic-text-faint);
}

.data-group-dynamic-editor-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 13px 16px;
  background: var(--dynamic-bg-surface);
}

.data-group-dynamic-editor-join {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--dynamic-border);
  border-radius: 10px;
  background: var(--dynamic-bg-subtle);
}

.data-group-dynamic-editor-join > span {
  min-width: 0;
  flex: 1;
}

.data-group-dynamic-editor-join strong,
.data-group-dynamic-editor-join small {
  display: block;
}

.data-group-dynamic-editor-join strong {
  color: var(--dynamic-text-secondary);
  font-size: 11.5px;
}

.data-group-dynamic-editor-join small {
  margin-top: 2px;
  color: var(--dynamic-text-subtle);
  font-size: 10.5px;
}

.data-group-dynamic-editor-join > div {
  display: flex;
  gap: 5px;
  flex: none;
}

.data-group-dynamic-editor-join button,
.data-group-dynamic-operator-list button {
  padding: 5px 10px;
  border: 1px solid var(--dynamic-border);
  border-radius: 999px;
  background: var(--dynamic-bg-muted);
  color: var(--dynamic-text-secondary);
  font: 600 11.5px/1.2 var(--font-family);
  cursor: pointer;
}

.data-group-dynamic-editor-join button.is-selected,
.data-group-dynamic-operator-list button.is-selected {
  border-color: transparent;
  background: var(--dynamic-primary-selected);
  color: var(--dynamic-on-accent);
}

.data-group-dynamic-editor-join button.is-selected.is-or { background: var(--dynamic-warning-selected); }
.data-group-dynamic-editor-join button:disabled { cursor: default; opacity: 1; }

.data-group-dynamic-editor-locked {
  display: flex;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--dynamic-border);
  border-radius: 10px;
  background: var(--dynamic-bg-subtle);
}

.data-group-dynamic-editor-locked > svg {
  flex: none;
  margin-top: 2px;
  color: var(--dynamic-text-muted);
}

.data-group-dynamic-editor-locked > div {
  min-width: 0;
  flex: 1;
}

.data-group-dynamic-editor-locked > div > strong {
  color: var(--dynamic-text-secondary);
  font-size: 11.5px;
}

.data-group-dynamic-editor-locked dl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 7px 0 0;
}

.data-group-dynamic-editor-locked dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.data-group-dynamic-editor-locked dt {
  color: var(--dynamic-text-label);
  font-size: 11.5px;
}

.data-group-dynamic-editor-locked dd {
  min-width: 0;
  margin: 0;
  color: var(--dynamic-text-primary);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.data-group-dynamic-editor-section > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--dynamic-text-secondary);
  font-size: 11.5px;
}

.data-group-dynamic-field-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.data-group-dynamic-field-list > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--dynamic-border);
  border-radius: 9px;
  background: var(--dynamic-bg-surface);
  color: var(--dynamic-text-primary);
  text-align: left;
  cursor: pointer;
}

.data-group-dynamic-field-list > button.is-selected {
  border-color: var(--dynamic-primary-border);
  background: var(--dynamic-primary-faint);
}

.data-group-dynamic-field-list > button > i {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid var(--dynamic-radio-border);
  border-radius: 50%;
  background: var(--dynamic-bg-surface);
}

.data-group-dynamic-field-list > button.is-selected > i {
  border: 4px solid var(--dynamic-primary);
}

.data-group-dynamic-field-list > button > span {
  min-width: 0;
  flex: 1;
}

.data-group-dynamic-field-list strong,
.data-group-dynamic-field-list small {
  display: block;
}

.data-group-dynamic-field-list strong {
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-dynamic-field-list small {
  margin-top: 1px;
  color: var(--dynamic-text-faint);
  font-size: 10.5px;
}

.data-group-dynamic-operator-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.data-group-dynamic-operator-list button.is-selected { background: var(--dynamic-primary); }

.data-group-dynamic-value-list {
  min-height: 36px;
  max-height: 160px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 7px 9px;
  overflow-y: auto;
  border: 1px solid var(--dynamic-border-strong);
  border-radius: 9px;
  background: var(--dynamic-bg-canvas);
}

.data-group-dynamic-value-list > button {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--dynamic-border-strong);
  border-radius: 999px;
  background: var(--dynamic-bg-surface);
  color: var(--dynamic-text-label);
  font: 600 11.5px/1.2 var(--font-family);
  cursor: pointer;
}

.data-group-dynamic-value-list > button.is-selected {
  border-color: transparent;
  background: var(--dynamic-primary);
  color: var(--dynamic-on-accent);
}

.data-group-dynamic-value-list > p {
  width: 100%;
  margin: 5px;
  color: var(--dynamic-text-subtle);
  font-size: 10.5px;
  text-align: center;
}

.data-group-dynamic-value-hint {
  display: block;
  margin-top: 5px;
  color: var(--dynamic-text-faint);
  font-size: 10.5px;
}

.data-group-dynamic-editor-summary {
  padding: 10px 12px;
  border: 1px solid var(--dynamic-primary-border-soft);
  border-radius: 10px;
  background: var(--dynamic-primary-tint);
}

.data-group-dynamic-editor-summary.is-leave {
  border-color: var(--dynamic-danger-border-soft);
  background: var(--dynamic-danger-tint);
}

.data-group-dynamic-editor-summary > strong {
  color: var(--dynamic-text-subtle);
  font-size: 10.5px;
  letter-spacing: .04em;
}

.data-group-dynamic-editor-summary p {
  margin: 6px 0 0;
  color: var(--dynamic-text-primary);
  font-size: 12.5px;
  line-height: 1.6;
}

.data-group-dynamic-editor > footer {
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-color: var(--dynamic-border-soft);
  background: var(--dynamic-bg-canvas);
}

.data-group-dynamic-editor > footer > span {
  min-width: 0;
  flex: 1;
  color: var(--dynamic-text-subtle);
  font-size: 11px;
}

.data-group-dynamic-editor > footer .btn {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-dynamic-editor > footer .btn-primary {
  padding-inline: 18px;
  background: var(--dynamic-primary);
}

@media (max-height: 900px) {
  .data-group-dynamic-editor {
    max-height: calc(100vh - 8px);
  }

  .data-group-dynamic-editor-body {
    gap: 8px;
    padding-block: 9px;
  }

  .data-group-dynamic-field-list > button {
    padding-block: 5px;
  }

  .data-group-dynamic-value-list {
    max-height: 100px;
  }
}

.data-group-info-empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.data-group-info-empty.is-error svg {
  color: var(--accent-error);
}

.data-group-info-overview {
  padding: 12px 13px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-secondary);
}

.data-group-info-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.data-group-info-name-row > strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-info-name-row .btn-icon {
  width: 25px;
  height: 25px;
}

.data-group-info-color {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}



.data-group-info-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.data-group-info-badges > span,
.data-group-info-badges > button {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 600 9.5px/1.2 var(--font-family);
}

.data-group-info-badges > button {
  cursor: pointer;
}

.data-group-info-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}

.data-group-info-metrics > div {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

.data-group-info-metrics strong {
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.1;
}

.data-group-info-metrics span {
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.data-group-info-section {
  padding: 0;
  border: 0;
}

.data-group-info-section h4 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 10px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-group-info-section h4 svg {
  color: var(--accent-primary);
}

.data-group-info-details {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 13px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-secondary);
}

.data-group-info-details > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
}

.data-group-info-details > div:last-child { border-bottom: 0; }

.data-group-info-details dt,
.data-group-info-details dd {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.35;
}

.data-group-info-details dt {
  color: var(--text-tertiary);
}

.data-group-info-details dd {
  overflow: hidden;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
}

.data-group-info-breakdown {
  display: grid;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-secondary);
}

.data-group-info-breakdown > small,
.data-group-info-tags > small,
.data-group-info-history > small,
.data-group-info-campaigns > small {
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.data-group-info-breakdown p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 10.5px;
}

.data-group-info-breakdown p > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-info-breakdown p strong {
  flex: none;
  color: var(--text-primary);
}

.data-group-info-progress {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-tertiary);
}

.data-group-info-progress > i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent-primary);
  transition: width var(--transition-normal);
}

.data-group-info-account-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.data-group-info-account-list > span {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 9.5px;
}

.data-group-info-account-list > span strong {
  color: var(--text-primary);
}

.data-group-info-quality,
.data-group-campaign-detail-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.data-group-info-quality > span,
.data-group-campaign-detail-results > span {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px 3px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--bg-secondary);
  text-align: center;
}

.data-group-info-quality svg {
  color: var(--accent-primary);
}

.data-group-info-quality strong,
.data-group-campaign-detail-results strong {
  color: var(--text-primary);
  font-size: 13px;
}

.data-group-info-quality small,
.data-group-campaign-detail-results small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.data-group-info-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.data-group-info-tags > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--tag-color) 38%, var(--border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color) 9%, var(--bg-secondary));
  color: var(--text-secondary);
  font-size: 9.5px;
}

.data-group-info-tags em {
  color: var(--text-tertiary);
  font-size: 9px;
  font-style: normal;
}

.data-group-info-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.data-group-info-section-heading h4 {
  margin: 0;
}

.data-group-info-section-heading > button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  font: 600 10px/1.2 var(--font-family);
  cursor: pointer;
}

.data-group-info-section-heading > select {
  height: 25px;
  padding: 0 5px;
  border: 1px solid var(--border-default);
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 10px var(--font-family);
}

.data-group-info-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border-hover);
  border-radius: 11px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.data-group-info-note.is-empty {
  color: var(--text-tertiary);
  font-style: italic;
}

.data-group-info-note-editor {
  display: grid;
  gap: 6px;
}

.data-group-info-note-editor textarea {
  min-height: 76px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid var(--border-active);
  border-radius: 6px;
  outline: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 10.5px/1.45 var(--font-family);
}

.data-group-info-note-editor > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.data-group-info-note-editor > div small {
  margin-right: auto;
  color: var(--text-tertiary);
  font-size: 9px;
}

.data-group-info-history {
  display: grid;
  gap: 0;
  padding: 4px 13px;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: var(--bg-secondary);
}

.data-group-info-history article {
  position: relative;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 7px;
  padding: 0 0 10px;
}

.data-group-info-history article:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 9px;
  bottom: -1px;
  left: 4px;
  width: 1px;
  background: var(--border-default);
}

.data-group-info-history-dot {
  width: 9px;
  height: 9px;
  z-index: 1;
  margin-top: 2px;
  border: 2px solid var(--bg-secondary);
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--border-active);
}

.data-group-info-history strong,
.data-group-info-history p,
.data-group-info-history small {
  display: block;
  margin: 0;
  line-height: 1.35;
}

.data-group-info-history strong {
  color: var(--text-secondary);
  font-size: 10.5px;
}

.data-group-info-history p,
.data-group-info-history small {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-info-campaigns {
  display: grid;
  gap: 6px;
}

.data-group-info-campaign-filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: -2px 0 9px;
}

.data-group-info-campaign-filters > button {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font: 600 9.5px/1.2 var(--font-family);
  cursor: pointer;
}

.data-group-info-campaign-filters > button.is-active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: var(--text-on-accent, #fff);
}

.data-group-info-campaigns > button {
  width: 100%;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 14px;
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}

.data-group-info-campaigns > button:hover {
  border-color: var(--border-active);
  background: var(--bg-hover);
}

.data-group-info-campaigns > button > div {
  min-width: 0;
}

.data-group-info-campaigns strong,
.data-group-info-campaigns p,
.data-group-info-campaigns small {
  display: block;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-info-campaign-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.data-group-info-campaign-title strong {
  min-width: 0;
  flex: 1;
}

.data-group-info-campaign-title em {
  flex: none;
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 700;
}

.data-group-info-campaign-title em.is-running { color: var(--accent-success); background: rgba(16, 185, 129, 0.11); }
.data-group-info-campaign-title em.is-paused { color: var(--accent-warning); background: rgba(245, 158, 11, 0.11); }
.data-group-info-campaign-title em.is-error { color: var(--accent-error); background: rgba(244, 63, 94, 0.11); }
.data-group-info-campaign-title em.is-completed { color: var(--accent-primary); background: var(--bg-accent-subtle); }

.data-group-info-campaigns strong {
  color: var(--text-primary);
  font-size: 10.5px;
}

.data-group-info-campaigns p,
.data-group-info-campaigns small {
  color: var(--text-tertiary);
  font-size: 9px;
}

.data-group-info-campaigns small.is-schedule {
  margin-top: 4px;
}

.data-group-info-campaigns .data-group-info-progress {
  margin: 6px 0 3px;
}

.data-group-info-campaign-status {
  width: 7px;
  height: 7px;
  display: inline-block;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.data-group-info-campaign-status.is-running { background: var(--accent-success); }
.data-group-info-campaign-status.is-completed { background: var(--accent-primary); }
.data-group-info-campaign-status.is-error { background: var(--accent-error); }
.data-group-info-campaign-status.is-paused { background: var(--accent-warning); }
.data-group-info-campaign-status.is-waiting { background: var(--text-tertiary); }

.data-group-info-create-campaign {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  margin-top: 10px;
  font-size: 11px;
}

.data-group-campaign-detail-backdrop {
  z-index: 3700;
}

.data-group-campaign-detail-modal {
  width: min(420px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.data-group-campaign-detail-modal > header,
.data-group-campaign-detail-modal > footer {
  display: flex;
  align-items: center;
}

.data-group-campaign-detail-modal > header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--border-default);
}

.data-group-campaign-detail-modal > header > div {
  min-width: 0;
  flex: 1;
}

.data-group-campaign-detail-modal > header h3 {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.35;
}

.data-group-campaign-detail-subtitle {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}

.data-group-campaign-detail-subtitle > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-campaign-detail-status {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.data-group-campaign-detail-status.is-running {
  background: color-mix(in srgb, var(--accent-success) 16%, transparent);
  color: var(--accent-success);
}

.data-group-campaign-detail-status.is-paused {
  background: color-mix(in srgb, var(--accent-warning) 16%, transparent);
  color: var(--accent-warning);
}

.data-group-campaign-detail-status.is-error {
  background: color-mix(in srgb, var(--accent-error) 16%, transparent);
  color: var(--accent-error);
}

.data-group-campaign-detail-status.is-completed,
.data-group-campaign-detail-status.is-waiting {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.data-group-campaign-detail-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 14px 16px;
}

.data-group-campaign-detail-progress {
  display: block;
}

.data-group-campaign-detail-progress > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

.data-group-campaign-detail-progress strong {
  flex: none;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.data-group-campaign-detail-progress .data-group-info-progress {
  height: 7px;
}

.data-group-campaign-detail-modal.is-running .data-group-info-progress > i { background: var(--accent-success); }
.data-group-campaign-detail-modal.is-paused .data-group-info-progress > i { background: var(--accent-warning); }
.data-group-campaign-detail-modal.is-error .data-group-info-progress > i { background: var(--accent-error); }
.data-group-campaign-detail-modal.is-completed .data-group-info-progress > i { background: var(--text-tertiary); }

.data-group-campaign-detail-results {
  gap: 8px;
}

.data-group-campaign-detail-results > span {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  background: transparent;
  text-align: left;
}

.data-group-campaign-detail-results strong,
.data-group-campaign-detail-results small {
  display: block;
}

.data-group-campaign-detail-results strong {
  font-size: 15px;
  line-height: 1.25;
}

.data-group-campaign-detail-results small {
  margin-top: 1px;
  font-size: 10.5px;
}

.data-group-campaign-detail-results .is-success strong { color: var(--accent-success); }
.data-group-campaign-detail-results .is-failure strong { color: var(--accent-warning); }
.data-group-campaign-detail-results .is-error strong { color: var(--accent-error); }

.data-group-campaign-detail-meta {
  display: block;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
}

.data-group-campaign-detail-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
}

.data-group-campaign-detail-meta > div:last-child { border-bottom: 0; }

.data-group-campaign-detail-meta dt,
.data-group-campaign-detail-meta dd {
  margin: 0;
}

.data-group-campaign-detail-meta dt {
  flex: none;
  color: var(--text-tertiary);
  font-size: 12px;
}

.data-group-campaign-detail-meta dd {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-group-campaign-detail-modal > footer {
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--bg-primary) 45%, var(--bg-secondary));
}

.data-group-campaign-detail-modal > footer .btn {
  height: 36px;
  flex: 1;
  justify-content: center;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
}

@media (max-width: 1050px) {
  .data-group-info-panel {
    display: none;
  }

  .data-group-manager-context-filters label:first-child select {
    width: 155px;
  }

  .data-group-manager-filter-bar {
    flex-wrap: wrap;
  }

  .data-group-manager-search-field.is-member-search {
    min-width: 100%;
  }
}

@media (max-width: 760px) {
  .data-group-manager-backdrop {
    padding: 0;
  }

  .data-group-manager-modal {
    min-height: 0;
  }

  .data-group-manager-heading p {
    display: none;
  }

  .data-group-manager-workspace {
    overflow-y: auto;
    flex-direction: column;
  }

  .data-group-manager-sidebar {
    width: 100%;
    min-height: 260px;
    max-height: 42%;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

  .data-group-manager-content {
    min-height: 440px;
  }

  .data-group-manager-active-header,
  .data-group-manager-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .data-group-manager-context-filters,
  .data-group-manager-action-right {
    width: 100%;
  }

  .data-group-manager-context-filters label,
  .data-group-manager-context-filters select,
  .data-group-manager-context-filters label:first-child select,
  .data-group-manager-context-filters label:last-child select {
    width: 100%;
    flex: 1;
  }

  .data-group-manager-action-right {
    margin-left: 0;
  }

  .data-group-manager-add-menu-wrap {
    margin-left: auto;
  }

  .data-group-manager-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .data-group-manager-picker-actions {
    margin-left: 0;
    justify-content: flex-end;
  }

  .data-group-import-fields {
    grid-template-columns: 1fr;
  }
}

/* Legacy compat */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}

.mt-4 {
  margin-top: 16px;
}

.form-group.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.form-group.row label {
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
}

.form-group.row .panel-input {
  width: 60%;
  flex-shrink: 0;
}

.number-input {
  width: 80px !important;
  text-align: right;
}

.text-center {
  text-align: center;
}
.text-muted {
  color: var(--text-tertiary);
}
.text-error {
  color: var(--accent-error) !important;
}
.text-success {
  color: var(--accent-success) !important;
}

/* =========== Campaign Detail Dock =========== */
.campaign-detail-dock {
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex: 0 0 34px;
  display: flex;
  flex-direction: column;
  min-height: 34px;
  overflow: hidden;
}

.campaign-detail-dock.is-open {
  flex-basis: 20%;
  min-height: 220px;
}

.detail-dock-resize-handle {
  position: relative;
  height: 8px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-default);
  cursor: row-resize;
  touch-action: none;
}

.detail-dock-resize-handle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 48px;
  height: 2px;
  border-radius: 999px;
  background: var(--border-strong);
  transform: translateX(-50%);
}

.detail-dock-resize-handle:hover {
  background: var(--bg-hover);
}

.detail-dock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 7px 12px;
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-default);
}

.detail-dock-header:hover {
  background: var(--bg-hover);
}

.detail-dock-title {
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-dock-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  background: var(--bg-secondary);
}

.detail-dock-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-secondary);
}

.campaign-detail-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.detail-dock-tab-content .campaign-grid {
  font-size: 11px;
}

.detail-dock-tab-content .campaign-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
}

.detail-export-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px 12px;
}

.detail-filter-controls {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-filter-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-filter-field label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.detail-filter-control {
  width: 100%;
  height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.detail-filter-range-field {
  width: 220px;
  gap: 4px;
}

.detail-filter-button {
  height: 30px;
  padding: 0 8px;
}

.detail-filter-popover {
  position: fixed;
  z-index: 90;
  max-height: none;
  overflow: visible;
}

.detail-filter-time-field {
  width: 140px;
}

.detail-filter-date-field {
  width: 130px;
}

.detail-filter-status-field {
  width: 180px;
  gap: 4px;
}

.input-data-origin-filter {
  width: 180px;
  gap: 4px;
}

.detail-filter-actions {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.input-data-filter-actions {
  align-items: center;
}

.campaign-input-data-search {
  min-width: 210px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.campaign-input-data-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
}

.campaign-data-sort {
  flex-shrink: 0;
}

.campaign-data-filter-bar {
  flex-direction: column;
  align-items: stretch;
}

.campaign-data-filter-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
}

.campaign-data-filter-fields > .campaign-input-data-search {
  margin-left: auto;
}

.campaign-data-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.campaign-data-sort > button {
  height: 30px;
  white-space: nowrap;
}

.campaign-data-sort .report-option-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.campaign-input-data-pager,
.campaign-list-pager {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  border-top: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 11px;
}

.campaign-input-data-pager > div,
.campaign-list-pager > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.input-data-action-spinner {
  align-self: center;
  color: var(--text-tertiary);
}

.input-data-action-menu {
  position: relative;
}

.input-data-action-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  z-index: 120;
}

.input-data-action-menu-list button {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.input-data-action-menu-list button:hover {
  background: var(--bg-hover);
}

.input-data-selected-row td {
  background: var(--bg-hover);
}

.campaign-grid input[type="checkbox"] {
  width: auto;
  min-width: 14px;
  height: 14px;
  padding: 0;
  cursor: pointer;
}

.add-input-data-modal {
  width: min(760px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
}

.add-current-data-modal {
  width: min(880px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
}

.add-input-data-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.add-current-data-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.add-input-data-selected-count {
  color: var(--text-secondary);
  font-size: 12px;
}

.add-current-data-campaign-name {
  color: var(--text-secondary);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-current-data-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.add-current-data-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.add-current-data-preview-header > span {
  color: var(--text-primary);
  font-weight: 500;
}

.add-current-data-preview {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  max-height: min(320px, 42vh);
  overflow: auto;
}

.add-current-data-preview .campaign-grid {
  border: 0;
}

.add-current-data-group-snapshot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: var(--bg-secondary);
}

.add-current-data-group-snapshot > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.add-current-data-group-snapshot strong {
  color: var(--text-primary);
}

.add-current-data-group-snapshot span,
.add-current-data-group-snapshot small {
  color: var(--text-secondary);
}

.add-current-data-checkbox {
  margin-top: 2px;
}

.add-current-data-checkbox-hint {
  font-size: 12px;
  line-height: 1.4;
  margin-top: -8px;
}

.add-input-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.add-input-data-grid .stepper-form-group {
  margin-bottom: 0;
}

.add-input-data-modal .stepper-form-group > span,
.add-current-data-modal .stepper-form-group > span {
  display: block;
  margin-bottom: 8px;
}

.add-input-data-full-row {
  grid-column: 1 / -1;
}

.add-input-data-load-row {
  display: flex;
  justify-content: flex-end;
}

.add-input-data-target-list {
  min-height: 150px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.add-input-data-target-table {
  width: 100%;
}

.add-input-data-empty {
  padding: 14px;
  font-size: 12px;
}

.add-input-data-target-header,
.add-input-data-target-row {
  display: grid;
  grid-template-columns: 40px minmax(150px, 1fr) minmax(100px, 170px) 100px 130px;
  align-items: center;
  gap: 10px;
}

.add-input-data-target-header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 34px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

.add-input-data-target-row {
  min-height: 40px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  outline: none;
}

.add-input-data-target-row:hover {
  background: var(--bg-hover);
}

.add-input-data-target-row.is-selected {
  background: rgba(124, 92, 252, 0.12);
}

.add-input-data-target-row:focus-visible {
  box-shadow: inset 0 0 0 1px var(--border-active);
}

.add-input-data-target-row:last-child {
  border-bottom: none;
}

.add-input-data-target-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-input-data-target-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.add-input-data-target-name,
.add-input-data-target-account,
.add-input-data-target-status-badge,
.add-input-data-target-schedule {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-input-data-target-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.25;
}

.add-input-data-target-account,
.add-input-data-target-schedule {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

.add-input-data-target-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.add-input-data-target-schedule {
  justify-self: start;
}

@media (max-width: 720px) {
  .add-input-data-grid {
    grid-template-columns: 1fr;
  }

  .add-input-data-target-table {
    min-width: 0;
  }

  .add-input-data-target-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .add-input-data-target-header {
    display: none;
  }

  .add-input-data-target-account {
    grid-column: 2;
  }

  .add-input-data-target-status-badge,
  .add-input-data-target-schedule {
    display: none;
  }
}

/* Detail Dock Tabs */
.detail-dock-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  padding: 0 8px;
  overflow-x: auto;
  flex-shrink: 0;
}

.detail-dock-tab {
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.detail-dock-tab:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.detail-dock-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  background: var(--bg-secondary);
  font-weight: 700;
}

.campaign-detail-log-cell {
  max-width: 360px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.campaign-detail-target-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-detail-target-phone-cell {
  max-width: 120px;
}

.campaign-detail-sms-content-cell {
  min-width: 160px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sms-detail-history-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sms-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.run-log-screenshot-button {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  vertical-align: baseline;
}

.run-log-screenshot-button:hover {
  text-decoration: underline;
}

.run-log-screenshot-button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: none;
}

.campaign-detail-log-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.campaign-detail-post-link {
  color: var(--accent-info);
  font-size: 11px;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.campaign-detail-post-link:hover {
  text-decoration: underline;
}

.campaign-relation-grid td {
  vertical-align: top;
}

.campaign-relation-count {
  font-weight: 700;
  line-height: 1.3;
}

.campaign-relation-count.pending {
  color: var(--accent-info);
}

.campaign-relation-count.success {
  color: var(--accent-success);
}

.campaign-relation-count.skipped {
  color: var(--accent-warning);
}

.campaign-relation-count.failure {
  color: var(--accent-warning);
}

.campaign-relation-count.muted {
  color: var(--text-tertiary);
}

.campaign-relation-breakdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.campaign-relation-breakdown-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.campaign-relation-breakdown-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: normal;
}

.campaign-relation-breakdown-chip.success {
  color: var(--accent-success);
  background: rgba(34, 197, 94, 0.1);
}

.campaign-relation-breakdown-chip.skipped {
  color: var(--accent-warning);
  background: rgba(245, 158, 11, 0.12);
}

.campaign-relation-breakdown-chip.failure {
  color: var(--accent-warning);
  background: rgba(245, 158, 11, 0.12);
}

.campaign-relation-breakdown-chip.error {
  color: var(--accent-error);
  background: rgba(239, 68, 68, 0.1);
}

.campaign-info-view {
  padding: 12px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campaign-info-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.campaign-info-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}

.campaign-info-card h4 {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.campaign-info-card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 860px;
}

.campaign-info-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
}

.campaign-info-row:last-child {
  border-bottom: none;
}

.campaign-info-row.full-width {
  grid-column: auto;
}

.campaign-info-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}

.campaign-info-value {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
  text-align: left;
  justify-self: stretch;
  max-width: 100%;
}

.campaign-info-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  justify-content: flex-start;
}

.campaign-info-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .campaign-info-row {
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
  }

  .campaign-info-value {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .campaign-info-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .campaign-info-value {
    justify-self: stretch;
    text-align: left;
  }

  .campaign-info-chip-list {
    justify-content: flex-start;
  }
}

.find-data-history-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.find-data-result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.find-data-export-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px 12px;
}

.find-data-export-options {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

.find-data-export-options .schedule-checkbox-label {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.find-data-log-toolbar {
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
}

.find-data-log-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.find-data-log-scope-field {
  width: 150px;
}

.detail-dock-tab-content.find-data-log-tab-content {
  overflow: hidden;
}

.find-data-log-panel {
  --find-data-log-table-width: 2040px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.find-data-log-empty {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  font-size: 12px;
}

.find-data-log-table-shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.find-data-log-table-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.find-data-log-x-scroll {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.find-data-log-x-scroll-spacer {
  width: var(--find-data-log-table-width);
  height: 1px;
}

.find-data-log-grid {
  min-width: var(--find-data-log-table-width);
  table-layout: fixed;
}

.find-data-log-col-time {
  width: 150px;
}

.find-data-log-col-action {
  width: 180px;
}

.find-data-log-grid th,
.find-data-log-grid td {
  vertical-align: top;
}

.find-data-log-grid th {
  white-space: nowrap;
}

.find-data-log-cell-text,
.find-data-log-link-cell,
.find-data-log-content-cell {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.find-data-log-cell-text,
.find-data-log-link-cell {
  white-space: nowrap;
}

.find-data-log-content-cell {
  max-width: 320px;
  white-space: nowrap;
}

.find-data-log-link {
  color: var(--accent-info);
  text-decoration: none;
}

.find-data-log-link:hover {
  text-decoration: underline;
}

.find-data-chip,
.find-data-kind {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

.find-data-chip {
  padding: 2px 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
}

.find-data-kind {
  padding: 3px 7px;
}

.find-data-chip-phone,
.find-data-kind-phone {
  color: var(--accent-success);
  background: rgba(34, 197, 94, 0.1);
}

.find-data-chip-zalo,
.find-data-kind-zalo {
  color: var(--accent-primary);
  background: rgba(59, 130, 246, 0.1);
}

.find-data-chip-uid,
.find-data-kind-uid {
  color: var(--accent-warning);
  background: rgba(245, 158, 11, 0.12);
}

.find-data-chip-postLink,
.find-data-kind-postLink {
  color: var(--accent-info);
  background: rgba(14, 165, 233, 0.1);
}

.find-data-chip-facebookGroup,
.find-data-kind-facebookGroup {
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.12);
}

.find-data-value-cell,
.find-data-group-cell {
  max-width: 280px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* =========== Browser Page =========== */
.browser-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.browser-warning-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(
    90deg,
    rgba(239, 68, 68, 0.15),
    rgba(234, 179, 8, 0.12)
  );
  color: var(--accent-warning);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid rgba(234, 179, 8, 0.2);
  flex-shrink: 0;
}

.browser-tabs-bar {
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
  min-height: 36px;
}

.browser-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.browser-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  border-bottom: none;
  white-space: nowrap;
  user-select: none;
}

.browser-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.browser-tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-default);
  font-weight: 500;
}

.browser-tab.is-running {
  color: var(--text-primary);
}

.browser-tab-label {
  font-weight: inherit;
}

.browser-tab-platform {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-primary);
  text-transform: capitalize;
}

.browser-tab-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 0 14px rgba(34, 197, 94, 0.65);
  flex-shrink: 0;
}

.browser-tab-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}

.browser-webview-container {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #fff;
}

.browser-webview-container webview {
  width: 100%;
  height: 100%;
}

.browser-session-loading {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--bg-primary);
}

.browser-background-preview {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #05070d;
  overflow: hidden;
}

.browser-background-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.browser-background-preview-loading {
  height: 100%;
  color: #cbd5e1;
}

.browser-background-preview-gradient {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.browser-background-preview-gradient.top {
  top: 0;
  height: 88px;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.72), rgba(5, 7, 13, 0));
}

.browser-background-preview-gradient.bottom {
  bottom: 0;
  height: 112px;
  background: linear-gradient(0deg, rgba(5, 7, 13, 0.78), rgba(5, 7, 13, 0));
}

.browser-background-preview-toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.browser-background-preview-status,
.browser-background-preview-meta,
.browser-background-preview-footer {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 13, 22, 0.74);
  backdrop-filter: blur(12px);
  color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}

.browser-background-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.browser-background-preview-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 0 18px rgba(34, 197, 94, 0.75);
}

.browser-background-preview-meta {
  padding: 7px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

.browser-background-preview-footer {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

/* =========== CONTEXT MENU =========== */
.context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 220px;
  max-width: 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px);
  padding: 6px;
  animation: contextMenuIn 0.12s ease-out;
  overflow: hidden;
}

.account-context-menu {
  width: max-content;
  min-width: min(220px, calc(100vw - 16px));
  max-width: min(280px, calc(100vw - 16px));
  max-height: calc(100vh - var(--titlebar-height, 0px) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-app-region: no-drag;
}

.account-context-menu .context-menu-item {
  white-space: normal;
  overflow-wrap: anywhere;
}

@keyframes contextMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.context-menu-group {
  padding: 2px 0;
}

.context-menu-group + .context-menu-group {
  border-top: 1px solid var(--border-default);
  margin-top: 2px;
  padding-top: 4px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  white-space: nowrap;
}

.context-menu-item:hover {
  background: var(--bg-hover);
}

.context-menu-item svg {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.context-menu-item:hover svg {
  color: var(--accent-primary);
}

/* Accent variants */
.context-menu-item.accent-success:hover {
  background: rgba(52, 211, 153, 0.1);
}
.context-menu-item.accent-success:hover svg {
  color: var(--accent-success);
}

.context-menu-item.accent-warning:hover {
  background: rgba(251, 191, 36, 0.1);
}
.context-menu-item.accent-warning:hover svg {
  color: var(--accent-warning);
}

.context-menu-item.accent-error:hover {
  background: rgba(244, 63, 94, 0.1);
}
.context-menu-item.accent-error:hover svg {
  color: var(--accent-error);
}

/* Context submenu (expandable) */
.context-menu-submenu {
  position: relative;
}

.context-submenu-items {
  padding-left: 8px;
  border-left: 2px solid var(--accent-primary);
  margin-left: 12px;
  margin-top: 2px;
  animation: contextMenuIn 0.12s ease-out;
}

/* =========== CAMPAIGN LIST FILTERS =========== */
.campaign-list-header {
  min-height: 46px;
  padding: 8px 12px;
}

.campaign-list-header .campaign-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaign-list-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  text-align: center;
}

.campaign-list-filter-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  position: relative;
  z-index: 25;
}

.campaign-filter-row {
  display: grid;
  gap: 8px;
  align-items: end;
}

.campaign-filter-time-row {
  grid-template-columns: minmax(230px, 0.8fr) minmax(260px, 1.6fr);
}

.campaign-filter-compact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.campaign-filter-selection {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 20px;
  padding-right: 10px;
  margin-right: 3px;
  border-right: 1px solid var(--border-default);
}

.campaign-filter-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 11px;
}

.campaign-filter-pager > span {
  margin-right: 4px;
}

.campaign-filter-pager .btn-icon {
  width: 24px;
  height: 28px;
  padding: 0;
  flex-shrink: 0;
}

.campaign-filter-select-row {
  grid-template-columns: minmax(210px, 1fr) minmax(170px, 0.8fr) minmax(260px, 1.8fr);
}

.campaign-filter-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

.campaign-filter-search-field {
  flex: 0 0 150px;
}

.campaign-filter-field label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.campaign-filter-control {
  width: 100%;
  height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.campaign-filter-date-input {
  width: 100%;
  height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.campaign-filter-date-input:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.campaign-time-filter-popover {
  position: fixed;
  min-width: 0;
  overflow-y: auto;
}

.campaign-filter-multiselect {
  min-width: 0;
}

.campaign-multi-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.campaign-filter-inline-button,
.campaign-multi-select-trigger {
  width: auto;
  max-width: 260px;
  height: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 8px;
  border: 1px dashed var(--border-default);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.campaign-multi-select-trigger:hover {
  background: var(--bg-hover);
}

.campaign-multi-select-trigger.is-open {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.campaign-multi-select-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-filter-inline-button,
.campaign-multi-select-trigger {
  box-shadow: none;
}

.campaign-filter-inline-button.has-value,
.campaign-multi-select-trigger.has-value {
  border-style: solid;
  border-color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.campaign-filter-inline-button:focus-visible,
.campaign-multi-select-trigger:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.campaign-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--bg-tertiary);
}

.campaign-filter-inline-button svg,
.campaign-multi-select-trigger > svg,
.campaign-filter-search-box > svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.campaign-filter-trigger-copy {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.campaign-filter-trigger-label {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.campaign-filter-trigger-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-weight: 700;
}

.campaign-filter-menu {
  position: fixed;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: max(100%, 240px);
  max-height: min(280px, 42vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.campaign-filter-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.campaign-filter-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.campaign-filter-option.selected {
  color: var(--accent-primary);
  background: var(--bg-accent-subtle);
}

.campaign-filter-option-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: #ffffff;
  background: var(--bg-secondary);
}

.campaign-filter-option.selected .campaign-filter-option-check {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.campaign-filter-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-filter-action .campaign-filter-option {
  align-items: flex-start;
}

.campaign-filter-action .campaign-filter-option-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.campaign-filter-menu-divider {
  height: 1px;
  margin: 5px 2px;
  background: var(--border-default);
}

.campaign-filter-search-box {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.campaign-filter-search-box:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
}

.campaign-filter-search-box input {
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 12px;
}

.campaign-filter-search-box input::placeholder {
  color: var(--text-tertiary);
}

@media (max-width: 1180px) {
  .campaign-filter-time-row,
  .campaign-filter-select-row {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

}

@media (max-width: 760px) {
  .campaign-filter-time-row,
  .campaign-filter-select-row {
    grid-template-columns: 1fr;
  }

}

/* =========== CAMPAIGN FILTER BAR =========== */
.campaign-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(56, 189, 248, 0.06));
  border-bottom: 1px solid var(--border-default);
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  animation: fadeIn 0.15s ease;
}

.campaign-filter-bar strong {
  color: var(--accent-primary);
  font-weight: 600;
}

.campaign-filter-bar .btn-icon {
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 3px;
  transition: all var(--transition-fast);
}

.campaign-filter-bar .btn-icon:hover {
  background: var(--bg-elevated);
  color: var(--accent-error);
}

/* =========== LIGHT THEME CONTRAST LAYERS =========== */
body.theme-light .app-main,
body.theme-light .campaign-page,
body.theme-light .report-page {
  background: linear-gradient(180deg, #dfe8f2 0%, #d7e2ef 100%);
}

body.theme-light .app-sidebar {
  background: linear-gradient(180deg, #f3f7fb 0%, #e6edf7 100%);
  border-right-color: #bfccdc;
  box-shadow: 2px 0 12px rgba(15, 23, 42, 0.06);
}

body.theme-light .app-sidebar-toggle {
  background: #e7eef7;
  border-color: #c2cfdf;
}

body.theme-light .app-sidebar-nav-item:hover,
body.theme-light .app-sidebar-account-button:hover {
  background: #e1eaf5;
}

body.theme-light .app-sidebar-nav-item.active,
body.theme-light .app-sidebar-account-button.active {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.16);
}

body.theme-light .app-sidebar-account-flyout,
body.theme-light .modal,
body.theme-light .report-filter-popover,
body.theme-light .campaign-filter-menu {
  background: #f5f8fc;
  border-color: #bfccdc;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08);
}

body.theme-light .app-utility-button.has-update:not(:disabled) {
  background: #ddd6fe;
  border-color: #7c3aed;
  color: #4c1d95;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.14), 0 0 14px rgba(109, 40, 217, 0.2);
}

body.theme-light .app-utility-button.has-update:hover:not(:disabled) {
  background: #c4b5fd;
  border-color: #6d28d9;
  color: #3b0764;
}

body.theme-light .app-sidebar-flyout-item.has-update:not(:disabled) {
  background: #ede9fe;
  color: #4c1d95;
  box-shadow: inset 0 0 0 1px #a78bfa;
}

body.theme-light .app-sidebar-flyout-item.has-update:hover:not(:disabled) {
  background: #ddd6fe;
  color: #3b0764;
}

body.theme-light .app-sidebar-flyout-item.has-update svg {
  color: currentColor;
}

body.theme-light .app-utility-button.has-update .app-update-available-dot,
body.theme-light .app-sidebar-flyout-item.has-update .app-update-available-dot {
  border-color: #f5f3ff;
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16), 0 0 8px rgba(180, 83, 9, 0.58);
}

body.theme-light .campaign-page-panel,
body.theme-light .report-filter-panel,
body.theme-light .report-main-panel {
  background: #f5f8fc;
  border-color: #bfccdc;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09), 0 1px 4px rgba(15, 23, 42, 0.07);
}

body.theme-light .campaign-panel,
body.theme-light .report-table-wrap,
body.theme-light .report-detail-table-wrap {
  background: #f5f8fc;
}

body.theme-light .campaign-panel-header,
body.theme-light .report-panel-header,
body.theme-light .report-main-header,
body.theme-light .detail-dock-header,
body.theme-light .modal-header,
body.theme-light .modal-footer {
  background: #eaf1f8;
  border-color: #c2cfdf;
}

body.theme-light .campaign-feedback-modal {
  background: #f5f8fc;
}

body.theme-light .campaign-feedback-modal .campaign-modal-top,
body.theme-light .campaign-feedback-modal .campaign-modal-body,
body.theme-light .campaign-feedback-modal .modal-footer {
  background: transparent;
}

body.theme-light .campaign-list-filter-panel {
  background: #f0f5fb;
  border-bottom-color: #c2cfdf;
}

body.theme-light .campaign-panel-content.campaign-table-scroll,
body.theme-light .detail-dock-body,
body.theme-light .detail-dock-tab-content,
body.theme-light .report-account-tree,
body.theme-light .report-action-list {
  background: #edf3fa;
}

body.theme-light .campaign-filter-search-box,
body.theme-light .campaign-multi-select-trigger,
body.theme-light .report-filter-button,
body.theme-light .report-field select,
body.theme-light .report-filter-section select,
body.theme-light .report-date-grid input,
body.theme-light .panel-input {
  background: #e7eef7;
  border-color: #c3d0df;
}

body.theme-light .campaign-filter-search-box:focus-within,
body.theme-light .campaign-multi-select-trigger.is-open,
body.theme-light .report-filter-button.active,
body.theme-light .report-field select:focus,
body.theme-light .report-filter-section select:focus,
body.theme-light .report-date-grid input:focus,
body.theme-light .panel-input:focus {
  background: #f5f8fc;
}

body.theme-light .campaign-list-filter-panel,
body.theme-light .campaign-list-header {
  background: #fff;
  border-color: #edf1f6;
}

body.theme-light .campaign-filter-search-box {
  background: #f1f4f9;
  border-color: transparent;
}

body.theme-light .campaign-filter-inline-button,
body.theme-light .campaign-multi-select-trigger {
  background: #fff;
  border-color: #d6deeb;
}

body.theme-light .campaign-filter-icon,
body.theme-light .campaign-list-count {
  background: #eef2f7;
}

body.theme-light .campaign-filter-inline-button:hover,
body.theme-light .campaign-multi-select-trigger:hover {
  background: #f5f7fb;
}

body.theme-light .campaign-filter-inline-button.active,
body.theme-light .campaign-multi-select-trigger.is-open,
body.theme-light .campaign-filter-inline-button.has-value,
body.theme-light .campaign-multi-select-trigger.has-value {
  background: var(--bg-accent-subtle);
  border-color: var(--accent-primary);
}

body.theme-light .campaign-filter-search-box:focus-within {
  border-color: var(--accent-primary);
}

body.theme-light .campaign-table-header,
body.theme-light .report-grid th,
body.theme-light .report-detail-grid th {
  background: #e1eaf5;
  border-bottom-color: #bdccdc;
  color: #64748b;
}

body.theme-light .campaign-table-header {
  box-shadow: 0 -8px 0 #e1eaf5;
}

body.theme-light .campaign-table-row {
  --campaign-row-bg: #f7fafd;
  --campaign-row-hover-bg: #e8f0fa;
  --campaign-row-selected-bg: rgba(99, 102, 241, 0.12);
  --campaign-row-multi-bg: rgba(99, 102, 241, 0.08);
  border-bottom-color: #ccd8e6;
}

body.theme-light .campaign-table-row.status-pending {
  --campaign-row-bg: rgba(14, 165, 233, 0.075);
  --campaign-row-hover-bg: rgba(14, 165, 233, 0.12);
  --campaign-row-selected-bg: rgba(14, 165, 233, 0.16);
  --campaign-row-multi-bg: rgba(14, 165, 233, 0.11);
}

body.theme-light .campaign-table-row.status-running {
  --campaign-row-bg: rgba(245, 158, 11, 0.09);
  --campaign-row-hover-bg: rgba(245, 158, 11, 0.14);
  --campaign-row-selected-bg: rgba(245, 158, 11, 0.17);
  --campaign-row-multi-bg: rgba(245, 158, 11, 0.12);
}

body.theme-light .campaign-table-row.status-completed {
  --campaign-row-bg: rgba(16, 185, 129, 0.075);
  --campaign-row-hover-bg: rgba(16, 185, 129, 0.12);
  --campaign-row-selected-bg: rgba(16, 185, 129, 0.16);
  --campaign-row-multi-bg: rgba(16, 185, 129, 0.11);
}

body.theme-light .campaign-table-row.status-paused,
body.theme-light .campaign-table-row.status-error {
  --campaign-row-bg: rgba(239, 68, 68, 0.075);
  --campaign-row-hover-bg: rgba(239, 68, 68, 0.12);
  --campaign-row-selected-bg: rgba(239, 68, 68, 0.16);
  --campaign-row-multi-bg: rgba(239, 68, 68, 0.11);
}

body.theme-light .report-grid td,
body.theme-light .report-detail-grid td,
body.theme-light td.report-account-col {
  background: #f7fafd;
}

body.theme-light .report-grid tbody tr:hover td,
body.theme-light .report-detail-grid tbody tr:hover td {
  background: #e8f0fa;
}

body.theme-light .account-card {
  --account-card-bg: #f7fafd;
  --account-card-hover-bg: #e8f0fa;
  border-color: #c7d5e4;
  border-left-color: var(--account-card-accent);
}

body.theme-light .account-card.status-ready {
  --account-card-bg: rgba(34, 197, 94, 0.14);
  --account-card-hover-bg: rgba(34, 197, 94, 0.2);
}

body.theme-light .account-card.status-running {
  --account-card-bg: rgba(245, 158, 11, 0.09);
  --account-card-hover-bg: rgba(245, 158, 11, 0.14);
}

body.theme-light .account-card.status-blocked {
  --account-card-bg: rgba(239, 68, 68, 0.24);
  --account-card-hover-bg: rgba(239, 68, 68, 0.32);
}

body.theme-light .account-card.status-restricted {
  --account-card-bg: rgba(168, 85, 247, 0.075);
  --account-card-hover-bg: rgba(168, 85, 247, 0.12);
}

body.theme-light .account-card.status-disabled {
  --account-card-bg: rgba(107, 114, 128, 0.055);
  --account-card-hover-bg: rgba(107, 114, 128, 0.09);
}

body.theme-light .detail-dock-resize-handle {
  background: #dfe8f2;
  border-bottom-color: #c2cfdf;
}

/* =========== DISABLED ACCOUNT CARD =========== */
.account-card.disabled {
  opacity: 1;
  border-style: solid;
}

.account-card.disabled:hover {
  opacity: 1;
}

/* =========== CAMPAIGN DATA TARGET SOURCE =========== */
.campaign-data-source-header {
  cursor: pointer;
}

.campaign-data-source-section .stepper-section-body {
  padding: 16px;
}

.campaign-data-source-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.campaign-data-source-mode {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.campaign-data-source-mode:hover {
  border-color: var(--border-hover);
}

.campaign-data-source-mode.selected {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-default));
  background: var(--bg-accent-subtle);
}

.campaign-data-source-mode input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.campaign-data-source-mode:has(input:focus-visible) {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.campaign-data-source-mode:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.campaign-data-source-radio {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  background: var(--bg-secondary);
}

.campaign-data-source-mode.selected .campaign-data-source-radio {
  border: 6px solid var(--accent-primary);
}

.campaign-data-source-mode > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.campaign-data-source-mode strong {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
}

.campaign-data-source-mode small {
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.45;
}

.campaign-data-group-label {
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.campaign-data-group-picker-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-data-group-control {
  min-width: 300px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

.campaign-data-group-control:hover {
  border-color: var(--border-hover);
}

.campaign-data-group-control > svg:last-child {
  flex: none;
  margin-left: auto;
  color: var(--text-tertiary);
}

.campaign-data-group-dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
}

.campaign-data-group-control-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.campaign-data-group-control-copy strong,
.campaign-data-group-control-copy small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-data-group-control-copy strong {
  font-size: 13px;
  font-weight: 700;
}

.campaign-data-group-control-copy small {
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.campaign-data-group-control-placeholder {
  flex: 1;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: left;
}

.campaign-data-group-pick-button {
  height: 44px;
  flex: none;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 650;
}

@media (max-width: 760px) {
  .campaign-data-source-modes {
    grid-template-columns: 1fr;
  }

  .campaign-data-group-picker-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .campaign-data-group-control,
  .campaign-data-group-pick-button {
    width: 100%;
    min-width: 0;
  }
}

.browser-run-limits-settings { max-width: 680px; }
.browser-run-limits-settings h3 { margin: 0 0 12px; }
.browser-run-limits-settings p { line-height: 1.55; margin: 12px 0; }
.browser-run-limits-settings fieldset { border: 0; padding: 0; margin: 24px 0 12px; min-width: 0; display: grid; gap: 10px; }
.browser-run-limits-settings label { font-weight: 500; }
.browser-run-limits-settings input { width: 100%; max-width: 260px; box-sizing: border-box; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); }
.browser-run-limits-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.browser-run-limits-error { color: var(--accent-error); }


.report-mode-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.report-mode-tabs [role="tab"] { padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; }
.report-mode-tabs [role="tab"][aria-selected="true"] { color: var(--accent-primary, #3157d5); border-bottom-color: currentColor; font-weight: 600; }
.report-mode-tabs [role="tab"]:disabled { opacity: .55; cursor: wait; }
.report-mode-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent-primary, #3157d5); outline-offset: -2px; }
@media (max-width: 1050px) {
  .report-filter-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .report-filter-content { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   HND ZALO — NEXT-GEN MODERN UI & SMOOTH ANIMATED ICON SYSTEM
   ========================================================================== */

@keyframes hndOrbitSpin {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -60; }
}

@keyframes hndBoltPulse {
  0%, 100% { opacity: 0.22; transform: scale(0.96); }
  50% { opacity: 0.55; transform: scale(1.06); }
}

@keyframes hndLiveDotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
  }
  50% {
    transform: scale(1.16);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

@keyframes hndIconLayersFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-2.5px) scale(1.12); }
  75% { transform: translateY(1px) scale(1.04); }
}

@keyframes hndIconGlobeOrbit {
  0% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(16deg) scale(1.14); }
  70% { transform: rotate(-10deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes hndIconChatBounce {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  30% { transform: translateY(-3px) rotate(-8deg) scale(1.15); }
  65% { transform: translateY(1px) rotate(5deg) scale(1.06); }
}

@keyframes hndIconCrmPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.16) rotate(6deg); }
}

@keyframes hndIconDataScan {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0)); }
  50% { transform: translateY(-2px) scale(1.14); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.75)); }
}

@keyframes hndIconFolderPeek {
  0%, 100% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(-10deg) translateY(-2px) scale(1.14); }
  75% { transform: rotate(5deg) scale(1.06); }
}

@keyframes hndIconZapFlash {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); }
  25% { transform: scale(1.2) rotate(-10deg); filter: drop-shadow(0 0 9px rgba(56, 189, 248, 0.9)); }
  55% { transform: scale(1.08) rotate(8deg); filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.85)); }
}

@keyframes hndIconDocWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2.5px) rotate(6deg) scale(1.12); }
}

@keyframes hndIconMediaPop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.16) rotate(-7deg); }
  80% { transform: scale(1.06) rotate(4deg); }
}

@keyframes hndIconCogSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(90deg) scale(1.14); }
  100% { transform: rotate(180deg) scale(1); }
}

@keyframes hndIconChartRise {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-2.5px) scaleY(1.16) scaleX(1.08); }
}

@keyframes hndIconShieldPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8)); }
}

@keyframes hndAmbientShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 1. Custom SVG Logo Animations */
.hnd-zalo-svg-logo {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(0, 104, 255, 0.38));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.hnd-zalo-svg-logo .hnd-logo-orbit {
  animation: hndOrbitSpin 10s linear infinite;
}

.hnd-zalo-svg-logo .hnd-logo-bolt {
  transform-origin: center;
  animation: hndBoltPulse 2.6s ease-in-out infinite;
}

.hnd-zalo-svg-logo .hnd-logo-pulse {
  transform-origin: 49px 15px;
  animation: hndLiveDotPulse 2.2s ease-in-out infinite;
}

.app-sidebar-brand:hover .hnd-zalo-svg-logo,
.app-utility-brand-bar:hover .hnd-zalo-svg-logo {
  transform: scale(1.1) rotate(-4deg);
  filter: drop-shadow(0 6px 18px rgba(0, 212, 255, 0.62));
}

/* 2. Modernized Top Utility Bar */
.app-utility-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(8, 15, 32, 0.96) 0%, rgba(11, 22, 48, 0.96) 50%, rgba(8, 15, 32, 0.96) 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.platform-win32 .app-utility-topbar,
.platform-linux .app-utility-topbar {
  padding-right: calc(var(--windows-titlebar-control-width, 138px) + 12px) !important;
}

.app-utility-actions {
  height: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

.browser-tabs-bar {
  position: relative;
  z-index: 30;
  -webkit-app-region: no-drag !important;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  padding: 4px 10px 0 10px;
  min-height: 40px;
}

.browser-tabs,
.browser-tab,
.browser-tab-actions,
.browser-tab-actions button {
  -webkit-app-region: no-drag !important;
}

.browser-tab {
  position: relative;
  padding: 7px 14px;
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.browser-tab.active {
  background: linear-gradient(180deg, rgba(0, 104, 255, 0.18) 0%, var(--bg-primary) 100%) !important;
  color: var(--text-primary) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
  font-weight: 600 !important;
  box-shadow: 0 -2px 10px rgba(0, 104, 255, 0.14);
}

body.theme-light .app-utility-topbar {
  background: linear-gradient(90deg, #eef5ff 0%, #f8fbff 50%, #eef5ff 100%) !important;
  border-bottom: 1px solid rgba(0, 104, 255, 0.16) !important;
  box-shadow: 0 2px 12px rgba(0, 104, 255, 0.06);
}

.app-utility-brand-bar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  -webkit-app-region: no-drag;
}

.app-utility-brand-logo {
  flex-shrink: 0;
}

.app-utility-topbar .app-utility-title {
  position: static !important;
  transform: none !important;
  max-width: none !important;
  overflow: visible !important;
  flex-shrink: 0;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #ffffff 0%, #7df9ff 55%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-light .app-utility-topbar .app-utility-title {
  background: linear-gradient(135deg, #0052cc 0%, #0068ff 55%, #0284c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-utility-pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(0, 104, 255, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.32);
}

body.theme-light .app-utility-pro-badge {
  color: #0052cc;
  background: rgba(0, 104, 255, 0.1);
  border-color: rgba(0, 104, 255, 0.25);
}

.app-utility-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

body.theme-light .app-utility-status-pill {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
}

.app-utility-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #10b981;
  animation: hndLiveDotPulse 2s infinite;
}

.app-utility-theme-btn svg {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.app-utility-theme-btn:hover .hnd-theme-icon-sun {
  transform: rotate(95deg) scale(1.18);
  color: #fbbf24;
}

.app-utility-theme-btn:hover .hnd-theme-icon-moon {
  transform: rotate(-22deg) scale(1.18);
  color: #38bdf8;
}

/* 3. Modernized Sidebar & Brand Header */
.app-sidebar {
  background: linear-gradient(180deg, #080f22 0%, #0b152c 55%, #070d1c 100%) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.15) !important;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.35);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.app-sidebar.is-expanded {
  width: 232px !important;
}

body.theme-light .app-sidebar {
  background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 55%, #eef5ff 100%) !important;
  border-right: 1px solid rgba(0, 104, 255, 0.15) !important;
  box-shadow: 6px 0 24px rgba(0, 104, 255, 0.06);
}

.app-sidebar-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.app-sidebar-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-sidebar-brand-name {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15;
  background: linear-gradient(135deg, #ffffff 0%, #7df9ff 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-light .app-sidebar-brand-name {
  background: linear-gradient(135deg, #0044b3 0%, #0068ff 55%, #0284c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-sidebar-brand-subtitle {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #38bdf8;
  opacity: 0.9;
}

body.theme-light .app-sidebar-brand-subtitle {
  color: #0068ff;
}

/* 4. Sidebar Nav Items & Bespoke Icon Animations */
.app-sidebar-nav-item {
  position: relative;
  overflow: hidden;
  border-radius: 11px !important;
  border: 1px solid transparent;
  transition:
    background 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.24s ease,
    border-color 0.24s ease,
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.24s ease !important;
}

.app-sidebar.is-expanded .app-sidebar-nav-item:hover {
  transform: translateX(3px);
}

.app-sidebar-nav-item:hover {
  background: linear-gradient(90deg, rgba(0, 104, 255, 0.18) 0%, rgba(0, 212, 255, 0.06) 100%) !important;
  border-color: rgba(56, 189, 248, 0.25);
  color: #ffffff !important;
}

body.theme-light .app-sidebar-nav-item:hover {
  background: linear-gradient(90deg, rgba(0, 104, 255, 0.12) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
  border-color: rgba(0, 104, 255, 0.22);
  color: #0052cc !important;
}

.app-sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(0, 104, 255, 0.28) 0%, rgba(0, 212, 255, 0.12) 100%) !important;
  border-color: rgba(56, 189, 248, 0.42) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 104, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.theme-light .app-sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(0, 104, 255, 0.16) 0%, rgba(14, 165, 233, 0.08) 100%) !important;
  border-color: rgba(0, 104, 255, 0.35) !important;
  color: #0052cc !important;
  box-shadow: 0 6px 16px rgba(0, 104, 255, 0.12);
}

.app-sidebar-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3.5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #00e5ff 0%, #0068ff 100%);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

.app-sidebar-item-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease, box-shadow 0.25s ease;
}

body.theme-light .app-sidebar-item-icon {
  background: rgba(0, 104, 255, 0.05);
}

.app-sidebar-nav-item:hover .app-sidebar-item-icon,
.app-sidebar-nav-item.active .app-sidebar-item-icon {
  background: linear-gradient(135deg, rgba(0, 104, 255, 0.32) 0%, rgba(0, 212, 255, 0.22) 100%);
  color: #7df9ff;
  box-shadow: 0 0 14px rgba(0, 104, 255, 0.35);
}

body.theme-light .app-sidebar-nav-item:hover .app-sidebar-item-icon,
body.theme-light .app-sidebar-nav-item.active .app-sidebar-item-icon {
  background: linear-gradient(135deg, #0068ff 0%, #0ea5e9 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 104, 255, 0.28);
}

.app-sidebar-item-icon svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

/* Per-Nav-Item Smooth Icon Animations */
.app-sidebar-nav-item[data-nav-key="campaigns"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="campaigns"].active .app-sidebar-item-icon svg {
  animation: hndIconLayersFloat 1.8s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="browsers"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="browsers"].active .app-sidebar-item-icon svg {
  animation: hndIconGlobeOrbit 2.4s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="chat"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="chat"].active .app-sidebar-item-icon svg {
  animation: hndIconChatBounce 1.7s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="crm"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="crm"].active .app-sidebar-item-icon svg {
  animation: hndIconCrmPulse 1.9s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="data-scan"]:hover .app-sidebar-item-icon svg {
  animation: hndIconDataScan 1.5s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="data-groups"]:hover .app-sidebar-item-icon svg {
  animation: hndIconFolderPeek 1.6s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="automations"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="automations"].active .app-sidebar-item-icon svg {
  animation: hndIconZapFlash 1.5s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="content-templates"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="content-templates"].active .app-sidebar-item-icon svg {
  animation: hndIconDocWave 1.8s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="media"]:hover .app-sidebar-item-icon svg {
  animation: hndIconMediaPop 1.7s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="proxy"]:hover .app-sidebar-item-icon svg {
  animation: hndIconCogSpin 2.2s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="reports"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="reports"].active .app-sidebar-item-icon svg {
  animation: hndIconChartRise 1.6s ease-in-out infinite;
}

.app-sidebar-nav-item[data-nav-key="workflow-editor"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="workflow-editor"].active .app-sidebar-item-icon svg {
  animation: hndIconCogSpin 2.5s linear infinite;
}

.app-sidebar-nav-item[data-nav-key="admin"]:hover .app-sidebar-item-icon svg,
.app-sidebar-nav-item[data-nav-key="admin"].active .app-sidebar-item-icon svg {
  animation: hndIconShieldPulse 1.8s ease-in-out infinite;
}

/* 5. Sidebar Footer Workspace Card */
.app-sidebar-user-avatar {
  background: linear-gradient(135deg, #0068ff 0%, #00d4ff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 104, 255, 0.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.app-sidebar-account-button:hover .app-sidebar-user-avatar {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 6px 16px rgba(0, 212, 255, 0.5);
}

/* 6. Global Buttons, Icons & Panels Polish */
.btn {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease !important;
}

.btn:not(:disabled):hover {
  transform: translateY(-1.5px);
}

.btn:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

.btn svg,
.btn-icon svg,
.app-sidebar-flyout-item svg,
.general-settings-nav-item svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.btn:not(:disabled):hover svg,
.btn-icon:not(:disabled):hover svg,
.app-sidebar-flyout-item:hover svg,
.general-settings-nav-item:hover svg {
  transform: scale(1.16) rotate(-5deg);
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0052ff 0%, #0068ff 50%, #0ea5e9 100%) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.32);
}

.btn-primary:not(:disabled):hover {
  box-shadow: 0 8px 22px rgba(0, 104, 255, 0.48), 0 0 12px rgba(0, 212, 255, 0.32) !important;
}

.account-panel,
.campaign-panel {
  border-color: var(--border-default) !important;
}

.account-panel-header,
.campaign-panel-header {
  position: relative;
}

.account-panel-header::after,
.campaign-panel-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 104, 255, 0.45), rgba(0, 212, 255, 0.25), transparent);
  pointer-events: none;
}