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

.mode-switch,
.format-tools {
  display: flex;
  gap: 5px;
}

.mode-switch button,
.format-tools button {
  border: 1px solid var(--line);
  background: #0b0e0c;
  color: var(--muted);
  border-radius: 8px;
  padding: 8px 11px;
}

.mode-switch button.active,
.format-tools button:hover,
.format-tools button.active {
  color: #111;
  background: var(--lime);
  border-color: var(--lime);
}

.telegram-editor {
  min-height: 55vh;
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b0e0c;
  color: var(--text);
  caret-color: var(--text);
  padding: 20px;
  outline: none;
  white-space: pre-wrap;
  line-height: 1.55;
  font-family: Inter, "Segoe UI", sans-serif;
}

.telegram-editor:focus {
  border-color: var(--lime);
}

.telegram-editor blockquote {
  position: relative;
  margin: 8px 0;
  padding: 6px 30px 6px 12px;
  border-left: 3px solid var(--lime);
  background: #c8ff4d0b;
  border-radius: 0 7px 7px 0;
  white-space: pre-wrap;
}

.telegram-editor blockquote::after {
  content: "”";
  position: absolute;
  top: -2px;
  right: 10px;
  font-size: 22px;
  line-height: 1;
  color: var(--lime);
  opacity: .55;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}

.telegram-editor a {
  color: #93c7ff;
}

/* Chrome sometimes injects an inline color style (often black) on text typed
   right after execCommand('insertHTML'), making it invisible on this dark
   background. It never survives into the saved HTML (safeTelegramHtml strips
   it), so this is purely a live-editing visibility fix. */
.telegram-editor [style*="color"] {
  color: var(--text) !important;
}

.telegram-editor a[style*="color"] {
  color: #93c7ff !important;
}

.telegram-editor pre,
.telegram-editor code {
  font-family: ui-monospace, Consolas, monospace;
  background: #1b211c;
  border-radius: 4px;
  padding: 2px 5px;
}

.telegram-editor tg-emoji {
  display: inline;
}

tg-emoji.emoji-rendered {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin: 0 .03em -.14em;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 4px;
}

.emoji-picker {
  position: relative;
  z-index: 3;
  margin: -2px 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #101411;
  box-shadow: 0 18px 45px #0008;
}

.emoji-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.emoji-picker-head > div,
.custom-emoji-form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.emoji-add-btn {
  border: 1px solid #c8ff4d66;
  border-radius: 8px;
  background: #c8ff4d12;
  color: var(--lime);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 700;
}

.custom-emoji-form {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #090c0a;
  flex-wrap: wrap;
}

.custom-emoji-form input:first-child {
  flex: 1 1 260px;
}

.custom-emoji-form input:nth-child(2) {
  width: 58px;
  text-align: center;
}

.custom-emoji-form input,
.custom-emoji-form button {
  padding: 8px 10px;
}

.custom-emoji-form small {
  flex-basis: 100%;
  min-height: 0;
}

.emoji-picker p {
  margin: 9px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 32px);
  gap: 5px;
  max-height: 145px;
  overflow: auto;
}

.emoji-option {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0e0c;
  color: var(--text);
  font-size: 18px;
}

.emoji-option:hover {
  border-color: var(--lime);
  background: #c8ff4d12;
}

.emoji-option img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.telegram-editor:empty::before {
  content: "Nhập nội dung bài rao…";
  color: var(--muted);
}

@media (max-width: 760px) {
  .editor-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .telegram-editor {
    padding: 14px;
    min-height: 60vh;
  }
}

.security-warning {
  margin: 0 0 18px;
  padding: 12px 14px;
  color: #f6d98e;
  background: #f6c76212;
  border: 1px solid #f6c76255;
  border-radius: 10px;
  font-size: 13px;
}

#account-dialog form {
  padding: 25px;
}

.quick-title-editor {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(420px, 1.6fr);
  align-items: end;
  gap: 20px;
}

.quick-title-editor .eyebrow { margin-top: 0; }
.quick-title-fields {
  display: grid;
  grid-template-columns: 100px minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.quick-title-fields label { margin: 0; }
.quick-title-fields button { min-height: 47px; }

.structured-content-editor {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #151b16, #0d100e 70%);
}
.structured-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.structured-editor-head .eyebrow { margin-top: 0; }
.structured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.structured-grid fieldset {
  min-width: 0;
  padding: 8px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0e0c99;
}
.structured-grid legend {
  padding: 0 7px;
  color: var(--lime);
  font-weight: 800;
}
.structured-grid label { margin: 10px 0 0; }
.compact-fields {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
}
.currency-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}
.currency-icon-grid .field-with-picker { grid-template-columns: minmax(0, 1fr) 42px; }
.currency-icon-grid .field-with-picker .icon-btn-sm { min-width: 42px; padding-inline: 6px; }
.field-with-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.field-with-picker .icon-btn-sm { min-width: 76px; }
.field-with-picker textarea + .icon-btn-sm { align-self: start; min-height: 46px; }
#structured-icon-picker {
  position: fixed;
  z-index: 100;
  width: min(430px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  margin: 0;
  overflow-y: auto;
  background: #111512;
  border-color: #536054;
  box-shadow: 0 22px 70px #000c, 0 0 0 1px #c8ff4d18;
}
.legacy-editor {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.legacy-editor summary {
  padding: 14px 16px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}
.legacy-editor[open] { padding: 0 16px 16px; }
.legacy-editor[open] summary { margin: 0 -16px 12px; border-bottom: 1px solid var(--line); }

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

.rich-shop-title {
  margin: 4px 0 14px;
  text-align: center;
  font-size: 24px;
  letter-spacing: .08em;
}

.rich-preview-table {
  width: 100%;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid #465047;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 9px;
  background: #f7f8f6;
  color: #111;
}

.rich-preview-table th,
.rich-preview-table td {
  padding: 10px 12px;
  border-right: 1px solid #c9ceca;
  border-bottom: 1px solid #c9ceca;
  text-align: left;
}

.rich-preview-table th { background: #e5e8e5; }
.rich-preview-table th:last-child,
.rich-preview-table td:last-child { border-right: 0; }
.rich-preview-table tr:last-child > * { border-bottom: 0; }
.rich-preview-table th:first-child,
.rich-preview-table td:first-child { width: 62%; }
.rich-contact th:first-child { width: 55%; }
.rich-tagline { margin: 14px 0 4px; text-align: center; }
.mode-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-switch button {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b0e0c;
  color: var(--muted);
}
.mode-switch button.active {
  border-color: var(--lime);
  background: var(--lime);
  color: #111;
}

@media (max-width: 760px) {
  .quick-title-editor,
  .quick-title-fields,
  .structured-grid,
  .compact-fields,
  .currency-icon-grid { grid-template-columns: 1fr; }
  .structured-editor-head { align-items: stretch; flex-direction: column; }
  #structured-icon-picker {
    top: auto !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto;
    max-height: 62vh;
  }
  .catalog-settings-grid { grid-template-columns: 1fr; }
  .rich-preview-table th,
  .rich-preview-table td { padding: 8px 7px; font-size: 12px; }
}
.rich-preview-table textarea {
  min-width: 150px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px;
}

#business-grid th,
#business-grid td {
  min-width: 160px;
  vertical-align: top;
}
.shop-sync-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.shop-sync-badge{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.shop-sync-badge.ok{color:var(--green,#3ecf8e);border-color:currentColor}
.shop-sync-badge.warn{color:var(--red);border-color:currentColor}
.shop-sync-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.shop-sync-actions label{margin:0}
.shop-sync-actions input{width:110px}
.shop-sync-note{font-size:12px;margin:6px 0 0}
.shop-sync-note.warn{color:var(--red)}
.shop-sync-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 8px;margin:6px 6px 0 0;border:1px solid var(--line);border-radius:999px}
.shop-sync-chip button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px}
.catalog-source{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
.catalog-source select{flex:1;min-width:180px}
.catalog-products{max-height:170px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px;margin-top:8px}
.catalog-products label{display:flex;gap:7px;align-items:center;margin:2px 0;font-size:13px}
.catalog-products input{width:auto}
.catalog-products p{margin:6px 0 2px;font-size:12px;color:var(--muted)}
.emoji-grid .emoji-grid-title{grid-column:1/-1;width:100%;margin:6px 0 0;font-size:12px;color:var(--muted)}