:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --text: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --success: #047857;
  --warning: #b45309;
  --danger: #b42318;
  --shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
}
* { box-sizing: border-box; }
body { font-family: Arial, "Microsoft YaHei", sans-serif; margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 252px; background: linear-gradient(180deg, #111827, #1e293b); color: white; padding: 22px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand-block { display: flex; gap: 12px; align-items: center; padding: 4px 4px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-logo { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #60a5fa, #22c55e); font-weight: 800; }
.brand-title { font-size: 16px; font-weight: 800; }
.brand-subtitle { font-size: 12px; color: #cbd5e1; margin-top: 2px; }
.menu { display: grid; gap: 8px; margin-top: 22px; }
.menu a { color: #e5e7eb; padding: 11px 12px; border-radius: 12px; transition: .16s; }
.menu a:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; }
.user-pill { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; }
.logout { color: #fecaca; padding: 6px 2px; }
.main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 24px; }
.login-main { max-width: 560px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.page-kicker { color: var(--muted); font-size: 13px; }
.page-title { font-weight: 800; font-size: 25px; letter-spacing: -0.02em; }
h2 { margin: 4px 0 18px; font-size: 24px; }
h3 { margin: 0 0 14px; }
.card { background: var(--card); border: 1px solid rgba(228,231,236,.9); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { position: relative; overflow: hidden; }
.stat-card:after { content: ""; position: absolute; width: 110px; height: 110px; right: -30px; top: -30px; border-radius: 999px; background: rgba(37, 99, 235, .09); }
.stat { font-size: 34px; line-height: 1.1; font-weight: 900; margin-top: 8px; }
label { display: block; font-weight: 700; margin: 10px 0 6px; }
input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid #cfd6e4; border-radius: 10px; font-size: 14px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus, .rich-editor:focus { outline: 2px solid rgba(37,99,235,.18); border-color: #93b4ff; }
textarea { min-height: 130px; resize: vertical; }
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 13px; background: var(--primary); color: white; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.2; }
button:hover, .btn:hover { background: var(--primary-dark); color: #fff; }
.btn.secondary, button.secondary { background: #64748b; }
.btn.ghost, button.ghost { background: #eef2ff; color: #1e40af; }
.btn.danger, button.danger { background: var(--danger); }
.btn.warning, button.warning { background: var(--warning); }
.btn.success, button.success { background: var(--success); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; overflow: hidden; border-radius: 14px; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 11px; text-align: left; vertical-align: top; }
th { background: #f8fafc; color: #475467; font-size: 13px; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.badge { display:inline-block; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e9eef7; color: #344054; }
.badge.sent, .badge.active, .badge.success { background: #dcfce7; color: #166534; }
.badge.failed, .badge.danger { background: #fee2e2; color: #991b1b; }
.badge.pending, .badge.paused, .badge.skipped { background: #fef3c7; color: #92400e; }
.badge.sending { background: #dbeafe; color: #1d4ed8; }
.flash { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; background: #e9eef7; border: 1px solid #d8e0ee; }
.flash.success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.flash.danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.flash.warning { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.help { color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-box { margin: 70px auto; }
.rich-toolbar { display: flex; gap: 6px; flex-wrap: wrap; background: #f8fafc; border: 1px solid #d0d5dd; border-bottom: 0; padding: 8px; border-radius: 12px 12px 0 0; }
.rich-toolbar button { padding: 6px 9px; background: #fff; color: #344054; border: 1px solid #d0d5dd; font-weight: 700; }
.rich-editor { min-height: 260px; border: 1px solid #d0d5dd; border-radius: 0 0 12px 12px; padding: 14px; background: #fff; overflow: auto; line-height: 1.6; }
.rich-editor img { max-width: 100%; height: auto; }
.recipient-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recipient-table input { min-width: 160px; padding: 7px 8px; border-radius: 8px; }
.recipient-table .email-input { min-width: 230px; }
.counter { font-weight: 800; color: var(--primary); }
.preview-frame { width: 100%; min-height: 520px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.code-box { white-space: pre-wrap; background: #0f172a; color: #e2e8f0; padding: 14px; border-radius: 12px; overflow: auto; }
@media (max-width: 920px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: auto; height: auto; }
  .menu { grid-template-columns: repeat(2, 1fr); }
  .grid, .row, .row-3, .recipient-tools { grid-template-columns: 1fr; }
  .main { padding: 16px; }
}
.link-card { color: var(--text); display: block; }
.link-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(16, 24, 40, 0.12); color: var(--text); }
.info-card { background: linear-gradient(180deg, #ffffff, #f8fafc); }
code { background: #eef2ff; color: #1e3a8a; padding: 2px 6px; border-radius: 6px; font-family: Consolas, Monaco, monospace; }
.ai-tip { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; line-height: 1.6; }
.check-line { display:flex; align-items:center; gap:8px; font-weight:700; }
.check-line input { width:auto; }
.weekday-list { display:flex; gap:14px; flex-wrap:wrap; }
.weekday-list label { display:inline-flex; align-items:center; gap:4px; margin: 0; font-weight: normal; }
.weekday-list input { width:auto; }
.row-failed td { background:#fff1f2; }
.row-ok td { background:#f0fdf4; }
small { color: var(--muted); }
.badge.test_sent { background:#e0f2fe; color:#075985; }
.badge.test_failed { background:#fee2e2; color:#991b1b; }

/* V3.1: compact template helper and no-send email probe */
.template-editor-card { padding-top: 18px; }
.compact-title-row { margin-bottom: 8px; }
.quick-var-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin: 8px 0 14px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 14px; background:#f8fafc; }
.quick-var-title { font-weight:800; color:#475467; font-size:13px; }
.var-chip { padding: 6px 9px; border-radius:999px; background:#eef2ff; color:#1e40af; font-size:12px; border:1px solid #dbeafe; }
.var-chip:hover { background:#dbeafe; color:#1e3a8a; }
.ai-chip { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.ai-chip:hover { background:#ffedd5; color:#9a3412; }
.inline-details { display:inline-block; position:relative; }
.inline-details summary { cursor:pointer; color:#1e40af; font-weight:800; font-size:13px; padding: 6px 9px; border-radius:999px; background:#fff; border:1px solid #d0d5dd; list-style:none; }
.inline-details summary::-webkit-details-marker { display:none; }
.details-panel { margin-top:10px; padding:12px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; min-width:min(980px, calc(100vw - 340px)); box-shadow:0 14px 34px rgba(16,24,40,.10); }
.compact-table th, .compact-table td { padding: 8px 9px; font-size:13px; }
.compact-table-wrap { max-height: 330px; overflow:auto; }
.mini { padding: 5px 8px; font-size:12px; }
.compact-ai-tip { margin-top: 10px; padding: 9px 10px; font-size:13px; }
.slim-help { margin-top: 6px; margin-bottom: 6px; }
.compact-info { padding: 14px 16px; }
.compact-info h3 { font-size: 15px; margin-bottom: 6px; }
.compact-info p { margin: 4px 0; }
.row-unknown td { background:#fffbeb; }
@media (max-width: 920px) {
  .details-panel { min-width: auto; width: 100%; }
}

/* V3.3: template image paste/upload */
.rich-editor.drag-over { outline: 2px dashed #2563eb; outline-offset: -8px; background: #eff6ff; }
.uploading-marker { display:inline-block; padding:6px 10px; margin:4px 0; border-radius:999px; background:#fef3c7; color:#92400e; font-weight:700; font-size:12px; }
.rich-editor img[data-inline-image="1"] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 3px; background: #fff; }

/* V3.4: enhanced email-safe rich text editor */
.compact-quick-var-bar { margin-bottom: 12px; }
.wysiwyg-toolbar {
  gap: 7px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d0d5dd;
  border-radius: 14px 14px 0 0;
  background: #f8fafc;
}
.wysiwyg-toolbar select,
.wysiwyg-toolbar input[type="color"] {
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
}
.wysiwyg-toolbar select { padding: 0 8px; max-width: 170px; }
.wysiwyg-toolbar button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  font-weight: 700;
  cursor: pointer;
}
.wysiwyg-toolbar button:hover { border-color: var(--primary); color: var(--primary); background:#eff6ff; }
.color-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 7px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: #475467;
}
.color-tool input { width: 26px; padding: 0; border: 0; background: transparent; }
.editor-shell { position: relative; }
.email-editor {
  min-height: 520px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
  padding: 22px 28px;
}
.email-editor:focus { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .18); }
.email-editor table { max-width: 100%; }
.email-editor blockquote {
  border-left: 4px solid #d0d5dd;
  margin: 12px 0;
  padding: 8px 14px;
  background: #f8fafc;
  color: #475467;
}
.email-editor img[data-inline-image="1"] {
  cursor: pointer;
  border-radius: 8px;
}
.email-editor img.selected-editor-image {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.toolbar-sep { display:inline-block; width:1px; height:24px; background:#d0d5dd; margin:0 2px; }
.image-action { background:#eef2ff !important; color:#3730a3 !important; }
.image-action:hover { background:#e0e7ff !important; }
.danger-mini { color: #b42318 !important; border:1px solid #fecdca !important; background:#fff !important; }
.email-safe-tip { background: #f8fafc; border-color: #d0d5dd; color: #344054; }
@media (max-width: 920px) {
  .email-editor { min-height: 420px; padding: 16px; }
  .wysiwyg-toolbar select { max-width: 135px; }
}

/* V3.6: stable manual image resizing + upload status */
.upload-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #d0d5dd;
  background: #f8fafc;
  color: #344054;
}
.upload-status.loading { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.upload-status.success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.upload-status.error { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.image-resize-box {
  position: absolute;
  z-index: 25;
  border: 2px solid #2563eb;
  border-radius: 8px;
  pointer-events: none;
  box-sizing: border-box;
}
.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
  pointer-events: auto;
  box-sizing: border-box;
}
.handle-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.handle-n { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }
.handle-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.handle-e { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.handle-s { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }
.handle-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.handle-w { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
body.resizing-image,
body.resizing-image * {
  cursor: nwse-resize !important;
  user-select: none !important;
}
.email-editor img.selected-editor-image {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

/* V3.7: image drag positioning + email-safe wrap layout */
.image-layout-panel {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
}
.image-panel-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.image-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.image-panel-actions button {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.image-panel-actions button:hover {
  background: #dbeafe;
  color: #1d4ed8;
}
.image-panel-actions input {
  width: 150px;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 8px;
}
.email-editor img[data-inline-image="1"] {
  cursor: move;
  -webkit-user-drag: element;
}
.email-editor img.dragging-editor-image {
  opacity: .55;
}
.email-editor img[data-image-layout="wrap-left"],
.email-editor img[data-image-layout="wrap-right"] {
  border-radius: 8px;
}
@media (max-width: 920px) {
  .image-panel-actions input { width: 100%; }
}

/* V3.8: customer CRM module */
.dashboard-grid { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.mini-stat {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.small-stat { font-size: 26px; margin-top: 4px; }
.filter-form label { margin-top: 0; }
.timeline { display: grid; gap: 12px; }
.timeline-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.timeline-content { margin-top: 8px; white-space: pre-wrap; line-height: 1.6; }
.danger-zone { border-color: #fecdca; background: #fffbfa; }
@media (max-width: 1100px) {
  .dashboard-grid, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .dashboard-grid, .grid-4 { grid-template-columns: 1fr; }
}

/* V3.9: unified customer management + CRM-connected campaigns */
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.import-details summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.import-details summary::-webkit-details-marker { display: none; }
.import-details summary:before {
  content: "+";
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 800;
}
.import-details[open] summary:before { content: "−"; }
.import-body { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.small-select {
  width: auto;
  min-width: 132px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 10px;
}
.recipient-tools-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
#customerBulkForm .actions { flex-wrap: wrap; }
@media (max-width: 1200px) {
  .grid-5, .recipient-tools-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .grid-5, .recipient-tools-3 { grid-template-columns: 1fr; }
}

/* V4.0 polish: unified actions, active menu, compact management forms */
.sidebar { box-shadow: 18px 0 42px rgba(15,23,42,.10); }
.menu a.active { background: rgba(255,255,255,.16); color:#fff; box-shadow: inset 3px 0 0 #60a5fa; }
.card { transition: box-shadow .16s, transform .16s, border-color .16s; }
.card:hover { border-color:#d7deeb; }
button, .btn { min-height: 36px; box-shadow: 0 1px 2px rgba(16,24,40,.06); white-space: nowrap; }
button.sm, .btn.sm, .sm { padding: 6px 10px; min-height: 30px; border-radius: 9px; font-size: 12px; }
.primary-action { min-width: 120px; }
button.secondary:hover, .btn.secondary:hover { background:#475569; }
button.success:hover, .btn.success:hover { background:#065f46; }
button.warning:hover, .btn.warning:hover { background:#92400e; }
button.danger:hover, .btn.danger:hover { background:#991b1b; }
.table-actions { gap: 6px; align-items: center; }
.table-actions form { margin: 0; }
.form-actions { margin-top: 14px; padding-top: 14px; border-top:1px solid var(--line); }
.elevated-form { background: linear-gradient(180deg, #ffffff, #fbfdff); }
.inline-edit-details { position: relative; display: inline-block; }
.inline-edit-details summary { list-style: none; cursor: pointer; }
.inline-edit-details summary::-webkit-details-marker { display: none; }
.inline-edit-form { min-width: min(720px, 86vw); margin-top: 8px; padding: 14px; border: 1px solid #d0d5dd; border-radius: 14px; background: #ffffff; box-shadow: 0 16px 40px rgba(16,24,40,.13); position: absolute; right: 0; z-index: 30; }
.timeline .inline-edit-form { right: auto; left: 0; }
.followup-actions { margin-top: 10px; }
.danger-zone { border-color:#fecaca; background: linear-gradient(180deg,#fff,#fff7f7); }
table tr:hover td { background:#fbfdff; }
.rich-toolbar { position: sticky; top: 0; z-index: 5; }
.editor-shell { border-radius: 14px; background:#fff; }
@media (max-width: 920px) {
  .inline-edit-form { position: static; min-width: 0; width: 100%; }
  .table-actions { flex-direction: column; align-items: stretch; }
  .table-actions .btn, .table-actions button { width: 100%; }
}

/* V4.1: modal-first management pages */
.page-head {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.list-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.center-empty {
  text-align: center;
  padding: 26px !important;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(4px);
  z-index: 1000;
}
.modal-backdrop.show {
  display: flex;
}
.modal-window {
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(2, 6, 23, .30);
  animation: modalIn .16s ease-out;
}
.small-modal-window { width: min(860px, 96vw); }
.template-modal-window { width: min(1180px, 98vw); }
.modal-card {
  margin: 0;
  border: 0;
  box-shadow: none;
}
.modal-title-row {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-bottom: 12px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #fff 75%, rgba(255,255,255,.92));
  border-bottom: 1px solid var(--line);
}
.modal-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}
.modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.modal-form textarea { min-height: 96px; }
.modal-actions {
  justify-content: flex-end;
}
.modal-backdrop .rich-toolbar {
  top: 66px;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 760px) {
  .modal-backdrop { padding: 10px; align-items: stretch; }
  .modal-window { width: 100%; max-height: 96vh; border-radius: 16px; }
  .page-head { align-items: stretch; }
  .page-head .primary-action { width: 100%; }
}

/* V4.2 click-to-detail interaction */
.click-table .clickable-row {
  cursor: pointer;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.click-table .clickable-row:hover {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 #3b82f6;
}
.row-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.template-detail-grid {
  grid-template-columns: minmax(0, 1fr) 300px;
}
.detail-main-card { min-width: 0; }
.side-stack {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 18px;
}
.stat-side-card h3,
.danger-zone h3 { margin-top: 0; }
.mini-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: #64748b;
}
.mini-stat:last-child { border-bottom: 0; }
.mini-stat b {
  color: #0f172a;
  font-size: 20px;
}
.full-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}
.sticky-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%);
  border-top: 1px solid rgba(226,232,240,.8);
}
.detail-editor-card {
  margin: 0;
}
@media (max-width: 980px) {
  .detail-grid, .template-detail-grid { grid-template-columns: 1fr; }
  .side-stack { position: static; }
}


/* V4.3: clean clickable rows. No explicit “click for details” text; hover state implies it. */
.clickable-row { cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
.clickable-row:hover td { background: #f7fbff; }
.row-main-link { color: #1f5eff; font-weight: 700; text-decoration: none; }
.row-main-link:hover { text-decoration: underline; }
.row-hint { display: none !important; }

/* V4.4: list actions + mobile adaptation */
.mobile-topbar,
.sidebar-mask { display: none; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; padding: 10px 15px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; cursor: pointer; font-size: 14px; font-weight: 800; box-shadow: 0 8px 18px rgba(37,99,235,.22); }
.primary-action:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37,99,235,.26); }
button.sm, .btn.sm { padding: 6px 10px; border-radius: 9px; font-size: 12px; min-height: 30px; }
.row-actions, .table-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 180px; }
.row-actions form, .table-actions form { display: inline-flex; margin: 0; }
.tiny-select, .small-select { width: auto; min-width: 96px; padding: 6px 8px; border-radius: 9px; font-size: 12px; }
.quick-update-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.list-card { overflow: hidden; }
.center-empty { text-align: center; padding: 28px !important; }
.card-title-row.page-head { align-items: flex-start; }
.card-title-row.page-head .actions { justify-content: flex-end; }
.click-table .clickable-row:hover td { background: #f8fbff; }
.click-table .row-actions, .click-table .row-actions * { cursor: default; }
.row-main-link { cursor: pointer; }
@media (min-width: 921px) {
  .menu a.active { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 3px 0 0 #60a5fa; }
  .row-actions { opacity: .92; }
  .clickable-row:hover .row-actions { opacity: 1; }
}
@media (max-width: 920px) {
  body { background: #f6f8fc; }
  body.mobile-menu-open { overflow: hidden; }
  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 56px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
  }
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    background: #eef2ff;
    color: #1e40af;
    font-size: 20px;
    box-shadow: none;
  }
  .mobile-brand { font-weight: 900; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-logout { color: #b42318; font-size: 13px; font-weight: 800; padding: 8px 10px; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    z-index: 80;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(84vw, 300px);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform .22s ease;
    border-radius: 0 22px 22px 0;
    box-shadow: 14px 0 36px rgba(15,23,42,.28);
  }
  .sidebar.show { transform: translateX(0); }
  .sidebar-mask.show { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(15,23,42,.42); }
  .menu { display: grid; grid-template-columns: 1fr; }
  .main { max-width: none; padding: 14px; }
  .topbar { display: none; }
  .page-head, .card-title-row { flex-direction: column; align-items: stretch; }
  .page-head .actions, .card-title-row .actions { width: 100%; justify-content: stretch; }
  .page-head .actions > *, .card-title-row .actions > *, .page-head .primary-action, .page-head .btn { flex: 1; width: 100%; }
  .card { border-radius: 16px; padding: 15px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(16,24,40,.06); }
  h2 { font-size: 21px; margin-bottom: 8px; }
  h3 { font-size: 17px; }
  .grid, .grid-4, .grid-5, .row, .row-3, .recipient-tools, .detail-grid, .template-detail-grid { grid-template-columns: 1fr !important; }
  .stat { font-size: 26px; }
  .table-wrap.responsive-table-wrap { overflow-x: visible; }
  table.responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table thead, .responsive-table th { display: none; }
  .responsive-table tr { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(16,24,40,.045); }
  .responsive-table tr:first-child { display: none; }
  .responsive-table td { border-bottom: 1px solid #eef2f7; padding: 10px 12px 10px 112px; min-height: 40px; position: relative; }
  .responsive-table td:last-child { border-bottom: 0; }
  .responsive-table td::before { content: attr(data-label); position: absolute; left: 12px; top: 10px; width: 88px; color: #667085; font-size: 12px; font-weight: 800; }
  .responsive-table td[data-label="操作"] { padding-left: 12px; }
  .responsive-table td[data-label="操作"]::before { position: static; display:block; width:auto; margin-bottom:8px; }
  .row-actions, .actions, .table-actions { width: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
  .row-actions form, .row-actions .btn, .row-actions button { flex: 1 1 auto; }
  .row-actions button, .row-actions .btn { width: 100%; }
  .tiny-select, .small-select { flex: 1 1 110px; width: 100%; min-width: 0; }
  .quick-update-form { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
  .quick-update-form button { width: auto; }
  input, select, textarea, button, .btn { font-size: 15px; }
  .modal-window { width: 100%; }
  .template-modal-window { width: 100%; }
  .wysiwyg-toolbar { max-height: 180px; overflow-y: auto; }
  .email-editor { min-height: 360px; padding: 14px; }
  .image-layout-panel { position: sticky; bottom: 0; z-index: 30; }
  .side-stack { position: static; }
}
@media (max-width: 520px) {
  .main { padding: 10px; }
  .card { padding: 12px; }
  .responsive-table td { padding-left: 98px; }
  .responsive-table td::before { width: 76px; }
  .quick-update-form { grid-template-columns: 1fr; }
  .row-actions form, .row-actions .btn { flex-basis: 100%; }
  .weekday-list { gap: 8px; }
}

/* V4.5: create-campaign recipient source buttons + cleaner modal workflow */
.recipient-source-panel {
  margin: 18px 0 14px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.source-button-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.source-button {
  min-height: 128px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  text-align: left;
  border-radius: 18px;
  padding: 18px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(15,23,42,.055);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.source-button:hover {
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15,23,42,.10);
  border-color: #bfdbfe;
  background: #f8fbff;
}
.source-button .source-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eef2ff;
  font-size: 22px;
  margin-bottom: 10px;
}
.source-title { font-size: 16px; font-weight: 900; }
.source-desc { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 5px; font-weight: 500; }
.source-crm .source-icon { background:#e0f2fe; }
.source-file .source-icon { background:#ecfdf3; }
.source-manual .source-icon { background:#fff7ed; }
body.modal-open { overflow: hidden; }
@media (max-width: 920px) {
  .source-button-grid { grid-template-columns: 1fr; }
  .source-button { min-height: 104px; padding: 15px; }
}


/* V4.9 Dify AI preview / pre-generate controls */
.ai-inline-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;}
.ai-check-line{margin:0!important;}
.ai-action-buttons{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ai-preview-backdrop{z-index:3000;}
.ai-preview-window{max-width:860px;width:min(92vw,860px);}
.ai-preview-card{max-height:88vh;overflow:auto;}
.button-close{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#667085;padding:4px 10px;border-radius:10px;}
.button-close:hover{background:#f2f4f7;color:#111827;}
.ai-preview-subject{padding:10px 12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;margin:6px 0 14px;font-weight:700;color:#111827;}
.ai-preview-body{padding:16px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;min-height:160px;max-height:420px;overflow:auto;line-height:1.65;box-shadow: inset 0 1px 2px rgba(16,24,40,.04);}
.alert.danger{padding:12px 14px;border-radius:12px;background:#fff1f2;color:#be123c;border:1px solid #fecdd3;}
@media (max-width:700px){.ai-inline-control{align-items:flex-start}.ai-action-buttons{width:100%}.ai-action-buttons .btn,.ai-action-buttons button{flex:1}.ai-preview-window{width:94vw}.ai-preview-body{max-height:50vh}}

/* V5.4 campaign schedule cards */
.choice-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0 18px;}
.compact-choice-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.schedule-choice-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.choice-card{display:flex;gap:8px;align-items:flex-start;border:1px solid #d9e2ec;border-radius:14px;padding:12px;background:#fff;cursor:pointer;transition:.15s ease;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.choice-card:hover{border-color:#7aa7ff;box-shadow:0 8px 20px rgba(16,24,40,.08);transform:translateY(-1px);}
.choice-card input{margin-top:4px;}
.choice-card span{display:block;font-weight:700;color:#102a43;}
.choice-card small{display:block;color:#667085;line-height:1.45;margin-top:3px;}
.choice-card:has(input:checked){border-color:#2f6fed;background:#f5f9ff;box-shadow:0 0 0 3px rgba(47,111,237,.10);}
.schedule-extra-panel{border:1px dashed #cdd7e1;border-radius:14px;padding:12px;margin:6px 0 16px;background:#fbfdff;}
@media(max-width:700px){.choice-card-grid,.compact-choice-grid,.schedule-choice-grid{grid-template-columns:1fr}.schedule-extra-panel{padding:10px}}


.modal { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal.show { display:flex; }
.modal-card { background:#fff; border-radius:18px; padding:20px; max-width:720px; width:100%; box-shadow:0 20px 60px rgba(15,23,42,.25); max-height:92vh; overflow:auto; }
.modal-card.wide { max-width:960px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.modal-close { border:0; background:#f1f5f9; border-radius:999px; width:32px; height:32px; font-size:20px; cursor:pointer; }
.reply-draft-card { border:1px solid #e5e7eb; border-radius:16px; padding:16px; margin:14px 0; background:#fff; }
.reply-draft-card.status-pending { border-left:4px solid #f59e0b; }
.reply-draft-card.status-sent { border-left:4px solid #10b981; }
.reply-draft-card.status-failed { border-left:4px solid #ef4444; }
.draft-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.mail-pre { white-space:pre-wrap; background:#f8fafc; border:1px solid #e5e7eb; padding:12px; border-radius:12px; max-height:280px; overflow:auto; }
.reply-form textarea { width:100%; }
.alert-note { margin-top:12px; padding:10px 12px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; color:#1e3a8a; font-size:13px; }
@media (max-width: 768px){ .draft-head{flex-direction:column;} .modal{align-items:flex-start;} }

/* V5.9 自动回复待确认提醒 */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.reply-alert-pill{
  align-items:center;gap:8px;padding:9px 13px;border-radius:999px;
  background:#fff1f2;color:#be123c;border:1px solid #fecdd3;text-decoration:none;
  font-size:13px;font-weight:700;box-shadow:0 8px 20px rgba(190,18,60,.08);
  white-space:nowrap;
}
.reply-alert-pill:hover{background:#ffe4e6;color:#9f1239;}
.reply-alert-pill b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#e11d48;color:#fff;font-size:12px;}
.reply-alert-dot{width:8px;height:8px;border-radius:999px;background:#e11d48;box-shadow:0 0 0 4px rgba(225,29,72,.15);}
.mobile-reply-alert{align-items:center;gap:4px;text-decoration:none;background:#fff1f2;color:#be123c;border:1px solid #fecdd3;border-radius:999px;padding:5px 8px;font-size:12px;font-weight:700;}
.mobile-reply-alert span{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e11d48;color:#fff;}
.reply-live-toast{position:fixed;right:24px;top:78px;z-index:2000;display:none;text-decoration:none;background:#111827;color:white;border-radius:14px;padding:13px 16px;box-shadow:0 18px 45px rgba(15,23,42,.25);font-size:14px;font-weight:700;}
.reply-live-toast.show{display:block;animation:replyToastIn .18s ease-out;}
@keyframes replyToastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.reply-auto-note{display:flex;align-items:center;gap:10px;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:14px;padding:10px 12px;font-size:13px;margin-bottom:14px;}
.reply-auto-note b{color:#1e40af;}
@media (max-width: 768px){
  .topbar{align-items:flex-start;}
  .reply-alert-pill{display:none !important;}
  .reply-live-toast{left:14px;right:14px;top:64px;text-align:center;}
}

/* V6.1 final deployment/UX/performance polish */
html { scrollbar-gutter: stable; }
body.modal-open { overflow: auto; }
button, .btn, .card, .source-button, .choice-card, .link-card { transform: none !important; }
button:active, .btn:active { transform: none !important; }
.modal-backdrop.show, .modal.show { backdrop-filter: none; }
.source-button-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.source-button { min-height: 92px; padding: 14px; align-items: flex-start; text-align: left; }
.source-icon { font-size: 22px !important; }
.source-title { font-size: 15px !important; line-height: 1.25; }
.source-desc { font-size: 12px !important; line-height: 1.35; }
.recipient-table { table-layout: fixed; min-width: 980px; }
.recipient-table th, .recipient-table td { padding: 8px 7px; vertical-align: middle; }
.recipient-table input { min-width: 0 !important; width: 100%; padding: 7px 8px; font-size: 13px; }
.recipient-table th:nth-child(1), .recipient-table td:nth-child(1) { width: 23%; }
.recipient-table th:nth-child(2), .recipient-table td:nth-child(2) { width: 11%; }
.recipient-table th:nth-child(3), .recipient-table td:nth-child(3) { width: 10%; }
.recipient-table th:nth-child(4), .recipient-table td:nth-child(4) { width: 8%; }
.recipient-table th:nth-child(5), .recipient-table td:nth-child(5) { width: 13%; }
.recipient-table th:nth-child(6), .recipient-table td:nth-child(6) { width: 11%; }
.recipient-table th:nth-child(7), .recipient-table td:nth-child(7) { width: 8%; }
.recipient-table th:nth-child(8), .recipient-table td:nth-child(8) { width: 11%; font-size: 12px; }
.recipient-table th:nth-child(9), .recipient-table td:nth-child(9) { width: 70px; }
.recipient-table .badge { white-space: nowrap; }
.recipient-table small { display: block; max-height: 32px; overflow: hidden; }
.table-wrap:has(.recipient-table) { overflow-x: auto; }
.reply-alert-pill, .mobile-reply-alert { cursor: pointer; }
.reply-draft-card:target { outline: 3px solid rgba(37,99,235,.28); box-shadow: 0 0 0 6px rgba(37,99,235,.08), var(--shadow); }
@media (max-width: 920px) {
  .source-button-grid { grid-template-columns: 1fr; }
  .source-button { min-height: auto; }
  .recipient-table, .recipient-table thead, .recipient-table tbody, .recipient-table tr, .recipient-table th, .recipient-table td { display: block; width: 100% !important; min-width: 0; }
  .recipient-table thead { display: none; }
  .recipient-table tr { border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; padding: 10px; background: #fff; }
  .recipient-table td { border: 0; padding: 6px 0; }
  .recipient-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .recipient-table td:last-child { display: flex; justify-content: flex-end; }
}

/* V6.3 自动回复确认/忽略静态更新 */
.reply-inline-message{border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13px;font-weight:700;}
.reply-inline-message.success{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;}
.reply-inline-message.danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.reply-action-result{border-radius:14px;padding:12px 14px;margin-top:12px;border:1px solid #e5e7eb;background:#f9fafb;}
.reply-action-result.success{border-color:#bbf7d0;background:#ecfdf5;color:#047857;}
.reply-action-result.muted{border-color:#e5e7eb;background:#f8fafc;color:#475569;}
.reply-action-result .mail-preview{margin-top:10px;color:#111827;}


/* V6.5 科技风主题：基于 V6.3 原风格增强，不使用 V6.4 简约版 */
:root {
  --bg: #eef4ff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #60708a;
  --line: #dbe7f7;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --tech-cyan: #06b6d4;
  --tech-blue: #2563eb;
  --tech-indigo: #4f46e5;
  --shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .16), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, .14), transparent 30%),
    linear-gradient(180deg, #f3f7ff 0%, #eef4ff 100%);
}
.sidebar {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .98)),
    radial-gradient(circle at 40% 0%, rgba(37, 99, 235, .32), transparent 42%);
  border-right: 1px solid rgba(96, 165, 250, .20);
  box-shadow: 20px 0 48px rgba(15, 23, 42, .14);
}
.brand-logo {
  background: linear-gradient(135deg, #22d3ee, #2563eb 52%, #7c3aed);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-title { letter-spacing: .01em; }
.brand-subtitle { color: #a6c8ff; }
.menu a {
  position: relative;
  border: 1px solid transparent;
}
.menu a:hover {
  background: rgba(37, 99, 235, .15);
  border-color: rgba(96, 165, 250, .22);
}
.menu a.active {
  background: linear-gradient(135deg, rgba(37,99,235,.30), rgba(6,182,212,.18));
  border-color: rgba(125, 211, 252, .28);
  box-shadow: inset 3px 0 0 #22d3ee, 0 10px 26px rgba(37,99,235,.13);
}
.user-pill {
  background: rgba(15, 23, 42, .36);
  border-color: rgba(148, 163, 184, .24);
}
.page-kicker {
  color: #64748b;
  font-weight: 700;
  letter-spacing: .04em;
}
.page-title {
  background: linear-gradient(90deg, #0f172a, #1d4ed8, #0891b2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card {
  border: 1px solid rgba(219, 231, 247, .96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,253,255,.98));
}
.card:hover {
  border-color: rgba(147, 197, 253, .72);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .09);
}
button, .btn, .primary-action {
  border-radius: 12px;
}
button:not(.ghost):not(.secondary):not(.danger):not(.warning):not(.success),
.btn:not(.ghost):not(.secondary):not(.danger):not(.warning):not(.success),
.primary-action {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}
button:not(.ghost):not(.secondary):not(.danger):not(.warning):not(.success):hover,
.btn:not(.ghost):not(.secondary):not(.danger):not(.warning):not(.success):hover,
.primary-action:hover {
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
}
.btn.ghost, button.ghost {
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
  color: #1e40af;
  border: 1px solid #cfe0ff;
}
.btn.ghost:hover, button.ghost:hover {
  background: #e6f1ff;
  color: #1d4ed8;
}
table {
  box-shadow: inset 0 0 0 1px rgba(219,231,247,.7);
}
th {
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  color: #38506d;
}
.badge {
  border: 1px solid rgba(148,163,184,.18);
}
.stat-card:after {
  background: radial-gradient(circle, rgba(6,182,212,.18), transparent 65%);
}
.stat {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.info-card {
  background: linear-gradient(135deg, #ffffff, #f3f8ff);
  border-color: rgba(147, 197, 253, .42);
}
.modal-window {
  box-shadow: 0 34px 100px rgba(2, 6, 23, .38);
}
.modal-title-row {
  background: linear-gradient(180deg, #ffffff 70%, rgba(247,251,255,.95));
}
.reply-alert-pill {
  background: linear-gradient(135deg, #fff1f2, #eff6ff);
  border-color: #c7d2fe;
}
.reply-alert-dot {
  background: #06b6d4;
  box-shadow: 0 0 0 4px rgba(6,182,212,.14), 0 0 16px rgba(6,182,212,.55);
}

/* 发信任务页：科技小卡片，不再使用大 emoji 图标 */
.tech-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
}
.tech-section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), 0 0 16px rgba(34, 211, 238, .5);
}
.tech-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px;
  margin: 6px 0 18px;
}
.tech-choice-card {
  position: relative;
  min-height: 92px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(191, 219, 254, .9);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96)),
    radial-gradient(circle at 100% 0%, rgba(6,182,212,.18), transparent 38%);
  box-shadow: 0 10px 26px rgba(37, 99, 235, .07);
  overflow: hidden;
}
.tech-choice-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(6,182,212,.17), transparent 66%);
}
.tech-choice-card:hover {
  border-color: #60a5fa;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .14);
}
.tech-choice-card input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-top: 8px;
  accent-color: #2563eb;
  position: relative;
  z-index: 2;
}
.tech-choice-mark {
  position: relative;
  z-index: 2;
  min-width: 40px;
  height: 30px;
  padding: 0 9px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em;
  border: 1px solid rgba(147,197,253,.7);
}
.tech-choice-text {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.tech-choice-text span {
  display: block;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.tech-choice-text small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  line-height: 1.42;
  font-size: 12px;
}
.tech-choice-card:has(input:checked) {
  border-color: #2563eb;
  background:
    linear-gradient(135deg, #eff6ff, #ecfeff),
    radial-gradient(circle at 100% 0%, rgba(6,182,212,.24), transparent 42%);
  box-shadow: 0 0 0 3px rgba(37,99,235,.11), 0 16px 34px rgba(37,99,235,.14);
}
.tech-choice-card:has(input:checked) .tech-choice-mark {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff !important;
  border-color: transparent;
}
.schedule-extra-panel {
  border: 1px solid rgba(147,197,253,.42);
  background: linear-gradient(180deg, #ffffff, #f6fbff);
}
.weekday-list label {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
}
.recipient-source-panel {
  border-color: rgba(147,197,253,.48);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,255,.96)),
    radial-gradient(circle at 92% 0%, rgba(6,182,212,.13), transparent 35%);
}
.source-button {
  min-height: 104px;
  border: 1px solid rgba(191,219,254,.78);
  background: linear-gradient(135deg, #ffffff, #f5f9ff);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .07);
}
.source-button:hover {
  border-color: #60a5fa;
  box-shadow: 0 18px 36px rgba(37,99,235,.13);
}
.source-button .source-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 18px !important;
  background: linear-gradient(135deg, #dbeafe, #cffafe);
}
.source-title {
  color: #0f172a;
}
.source-desc {
  color: #64748b;
}
.recipient-table {
  border: 1px solid rgba(219,231,247,.96);
}
.recipient-table th {
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}
@media (max-width: 920px) {
  .sidebar {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .99), rgba(30, 41, 59, .99)),
      radial-gradient(circle at 20% 0%, rgba(37, 99, 235, .28), transparent 42%);
  }
  .tech-choice-grid { grid-template-columns: 1fr; }
  .tech-choice-card { min-height: auto; }
  .source-button { min-height: auto; }
}


/* V6.9 app custom dialog */
.app-dialog-backdrop{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(2,6,23,.50);
}
.app-dialog-backdrop.show{display:flex;}
.app-dialog-card{
  position:relative;
  width:min(460px,94vw);
  overflow:hidden;
  border-radius:22px;
  padding:22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,248,255,.98)),
    radial-gradient(circle at 95% 0%, rgba(6,182,212,.18), transparent 36%);
  border:1px solid rgba(191,219,254,.86);
  box-shadow:0 34px 100px rgba(2,6,23,.38);
  animation:appDialogIn .16s ease-out;
}
.app-dialog-glow{
  position:absolute;
  right:-70px;
  top:-70px;
  width:180px;
  height:180px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(37,99,235,.20), transparent 66%);
  pointer-events:none;
}
.app-dialog-head{
  position:relative;
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.app-dialog-icon{
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:white;
  font-weight:900;
  box-shadow:0 12px 26px rgba(37,99,235,.25);
}
.app-dialog-title{font-weight:900;font-size:18px;color:#0f172a;}
.app-dialog-subtitle{font-size:12px;color:#64748b;margin-top:2px;}
.app-dialog-message{
  position:relative;
  white-space:pre-wrap;
  color:#334155;
  line-height:1.65;
  font-size:14px;
  padding:12px 0 4px;
}
.app-dialog-actions{
  position:relative;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.app-dialog-actions button{min-width:86px;}
.dialog-danger .app-dialog-icon{background:linear-gradient(135deg,#dc2626,#fb7185);}
.dialog-warning .app-dialog-icon{background:linear-gradient(135deg,#2563eb,#06b6d4);}
.dialog-success .app-dialog-icon{background:linear-gradient(135deg,#059669,#22c55e);}
@keyframes appDialogIn{
  from{opacity:0;transform:translateY(10px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media(max-width:640px){
  .app-dialog-card{padding:18px;border-radius:18px;}
  .app-dialog-actions{display:grid;grid-template-columns:1fr 1fr;}
  .app-dialog-actions button{width:100%;}
}


/* V7.0 double submit guard */
button.is-loading,
.btn.is-loading,
input[type="submit"].is-loading{
  opacity:.72;
  cursor:not-allowed !important;
  pointer-events:none;
  position:relative;
}
button.is-loading::after,
.btn.is-loading::after{
  content:"";
  width:12px;
  height:12px;
  margin-left:4px;
  border:2px solid rgba(255,255,255,.72);
  border-top-color:transparent;
  border-radius:999px;
  animation:spinSubmitOnce .72s linear infinite;
}
@keyframes spinSubmitOnce{to{transform:rotate(360deg)}}


/* V7.1 account and template page polish */
.account-settings-grid { align-items: start; }
.template-page-grid { align-items: start; }
.template-page-grid .detail-main-card { min-width: 0; }
.template-page-grid .template-editor-card { overflow: visible; }
.template-page-grid .quick-var-bar {
  position: relative;
  z-index: 2;
}
.template-page-grid .wysiwyg-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  max-width: 100%;
}
.template-page-grid .email-editor {
  width: 100%;
  overflow-wrap: anywhere;
}
.template-page-grid .side-stack .card { box-shadow: 0 12px 28px rgba(15,23,42,.06); }
.account-settings-grid input[name="wecom_uid"] {
  font-family: Consolas, Monaco, "Microsoft YaHei", sans-serif;
  letter-spacing: .01em;
}
@media (max-width: 980px) {
  .template-page-grid,
  .account-settings-grid {
    grid-template-columns: 1fr !important;
  }
  .template-page-grid .side-stack,
  .account-settings-grid .side-stack {
    position: static;
  }
}
@media (max-width: 720px) {
  .template-page-grid .card-title-row,
  .template-page-grid .actions {
    align-items: stretch;
  }
  .template-page-grid .actions > *,
  .account-settings-grid .actions > * {
    width: 100%;
    flex: 1 1 100%;
  }
  .template-page-grid .quick-var-bar {
    display: flex;
    gap: 6px;
    padding: 9px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .template-page-grid .quick-var-title {
    flex: 0 0 auto;
  }
  .template-page-grid .var-chip,
  .template-page-grid .inline-details summary {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .template-page-grid .details-panel {
    width: calc(100vw - 34px);
    min-width: 0;
    max-height: 60vh;
    overflow: auto;
  }
  .template-page-grid .wysiwyg-toolbar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: none;
    overflow: visible;
  }
  .template-page-grid .wysiwyg-toolbar select {
    flex: 1 1 130px;
    max-width: none;
    min-width: 0;
  }
  .template-page-grid .wysiwyg-toolbar button {
    flex: 0 0 auto;
    min-width: 38px;
  }
  .template-page-grid .color-tool {
    flex: 1 1 120px;
    justify-content: space-between;
  }
  .template-page-grid .email-editor {
    min-height: 420px;
    padding: 14px;
    font-size: 15px;
  }
  .template-page-grid .image-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .template-page-grid .image-panel-actions button,
  .template-page-grid .image-panel-actions input {
    width: 100%;
  }
}
@media (max-width: 460px) {
  .template-page-grid .image-panel-actions {
    grid-template-columns: 1fr;
  }
  .template-page-grid .email-editor {
    min-height: 360px;
  }
}