/* Dashboard layout — Snaily-style sidebar + tabbed app shell. */
:root {
  --sidebar-w: 240px;
  --topbar-h: 64px;
}

body { background: #fff; }

.dash { display: flex; min-height: 100vh; }

/* ---- sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: #fff;
}
.sidebar-logo {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  font-weight: 800;
  font-size: 19px;
  border-bottom: 1px solid var(--line);
}
.side-nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.side-item:hover { background: var(--bg-alt); color: var(--ink); }
.side-item.active { background: #eef2ff; color: var(--primary-dark); }
.side-item .ic {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; opacity: .85;
}
.side-item .ic svg { width: 17px; height: 17px; }
.side-recent svg { width: 15px; height: 15px; flex: none; opacity: .7; }
.side-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  font-weight: 700;
  padding: 16px 12px 6px;
}
.side-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-recent:hover { background: var(--bg-alt); color: var(--ink); }

/* ---- main ---- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 24px;
}
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--primary); }
.userbox { text-align: right; line-height: 1.3; }
.userbox .uname { font-weight: 700; font-size: 13.5px; }
.userbox .umail { font-size: 12.5px; color: var(--muted); }
.userbox { display: flex; align-items: center; gap: 14px; }

.content { padding: 18px 20px; flex: 1; background: var(--bg-alt); }
.content h1 {
  font-size: 1.4rem; margin-bottom: 13px; letter-spacing: -0.02em;
}

/* ---- toolbar (search + filter + add) ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.search input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
}
.filter-dots { display: flex; align-items: center; gap: 6px; }
.filter-dots .lbl { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 4px; }
.fdot {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fdot .d { width: 9px; height: 9px; border-radius: 50%; }
.fdot.on { border-color: var(--primary); background: #eef2ff; }
.spacer { flex: 1; }

/* ---- card / table ---- */
.tablecard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px -12px rgba(15, 23, 42, .22),
              0 1px 3px rgba(15, 23, 42, .05);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
thead th.num, tbody td.num { text-align: right; }
tbody td {
  padding: 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--bg-alt); }

.camp-name { font-weight: 700; color: var(--primary-dark); }
.progress {
  margin-top: 6px;
  height: 5px;
  background: #eef2f6;
  border-radius: 999px;
  overflow: hidden;
  max-width: 260px;
}
.progress > span { display: block; height: 100%; background: var(--primary); }
.progress-meta {
  display: flex;
  justify-content: space-between;
  max-width: 260px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.status .d { width: 9px; height: 9px; border-radius: 50%; }
.s-draft .d { background: #94a3b8; }
.s-active .d { background: #16a34a; }
.s-paused .d { background: #d97706; }
.s-done .d { background: #2563eb; }

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
}
.empty-state h3 { color: var(--ink); margin-bottom: 6px; }

/* ---- stat boxes ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 5px 16px -10px rgba(15, 23, 42, .3);
  transition: transform .14s ease, box-shadow .14s ease;
}
.stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .32);
}
.stat-box .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
}
.stat-box .v { font-size: 26px; font-weight: 800; margin-top: 3px; }
.stat-box .v small { font-size: 14px; color: var(--muted); font-weight: 600; }

/* ---- panel ---- */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 19px;
  margin-bottom: 13px;
  box-shadow: 0 6px 22px -12px rgba(15, 23, 42, .22),
              0 1px 3px rgba(15, 23, 42, .05);
}
.panel h2 {
  font-size: 1.04rem; margin-bottom: 4px; line-height: 1.3;
  padding-left: 12px; position: relative;
}
.panel h2::before {
  content: ""; position: absolute; left: 0; top: 1px; bottom: 1px;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
.panel .desc { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

.token-box {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.token-box code {
  flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: ui-monospace, Menlo, monospace;
}
.field-label { font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-opt {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; text-align: center;
}
.plan-opt.current { border-color: var(--primary); background: #eef2ff; }
.plan-opt .p { font-size: 22px; font-weight: 800; margin: 6px 0; }
.plan-opt .btn { width: 100%; justify-content: center; margin-top: 8px; }

.btn--sm { padding: 8px 14px; font-size: 13px; }
.loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
/* Must beat the .loading display:flex so the JS `hidden` toggle works. */
.loading[hidden] { display: none; }

/* ---- modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: #fff; border-radius: 16px; padding: 26px;
  width: 100%; max-width: 440px;
  max-height: 92vh; overflow-y: auto;
  animation: modalPop .16s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal-backdrop { animation: backdropIn .16s ease; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal h2 { font-size: 1.2rem; margin-bottom: 14px; }
.modal label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 5px; }
.modal input, .modal textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit;
}
.modal textarea { min-height: 80px; resize: vertical; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---- post composer + live preview ---- */
.composer-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 20px;
}
/* Keep the bigger preview in view while scrolling the form. */
.composer-grid > div:last-child {
  position: sticky;
  top: 16px;
  align-self: start;
}
.composer-form textarea,
.composer-form input,
.bulk-area {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  margin-bottom: 10px;
}
.composer-form textarea { min-height: 110px; resize: vertical; }
.bulk-area { min-height: 100px; resize: vertical; }
.composer-actions { display: flex; gap: 10px; margin-top: 2px; }

.lp-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 26px -14px rgba(15, 23, 42, .28);
}
.lp-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.lp-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex: none;
}
.lp-name { font-weight: 700; font-size: 15.5px; }
.lp-meta { font-size: 12.5px; color: var(--muted); }
.lp-body {
  font-size: 15.5px; line-height: 1.55; white-space: pre-wrap;
  word-break: break-word; color: var(--ink); min-height: 150px;
}
.lp-body.empty { color: var(--muted); }
.lp-link {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: var(--primary);
  word-break: break-all;
}
.lp-fc {
  margin-top: 10px; font-size: 12px; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: 8px;
}

/* ---- content calendar ---- */
.cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-nav h3 { font-size: 1rem; min-width: 160px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 4px 0;
}
.cal-cell {
  min-height: 90px; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; background: #fff;
}
.cal-cell.empty { background: var(--bg-alt); border-style: dashed; }
.cal-cell.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.cal-cell.today .cal-daynum { color: var(--primary); }
.cal-chip {
  font-size: 10.5px; background: #eef2ff; color: var(--primary-dark);
  border-radius: 5px; padding: 2px 5px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip.draft { background: #f1f5f9; color: var(--muted); }
.cal-chip.posted { background: #dcfce7; color: #15803d; }
.cal-chip.failed { background: #fef2f2; color: #b91c1c; }

/* ---- banner creator (Studio) ---- */
.banner-templates { display: flex; gap: 8px; flex-wrap: wrap; }
.banner-tpl {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
  text-transform: capitalize; color: var(--ink);
}
.banner-tpl.on { border-color: var(--primary); background: #eef2ff; }
.banner-tpl-sw {
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line);
}
.banner-canvas {
  width: 100%; max-width: 820px; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 10px; margin: 14px 0;
  cursor: move; touch-action: none;
}
.banner-canvas.is-draw { cursor: crosshair; }

.studio-controls { display: grid; gap: 10px; margin-bottom: 14px; }
.sc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-label {
  font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 132px;
}
.sc-text {
  flex: 1; min-width: 200px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.sc-mini { font-size: 11.5px; color: var(--muted); }
.studio-controls input[type="color"] {
  width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; cursor: pointer;
}
.studio-controls input[type="range"] { flex: 1; min-width: 120px; max-width: 260px; }
.studio-controls select {
  padding: 8px 32px 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit;
}
.sc-show {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.sc-show input { width: auto; cursor: pointer; }
.photo-canvas {
  width: 340px; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px; margin: 14px 0;
  cursor: move; touch-action: none; background: var(--bg-alt);
}
.meme-canvas {
  width: 100%; max-width: 460px; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px; margin: 14px 0;
  background: var(--bg-alt);
}

/* ---- text formatter toolbar ---- */
.fmt-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fmt-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.fmt-btn:hover { background: var(--bg-alt); border-color: var(--primary); }
.fmt-btn.fmt-b { font-weight: 800; }
.fmt-btn.fmt-i { font-style: italic; }
.fmt-btn.fmt-u { text-decoration: underline; }
.fmt-btn.fmt-s { text-decoration: line-through; }
.fmt-btn.fmt-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.fmt-hint { font-size: 11.5px; color: var(--muted); margin-left: 6px; }

/* ---- merge-field glossary (New campaign modal) ---- */
.merge-glossary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
  line-height: 2;
}
.merge-glossary span { display: inline-block; margin-right: 12px; }
.merge-glossary code {
  background: #eef2ff;
  color: var(--primary-dark);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

/* ---- insights charts ---- */
.chart-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.chart-max { font-size: 11px; fill: var(--muted); font-weight: 700; }
.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.funnel-row:last-child { margin-bottom: 0; }
.funnel-label { width: 96px; font-size: 13px; font-weight: 600; color: var(--ink); }
.funnel-bar {
  flex: 1; height: 24px; background: var(--bg-alt);
  border-radius: 6px; overflow: hidden;
}
.funnel-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.funnel-n {
  width: 44px; text-align: right; font-weight: 800; font-size: 14px;
  color: var(--ink);
}

/* ---- daily limits sliders ---- */
.limits-grid { display: grid; gap: 16px; margin: 16px 0; }
.limit-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.limit-label { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: 1; }
.limit-val {
  font-size: 15px; font-weight: 800; color: var(--ink); min-width: 32px;
  text-align: right;
}
.limit-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.limit-badge.safe { background: #dcfce7; color: #15803d; }
.limit-badge.moderate { background: #fef3c7; color: #b45309; }
.limit-badge.risky { background: #fee2e2; color: #b91c1c; }
.limit-slider {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg,
    #16a34a 0%, #16a34a 45%, #d97706 45%, #d97706 70%, #dc2626 70%);
}
.limit-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary); cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.limit-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary); cursor: pointer;
}

/* ---- Studio polish: centered tools, balanced spacing ---- */
.plan-features {
  list-style: none; margin: 14px 0; padding: 0;
  display: grid; gap: 7px; text-align: left;
}
.plan-features li {
  font-size: 13px; color: var(--muted); padding-left: 20px; position: relative;
}
.plan-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800;
}
.banner-templates { justify-content: center; }
.banner-canvas, .photo-canvas, .meme-canvas {
  margin-left: auto; margin-right: auto;
}
.studio-controls { max-width: 720px; margin-left: auto; margin-right: auto; }
#bnDownload, #phDownload, #memeDownload {
  display: block; margin: 4px auto 0;
}

/* ---- branded file inputs ---- */
input[type="file"] {
  font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 8px; background: var(--bg-alt); max-width: 100%;
}
input[type="file"]:hover { border-color: var(--primary); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 800; font-size: 12.5px;
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; margin-right: 12px; cursor: pointer;
  box-shadow: 0 4px 12px -5px rgba(79, 70, 229, .6);
  transition: filter .15s ease, transform .1s ease;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.12); }
input[type="file"]::file-selector-button:active { transform: scale(.97); }
input[type="file"]::-webkit-file-upload-button {
  font: inherit; font-weight: 800; font-size: 12.5px;
  background: var(--primary); color: #fff; border: none;
  border-radius: 8px; padding: 9px 16px; margin-right: 12px; cursor: pointer;
}

/* ---- media upload + studio video ---- */
.composer-file-label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 9px; padding: 10px 12px;
  margin-bottom: 10px;
}
.composer-file-label input[type="file"] {
  margin-top: 6px; font-weight: 400; border: none; padding: 0;
  background: none;
}
.studio-input, .studio-textarea {
  display: block; width: 100%; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  margin-bottom: 10px;
}
.studio-textarea { min-height: 90px; resize: vertical; }
.media-preview { margin-bottom: 12px; }
.media-preview-el {
  display: block; max-width: 100%; max-height: 280px; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 8px;
}

/* ---- hashtag creator ---- */
.ht-result {
  margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px;
}
.ht-group { margin-bottom: 12px; }
.ht-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 800; color: var(--muted); margin-bottom: 6px;
}
.ht-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-tag {
  font-size: 12.5px; font-weight: 700; border: 1px solid var(--line);
  background: #fff; color: var(--primary-dark); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
}
.ht-tag:hover { border-color: var(--primary); }
.ht-tag.on {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ---- nicer select boxes (applies everywhere) ---- */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; color: var(--ink); cursor: pointer; line-height: 1.3;
  padding: 10px 38px 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  background-size: 13px;
}
select:hover { border-color: var(--primary); }
select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.modal select { width: 100%; }

/* ---- step-by-step field hints ---- */
.field-hint {
  font-size: 12px; color: var(--muted); margin: -1px 0 7px; line-height: 1.5;
}
.modal-intro {
  font-size: 13px; color: var(--muted); margin: -6px 0 6px; line-height: 1.5;
}
.step-tag {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 10.5px; font-weight: 800; border-radius: 5px;
  padding: 1px 6px; margin-right: 6px; vertical-align: 1px;
}

/* ---- auto-comment rules ---- */
.rule-grid { display: grid; gap: 12px; }
.rule-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 15px;
  background: #fff;
}
.rule-card.off { opacity: .6; }
.rule-card-top {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start;
}
.rule-name { font-weight: 800; font-size: 14.5px; }
.rule-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.rule-chip {
  font-size: 11.5px; font-weight: 700; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.rule-chip.ai { background: #eef2ff; border-color: #c7d2fe;
  color: var(--primary-dark); }
.rule-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.cr-approve {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 2px;
  font-size: 13px; color: var(--ink); font-weight: 600; cursor: pointer;
}
.cr-approve input { width: auto; margin-top: 2px; flex: none; cursor: pointer; }

/* ---- auto-liker reaction picker ---- */
.reaction-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 4px;
}
.reaction-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; cursor: pointer; font-size: 12px; font-weight: 700;
  color: var(--ink);
}
.reaction-opt:hover { border-color: var(--primary); }
.reaction-opt.on {
  border-color: var(--primary); background: #eef2ff;
  box-shadow: 0 0 0 1px var(--primary);
}
.reaction-emoji { font-size: 20px; line-height: 1; }

/* ---- table row action buttons ---- */
.row-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

/* ---- UX polish: focus rings + active nav accent ---- */
input[type="text"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="search"]:focus, input[type="password"]:focus,
textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.side-item { position: relative; }
.side-item.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

/* ---- carousel maker ---- */
.carousel-canvas {
  width: 380px; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px;
  margin: 14px auto 10px; background: var(--bg-alt);
}
.carousel-nav {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.car-dot {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #fff;
  font-weight: 800; font-size: 12px; color: var(--muted);
}
.car-dot.on {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ---- poll creator ---- */
.poll-q { font-weight: 700; font-size: 14px; margin: 4px 0 10px; }
.poll-opt-pv {
  border: 1.5px solid var(--primary); border-radius: 999px;
  padding: 8px 14px; margin-bottom: 7px; font-size: 13px;
  font-weight: 600; color: var(--primary-dark); text-align: center;
}

/* ---- jobs module ---- */
.jobs-lock { text-align: center; max-width: 540px; margin: 0 auto; }
.jobs-lock .po-checks {
  text-align: left; display: inline-grid; margin-left: auto;
  margin-right: auto;
}
.jobs-price { margin: 4px 0 14px; }
.jobs-amt {
  font-size: 42px; font-weight: 800; color: var(--primary);
  line-height: 1;
}
.jobs-price span:last-child {
  color: var(--muted); font-weight: 700; font-size: 15px;
}
.app-status-sel { padding: 6px 28px 6px 10px; font-size: 12.5px; }

/* ---- events & webinars ---- */
.event-list { display: grid; gap: 10px; }
.event-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.event-banner {
  display: block; width: 100%; height: 150px; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.event-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
}
.event-when {
  flex: none; width: 54px; text-align: center;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 0;
}
.event-month {
  display: block; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--primary);
}
.event-day { display: block; font-size: 20px; font-weight: 800; }
.event-main { flex: 1; min-width: 0; }
.event-name {
  font-weight: 800; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.event-time { font-size: 12px; color: var(--muted); font-weight: 600; }
.event-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
@media (max-width: 600px) {
  .event-row { flex-wrap: wrap; }
  .event-actions { width: 100%; }
}

/* ---- insights: profile growth log ---- */
.li-log-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 4px;
}
.li-log-grid input { margin-bottom: 0; }
@media (max-width: 600px) {
  .li-log-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- insights: week-over-week ---- */
.wow-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 600px) { .wow-grid { grid-template-columns: 1fr 1fr; } }
.wow-item {
  border: 1px solid var(--line); border-radius: 10px; padding: 13px;
}
.wow-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
}
.wow-num { font-size: 26px; font-weight: 800; margin: 3px 0; }
.wow-delta { font-size: 12px; font-weight: 700; color: var(--muted); }
.wow-delta.up { color: #16a34a; }
.wow-delta.down { color: #dc2626; }

/* ---- admin mini bar chart ---- */
.mini-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 92px;
  padding-top: 6px;
}
.mini-bars span {
  flex: 1; min-height: 2px; display: block;
  border-radius: 3px 3px 0 0;
}

/* ---- home / daily command center ---- */
.home-hello { margin-bottom: 14px; }
.home-hello h1 { margin-bottom: 2px; }
.home-hello .desc { margin: 0; }
.home-todo { list-style: none; display: grid; gap: 8px; }
.home-todo li {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  background: #fff;
}
.home-todo li:hover {
  background: var(--bg-alt); border-color: var(--primary);
}
.home-todo-text { flex: 1; font-size: 13.5px; font-weight: 600; }
.home-todo-arrow { color: var(--muted); font-weight: 800; }
.home-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.home-action {
  border: 1px solid var(--line); border-radius: 10px; padding: 15px 12px;
  background: #fff; cursor: pointer; font-weight: 700; font-size: 13.5px;
  color: var(--ink); text-align: center;
  transition: transform .14s ease, box-shadow .14s ease,
    border-color .14s ease;
}
.home-action:hover {
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .4);
}
@media (max-width: 600px) {
  .home-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .reaction-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- profile optimizer ---- */
.po-score {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
}
.po-score-num { font-size: 38px; font-weight: 800; line-height: 1; }
.po-score-num span { font-size: 16px; color: var(--muted); font-weight: 700; }
.po-score-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.po-good .po-score-num { color: #16a34a; }
.po-mid .po-score-num { color: #d97706; }
.po-low .po-score-num { color: #dc2626; }
.po-checks { list-style: none; display: grid; gap: 8px; }
.po-checks li {
  display: flex; gap: 8px; font-size: 13px; align-items: flex-start;
}
.po-mark { font-weight: 800; flex: none; }
.po-checks li.ok .po-mark { color: #16a34a; }
.po-checks li.no .po-mark { color: #dc2626; }
.po-checks li.no { color: var(--muted); }

/* ---- safety & warm-up ---- */
.head-actions { display: flex; gap: 8px; }
.sf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0;
}
.sf-grid select, .sf-grid input { width: 100%; }
.sf-status {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; font-size: 13px;
}
.sf-eff {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px;
  color: var(--muted); font-size: 12.5px;
}
.sf-eff b { color: var(--ink); }
@media (max-width: 600px) { .sf-grid { grid-template-columns: 1fr; } }

/* ---- integrations / webhooks ---- */
.wh-url {
  font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo,
  monospace; margin-top: 3px; word-break: break-all;
}
.wh-events {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}
.wh-ev {
  display: flex; gap: 7px; align-items: center; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.wh-ev input { width: auto; cursor: pointer; }
@media (max-width: 540px) { .wh-events { grid-template-columns: 1fr; } }

/* ---- A/B test variants ---- */
.variant-row { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.variant-tag {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.variant-row .m-variant { flex: 1; }
#mAddVariant { margin-bottom: 4px; }
.ab-variant {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px;
}
.ab-variant.win { border-color: var(--ok); background: #f0fdf4; }
.ab-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ab-win {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #15803d; background: #dcfce7;
  border-radius: 999px; padding: 2px 9px;
}
.ab-stats {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink);
}
.ab-note {
  font-size: 13px; color: var(--muted); white-space: pre-wrap;
  word-break: break-word; margin-bottom: 8px;
}

/* ---- onboarding checklist ---- */
.onboard { border-color: #c7d2fe; background: #fbfcff; }
.onboard-top {
  display: flex; align-items: center; justify-content: space-between;
}
.onboard-dismiss {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12.5px; font-weight: 700;
}
.onboard-dismiss:hover { color: var(--ink); }
.onboard-bar {
  height: 7px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
  margin-top: 10px;
}
.onboard-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.onboard-steps { list-style: none; display: grid; gap: 8px; }
.onboard-steps li {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; background: #fff;
}
.onboard-steps li.done { opacity: .6; }
.onboard-check {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  background: var(--bg-alt); color: var(--muted);
  border: 1px solid var(--line);
}
.onboard-steps li.done .onboard-check {
  background: var(--ok); color: #fff; border-color: var(--ok);
}
.onboard-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.onboard-steps li.done .onboard-label {
  text-decoration: line-through; color: var(--muted);
}

/* ---- managed accounts (agency) ---- */
.toolbar-select { padding: 9px 34px 9px 12px; }
.acct-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 15px;
}
.acct-card.off { opacity: .6; }
.acct-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.acct-avatar {
  width: 40px; height: 40px; border-radius: 10px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.acct-name {
  font-weight: 800; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-sub {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--bg-alt); border-radius: 10px; padding: 10px;
  margin-bottom: 12px;
}
.acct-stats div { text-align: center; }
.acct-stats b { display: block; font-size: 18px; font-weight: 800; }
.acct-stats span { font-size: 11px; color: var(--muted); font-weight: 700; }
.acct-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.color-row { display: flex; gap: 8px; margin-bottom: 6px; }
.color-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0;
}
.color-dot.on { box-shadow: 0 0 0 2px var(--ink); }

/* ---- sequence step builder ---- */
.seq-step {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  margin-bottom: 8px; background: var(--bg-alt);
}
.seq-step-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.seq-step-action { font-weight: 800; font-size: 13px; }
.seq-step-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.seq-step-del:hover { color: #dc2626; }
.seq-step-fields { display: flex; flex-direction: column; gap: 8px; }
.seq-mini {
  font-size: 12px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.seq-mini .seq-delay { width: 64px; }
.seq-text {
  width: 100%; min-height: 60px; resize: vertical; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.sq-add { display: flex; gap: 8px; margin: 4px 0 4px; }
.sq-add select { flex: 1; }

/* ---- Chrome extension install banner ---- */
.ext-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 18px 20px 0; text-decoration: none;
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  color: #fff; border-radius: 12px; padding: 13px 18px;
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .6);
}
.ext-banner:hover { filter: brightness(1.07); }
.ext-banner-msg {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 14px;
}
.ext-banner-msg svg { width: 22px; height: 22px; flex: none; }
.ext-banner-cta {
  background: #fff; color: var(--primary-dark); font-weight: 800;
  font-size: 13.5px; border-radius: 8px; padding: 9px 16px; flex: none;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .ext-banner {
    margin: 12px 13px 0; flex-direction: column; align-items: stretch;
    text-align: center;
  }
  .ext-banner-msg { justify-content: center; }
}

/* ---- mobile / responsive ---- */
@media (max-width: 760px) {
  .dash { flex-direction: column; }
  .sidebar {
    width: 100%; border-right: none; border-bottom: 1px solid var(--line);
  }
  .sidebar-logo { display: none; }
  .side-nav {
    display: flex; flex-direction: row; overflow-x: auto;
    padding: 8px 10px; gap: 4px; scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-item { width: auto; white-space: nowrap; padding: 8px 12px; }
  .side-label, #recentList { display: none; }
  .composer-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 60px; }
  .content { padding: 16px 13px; }
  .content h1 { font-size: 1.3rem; }
  .topbar { padding: 0 12px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 0 11px; font-size: 13.5px; white-space: nowrap; }
  .userbox .umail { display: none; }
  .tablecard { overflow-x: auto; }
  thead th, tbody td { white-space: nowrap; }
  .sc-label { min-width: 100%; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .stat-row { grid-template-columns: 1fr; }
  .userbox .uname { display: none; }
}

/* ===========================================================================
   Back office — pipeline, inbox, notifications, automations, templates, AI
   =========================================================================== */

.tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.view-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.view-head h1 { margin-bottom: 0; }
.head-badge {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800; border-radius: 999px;
  padding: 1px 9px; vertical-align: middle;
}
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.badge {
  display: inline-block; background: #eef2ff; color: var(--primary-dark);
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 3px 9px; text-transform: capitalize;
}

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 10px; z-index: 200;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .5);
  opacity: 0; transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { background: #b91c1c; }

/* ---- notification bell ---- */
.bell-wrap { position: relative; }
.bell-btn {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.bell-btn:hover { background: var(--bg-alt); }
.bell-btn svg { width: 18px; height: 18px; }
.bell-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 5px; border: 2px solid #fff;
}
.bell-menu {
  position: absolute; top: 48px; right: 0; width: 340px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px -18px rgba(15, 23, 42, .4);
  display: none; z-index: 120; overflow: hidden;
}
.bell-wrap.open .bell-menu { display: block; }
.bell-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-weight: 800; font-size: 14px;
}
.bell-mark {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 12px; font-weight: 700;
}
.bell-list { max-height: 380px; overflow-y: auto; }
.bell-empty { padding: 30px 16px; text-align: center; color: var(--muted);
  font-size: 13px; }
.notif-row {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg-alt); }
.notif-row.unread { background: #f5f7ff; }
.notif-ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
}
.notif-info { background: #94a3b8; }
.notif-alert { background: #f59e0b; }
.notif-reply { background: #0ea5e9; }
.notif-post { background: var(--primary); }
.notif-accepted { background: #16a34a; }
.notif-title { font-size: 13px; font-weight: 700; }
.notif-body { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---- pipeline kanban ---- */
.kanban {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px;
  align-items: flex-start;
}
.kan-col {
  flex: 0 0 248px; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.kan-head {
  display: flex; align-items: center; gap: 7px; font-weight: 700;
  font-size: 13px; margin-bottom: 10px; padding: 2px;
}
.kan-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kan-label { flex: 1; }
.kan-count {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; padding: 1px 8px; font-weight: 800;
}
.kan-val { font-size: 11px; color: var(--muted); font-weight: 700; }
.kan-body { min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.kan-body.over { outline: 2px dashed var(--primary); outline-offset: 2px;
  border-radius: 8px; }
.kan-empty {
  font-size: 12px; color: #b0b9c6; text-align: center; padding: 16px 6px;
  border: 1px dashed var(--line); border-radius: 8px;
}
.pipe-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; cursor: grab; box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.pipe-card:hover { border-color: var(--primary); }
.pipe-card.dragging { opacity: .45; }
.pipe-name { font-weight: 700; font-size: 13.5px; }
.pipe-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pipe-val {
  font-size: 12.5px; font-weight: 800; color: #15803d; margin-top: 5px;
}
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.crm-tag {
  font-size: 10.5px; font-weight: 700; background: #eef2ff;
  color: var(--primary-dark); border-radius: 5px; padding: 2px 6px;
}
.pipe-due {
  font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 7px;
}
.pipe-due.over { color: #b91c1c; }

/* ---- inbox ---- */
.inbox {
  display: grid; grid-template-columns: 320px 1fr;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff;
  height: calc(100vh - 210px); min-height: 460px;
}
.inbox-list {
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  min-width: 0;
}
.inbox-folders {
  display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line);
}
.inbox-folder {
  flex: 1; padding: 6px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--muted);
}
.inbox-folder.on { background: #eef2ff; color: var(--primary-dark);
  border-color: var(--primary); }
.inbox-rows { flex: 1; overflow-y: auto; }
.inbox-empty-list, .msg-empty {
  padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px;
}
.thread-row {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.thread-row:hover { background: var(--bg-alt); }
.thread-row.on { background: #eef2ff; }
.thread-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.thread-main { min-width: 0; flex: 1; }
.thread-top { display: flex; justify-content: space-between; gap: 8px; }
.thread-name { font-weight: 700; font-size: 13.5px; }
.thread-row.unread .thread-name::after {
  content: ""; display: inline-block; width: 7px; height: 7px;
  background: var(--primary); border-radius: 50%; margin-left: 6px;
}
.thread-time { font-size: 11px; color: var(--muted); flex: none; }
.thread-preview {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-thread { display: flex; flex-direction: column; min-width: 0; }
.inbox-placeholder {
  margin: auto; text-align: center; max-width: 340px; padding: 30px;
  color: var(--muted);
}
.inbox-placeholder h3 { color: var(--ink); margin-bottom: 8px; }
.inbox-placeholder p { font-size: 13px; }
.thread-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.thread-head-name { font-weight: 800; font-size: 14.5px; }
.thread-head-sub { font-size: 12.5px; color: var(--muted); }
.thread-head-actions { display: flex; gap: 8px; align-items: center; }
.thread-folder-sel {
  padding: 7px 30px 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 12.5px;
}
.msg-scroll {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; background: var(--bg-alt);
}
.msg { max-width: 75%; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; }
.msg-body {
  padding: 9px 13px; border-radius: 12px; font-size: 13.5px;
  white-space: pre-wrap; word-break: break-word;
}
.msg.in .msg-body {
  background: #fff; border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}
.msg.out .msg-body {
  background: var(--primary); color: #fff; border-bottom-right-radius: 3px;
}
.msg-time { font-size: 10.5px; color: var(--muted); margin-top: 3px;
  padding: 0 4px; }
.msg.out .msg-time { text-align: right; }
.inbox-compose { border-top: 1px solid var(--line); padding: 12px 14px; }
.inbox-compose textarea {
  width: 100%; min-height: 64px; resize: vertical; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
}
.inbox-compose-bar {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.inbox-compose-hint { font-size: 11px; color: var(--muted); margin-top: 7px; }
.ai-status { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---- automations ---- */
.auto-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 720px) { .auto-grid { grid-template-columns: 1fr; } }
.auto-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px;
}
.auto-card.off { opacity: .6; }
.auto-card-top {
  display: flex; justify-content: space-between; gap: 12px;
}
.auto-name { font-weight: 800; font-size: 14.5px; }
.auto-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
}
.auto-chip {
  font-size: 11.5px; font-weight: 700; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.auto-chip.auto-wait { background: #fef3c7; border-color: #fde68a;
  color: #b45309; }
.auto-chip.auto-do { background: #eef2ff; border-color: #c7d2fe;
  color: var(--primary-dark); }
.auto-arrow { color: var(--muted); font-weight: 800; }
.auto-text {
  font-size: 12.5px; color: var(--muted); margin-top: 10px;
  background: var(--bg-alt); border-radius: 8px; padding: 8px 10px;
}
.auto-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px;
  flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  cursor: pointer; transition: .2s;
}
.switch-track::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px;
  top: 3px; background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* ---- templates ---- */
.tpl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .tpl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 15px; display: flex; flex-direction: column;
}
.tpl-card-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.tpl-name { font-weight: 800; font-size: 14px; }
.tpl-body {
  font-size: 12.5px; color: var(--muted); white-space: pre-wrap;
  word-break: break-word; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-foot {
  display: flex; align-items: center; gap: 4px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line);
}

/* ---- AI writer panel ---- */
.ai-panel { border-color: #c7d2fe; }
.ai-panel textarea {
  width: 100%; min-height: 70px; resize: vertical; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
}
.ai-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
.ai-result {
  margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px;
}
.ai-text {
  white-space: pre-wrap; word-break: break-word; font: inherit;
  font-size: 13.5px; background: var(--bg-alt); border-radius: 9px;
  padding: 13px; margin: 0;
}
.ai-result-actions { display: flex; gap: 8px; margin-top: 10px; }
.ai-variant {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 7px;
  font-size: 13px;
}
.ai-variant span { flex: 1; }

@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox-list { border-right: none; border-bottom: 1px solid var(--line);
    max-height: 300px; }
  .auto-grid { grid-template-columns: 1fr; }
}

/* ---- command palette (Ctrl/Cmd + K) ------------------------------------- */
.cmd-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line);
  background: #fff; border-radius: 9px; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 600;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.cmd-trigger:hover {
  border-color: var(--primary); color: var(--ink);
  box-shadow: 0 2px 8px rgba(79, 70, 229, .12);
}
.cmd-trigger svg { width: 15px; height: 15px; }
.cmd-trigger-kbd {
  font: 600 11px ui-monospace, monospace; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px;
}
@media (max-width: 760px) {
  .cmd-trigger-txt, .cmd-trigger-kbd { display: none; }
}
.cmd-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; animation: cmdFade .12s ease;
}
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-box {
  width: min(560px, 92vw); background: #fff;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: cmdPop .14s ease;
}
@keyframes cmdPop {
  from { transform: translateY(-8px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.cmd-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  padding: 17px 20px; font-size: 15px; color: var(--ink);
  outline: none;
}
.cmd-input::placeholder { color: var(--muted); }
.cmd-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 9px; cursor: pointer;
}
.cmd-item.on { background: var(--primary); }
.cmd-item.on .cmd-label { color: #fff; }
.cmd-item.on .cmd-sub { color: var(--lavender, #c7d2fe); }
.cmd-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cmd-sub {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.cmd-empty {
  padding: 24px; text-align: center; color: var(--muted);
  font-size: 13px;
}

/* ---- buttons: extra sizes + danger -------------------------------------- */
.btn--xs {
  padding: 5px 10px; font-size: 12px; border-radius: 8px; gap: 5px;
}
.btn--danger {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.btn--danger:hover { background: #fee2e2; border-color: #fca5a5; }

/* ---- Watchtower (competitive intelligence) ------------------------------ */
.wt-empty .wt-steps {
  margin: 0 0 16px; padding-left: 20px; color: var(--muted);
  font-size: 14px; line-height: 1.9;
}
.wt-empty .wt-steps strong { color: var(--ink); }

.wt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.wt-card {
  border: 1px solid var(--line); border-radius: 13px; padding: 15px;
  background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.wt-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .5);
  transform: translateY(-2px);
}
.wt-card-top { display: flex; gap: 12px; align-items: center; }
.wt-av {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  flex: none; border: 1px solid var(--line);
}
.wt-av--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 800;
  font-size: 15px;
}
.wt-av--lg { width: 76px; height: 76px; font-size: 24px; }
.wt-card-id { min-width: 0; flex: 1; }
.wt-card-name {
  font-weight: 700; font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.wt-dot {
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wt-card-head {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px;
  font-size: 12.5px; color: var(--muted);
}
.wt-tag {
  background: #eef2ff; color: var(--primary); font-weight: 700;
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
}
.wt-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 13px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.wt-when { font-size: 12px; color: var(--muted); }
.wt-card-actions { display: flex; gap: 6px; flex: none; }

.wt-feed { display: flex; flex-direction: column; gap: 2px; }
.wt-change {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 10px; border-radius: 9px; border-left: 3px solid transparent;
}
.wt-change[data-watch-open] { cursor: pointer; }
.wt-change:hover { background: var(--bg-alt); }
.wt-change.is-new {
  background: #f5f3ff; border-left-color: var(--primary);
}
.wt-chip {
  flex: none; color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  margin-top: 1px;
}
.wt-change-body { flex: 1; min-width: 0; }
.wt-change-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.wt-change-text {
  font-size: 13px; color: var(--muted); margin-top: 1px;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.wt-change-when {
  flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap;
}

.wt-profile {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
.wt-profile-id { flex: 1; min-width: 220px; }
.wt-profile-act { display: flex; flex-direction: column; gap: 8px; }
.wt-toppost {
  border-left: 3px solid var(--primary);
}
.wt-toppost-tag {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primary);
}
.wt-fmt {
  background: var(--bg-alt); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
}
@media (max-width: 600px) {
  .wt-grid { grid-template-columns: 1fr; }
  .wt-profile-act { flex-direction: row; width: 100%; }
}

/* ---- banner presets + media library ------------------------------------ */
.banner-presets {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px;
}
.preset-btn {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; transition: .15s;
}
.preset-btn:hover { border-color: var(--primary); }
.preset-btn.on {
  border-color: var(--primary); background: #eef2ff;
  box-shadow: 0 2px 8px -3px rgba(79, 70, 229, .5);
}
.preset-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.preset-dim { font-size: 11px; color: var(--muted); }
.preset-btn.on .preset-name { color: var(--primary); }

.banner-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.banner-cta-txt { flex: 1; min-width: 240px; }

.media-grid {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.media-item {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.media-thumb {
  display: block; aspect-ratio: 16 / 9; background: var(--bg-alt);
  overflow: hidden;
}
.media-thumb img {
  width: 100%; height: 100%; object-fit: contain;
}
.media-meta {
  padding: 9px 11px 4px; display: flex; flex-direction: column; gap: 1px;
}
.media-name {
  font-weight: 700; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-dim { font-size: 11.5px; color: var(--muted); }
.media-actions {
  display: flex; gap: 6px; padding: 8px 11px 11px; margin-top: auto;
}
.media-actions .btn { flex: 1; justify-content: center; }

/* ---- plan gating — locked (free) accounts ------------------------------- */
.side-lock {
  margin-left: auto; display: inline-flex; flex: none; color: #94a3b8;
}
.side-lock svg { width: 13px; height: 13px; }
.side-item.is-locked { color: var(--muted); }
.side-item.is-locked .ic { opacity: .55; }
.side-item.is-locked:hover .side-lock { color: var(--primary); }

.lock-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, #4f46e5, #3730a3);
  color: #fff; border-radius: 13px; padding: 14px 18px; margin-bottom: 16px;
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .75);
}
.lock-banner-txt {
  font-size: 13.5px; line-height: 1.5; flex: 1; min-width: 220px;
  color: #e0e7ff;
}
.lock-banner-txt strong { color: #fff; }
.lock-banner .btn--primary { background: #fff; color: var(--primary); }
.lock-banner .btn--primary:hover { background: #eef2ff; }

/* Little lock glyph on every gated primary CTA. */
#dash.view-locked #view .btn--primary:not(.js-upgrade)::after,
#view .tier-locked .btn--primary:not(.js-upgrade)::after {
  content: "🔒"; font-size: .82em; line-height: 1; margin-left: 1px;
}
/* Sub-feature panels above the account's plan. */
.tier-locked > h2::after {
  content: "🔒"; font-size: .8em; margin-left: 6px;
}

/* Upgrade modal plan cards. */
.upgrade-plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
  margin: 8px 0 4px;
}
.upgrade-plan {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 13px;
  position: relative; display: flex; flex-direction: column;
}
.upgrade-plan.is-pop {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -12px rgba(79, 70, 229, .55);
}
.upgrade-pop {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
}
.upgrade-plan h3 { margin: 2px 0 0; font-size: 15px; }
.upgrade-price {
  font-size: 24px; font-weight: 800; color: var(--ink); margin: 2px 0 8px;
}
.upgrade-price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.upgrade-plan ul { list-style: none; margin: 0 0 12px; padding: 0; flex: 1; }
.upgrade-plan li {
  font-size: 12px; color: var(--muted); padding: 3px 0 3px 15px;
  position: relative; line-height: 1.4;
}
.upgrade-plan li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px;
  height: 6px; border-radius: 50%; background: var(--primary);
}
.upgrade-plan .btn { width: 100%; justify-content: center; }
@media (max-width: 620px) {
  .upgrade-plans { grid-template-columns: 1fr; }
}

/* ---- payment modal: price, wallets, promo ------------------------------ */
.pay-price { display: flex; align-items: center; gap: 9px; margin: 2px 0 4px; }
.pay-now { font-size: 26px; font-weight: 800; color: var(--ink); }
.pay-was {
  font-size: 16px; color: var(--muted); text-decoration: line-through;
}
.pay-badge {
  background: #dcfce7; color: #15803d; font-size: 11.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
}
.pay-wallets { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.pay-wallets:empty { margin: 0; }
.wallet-slot { min-height: 44px; }
.wallet-btn {
  height: 44px; border: 0; border-radius: 9px; cursor: pointer;
  font-weight: 600; font-size: 15px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wallet-apple { background: #000; color: #fff; }
.wallet-apple::before { content: "\F8FF"; font-size: 17px; }
.pay-or {
  text-align: center; border-top: 1px solid var(--line); margin: 6px 0 12px;
}
.pay-or span {
  position: relative; top: -10px; background: #fff; padding: 0 10px;
  font-size: 12px; color: var(--muted);
}
.pay-card { margin: 4px 0 12px; min-height: 90px; }
.promo-row { display: flex; gap: 8px; margin-top: 4px; }
.promo-row input {
  flex: 1; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px;
}
.promo-row input:disabled { background: var(--bg-alt); color: var(--muted); }
.promo-msg { font-size: 12.5px; margin-top: 6px; min-height: 16px; }
.promo-msg.is-ok { color: #15803d; }
.promo-msg.is-err { color: #b91c1c; }
.pay-err { color: #b91c1c; font-size: 13px; margin-top: 10px; }

/* ---- /demo showcase banner --------------------------------------------- */
.demo-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, #0891b2, #4f46e5);
  color: #fff; border-radius: 13px; padding: 13px 18px; margin-bottom: 16px;
  box-shadow: 0 10px 26px -14px rgba(8, 145, 178, .7);
}
.demo-banner-txt {
  font-size: 13.5px; line-height: 1.5; flex: 1; min-width: 220px;
  color: #e0f2fe;
}
.demo-banner-txt strong { color: #fff; }
.demo-banner .btn--primary { background: #fff; color: var(--primary); }
.demo-banner .btn--primary:hover { background: #eef2ff; }

/* ---- branded dialogs (alert / confirm) --------------------------------- */
.ui-dialog-backdrop {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: cmdFade .12s ease;
}
.ui-dialog {
  background: #fff; border-radius: 16px; width: min(400px, 92vw);
  padding: 26px 26px 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: cmdPop .14s ease; border-top: 4px solid var(--primary);
}
.ui-dialog--confirm { border-top-color: #d97706; }
.ui-dialog-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.ui-dialog-icon svg { width: 24px; height: 24px; }
.ui-dialog--info .ui-dialog-icon { background: #eef2ff; color: var(--primary); }
.ui-dialog--confirm .ui-dialog-icon { background: #fef3c7; color: #d97706; }
.ui-dialog h3 {
  margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--ink);
}
.ui-dialog p {
  margin: 0 0 18px; font-size: 14px; color: var(--muted); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.ui-dialog-actions {
  display: flex; gap: 10px; justify-content: center;
}
.ui-dialog-actions .btn { min-width: 104px; justify-content: center; }

/* ---- show / hide password toggle --------------------------------------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border: 0; background: none; cursor: pointer;
  color: var(--muted); border-radius: 7px; padding: 0;
}
.pw-toggle:hover { color: var(--ink); background: var(--bg-alt); }
.pw-toggle svg { width: 18px; height: 18px; }