@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#0f172a;background:#f8fafc}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid #e6edf5;padding:22px 16px;position:relative;transition:padding .2s ease,background .2s ease,border-color .2s ease;display:flex;flex-direction:column;min-height:100vh}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand-copy{min-width:0;white-space:nowrap;overflow:hidden;transition:opacity .16s ease,width .2s ease}
.brand-mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#17233d;color:#fff;font-size:24px;font-weight:800}
.brand strong{display:block;font-size:20px}
.brand span{display:block;font-size:12px;color:#64748b}
.side-nav{margin-top:34px;display:grid;gap:10px}
.side-nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;color:#1e293b;font-weight:650}
.nav-icon-box{width:44px;height:44px;flex:0 0 44px;border:1px solid #dbe3ed;border-radius:12px;display:grid;place-items:center;background:#fff;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.nav-icon-box img{display:block;width:24px;height:24px;object-fit:contain}
.nav-label{line-height:1.1}
.side-nav a.active{background:#eaf3ff;color:#1677ff;border-left:3px solid #1677ff}
.side-nav a.active .nav-icon-box{border-color:#b9d5ff;background:#fff}
.side-nav a:hover{background:#f8fbff}
.sidebar-footer{margin-top:auto;display:grid;gap:10px;padding-top:18px}
.sidebar-footer-btn{width:100%;min-height:50px;border:1px solid #dbe3ed;border-radius:13px;background:#fff;color:#1e293b;display:flex;align-items:center;gap:12px;padding:8px 12px;cursor:pointer;font-weight:650;text-align:left;transition:.16s ease}
.sidebar-footer-btn:hover{background:#f8fbff;border-color:#b9d5ff;color:#1677ff}
.sidebar-footer-icon{width:32px;height:32px;flex:0 0 32px;border:1px solid #dbe3ed;border-radius:9px;display:grid;place-items:center;background:#fff;font-size:19px;line-height:1}
.sidebar-footer-label{white-space:nowrap}

.sidebar-toggle{width:34px;height:34px;border:1px solid #dbe3ed;border-radius:10px;background:#fff;color:#64748b;display:grid;place-items:center;cursor:pointer;flex:0 0 34px;transition:.16s ease}
.sidebar-toggle:hover{background:#f8fbff;color:#1677ff;border-color:#b9d5ff}
.sidebar-toggle span{font-size:26px;line-height:1;margin-top:-2px}
.app.sidebar-collapsed{grid-template-columns:84px 1fr}
.app.sidebar-collapsed .sidebar{padding-left:10px;padding-right:10px}
.app.sidebar-collapsed .brand-row{justify-content:center;display:grid;gap:12px}
.app.sidebar-collapsed .brand{justify-content:center}
.app.sidebar-collapsed .brand-copy{display:none}
.app.sidebar-collapsed .sidebar-toggle{margin:0 auto;width:44px;height:32px}
.app.sidebar-collapsed .side-nav{margin-top:22px}
.app.sidebar-collapsed .side-nav a{padding:8px;justify-content:center;border-left:0;gap:0}
.app.sidebar-collapsed .nav-label{display:none}
.app.sidebar-collapsed .nav-icon-box{width:48px;height:48px;flex-basis:48px}
.app.sidebar-collapsed .nav-icon-box img{width:26px;height:26px}

.main{min-width:0}

.app.sidebar-collapsed .sidebar-footer-btn{width:52px;min-height:48px;padding:7px;justify-content:center;margin:0 auto}
.app.sidebar-collapsed .sidebar-footer-label{display:none}
.app.sidebar-collapsed .sidebar-footer-icon{border:0;background:transparent;width:34px;height:34px}
.topbar{background:#fff;border-bottom:1px solid #e6edf5;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.platforms{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0;flex:1 1 720px}
.platform{border:1px solid #eef2f7;background:#f8fafc;padding:10px 14px;border-radius:12px;display:flex;gap:10px;align-items:center;color:#64748b;min-height:52px;flex:0 0 auto;white-space:nowrap}
.platform.active{background:#1677ff;color:#fff;border-color:#1677ff;box-shadow:0 6px 18px rgba(22,119,255,.18)}
.platform.disabled{opacity:.8}
.platform-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.platform-text b{font-size:15px}
.platform small{display:block;font-size:10px;color:inherit;opacity:.82}
.platform-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;font-weight:800;font-size:15px}
.email-icon{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);font-size:19px}
.image-icon{width:30px;height:30px;border-radius:9px;overflow:hidden;display:grid;place-items:center}
.image-icon img{display:block;width:100%;height:100%;object-fit:contain}
.email-image-icon{background:transparent;padding:0}
.email-image-icon img{width:24px;height:24px}
.max-platform{padding-right:16px}
.max-app-icon{padding:0;background:transparent}
.max-app-icon img{width:20px;height:20px;filter:grayscale(1) brightness(.58) opacity(.75)}
.platform.active .max-app-icon img{filter:none}
.top-right{display:flex;align-items:center;gap:12px;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #e6edf5;border-radius:14px;background:#fbfdff;min-width:210px}
.user-chip__avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#17233d;color:#fff;font-size:18px;font-weight:800;flex:0 0 auto}
.user-chip__meta{display:grid;line-height:1.06}
.user-chip__label{font-size:11px;color:#94a3b8}
.user-chip__meta strong{font-size:14px}
.user-chip__meta small{font-size:12px;color:#64748b}
.icon-actions{display:flex;gap:10px;align-items:center}
.icon-btn{width:56px;height:56px;border-radius:16px;border:1px solid #dbe3ed;background:#fff;display:grid;place-items:center;position:relative;transition:.15s ease;color:#0f172a;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.icon-btn:hover{background:#f8fbff;border-color:#c8d5e5;transform:translateY(-1px)}
.icon-btn span{font-size:20px;line-height:1}
.icon-btn img{display:block;width:28px;height:28px;object-fit:contain}
.icon-btn.danger{color:#dc2626}
.theme-toggle{cursor:pointer}
.theme-toggle span{font-size:24px}
.icon-btn::after{content:attr(data-tooltip);position:absolute;bottom:-34px;left:50%;transform:translateX(-50%) translateY(4px);background:#0f172a;color:#fff;padding:6px 9px;border-radius:8px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s ease;z-index:30}
.icon-btn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.content{padding:34px;max-width:1400px}
.heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.heading-row h1{font-size:38px;margin:0 0 4px}
.heading-row p{margin:0;color:#64748b;font-size:18px}
.heading-row select{padding:12px 16px;border:1px solid #dbe3ed;border-radius:10px;background:#fff}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.metric{border-radius:16px;padding:28px;color:#fff;min-height:154px;box-shadow:0 10px 25px rgba(15,23,42,.08);position:relative}
.metric strong{display:block;font-size:42px}.metric span{display:block;font-size:18px;margin-top:6px}
.metric em{position:absolute;right:22px;bottom:24px;font-style:normal;background:rgba(255,255,255,.16);padding:7px 12px;border-radius:999px;font-weight:700}
.blue{background:linear-gradient(135deg,#28a6ff,#0877f9)}.green{background:linear-gradient(135deg,#59df71,#19c659)}.orange{background:linear-gradient(135deg,#ffb21c,#ff5d59)}.purple{background:linear-gradient(135deg,#bc51ef,#7f3df3)}
.grid-main{display:grid;grid-template-columns:1.45fr .9fr;gap:18px;margin-top:20px}.panel{background:#fff;border:1px solid #e6edf5;border-radius:16px;padding:22px;box-shadow:0 6px 18px rgba(15,23,42,.03)}.panel-title{font-size:21px;font-weight:800;margin-bottom:16px}.chart{height:190px;border-left:1px solid #e9eef5;border-bottom:1px solid #e9eef5;display:flex;align-items:flex-end;gap:8px;padding:0 12px}.chart span{display:block;width:100%;background:linear-gradient(#58a8ff,#2787f8);border-radius:4px 4px 0 0}.chart-labels{display:flex;justify-content:space-between;color:#64748b;font-size:12px;margin-top:8px}.quick{display:grid;gap:9px}.quick .panel-title{margin-bottom:0}.quick button{border:1px solid #e6edf5;background:#fff;border-radius:11px;padding:10px;display:grid;grid-template-columns:42px 1fr 16px;align-items:center;text-align:left;gap:10px;font-weight:600}.quick button:hover{background:#f8fbff}.q{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#fff;font-style:normal}.q.green{background:#22c55e}.q.cyan{background:#18a8ff}.q.orange{background:#f59e0b}.q.purple{background:#8b5cf6}
.note{margin-top:20px;background:#fff;border:1px solid #e6edf5;border-radius:14px;padding:16px 18px;display:flex;gap:14px;align-items:center}.note strong{color:#1677ff}.note span{color:#64748b}
.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#f7fbff,#eef5ff)}.auth-card{width:min(440px,92vw);background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:34px;box-shadow:0 24px 60px rgba(15,23,42,.08)}.install-card{width:min(520px,92vw)}.brand-center{justify-content:center;margin-bottom:26px}.auth-card h1{margin:0 0 8px;text-align:center}.muted{color:#64748b}.auth-card>p{text-align:center;margin-bottom:24px}.auth-card form{display:grid;gap:10px}.auth-card label{font-weight:650;font-size:14px}.auth-card input:not([type=checkbox]){width:100%;padding:13px 14px;border:1px solid #d8e1ec;border-radius:10px;outline:none}.auth-card input:focus{border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,.09)}.check{display:flex;gap:8px;align-items:center;font-weight:500!important;margin:4px 0 8px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 18px;font-weight:750;cursor:pointer}.btn-wide{width:100%}.btn-primary{background:#1677ff;color:#fff}.btn-secondary{background:#17233d;color:#fff}.btn-light{background:#fff;border:1px solid #dbe3ed}.btn-danger{background:#fee2e2;color:#b91c1c}.alert{padding:12px 14px;border-radius:10px;margin:14px 0}.alert-error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.alert-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.system-page{background:#f5f7fb}.system-wrap{max-width:1180px;margin:auto;padding:28px}.system-head{display:flex;justify-content:space-between;align-items:center}.system-title{display:flex;justify-content:space-between;align-items:flex-start;margin:40px 0 20px}.system-title h1{font-size:34px;margin:0}.system-title p{color:#64748b;margin:6px 0 0}.version-badge{background:#eaf3ff;color:#1677ff;font-weight:800;padding:10px 14px;border-radius:10px}.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.system-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:22px;margin-bottom:18px}.system-card h2{margin-top:0}.system-card p{color:#64748b}.file-input{display:block;width:100%;padding:12px;border:1px dashed #b9c6d8;border-radius:10px;margin:14px 0}.help-box{display:grid;gap:5px;background:#f8fafc;border-radius:10px;padding:14px;margin-top:16px}.help-box span{color:#64748b;font-size:14px}.backup-list{display:grid;gap:10px}.backup-item{display:flex;justify-content:space-between;align-items:center;border:1px solid #e6edf5;border-radius:12px;padding:14px;gap:14px}.backup-item strong{display:block;word-break:break-word}.backup-item span{display:block;color:#64748b;font-size:13px;margin-top:4px}.empty{padding:24px;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b;text-align:center}pre{background:#0f172a;color:#dbeafe;padding:18px;border-radius:12px;overflow:auto}

/* Темная тема */
html[data-theme="dark"],html[data-theme="dark"] body{background:#0b1220;color:#e5edf8}
html[data-theme="dark"] body{color:#e5edf8}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar{background:#111a2b;border-color:#243148}
html[data-theme="dark"] .brand span,
html[data-theme="dark"] .heading-row p,
html[data-theme="dark"] .chart-labels,
html[data-theme="dark"] .note span,
html[data-theme="dark"] .user-chip__label,
html[data-theme="dark"] .user-chip__meta small{color:#93a4bd}
html[data-theme="dark"] .side-nav a{color:#dce6f4}
html[data-theme="dark"] .side-nav a:hover{background:#18243a}
html[data-theme="dark"] .side-nav a.active{background:#142b50;color:#6ab0ff}
html[data-theme="dark"] .side-nav a.active .nav-icon-box{background:#18345a;border-color:#316db8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
html[data-theme="dark"] .side-nav a.active .nav-icon-box img{filter:invert(1) brightness(2)}
html[data-theme="dark"] .side-nav a.active .nav-label{color:#ffffff}

html[data-theme="dark"] .nav-icon-box,
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .sidebar-footer-btn,
html[data-theme="dark"] .sidebar-footer-icon,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .user-chip,
html[data-theme="dark"] .heading-row select,
html[data-theme="dark"] .quick button{background:#151f31;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .nav-icon-box img,
html[data-theme="dark"] .icon-btn img{filter:invert(1) brightness(1.4)}
html[data-theme="dark"] .email-image-icon img,
html[data-theme="dark"] .max-app-icon img{filter:none}
html[data-theme="dark"] .platform{background:#151f31;border-color:#243148;color:#aab8cb}
html[data-theme="dark"] .platform.active{background:#1677ff;color:#fff;border-color:#1677ff}
html[data-theme="dark"] .content{background:#0b1220}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .note{background:#111a2b;border-color:#243148;box-shadow:none}
html[data-theme="dark"] .quick button:hover{background:#19263b}
html[data-theme="dark"] .chart{border-color:#2a3951}
html[data-theme="dark"] .chart span{background:linear-gradient(#58a8ff,#2787f8)}
html[data-theme="dark"] .sidebar-toggle:hover,
html[data-theme="dark"] .sidebar-footer-btn:hover,
html[data-theme="dark"] .icon-btn:hover{background:#19263b;border-color:#39506e}
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .user-chip__avatar{background:#243148;color:#fff}
html[data-theme="dark"] .metric{box-shadow:none}

@media(max-width:1350px){.topbar{align-items:flex-start}.top-right{width:100%;justify-content:space-between}.platforms{flex-basis:100%}}
@media(max-width:1050px){.app{grid-template-columns:200px 1fr}.metrics{grid-template-columns:repeat(2,1fr)}.grid-main{grid-template-columns:1fr}.user-chip{min-width:unset}}
@media(max-width:800px){.app{display:block}.sidebar{display:none}.topbar{display:block}.platforms{overflow:auto;flex-wrap:nowrap;padding-bottom:6px}.top-right{display:block;margin-top:12px}.icon-actions{margin-top:10px;justify-content:flex-end}.content{padding:18px}.heading-row{display:block}.heading-row select{margin-top:14px}.metrics{grid-template-columns:1fr 1fr}.system-grid{grid-template-columns:1fr}.user-chip{margin-top:12px}.backup-item{display:block}.backup-item form{margin-top:10px}}
@media(max-width:520px){.metrics{grid-template-columns:1fr}.metric{min-height:120px}.heading-row h1{font-size:30px}.system-wrap{padding:16px}.system-head,.system-title{display:block}.system-head .btn,.version-badge{margin-top:14px}.platform{padding:9px 12px}.platform-icon{width:22px;height:22px}.email-icon{width:30px;height:30px;font-size:18px}.content{padding:14px}.top-right{display:grid;gap:10px}.icon-actions{justify-content:flex-start}.icon-btn{width:48px;height:48px;border-radius:14px}}

@media(max-width:1050px) and (min-width:801px){.app.sidebar-collapsed{grid-template-columns:84px 1fr}}

.settings-placeholder{margin-top:26px;max-width:900px}.settings-placeholder p{margin:0;color:#64748b;line-height:1.6}
html[data-theme="dark"] .settings-placeholder p{color:#93a4bd}


/* Подписчики */
.subscribers-page{max-width:none;padding-top:28px}
.subscribers-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.subscribers-head h1{font-size:38px;margin:0 0 4px}
.subscribers-head p{margin:0;color:#64748b;font-size:17px}
.subscribers-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.section-tabs{display:flex;gap:28px;border-bottom:1px solid #e6edf5;margin-top:22px}
.section-tab{border:0;background:transparent;padding:13px 2px;color:#64748b;font-weight:750;cursor:pointer;border-bottom:2px solid transparent}
.section-tab.active{color:#1677ff;border-color:#1677ff}
.subscriber-filters{display:grid;grid-template-columns:minmax(320px,1.8fr) minmax(160px,.8fr) minmax(160px,.8fr) minmax(190px,.95fr) minmax(170px,.85fr) auto;gap:10px;margin-top:18px}
.subscriber-filters select,.search-wrap{height:52px;border:1px solid #dbe3ed;border-radius:12px;background:#fff}
.search-wrap{display:flex;align-items:center;padding:0 14px;gap:9px}
.search-wrap span{font-size:24px;color:#94a3b8}
.search-wrap input{border:0;outline:0;width:100%;background:transparent;color:inherit}
.subscriber-filters select{
  padding:0 44px 0 14px;
  color:#334155;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px 14px;
}
.subscriber-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px}
.subscriber-stat{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid #dbe3ed;background:#fff;min-height:88px}
.subscriber-stat-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:#edf5ff;color:#1677ff}

.stat-total-icon::before{
  content:"";
  width:22px;
  height:22px;
  display:block;
  background:currentColor;
  -webkit-mask:url("icon-subscribers-total.png") center/contain no-repeat;
  mask:url("icon-subscribers-total.png") center/contain no-repeat;
}
.subscriber-stat small{display:block;color:#64748b;font-weight:650}
.subscriber-stat strong{display:block;font-size:28px;margin-top:2px}
.subscriber-stat em{position:absolute;right:16px;bottom:16px;font-style:normal;font-size:12px;font-weight:800;border-radius:999px;padding:5px 9px}
.stat-active{background:#f4fff7;border-color:#caefd5}.stat-active .subscriber-stat-icon{background:#daf8e3;color:#16a34a}.stat-active em{background:#d9f8e2;color:#16a34a}
.stat-pending{background:#fffaf2;border-color:#f4dfb8}.stat-pending .subscriber-stat-icon{background:#fff0cb;color:#f59e0b}.stat-pending em{background:#fff0cb;color:#d97706}
.stat-black{background:#fff6f6;border-color:#f2cccc}.stat-black .subscriber-stat-icon{background:#ffe0e0;color:#ef4444}.stat-black em{background:#ffe0e0;color:#dc2626}
.subscriber-table-card{margin-top:14px;background:#fff;border:1px solid #e1e8f0;border-radius:16px;overflow:hidden;box-shadow:0 5px 18px rgba(15,23,42,.03)}
.bulk-toolbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #e8edf3;min-height:62px}
.bulk-count{display:flex;align-items:center;gap:8px;font-weight:700;margin-right:6px}
.bulk-danger{color:#dc2626}
.table-scroll{overflow:auto}
.subscriber-table{border-collapse:collapse;width:100%;min-width:1320px;font-size:13px}
.subscriber-table th,.subscriber-table td{padding:11px 12px;border-bottom:1px solid #edf1f5;text-align:left;white-space:nowrap}
.subscriber-table th{background:#fbfcfe;color:#64748b;font-size:12px;font-weight:750}
.subscriber-table tbody tr:hover{background:#f8fbff}
.subscriber-email{color:#0b66d8;font-weight:650}
.status-pill,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}
.status-pill.ok{background:#e6f9ed;color:#16a34a}
.status-pill.off{background:#ffe9e9;color:#dc2626}
.status-pill.bad{background:#ffe4e6;color:#dc2626}
.status-pill.wait{background:#fff1cf;color:#d97706}
.tag{background:#eaf3ff;color:#1677ff}
.tag-2{background:#f0e9ff;color:#7c3aed}
.tag-3{background:#e9f3ff;color:#2563eb}
.tag-4{background:#ffe8ef;color:#e11d48}
.row-menu{border:0;background:transparent;font-weight:900;cursor:pointer;letter-spacing:1px}
.table-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:#64748b;font-size:13px}
.pagination{display:flex;align-items:center;gap:6px}
.pagination button{min-width:34px;height:34px;border:1px solid #dbe3ed;background:#fff;border-radius:9px;cursor:pointer}
.pagination button.active{background:#1677ff;color:#fff;border-color:#1677ff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

html[data-theme="dark"] .subscribers-head p{color:#93a4bd}
html[data-theme="dark"] .section-tabs{border-color:#243148}
html[data-theme="dark"] .section-tab{color:#93a4bd}
html[data-theme="dark"] .section-tab.active{color:#6ab0ff;border-color:#1677ff}
html[data-theme="dark"] .subscriber-filters select,
html[data-theme="dark"] .search-wrap,
html[data-theme="dark"] .subscriber-stat,
html[data-theme="dark"] .subscriber-table-card,
html[data-theme="dark"] .pagination button{background:#111a2b;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .subscriber-filters select{
  color:#e5edf8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .subscriber-stat small,
html[data-theme="dark"] .table-footer{color:#93a4bd}
html[data-theme="dark"] .subscriber-table th{background:#151f31;color:#aab8cb}
html[data-theme="dark"] .subscriber-table td,
html[data-theme="dark"] .bulk-toolbar{border-color:#243148}
html[data-theme="dark"] .subscriber-table tbody tr:hover{background:#151f31}
html[data-theme="dark"] .subscriber-email{color:#6ab0ff}
html[data-theme="dark"] .stat-active{background:#10261a;border-color:#245337}
html[data-theme="dark"] .stat-pending{background:#2b2412;border-color:#5f4a1d}
html[data-theme="dark"] .stat-black{background:#2c171a;border-color:#603238}
html[data-theme="dark"] .pagination button.active{background:#1677ff;border-color:#1677ff;color:#fff}

@media(max-width:1400px){
  .subscriber-filters{grid-template-columns:minmax(280px,1.4fr) repeat(2,minmax(150px,.7fr))}
  .subscriber-actions{max-width:600px}
}
@media(max-width:1000px){
  .subscribers-head{display:block}.subscribers-actions{justify-content:flex-start;margin-top:14px}
  .subscriber-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .subscriber-filters{grid-template-columns:1fr}
  .subscriber-stats{grid-template-columns:1fr}
  .bulk-toolbar{overflow:auto}
  .table-footer{display:block}.pagination{margin-top:10px;overflow:auto}
}

.view-menu-wrap{position:relative}
.view-columns-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:240px;padding:14px;background:#fff;border:1px solid #dbe3ed;border-radius:12px;box-shadow:0 16px 35px rgba(15,23,42,.12)}
.view-columns-menu strong{display:block;margin-bottom:10px}
.view-columns-menu label{display:flex;align-items:center;gap:9px;padding:7px 2px;color:#334155;font-size:14px;cursor:pointer}
.view-columns-menu input{width:16px;height:16px}
html[data-theme="dark"] .view-columns-menu{background:#111a2b;border-color:#2a3951;box-shadow:0 16px 35px rgba(0,0,0,.35)}
html[data-theme="dark"] .view-columns-menu label{color:#e5edf8}

.confirm-filter{min-width:190px}
.view-columns-menu label{min-height:34px}
.view-columns-menu label input[type="checkbox"]{display:inline-block!important;visibility:visible!important;opacity:1!important;flex:0 0 16px}

.view-primary-btn{gap:9px}.view-primary-btn img{width:23px;height:23px;object-fit:contain;filter:invert(1) brightness(3)}.developer-only-action{border-style:dashed}.developer-badge{background:#ede9fe;color:#6d28d9;padding:10px 14px;border-radius:10px;font-weight:800}.developer-status{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.developer-status.is-on{background:#dcfce7;color:#15803d}.developer-status.is-off{background:#fee2e2;color:#b91c1c}.settings-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.developer-info-grid,.credential-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.developer-info-grid>div,.credential-grid>div{padding:13px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}.developer-info-grid small,.credential-grid small{display:block;color:#64748b;margin-bottom:5px}.credential-wide{grid-column:1/-1}.credential-wide code{display:block;word-break:break-all;font-size:15px;color:#0f172a}.developer-toggle-form{margin-top:14px}.switch-row{display:flex;align-items:center;gap:10px;font-weight:700}.switch-row input{width:18px;height:18px}.settings-form{display:grid;gap:10px}.settings-form input{padding:12px 14px;border:1px solid #d8e1ec;border-radius:10px}.narrow-system-wrap{max-width:820px}.auth-link{text-align:center;margin:16px 0 0;font-size:14px}.auth-link a{color:#1677ff;font-weight:700}.recovery-card{width:min(560px,92vw)}.recovery-method h2{font-size:18px;margin:18px 0 10px}.recovery-method form{display:grid;gap:10px}.recovery-method input{width:100%;padding:13px 14px;border:1px solid #d8e1ec;border-radius:10px}.recovery-divider{height:1px;background:#e2e8f0;margin:22px 0}.recovery-hosting-note{margin-top:20px;padding:12px 14px;border-radius:10px;background:#f8fafc;color:#475569;font-size:13px}html[data-theme="dark"] .developer-info-grid>div,html[data-theme="dark"] .credential-grid>div,html[data-theme="dark"] .recovery-hosting-note{background:#151f31;border-color:#2a3951;color:#e5edf8}html[data-theme="dark"] .developer-info-grid small,html[data-theme="dark"] .credential-grid small{color:#93a4bd}html[data-theme="dark"] .credential-wide code{color:#e5edf8}html[data-theme="dark"] .recovery-divider{background:#2a3951}@media(max-width:720px){.developer-info-grid,.credential-grid{grid-template-columns:1fr}.credential-wide{grid-column:auto}.settings-row{display:block}.developer-status{display:inline-block;margin-top:8px}}

/* Subscribers 0.1.21: groups count and page-size control */
.groups-count{display:inline-block;min-width:18px;text-align:left;font-weight:650;color:#334155;cursor:help}
.table-footer-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.page-size-control{display:inline-flex;align-items:center;gap:8px;color:#64748b;font-size:13px;font-weight:650}
.page-size-control select{height:34px;min-width:64px;padding:0 30px 0 10px;border:1px solid #dbe3ed;border-radius:8px;background:#fff;color:#334155;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px}
html[data-theme="dark"] .groups-count{color:#e5edf8}
html[data-theme="dark"] .page-size-control{color:#93a4bd}
html[data-theme="dark"] .page-size-control select{background-color:#111a2b;border-color:#2a3951;color:#e5edf8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media(max-width:720px){.table-footer-left{align-items:flex-start;flex-direction:column;gap:10px}}


/* Subscribers 0.1.22: tags, advanced filters and action icons */
.subscriber-filters{grid-template-columns:minmax(330px,1.8fr) minmax(155px,.75fr) minmax(190px,.9fr) minmax(170px,.8fr) minmax(150px,.72fr) auto}
.view-secondary-btn,.filter-primary-btn,.bulk-icon-btn{gap:8px}
.view-secondary-btn img,.filter-primary-btn img,.bulk-icon-btn img{width:19px;height:19px;object-fit:contain;flex:0 0 19px}
.view-secondary-btn img{filter:none}
.filter-primary-btn img{filter:invert(1) brightness(3)}
.bulk-danger img{filter:invert(23%) sepia(91%) saturate(3630%) hue-rotate(349deg) brightness(93%) contrast(84%)}
.filter-menu-wrap{position:relative}
.advanced-filter-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:55;width:360px;padding:16px;background:#fff;border:1px solid #dbe3ed;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.14)}
.advanced-filter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.advanced-filter-head strong{font-size:16px}
.advanced-filter-head button{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#64748b}
.advanced-filter-menu label{display:grid;gap:6px;margin-top:11px;color:#475569;font-size:13px;font-weight:700}
.advanced-filter-menu select,.advanced-filter-menu input{width:100%;height:42px;padding:0 12px;border:1px solid #dbe3ed;border-radius:10px;background:#fff;color:#334155}
.advanced-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.advanced-filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #edf1f5}
.tags-summary{display:inline-block;max-width:190px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;color:#334155;cursor:help}
.tags-summary span{color:#64748b;font-weight:700}
html[data-theme="dark"] .advanced-filter-menu{background:#111a2b;border-color:#2a3951;box-shadow:0 18px 40px rgba(0,0,0,.35)}
html[data-theme="dark"] .advanced-filter-menu label{color:#aab8cb}
html[data-theme="dark"] .advanced-filter-menu select,html[data-theme="dark"] .advanced-filter-menu input{background:#151f31;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .advanced-filter-actions{border-color:#243148}
html[data-theme="dark"] .tags-summary{color:#e5edf8}
html[data-theme="dark"] .tags-summary span{color:#93a4bd}
@media(max-width:1180px){.subscriber-filters{grid-template-columns:minmax(280px,1.5fr) repeat(4,minmax(145px,1fr));}.subscriber-filters #resetSubscriberFilters{grid-column:auto}.subscriber-stats{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:720px){.subscriber-filters{grid-template-columns:1fr}.advanced-filter-menu{width:min(360px,calc(100vw - 32px));right:auto;left:0}.advanced-filter-grid{grid-template-columns:1fr}}


/* Subscriber personal card 0.1.23 */
.subscriber-card-page{padding-top:28px}
.subscriber-card-topline{display:flex;align-items:center;justify-content:flex-start;margin-bottom:20px}
.subscriber-back-btn{min-height:48px;padding:0 22px;font-size:15px;box-shadow:0 8px 22px rgba(22,119,255,.16)}
.subscriber-profile-head{display:flex;align-items:center;gap:18px;padding:22px 24px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:18px}
.subscriber-avatar{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;background:#eaf3ff;color:#1677ff;font-size:28px;font-weight:850;flex:0 0 68px}
.subscriber-profile-copy{min-width:0}
.subscriber-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.subscriber-title-row h1{margin:0;font-size:30px;line-height:1.15}
.subscriber-profile-email{display:inline-block;margin-top:5px;color:#1677ff;font-size:16px;font-weight:750;text-decoration:none}
.subscriber-profile-copy p{margin:8px 0 0;color:#64748b}
.subscriber-card-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}
.subscriber-info-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px 22px}
.subscriber-card-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.subscriber-card-section-head h2{margin:0 0 4px;font-size:18px}
.subscriber-card-section-head p{margin:0;color:#64748b;font-size:13px}
.compact-card-btn{padding:9px 13px;white-space:nowrap}
.subscriber-info-list{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.subscriber-info-list>div{padding:13px 0;border-bottom:1px solid #edf1f5;min-width:0}
.subscriber-info-list>div:nth-last-child(-n+2){border-bottom:0}
.subscriber-info-list span{display:block;color:#64748b;font-size:12px;margin-bottom:5px}
.subscriber-info-list strong{display:block;color:#0f172a;font-size:14px;word-break:break-word}
.compact-info-list{grid-template-columns:1fr}
.compact-info-list>div:last-child{border-bottom:0}
.subscriber-group-list{display:grid;gap:9px}
.subscriber-group-item{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;background:#f8fafc;border:1px solid #edf1f5;border-radius:10px;color:#334155;font-size:13px;line-height:1.35}
.group-dot{width:8px;height:8px;border-radius:50%;background:#1677ff;flex:0 0 8px;margin-top:5px}
.empty-card-state{min-height:118px;display:grid;place-items:center;text-align:center;align-content:center;gap:5px;border:1px dashed #dbe3ed;border-radius:12px;background:#fafcff;color:#64748b}
.empty-card-state strong{color:#334155}
.empty-card-state span{font-size:13px}
.subscriber-tag-list{display:flex;gap:8px;flex-wrap:wrap}
.subscriber-tag-list span{padding:7px 10px;border:1px solid #dbe3ed;border-radius:999px;background:#f8fafc;color:#334155;font-size:12px;font-weight:700}
.subscriber-history-card{margin-bottom:24px}
.subscriber-timeline{display:grid;gap:0}
.timeline-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:4px 0 18px}
.timeline-item:not(:last-child):before{content:"";position:absolute;left:6px;top:14px;bottom:-2px;width:2px;background:#e2e8f0}
.timeline-dot{width:14px;height:14px;border-radius:50%;background:#1677ff;border:3px solid #dcebff;position:relative;z-index:1;margin-top:2px}
.timeline-item strong{display:block;color:#0f172a;font-size:14px;margin-bottom:3px}
.timeline-item div span{display:block;color:#64748b;font-size:13px}
.muted-timeline .timeline-dot{background:#f59e0b;border-color:#fff0c2}
html[data-theme="dark"] .subscriber-profile-head,
html[data-theme="dark"] .subscriber-info-card{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .subscriber-avatar{background:#142743;color:#6ab0ff}
html[data-theme="dark"] .subscriber-title-row h1,
html[data-theme="dark"] .subscriber-info-list strong,
html[data-theme="dark"] .subscriber-card-section-head h2,
html[data-theme="dark"] .timeline-item strong{color:#e5edf8}
html[data-theme="dark"] .subscriber-profile-copy p,
html[data-theme="dark"] .subscriber-card-section-head p,
html[data-theme="dark"] .subscriber-info-list span,
html[data-theme="dark"] .timeline-item div span{color:#93a4bd}
html[data-theme="dark"] .subscriber-info-list>div{border-color:#243148}
html[data-theme="dark"] .subscriber-group-item{background:#151f31;border-color:#243148;color:#e5edf8}
html[data-theme="dark"] .empty-card-state{background:#151f31;border-color:#2a3951;color:#93a4bd}
html[data-theme="dark"] .empty-card-state strong{color:#e5edf8}
html[data-theme="dark"] .timeline-item:not(:last-child):before{background:#2a3951}
@media(max-width:1050px){.subscriber-card-grid{grid-template-columns:1fr}}
@media(max-width:720px){.subscriber-profile-head{align-items:flex-start;padding:18px}.subscriber-avatar{width:54px;height:54px;flex-basis:54px;border-radius:14px;font-size:22px}.subscriber-title-row h1{font-size:24px}.subscriber-info-list{grid-template-columns:1fr}.subscriber-info-list>div{border-bottom:1px solid #edf1f5!important}.subscriber-info-list>div:last-child{border-bottom:0!important}.subscriber-card-section-head{display:block}.compact-card-btn{margin-top:12px}.subscriber-back-btn{width:100%}}

/* Subscriber card refinements 0.1.24 */
.subscriber-profile-head{justify-content:space-between}
.subscriber-profile-main{display:flex;align-items:center;gap:18px;min-width:0}
.blacklist-profile-btn{color:#b91c1c;border-color:#fecaca;background:#fff}
.card-action-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.subscriber-group-item{align-items:center;cursor:pointer}
.subscriber-group-item input{width:16px;height:16px;flex:0 0 16px;margin:0}
.source-info-list strong{font-family:inherit}
.subscriber-timeline-scroll{max-height:345px;overflow-y:auto;padding-right:10px;scrollbar-gutter:stable}
.subscriber-timeline-scroll::-webkit-scrollbar,.available-groups-list::-webkit-scrollbar{width:8px}
.subscriber-timeline-scroll::-webkit-scrollbar-thumb,.available-groups-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:20px}
.sf-modal-backdrop{position:fixed;inset:0;z-index:500;background:rgba(15,23,42,.42);display:grid;place-items:center;padding:20px}
.sf-modal-backdrop[hidden]{display:none!important}
body.modal-open{overflow:hidden}
.sf-modal{width:min(560px,calc(100vw - 32px));background:#fff;border:1px solid #dbe3ed;border-radius:16px;box-shadow:0 28px 70px rgba(15,23,42,.22);padding:20px}
.sf-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.sf-modal-head h2{margin:0 0 5px;font-size:20px}.sf-modal-head p{margin:0;color:#64748b;font-size:13px}
.modal-close{border:0;background:transparent;font-size:28px;line-height:1;color:#64748b;cursor:pointer;padding:0 3px}
.available-groups-list{display:grid;gap:8px;max-height:265px;overflow-y:auto;padding-right:8px}
.available-group-item{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;cursor:pointer;color:#334155;font-size:13px;line-height:1.35}
.available-group-item input{width:16px;height:16px;flex:0 0 16px;margin-top:1px}
.sf-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
html[data-theme="dark"] .blacklist-profile-btn{background:#111a2b;border-color:#6b2730;color:#fda4af}
html[data-theme="dark"] .sf-modal{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .sf-modal-head h2{color:#e5edf8}
html[data-theme="dark"] .sf-modal-head p{color:#93a4bd}
html[data-theme="dark"] .available-group-item{background:#151f31;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .subscriber-timeline-scroll::-webkit-scrollbar-thumb,html[data-theme="dark"] .available-groups-list::-webkit-scrollbar-thumb{background:#475569}
@media(max-width:720px){.subscriber-profile-head{display:block}.subscriber-profile-main{align-items:flex-start}.subscriber-profile-head>#toggleBlacklistBtn{width:100%;margin-top:16px}.card-action-buttons{justify-content:flex-start;margin-top:12px}.sf-modal-actions{display:grid;grid-template-columns:1fr 1fr}.sf-modal-actions .btn{width:100%}}

/* Subscriber card 0.1.25 */
.subscriber-bottom-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr);gap:18px;align-items:start}
.mail-reactions-card{min-width:0}
.mail-reactions-scroll{overflow-x:auto}
.mail-reactions-table{width:100%;border-collapse:collapse;min-width:760px}
.mail-reactions-table th,.mail-reactions-table td{padding:12px 13px;border-bottom:1px solid #edf1f5;text-align:left;font-size:13px;vertical-align:middle}
.mail-reactions-table th{color:#64748b;font-weight:750;background:#f8fafc;white-space:nowrap}
.mail-reactions-table td:first-child{min-width:240px;color:#0f172a}
.mail-reactions-table td:nth-child(2){white-space:nowrap;color:#475569}
.mail-reactions-table .reaction-cell{text-align:center;font-size:15px;font-weight:800}
.subscriber-tags-card{min-height:180px}
.compact-empty-state{min-height:95px}
.subscriber-card-grid .subscriber-history-card{margin:0}
.subscriber-card-grid .subscriber-timeline-scroll{max-height:330px}
html[data-theme="dark"] .mail-reactions-table th{background:#151f31;color:#93a4bd}
html[data-theme="dark"] .mail-reactions-table th,
html[data-theme="dark"] .mail-reactions-table td{border-color:#243148}
html[data-theme="dark"] .mail-reactions-table td:first-child{color:#e5edf8}
html[data-theme="dark"] .mail-reactions-table td:nth-child(2){color:#cbd5e1}
@media(max-width:1100px){.subscriber-bottom-grid{grid-template-columns:1fr}}


/* Advanced subscribers filter 0.1.28 */
.advanced-filter-field{display:block}
.advanced-filter-label{display:block;margin-bottom:8px;font-weight:750;color:#475569}
.filter-scroll-list{
  max-height:190px;
  overflow-y:auto;
  border:1px solid #dbe3ed;
  border-radius:10px;
  padding:6px;
  background:#fff;
}
.filter-scroll-list label{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px 7px;
  border-radius:8px;
  font-size:13px;
  line-height:1.35;
  cursor:pointer;
}
.filter-scroll-list label:hover{background:#f8fafc}
.filter-scroll-list input[type="checkbox"]{
  width:16px;
  height:16px;
  margin-top:1px;
  flex:0 0 16px;
}
.advanced-filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
html[data-theme="dark"] .advanced-filter-label{color:#cbd5e1}
html[data-theme="dark"] .filter-scroll-list{
  background:#111a2b;
  border-color:#2a3951;
}
html[data-theme="dark"] .filter-scroll-list label:hover{background:#17233a}
@media(max-width:720px){
  .advanced-filter-grid{grid-template-columns:1fr}
}


/* Advanced filter select arrows 0.1.30 */
.advanced-filter-menu select{
  padding:0 50px 0 14px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  background-size:14px 14px;
}
html[data-theme="dark"] .advanced-filter-menu select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Notifications 0.1.31 */
.notification-btn{position:relative}
.notification-btn .notification-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  border:2px solid #fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  box-shadow:0 2px 6px rgba(239,68,68,.25);
  z-index:3;
}
.notification-btn img{width:27px;height:27px}
.notifications-head h1{font-size:38px;margin:0 0 4px}
.notifications-head p{margin:0;color:#64748b;font-size:17px}
.notifications-empty{
  margin-top:28px;
  min-height:340px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:36px;
}
.notifications-empty-icon{
  width:64px;
  height:64px;
  border-radius:18px;
  background:#eff6ff;
  display:grid;
  place-items:center;
  margin-bottom:16px;
}
.notifications-empty-icon img{width:31px;height:31px}
.notifications-empty h2{margin:0 0 8px;font-size:22px}
.notifications-empty p{margin:0;color:#64748b}
.notifications-list{display:grid;gap:10px;margin-top:24px}
.notification-item{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
}
.notification-item.is-unread{border-color:#bfdbfe;background:#f8fbff}
.notification-item p{margin:5px 0 0;color:#64748b}
.notification-item time{color:#94a3b8;font-size:12px;white-space:nowrap}
html[data-theme="dark"] .notification-btn .notification-badge{border-color:#0f172a}
html[data-theme="dark"] .notifications-empty,
html[data-theme="dark"] .notification-item{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .notifications-empty-icon{background:#17233a}
html[data-theme="dark"] .notification-item.is-unread{background:#13203a;border-color:#315681}

/* Groups subscribers 0.1.32 */
.section-tab{display:inline-flex;text-decoration:none}
.groups-head{align-items:flex-start}
.groups-actions{align-items:center}
.group-top-btn{gap:8px}
.group-top-btn img,.bulk-icon-btn img{width:20px;height:20px;object-fit:contain}
.groups-search-row{margin-top:16px}
.groups-search{width:100%}
.groups-table-card{margin-top:14px}
.groups-bulk-toolbar{min-height:62px}
.bulk-icon-btn{gap:8px}
.groups-table-scroll{
  max-height:690px;
  overflow-y:auto;
  overflow-x:auto;
}
.groups-table{min-width:900px}
.groups-table th,.groups-table td{vertical-align:middle}
.group-checkbox-col{width:48px}
.group-favorite-col{width:54px;text-align:center!important}
.groups-table td:nth-child(2){text-align:center}
.favorite-star{
  appearance:none;
  border:0;
  background:transparent;
  color:#94a3b8;
  font-size:24px;
  line-height:1;
  padding:2px 5px;
  cursor:pointer;
  transition:transform .15s ease,color .15s ease;
}
.favorite-star:hover{transform:scale(1.1)}
.favorite-star.is-favorite{color:#f5b301}
.favorite-placeholder{display:inline-block;color:#cbd5e1;font-size:22px;line-height:1}
.group-name-link{color:#0667dc;font-weight:700;text-decoration:none}
.group-name-link:hover{text-decoration:underline}
.all-subscribers-row{background:#eff6ff}
.all-subscribers-name{font-weight:800}
.all-group-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:8px;color:#1677ff}
.groups-table-footer{
  min-height:52px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  color:#64748b;
  font-size:13px;
  border-top:1px solid #e8edf4;
}
.favorite-limit-note strong{color:#0f172a}
html[data-theme="dark"] .all-subscribers-row{background:#14233c}
html[data-theme="dark"] .group-name-link{color:#5da4ff}
html[data-theme="dark"] .favorite-placeholder{color:#526078}
html[data-theme="dark"] .groups-table-footer{border-color:#243148;color:#93a4bd}
html[data-theme="dark"] .favorite-limit-note strong{color:#e5edf8}
@media(max-width:1000px){
  .groups-actions{justify-content:flex-start}
}

/* Groups subscribers 0.1.33 */
.groups-table .group-name-link{font-size:15px;line-height:1.35}
.groups-table .all-subscribers-name{font-size:15px}
.groups-table th:nth-child(6),
.groups-table td:nth-child(6){min-width:150px}
.all-subscribers-row td{color:#0f172a}
.all-subscribers-row td:not(:nth-child(3)):not(:nth-child(4)){color:transparent}
html[data-theme="dark"] .all-subscribers-row td:not(:nth-child(3)):not(:nth-child(4)){color:transparent}

/* All subscribers icon 0.1.34 */
.all-subscribers-name{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.all-subscribers-icon{
  width:19px;
  height:19px;
  flex:0 0 19px;
  display:inline-block;
  background:currentColor;
  -webkit-mask:url("icon-all-subscribers.png") center/contain no-repeat;
  mask:url("icon-all-subscribers.png") center/contain no-repeat;
}

/* Add subscriber group 0.1.35 */
.group-add-page{max-width:1380px}
.group-add-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:12px;
  color:#64748b;
  text-decoration:none;
  font-size:14px;
  font-weight:650;
}
.group-add-back:hover{color:#1677ff}
.group-add-heading h1{margin:0;font-size:38px;line-height:1.1}
.group-add-heading p{margin:6px 0 0;color:#64748b;font-size:16px}
.group-add-notices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:20px 0 14px;
}
.group-add-notice{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid;
}
.group-add-notice .notice-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  font-size:20px;
  font-weight:850;
}
.group-add-notice small{
  display:block;
  margin-bottom:2px;
  font-weight:750;
}
.group-add-notice strong{
  display:block;
  color:#0f172a;
  font-size:15px;
}
.group-add-notice p{
  margin:4px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
}
.notice-success{background:#f0fdf4;border-color:#bbf7d0}
.notice-success .notice-icon{background:#22c55e;color:#fff}
.notice-success small{color:#16a34a}
.notice-warning{background:#fffaf0;border-color:#fde68a}
.notice-warning .notice-icon{background:#f59e0b;color:#fff}
.notice-warning small{color:#d97706}

.group-add-card{
  background:#fff;
  border:1px solid #dfe7f0;
  border-radius:16px;
  overflow:hidden;
}
.group-add-form{
  display:grid;
  gap:17px;
  padding:22px 24px 18px;
}
.group-form-field{
  display:grid;
  gap:8px;
  min-width:0;
}
.group-form-field>span{
  font-size:14px;
  font-weight:750;
  color:#17233d;
}
.group-form-field input,
.group-form-field select,
.group-editor-toolbar select{
  width:100%;
  height:46px;
  padding:0 14px;
  border:1px solid #d8e1ec;
  border-radius:10px;
  background:#fff;
  color:#17233d;
  outline:none;
  font:inherit;
}
.group-form-field input:focus,
.group-form-field select:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}
.group-form-row-with-action{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:end;
}
.group-inline-action{
  min-width:190px;
  height:46px;
  gap:8px;
  white-space:nowrap;
}
.group-inline-icon{font-size:18px;color:#1677ff}
.group-template-info{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:10px;
  background:#eef7ff;
  color:#47617d;
  font-size:13px;
}
.template-info-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1677ff;
  color:#fff;
  font-weight:850;
}
.group-subject-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}
.group-variable-btn{height:46px;min-width:140px}
.group-editor{
  border:1px solid #d8e1ec;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.group-editor-toolbar{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:7px 9px;
  border-bottom:1px solid #e5ebf2;
  background:#fbfcfe;
  flex-wrap:wrap;
}
.group-editor-toolbar button{
  width:34px;
  height:34px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#17233d;
  cursor:pointer;
  font-size:15px;
}
.group-editor-toolbar button:hover{background:#eef3f8}
.group-editor-toolbar select{
  width:auto;
  min-width:110px;
  height:34px;
  padding:0 28px 0 10px;
  font-size:13px;
}
.editor-sep{width:1px;height:24px;background:#dbe3ed;margin:0 4px}
.editor-spacer{flex:1}
.group-editor-toolbar .editor-vars{width:auto;padding:0 10px;border:1px solid #dbe3ed;background:#fff}
.group-editor-body{
  min-height:220px;
  padding:18px 20px;
  outline:none;
  color:#17233d;
  font-size:14px;
  line-height:1.55;
}
.group-editor-body p{margin:0 0 16px}
.group-add-actions{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 24px;
  border-top:1px solid #e5ebf2;
  background:#fbfcfe;
}
.group-save-btn{min-width:150px}

html[data-theme="dark"] .group-add-card,
html[data-theme="dark"] .group-editor,
html[data-theme="dark"] .group-form-field input,
html[data-theme="dark"] .group-form-field select,
html[data-theme="dark"] .group-editor-toolbar select{
  background:#111a2b;
  border-color:#2a3951;
  color:#e5edf8;
}
html[data-theme="dark"] .group-form-field>span,
html[data-theme="dark"] .group-add-notice strong,
html[data-theme="dark"] .group-editor-body{color:#e5edf8}
html[data-theme="dark"] .group-editor-toolbar,
html[data-theme="dark"] .group-add-actions{background:#0f1728;border-color:#243148}
html[data-theme="dark"] .group-editor-toolbar button{color:#e5edf8}
html[data-theme="dark"] .group-editor-toolbar button:hover{background:#17233a}
html[data-theme="dark"] .group-editor-toolbar .editor-vars{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .group-template-info{background:#13263e;color:#b9c8da}
html[data-theme="dark"] .notice-success{background:#10271d;border-color:#235b3b}
html[data-theme="dark"] .notice-warning{background:#2b2212;border-color:#6a4d10}

@media(max-width:900px){
  .group-add-notices{grid-template-columns:1fr}
  .group-form-row-with-action,.group-subject-row{grid-template-columns:1fr}
  .group-inline-action,.group-variable-btn{width:100%}
}



/* Group add form refinements 0.1.38 */
.group-add-page .subscriber-back-btn{
  margin-bottom:28px;
}
.group-add-page .group-form-field select{
  padding-right:52px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  background-size:14px 14px;
}
html[data-theme="dark"] .group-add-page .group-form-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Group creation fixed layout 0.1.40 */
.group-add-page .subscriber-back-btn{
  margin-bottom:28px;
}
.group-add-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
  align-items:start;
}
.group-add-sidebar{
  display:grid;
  gap:14px;
}
.group-add-sidebar .group-add-notice{
  margin:0;
}
.group-add-page .group-add-card{
  min-width:0;
}
.group-add-page .group-add-form{
  display:grid;
  gap:18px;
  padding:22px 24px 18px;
}
.group-add-page .group-form-row-with-action{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:end;
}
.group-add-page .group-form-field select{
  padding-right:52px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  background-size:14px 14px;
}
html[data-theme="dark"] .group-add-page .group-form-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media(max-width:1050px){
  .group-add-layout{grid-template-columns:1fr}
  .group-add-sidebar{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .group-add-sidebar{grid-template-columns:1fr}
  .group-add-page .group-form-row-with-action{grid-template-columns:1fr}
}

/* Group add minor refinements 0.1.41 */
.group-add-heading{margin-bottom:16px;}
.group-add-heading p{margin-bottom:0;}
.group-inline-icon.view-icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 18px;
  color:#1677ff;
  background:currentColor;
  -webkit-mask:url("icon-eye-preview.png") center/contain no-repeat;
  mask:url("icon-eye-preview.png") center/contain no-repeat;
  font-size:0;
}
html[data-theme="dark"] .group-inline-icon.view-icon{color:#8eb7ff;}

/* Group add modals 0.1.42 */
.sf-modal[hidden]{display:none!important}
.sf-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:24px;
}
.sf-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .12s ease;
}
.sf-modal-dialog{
  position:relative;
  z-index:1;
  width:min(680px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  border:1px solid #dbe3ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 26px 70px rgba(15,23,42,.2);
  transform:translateY(8px) scale(.985);
  opacity:0;
  transition:transform .12s ease,opacity .12s ease;
}
.sf-modal.is-open .sf-modal-backdrop{opacity:1}
.sf-modal.is-open .sf-modal-dialog{transform:none;opacity:1}
.sf-modal-small{width:min(520px,calc(100vw - 32px))}
.sf-modal-preview{width:min(760px,calc(100vw - 32px))}
.sf-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px 16px;
  border-bottom:1px solid #e5ebf2;
}
.sf-modal-head h2{margin:0;font-size:22px}
.sf-modal-head p{margin:5px 0 0;color:#64748b;font-size:13px}
.sf-modal-close{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border:0;
  border-radius:9px;
  background:#f1f5f9;
  color:#64748b;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.sf-modal-close:hover{background:#e2e8f0;color:#0f172a}
.sf-modal-body{padding:20px 22px}
.sf-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 22px 20px;
  border-top:1px solid #e5ebf2;
}
.sf-modal-open{overflow:hidden}

.email-preview-meta{
  display:grid;
  gap:8px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  font-size:13px;
}
.email-preview-meta div{display:flex;gap:8px;flex-wrap:wrap}
.email-preview-meta span{color:#64748b;min-width:48px}
.email-preview-card{
  max-width:560px;
  margin:0 auto;
  padding:32px;
  border:1px solid #dbe3ed;
  border-radius:16px;
  background:#fff;
  text-align:left;
}
.email-preview-brand{
  margin-bottom:24px;
  color:#1677ff;
  font-size:18px;
  font-weight:850;
}
.email-preview-card h3{margin:0 0 18px;font-size:24px}
.email-preview-card p{margin:0 0 14px;color:#334155;line-height:1.55}
.email-preview-button{
  display:inline-block;
  margin:6px 0 20px;
  padding:12px 20px;
  border-radius:9px;
  background:#1677ff;
  color:#fff;
  font-weight:800;
}
.email-preview-card .email-preview-note{font-size:12px;color:#94a3b8}

html[data-theme="dark"] .sf-modal-dialog,
html[data-theme="dark"] .email-preview-card{
  background:#111a2b;
  border-color:#2a3951;
}
html[data-theme="dark"] .sf-modal-head,
html[data-theme="dark"] .sf-modal-actions{border-color:#243148}
html[data-theme="dark"] .sf-modal-close{background:#17233a;color:#93a4bd}
html[data-theme="dark"] .email-preview-meta{background:#0f1728;border-color:#2a3951}
html[data-theme="dark"] .email-preview-card p{color:#cbd5e1}

/* Fixed group page modals 0.1.43 */
.group-modal-overlay[hidden]{display:none!important}
.group-modal-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.group-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .12s ease;
}
.group-modal-dialog{
  position:relative;
  z-index:1;
  width:min(680px,calc(100vw - 48px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  border:1px solid #dbe3ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 26px 70px rgba(15,23,42,.24);
  transform:translateY(8px) scale(.985);
  opacity:0;
  transition:transform .12s ease,opacity .12s ease;
}
.group-modal-overlay.is-open .group-modal-backdrop{opacity:1}
.group-modal-overlay.is-open .group-modal-dialog{transform:none;opacity:1}
.group-modal-small{width:min(520px,calc(100vw - 48px))}
.group-modal-preview{width:min(760px,calc(100vw - 48px))}
.group-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px 16px;
  border-bottom:1px solid #e5ebf2;
}
.group-modal-head h2{margin:0;font-size:22px}
.group-modal-head p{margin:5px 0 0;color:#64748b;font-size:13px}
.group-modal-close{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border:0;
  border-radius:9px;
  background:#f1f5f9;
  color:#64748b;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.group-modal-close:hover{background:#e2e8f0;color:#0f172a}
.group-modal-body{padding:20px 22px}
.group-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 22px 20px;
  border-top:1px solid #e5ebf2;
}
.group-modal-open{overflow:hidden}
.group-form-error{
  margin:0 24px;
  padding:11px 13px;
  border:1px solid #fecaca;
  border-radius:10px;
  background:#fff1f2;
  color:#b91c1c;
  font-size:13px;
  font-weight:650;
}
html[data-theme="dark"] .group-modal-dialog,
html[data-theme="dark"] .email-preview-card{
  background:#111a2b;
  border-color:#2a3951;
}
html[data-theme="dark"] .group-modal-head,
html[data-theme="dark"] .group-modal-actions{border-color:#243148}
html[data-theme="dark"] .group-modal-close{background:#17233a;color:#93a4bd}
@media(max-width:720px){
  .group-modal-overlay{padding:16px}
  .group-modal-small,.group-modal-preview{width:calc(100vw - 32px)}
}


/* Custom sender select 0.1.44 */
.sender-select{position:relative}
.sf-select__trigger{
  width:100%;
  min-height:64px;
  padding:12px 18px;
  border:1px solid #d8e1ec;
  border-radius:12px;
  background:#fff;
  color:#17233d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sf-select__trigger:hover{border-color:#bfd0e3;background:#fbfdff}
.sf-select.is-open .sf-select__trigger,
.sf-select__trigger:focus{
  outline:none;
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}
.sf-select__lead{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.sf-select__icon{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  display:grid;place-items:center;font-size:18px;font-weight:700;
  color:#1677ff;background:#edf5ff;border:1px solid #d8e8ff;
}
.sf-select__content{display:grid;gap:2px;min-width:0}
.sf-select__content small{font-size:12px;color:#7a8aa0;font-weight:700}
.sf-select__content strong{font-size:16px;line-height:1.2;color:#17233d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-select__content em{font-style:normal;font-size:13px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-select__chevron{
  width:18px;height:18px;flex:0 0 18px;color:#5b6c83;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .15s ease;
}
.sf-select.is-open .sf-select__chevron{transform:rotate(180deg)}
.sf-select__menu{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;
  padding:8px;border:1px solid #d8e1ec;border-radius:14px;background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
}
.sf-select__option{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:0;border-radius:10px;background:transparent;color:#17233d;
  text-align:left;cursor:pointer;transition:background-color .15s ease;
}
.sf-select__option:hover{background:#f5f9ff}
.sf-select__option-main{display:grid;gap:3px;min-width:0}
.sf-select__option-name{font-size:15px;font-weight:700;color:#17233d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-select__option-email{font-size:13px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-select__option-check{opacity:0;color:#1677ff;font-weight:900}
.sf-select__option.is-selected{background:#eef5ff}
.sf-select__option.is-selected .sf-select__option-check{opacity:1}
html[data-theme="dark"] .sf-select__trigger,
html[data-theme="dark"] .sf-select__menu{background:#111a2b;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .sf-select__trigger:hover{background:#142038;border-color:#355178}
html[data-theme="dark"] .sf-select__content strong,
html[data-theme="dark"] .sf-select__option-name{color:#e5edf8}
html[data-theme="dark"] .sf-select__content small,
html[data-theme="dark"] .sf-select__content em,
html[data-theme="dark"] .sf-select__option-email{color:#9fb0c5}
html[data-theme="dark"] .sf-select__icon{background:#13263f;border-color:#274872;color:#8eb7ff}
html[data-theme="dark"] .sf-select__option:hover{background:#17233a}
html[data-theme="dark"] .sf-select__option.is-selected{background:#163357}

/* Group edit page 0.1.46 */
.group-add-page .group-name-link{cursor:pointer}

/* Categories 0.1.47 */
.categories-page{max-width:1380px}
.categories-page .subscriber-back-btn{margin-bottom:28px}
.categories-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.categories-head h1{margin:0;font-size:38px;line-height:1.1}
.categories-head p{margin:6px 0 0;color:#64748b;font-size:16px}
.categories-card{
  overflow:hidden;
  border:1px solid #dfe7f0;
  border-radius:16px;
  background:#fff;
}
.categories-table-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px 88px;
  gap:12px;
  align-items:center;
  min-height:52px;
  padding:0 18px;
  border-bottom:1px solid #e6edf5;
  background:#f8fafc;
  color:#64748b;
  font-size:13px;
  font-weight:800;
}
.categories-table-head span:nth-child(2),
.categories-table-head span:nth-child(3){text-align:center}
.categories-list{display:grid}
.category-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px 88px;
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:10px 18px;
  border-bottom:1px solid #edf2f7;
}
.category-row:last-child{border-bottom:0}
.category-row:hover{background:#fbfdff}
.category-open{
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  border:0;
  background:transparent;
  padding:0;
  color:#17233d;
  text-align:left;
  cursor:pointer;
}
.category-folder{
  position:relative;
  width:44px;
  height:32px;
  flex:0 0 44px;
  border-radius:6px;
  background:#5d9cff;
  box-shadow:inset 0 -4px 8px rgba(0,81,210,.08);
}
.category-folder:before{
  content:"";
  position:absolute;
  top:-6px;
  left:4px;
  width:20px;
  height:9px;
  border-radius:5px 5px 0 0;
  background:#83b4ff;
}
.category-copy{display:grid;gap:3px;min-width:0}
.category-copy strong{
  font-size:16px;
  color:#17233d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.category-copy small{font-size:13px;color:#718197}
.category-count-box{
  width:42px;
  height:42px;
  margin:auto;
  border:1px solid #d8e1ec;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f8fafc;
  color:#17233d;
  font-size:15px;
  font-weight:850;
}
.category-delete-btn{
  width:42px;
  height:42px;
  margin:auto;
  border:1px solid #d8e1ec;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#64748b;
  font-size:22px;
  cursor:pointer;
}
.category-delete-btn:hover{
  border-color:#fecaca;
  background:#fff1f2;
  color:#dc2626;
}
.categories-empty{
  min-height:220px;
  padding:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
}
.categories-empty strong{font-size:18px}
.categories-empty span{color:#64748b}

.category-editor-dialog{width:min(680px,calc(100vw - 48px))}
.category-editor-body{display:grid;gap:18px}
.category-groups-title{
  margin-bottom:8px;
  font-size:14px;
  font-weight:800;
  color:#17233d;
}
.category-groups-search{
  height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  margin-bottom:10px;
  border:1px solid #d8e1ec;
  border-radius:10px;
  background:#fff;
  color:#8a99ac;
}
.category-groups-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#17233d;
  font:inherit;
}
.category-group-list{
  max-height:310px;
  overflow-y:auto;
  border:1px solid #dfe7f0;
  border-radius:12px;
  background:#fff;
}
.category-group-option{
  min-height:62px;
  display:grid;
  grid-template-columns:22px 28px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:9px 12px;
  border-bottom:1px solid #edf2f7;
  cursor:pointer;
}
.category-group-option:last-child{border-bottom:0}
.category-group-option:hover{background:#f8fbff}
.category-group-option input{
  width:18px;
  height:18px;
  accent-color:#1677ff;
}
.category-group-option-icon{font-size:19px;color:#17233d}
.category-group-option-copy{display:grid;gap:3px;min-width:0}
.category-group-option-copy strong{
  font-size:14px;
  color:#17233d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.category-group-option-copy small{font-size:12px;color:#718197}
.category-group-empty{
  padding:24px;
  text-align:center;
  color:#64748b;
  border:1px dashed #d8e1ec;
  border-radius:12px;
}
.category-editor-error{
  padding:10px 12px;
  border:1px solid #fecaca;
  border-radius:9px;
  background:#fff1f2;
  color:#b91c1c;
  font-size:13px;
  font-weight:700;
}

.group-category-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:8px;
  background:#eef5ff;
  color:#2764a5;
  font-size:12px;
  font-weight:750;
}
.group-category-badge.is-none{
  background:#eef1f4;
  color:#7a8797;
}

html[data-theme="dark"] .categories-card,
html[data-theme="dark"] .category-groups-search,
html[data-theme="dark"] .category-group-list{
  background:#111a2b;
  border-color:#2a3951;
}
html[data-theme="dark"] .categories-table-head{
  background:#0f1728;
  border-color:#243148;
}
html[data-theme="dark"] .category-row{border-color:#243148}
html[data-theme="dark"] .category-row:hover{background:#142038}
html[data-theme="dark"] .category-open,
html[data-theme="dark"] .category-copy strong,
html[data-theme="dark"] .category-count-box,
html[data-theme="dark"] .category-groups-title,
html[data-theme="dark"] .category-group-option-copy strong,
html[data-theme="dark"] .category-groups-search input{color:#e5edf8}
html[data-theme="dark"] .category-count-box,
html[data-theme="dark"] .category-delete-btn{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .category-group-option{border-color:#243148}
html[data-theme="dark"] .category-group-option:hover{background:#17233a}
html[data-theme="dark"] .group-category-badge{background:#173052;color:#91bdff}
html[data-theme="dark"] .group-category-badge.is-none{background:#252f3d;color:#a7b2c0}

@media(max-width:760px){
  .categories-head{align-items:stretch;flex-direction:column}
  .categories-head .btn{width:100%}
  .categories-table-head,
  .category-row{grid-template-columns:minmax(0,1fr) 64px 64px}
}


/* Categories 0.1.48 */
.categories-list{
  display:grid;
  max-height:552px;
  overflow-y:auto;
}
.category-group-option{
  grid-template-columns:22px 24px minmax(0,1fr);
}
.category-group-option-icon{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
}
.category-group-option-icon img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}
.group-category-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
html[data-theme="dark"] .categories-list{border-color:#2a3951}

/* Categories empty state fix 0.1.49 */
.categories-empty[hidden]{
  display:none !important;
}

/* Bulk add to category 0.1.50 */
.bulk-category-list{
  display:grid;
  gap:8px;
  max-height:360px;
  overflow-y:auto;
}
.bulk-category-option{
  min-height:62px;
  display:grid;
  grid-template-columns:22px 40px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.bulk-category-option:hover{
  border-color:#cbd9e9;
  background:#f8fbff;
}
.bulk-category-option input{
  width:18px;
  height:18px;
  accent-color:#1677ff;
}
.bulk-category-folder{
  position:relative;
  width:36px;
  height:26px;
  border-radius:6px;
  background:#5d9cff;
}
.bulk-category-folder:before{
  content:"";
  position:absolute;
  top:-5px;
  left:4px;
  width:17px;
  height:7px;
  border-radius:4px 4px 0 0;
  background:#83b4ff;
}
.bulk-category-copy{
  display:grid;
  gap:3px;
  min-width:0;
}
.bulk-category-copy strong{
  font-size:14px;
  color:#17233d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bulk-category-copy small{
  font-size:12px;
  color:#718197;
}
.bulk-category-empty{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
}
.bulk-category-empty strong{font-size:17px}
.bulk-category-empty span{color:#64748b;font-size:13px}
.bulk-category-empty[hidden]{display:none!important}

html[data-theme="dark"] .bulk-category-option{
  background:#111a2b;
  border-color:#2a3951;
}
html[data-theme="dark"] .bulk-category-option:hover{
  background:#17233a;
  border-color:#355178;
}
html[data-theme="dark"] .bulk-category-copy strong{color:#e5edf8}
html[data-theme="dark"] .bulk-category-copy small{color:#9fb0c5}

/* Linked categories in group editor 0.1.51 */
.group-linked-categories{
  min-height:48px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border:1px solid #d8e1ec;
  border-radius:10px;
  background:#fff;
}
.group-linked-categories-hint{
  margin-top:2px;
  color:#7a8aa0;
  font-size:12px;
  line-height:1.45;
}
html[data-theme="dark"] .group-linked-categories{
  background:#111a2b;
  border-color:#2a3951;
}
html[data-theme="dark"] .group-linked-categories-hint{
  color:#9fb0c5;
}


/* Group categories management 0.1.52 */
.group-category-manage-btn{
  width:max-content;
  min-height:42px;
  margin-top:2px;
  gap:8px;
}


/* Archive 0.1.53 */
.archive-page{max-width:1380px}
.archive-page .subscriber-back-btn{margin-bottom:28px}
.archive-head h1{margin:0;font-size:38px;line-height:1.1}
.archive-head p{margin:6px 0 0;color:#64748b;font-size:16px}
.archive-info{
  margin:18px 0 14px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
}
.archive-info-icon{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;background:#1677ff;color:#fff;font-weight:850}
.archive-info strong{display:block;color:#17233d;font-size:14px}
.archive-info p{margin:3px 0 0;color:#52657d;font-size:13px;line-height:1.45}
.archive-card{overflow:hidden;border:1px solid #dfe7f0;border-radius:16px;background:#fff}
.archive-table-head,.archive-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 110px 90px;gap:12px;align-items:center;padding:0 18px}
.archive-table-head{min-height:52px;border-bottom:1px solid #e6edf5;background:#f8fafc;color:#64748b;font-size:13px;font-weight:800}
.archive-table-head span:not(:first-child){text-align:center}
.archive-row{min-height:72px;border-bottom:1px solid #edf2f7}
.archive-row:last-child{border-bottom:0}
.archive-row:hover{background:#fbfdff}
.archive-name{display:grid;gap:3px;min-width:0}
.archive-name strong{font-size:15px;color:#17233d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archive-name small{font-size:12px;color:#94a3b8}
.archive-count{text-align:center;font-weight:750;color:#17233d}
.archive-action-btn{width:40px;height:40px;margin:auto;border:1px solid #d8e1ec;border-radius:10px;background:#fff;cursor:pointer;display:grid;place-items:center;position:relative}
.archive-action-btn:before{content:"";width:19px;height:19px;background:currentColor;display:block}
.archive-action-btn.restore{color:#1677ff}
.archive-action-btn.restore:before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7H3V2.5a1 1 0 1 0-2 0V9a1 1 0 0 0 1 1h6.5a1 1 0 1 0 0-2H5.1A8 8 0 1 1 4 12a1 1 0 1 0-2 0A10 10 0 1 0 4.2 5.8L2.7 7.3A1 1 0 1 0 4.1 8.7L7.5 5.3V7Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7H3V2.5a1 1 0 1 0-2 0V9a1 1 0 0 0 1 1h6.5a1 1 0 1 0 0-2H5.1A8 8 0 1 1 4 12a1 1 0 1 0-2 0A10 10 0 1 0 4.2 5.8L2.7 7.3A1 1 0 1 0 4.1 8.7L7.5 5.3V7Z'/%3E%3C/svg%3E") center/contain no-repeat}
.archive-action-btn.delete{color:#ef4444}

.archive-action-btn.restore:hover{background:#eef6ff;border-color:#b9d7ff}
.archive-action-btn.delete:hover{background:#fff1f2;border-color:#fecaca}
.archive-empty{min-height:220px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.archive-empty[hidden]{display:none!important}
.archive-empty strong{font-size:18px;color:#17233d}.archive-empty span{color:#64748b}
html[data-theme="dark"] .archive-info{background:#13263e;border-color:#274872}
html[data-theme="dark"] .archive-info strong,html[data-theme="dark"] .archive-name strong,html[data-theme="dark"] .archive-count,html[data-theme="dark"] .archive-empty strong{color:#e5edf8}
html[data-theme="dark"] .archive-info p{color:#9fb0c5}
html[data-theme="dark"] .archive-card{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .archive-table-head{background:#0f1728;border-color:#243148}
html[data-theme="dark"] .archive-row{border-color:#243148}
html[data-theme="dark"] .archive-row:hover{background:#142038}
html[data-theme="dark"] .archive-action-btn{background:#111a2b;border-color:#2a3951}
@media(max-width:760px){.archive-table-head,.archive-row{grid-template-columns:minmax(0,1fr) 120px 64px 64px;padding:0 12px}.archive-table-head span:nth-child(2){font-size:0}.archive-table-head span:nth-child(2):after{content:"Подписчиков";font-size:12px}}

/* Archive delete icon 0.1.54 */
.archive-action-btn.delete:before{
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask:url("icon-archive-delete.png") center/contain no-repeat;
  mask:url("icon-archive-delete.png") center/contain no-repeat;
}

/* Groups filter 0.1.55 */
.group-filter-wrap{
  position:relative;
}
.group-filter-panel[hidden]{
  display:none!important;
}
.group-filter-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:90;
  width:min(660px,calc(100vw - 40px));
  padding:17px;
  border:1px solid #dbe3ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 46px rgba(15,23,42,.15);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .1s ease, transform .1s ease;
}
.group-filter-panel.is-open{
  opacity:1;
  transform:none;
}
.group-filter-first-row{
  display:grid;
  grid-template-columns:minmax(190px,1.25fr) minmax(150px,.85fr) minmax(150px,.85fr);
  gap:10px;
}
.group-filter-first-row label{
  display:grid;
  gap:7px;
  min-width:0;
  color:#475569;
  font-size:13px;
  font-weight:750;
}
.group-filter-first-row select,
.group-filter-first-row input{
  width:100%;
  height:44px;
  padding:0 42px 0 12px;
  border:1px solid #dbe3ed;
  border-radius:10px;
  background:#fff;
  color:#334155;
  font:inherit;
  outline:none;
}
.group-filter-first-row select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6c83' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 20px center;
  background-size:14px;
}
.group-filter-first-row select:focus,
.group-filter-first-row input:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}
.group-top-btn.filter-active{
  border-color:#7eb4ff;
  background:#eef5ff;
  color:#136dde;
}
html[data-theme="dark"] .group-filter-panel{
  background:#111a2b;
  border-color:#2a3951;
  box-shadow:0 20px 46px rgba(0,0,0,.35);
}
html[data-theme="dark"] .group-filter-first-row label{
  color:#cbd5e1;
}
html[data-theme="dark"] .group-filter-first-row select,
html[data-theme="dark"] .group-filter-first-row input{
  background:#151f31;
  border-color:#2a3951;
  color:#e5edf8;
}
html[data-theme="dark"] .group-filter-first-row select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a4bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .group-top-btn.filter-active{
  border-color:#355f95;
  background:#163357;
  color:#91bdff;
}
@media(max-width:760px){
  .group-filter-panel{
    position:fixed;
    top:50%;
    left:50%;
    right:auto;
    width:calc(100vw - 32px);
    transform:translate(-50%,-48%);
  }
  .group-filter-panel.is-open{
    transform:translate(-50%,-50%);
  }
  .group-filter-first-row{
    grid-template-columns:1fr;
  }
}

/* Groups table and delete modal 0.1.56 */

/* Keep the table header visible while scrolling the groups list. */
.groups-table thead th{
  position:sticky;
  top:0;
  z-index:8;
  background:#f8fafc;
  box-shadow:0 1px 0 #e6edf5;
}
html[data-theme="dark"] .groups-table thead th{
  background:#0f1728;
  box-shadow:0 1px 0 #243148;
}

/* Group names use the same text size as the section tabs. */
.section-tab,
.groups-table .group-name-link,
.groups-table .all-subscribers-name{
  font-size:15px;
}

/* Bulk delete button icon. */
.bulk-delete-btn{
  gap:8px;
}
.bulk-delete-btn img{
  width:19px;
  height:19px;
  object-fit:contain;
  filter:invert(23%) sepia(91%) saturate(3630%) hue-rotate(349deg) brightness(93%) contrast(84%);
}

/* Delete confirmation. */
.delete-groups-dialog{
  width:min(560px,calc(100vw - 48px));
}
.delete-groups-warning{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:15px 16px;
  border:1px solid #fecaca;
  border-radius:12px;
  background:#fff7f7;
}
.delete-groups-warning-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:20px;
  font-weight:900;
}
.delete-groups-warning p{
  margin:1px 0 0;
  color:#334155;
  font-size:14px;
  line-height:1.5;
}
.delete-groups-selected{
  margin-top:13px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.btn-danger-confirm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border:1px solid #ef4444;
  border-radius:10px;
  background:#ef4444;
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.btn-danger-confirm:hover{
  background:#dc2626;
  border-color:#dc2626;
}
.btn-danger-confirm img{
  width:19px;
  height:19px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
html[data-theme="dark"] .delete-groups-warning{
  background:#2b171a;
  border-color:#6b2f35;
}
html[data-theme="dark"] .delete-groups-warning p{
  color:#e5edf8;
}

/* Subscriber settings 0.1.58 */
.subscriber-settings-page{max-width:1380px}
.subscriber-settings-heading{margin-bottom:8px}
.subscriber-settings-heading h1{margin:0;font-size:38px;line-height:1.1}
.subscriber-settings-heading p{margin:7px 0 0;color:#64748b;font-size:16px}
.subscriber-settings-tabs{margin-bottom:16px}
.subscriber-settings-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:14px;
}
.settings-card{
  border:1px solid #dfe7f0;
  border-radius:16px;
  background:#fff;
  padding:18px;
}
.activity-settings-card{grid-column:1/-1}
.settings-card-title{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:16px;
}
.settings-card-title h2{margin:0;font-size:20px;line-height:1.2;color:#17233d}
.settings-card-title p{margin:5px 0 0;color:#718197;font-size:13px;line-height:1.45}
.settings-card-icon{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;border-radius:12px;
  font-size:21px;font-weight:850;
}
.icon-blue{background:#edf5ff;color:#1677ff}
.icon-green{background:#ecfbf1;color:#19a657}
.icon-orange{background:#fff5df;color:#ed9708}
.icon-gray{background:#f0f3f7;color:#64748b}

.activity-settings-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);
  gap:16px;
}
.activity-settings-left{
  display:grid;
  gap:18px;
  padding:16px;
  border:1px solid #e2e8f0;
  border-radius:13px;
}
.settings-toggle-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
}
.settings-toggle-row input{position:absolute;opacity:0;pointer-events:none}
.settings-switch{
  position:relative;width:48px;height:27px;flex:0 0 48px;
  border-radius:999px;background:#cbd5e1;transition:.16s ease;
}
.settings-switch:before{
  content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;
  border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(15,23,42,.22);
  transition:.16s ease;
}
.settings-toggle-row input:checked + .settings-switch{background:#1677ff}
.settings-toggle-row input:checked + .settings-switch:before{transform:translateX(21px)}
.settings-toggle-copy{display:grid;gap:4px}
.settings-toggle-copy strong{font-size:14px;color:#17233d}
.settings-toggle-copy small{color:#718197;font-size:12px;line-height:1.4}

.settings-field{display:grid;gap:8px}
.settings-field>label{font-size:13px;font-weight:800;color:#17233d}

.simple-select{position:relative}
.simple-select-trigger{
  width:100%;height:44px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid #d8e1ec;border-radius:10px;background:#fff;color:#17233d;
  font:inherit;font-size:14px;font-weight:650;cursor:pointer;text-align:left;
}
.simple-select-trigger:hover{border-color:#bfd0e3}
.simple-select.is-open .simple-select-trigger{
  border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,.08)
}
.simple-select-arrow{
  width:14px;height:14px;flex:0 0 14px;background:#66768c;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .15s ease;
}
.simple-select.is-open .simple-select-arrow{transform:rotate(180deg)}
.simple-select-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;
  padding:6px;border:1px solid #d8e1ec;border-radius:10px;background:#fff;
  box-shadow:0 16px 34px rgba(15,23,42,.12)
}
.simple-select-menu button{
  width:100%;height:38px;padding:0 12px;border:0;border-radius:8px;background:transparent;
  color:#334155;font:inherit;font-size:14px;text-align:left;cursor:pointer;
}
.simple-select-menu button:hover{background:#f5f9ff}
.simple-select-menu button.is-selected{background:#eef5ff;color:#1677ff;font-weight:800}

.activity-actions-box{
  display:grid;align-content:start;gap:10px;padding:16px;
  border-radius:13px;background:#f5faff;border:1px solid #e6f0fb;
}
.activity-actions-title{font-size:13px;font-weight:850;color:#17233d;margin-bottom:2px}
.activity-actions-box>label{
  display:flex;align-items:center;gap:9px;font-size:13px;color:#334155;cursor:pointer
}
.activity-actions-box input{width:17px;height:17px;accent-color:#1677ff}

.settings-info-note{
  display:flex;align-items:flex-start;gap:10px;margin-top:4px;padding:11px 12px;
  border-radius:10px;background:#edf6ff;color:#55708d
}
.settings-info-note>span{
  width:21px;height:21px;flex:0 0 21px;border-radius:50%;
  display:grid;place-items:center;background:#1677ff;color:#fff;font-size:12px;font-weight:900
}
.settings-info-note p{margin:1px 0 0;font-size:12px;line-height:1.45}

.compact-settings-card{display:flex;flex-direction:column}
.inactive-status-line{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;
  border-radius:10px;background:#fff4f1;color:#6a3a31;font-size:14px
}
.inactive-clock{color:#ff594a;font-size:20px}
.inactive-status-line strong{color:#17233d}

.list-settings-card{grid-column:1/2}
.list-settings-layout{
  display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);
  gap:18px;align-items:end
}
.table-header-toggle{
  padding:2px 0 1px 16px;border-left:1px solid #e5ebf2
}

.neutral-info-card{grid-column:2/3}
.neutral-info-list{
  margin:0;padding:13px 16px 13px 34px;border-radius:10px;background:#f7f8fa;
  color:#5f6f83;font-size:12px;line-height:1.55
}
.subscriber-settings-actions{
  display:flex;align-items:center;gap:14px;margin-top:16px
}
.settings-save-btn{min-width:190px}
.settings-save-status{
  color:#159a52;font-size:13px;font-weight:750;opacity:0;transition:opacity .15s ease
}
.settings-save-status.is-visible{opacity:1}

html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .activity-settings-left,
html[data-theme="dark"] .simple-select-trigger,
html[data-theme="dark"] .simple-select-menu{
  background:#111a2b;border-color:#2a3951
}
html[data-theme="dark"] .settings-card-title h2,
html[data-theme="dark"] .settings-toggle-copy strong,
html[data-theme="dark"] .settings-field>label,
html[data-theme="dark"] .activity-actions-title,
html[data-theme="dark"] .inactive-status-line strong{
  color:#e5edf8
}
html[data-theme="dark"] .settings-card-title p,
html[data-theme="dark"] .settings-toggle-copy small{color:#9fb0c5}
html[data-theme="dark"] .simple-select-trigger{color:#e5edf8}
html[data-theme="dark"] .simple-select-menu button{color:#cbd5e1}
html[data-theme="dark"] .simple-select-menu button:hover{background:#17233a}
html[data-theme="dark"] .simple-select-menu button.is-selected{background:#163357;color:#91bdff}
html[data-theme="dark"] .activity-actions-box{background:#102238;border-color:#203a56}
html[data-theme="dark"] .activity-actions-box>label{color:#d7e1ee}
html[data-theme="dark"] .inactive-status-line{background:#2a1a19;color:#e7bbb2}
html[data-theme="dark"] .neutral-info-list{background:#151e2c;color:#aab8c8}
html[data-theme="dark"] .table-header-toggle{border-color:#243148}

@media(max-width:980px){
  .subscriber-settings-grid{grid-template-columns:1fr}
  .activity-settings-card,.list-settings-card,.neutral-info-card{grid-column:auto}
  .activity-settings-layout,.list-settings-layout{grid-template-columns:1fr}
  .table-header-toggle{border-left:0;padding-left:0}
}

.activity-period-note{margin-top:-2px}
.activity-period-note p{max-width:560px}


.system-group-row{background:#f8fbff}
.system-group-name{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.inactive-subscribers-icon{
  width:19px;
  height:19px;
  flex:0 0 19px;
  display:inline-block;
  background:currentColor;
  -webkit-mask:url("icon-inactive-subscribers.png") center/contain no-repeat;
  mask:url("icon-inactive-subscribers.png") center/contain no-repeat;
}
.system-group-row td{color:#0f172a}
.system-group-row td:not(:nth-child(3)):not(:nth-child(4)){color:transparent}
html[data-theme="dark"] .system-group-row{background:#1a2235}
html[data-theme="dark"] .system-group-row td:not(:nth-child(3)):not(:nth-child(4)){color:transparent}

.settings-defaults-btn{min-width:260px}
.subscriber-settings-actions{flex-wrap:wrap}
html[data-theme="dark"] .settings-defaults-btn{border-color:#2a3951;background:#111a2b;color:#e5edf8}


.stat-error{background:#f6f7fb;border-color:#d7dde8}
.stat-error .subscriber-stat-icon{background:#e9edf5;color:#64748b}
.stat-error em{background:#e9edf5;color:#64748b}
.stat-error-icon::before{
  content:"";
  width:20px;
  height:20px;
  display:block;
  background:currentColor;
  -webkit-mask:url("icon-error-status.png") center/contain no-repeat;
  mask:url("icon-error-status.png") center/contain no-repeat;
}
.status-pill.neutral{background:#eef2f7;color:#64748b}
.simple-select-native{display:none!important}
.subscriber-filters .simple-select{width:100%}
.subscriber-filters .simple-select-trigger{
  height:52px;
  width:100%;
  padding:0 14px;
  border-radius:12px;
  color:#334155;
  justify-content:space-between;
}
.subscriber-filters .simple-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.advanced-filter-menu .simple-select{width:100%}
.advanced-filter-menu .simple-select-trigger{
  height:42px;
  width:100%;
  padding:0 12px;
  border-radius:10px;
  justify-content:space-between;
  color:#334155;
}
.page-size-control .simple-select{min-width:72px}
.page-size-control .simple-select-trigger{
  height:34px;
  min-width:64px;
  padding:0 10px;
  border-radius:8px;
  justify-content:space-between;
  font-size:13px;
  color:#334155;
}
.page-size-control .simple-select-menu{min-width:100%;right:auto;left:0}
html[data-theme="dark"] .stat-error{background:#1f2430;border-color:#384152}
html[data-theme="dark"] .stat-error .subscriber-stat-icon{background:#2a3140;color:#c6d1e0}
html[data-theme="dark"] .stat-error em{background:#2a3140;color:#c6d1e0}
html[data-theme="dark"] .status-pill.neutral{background:#243041;color:#c1cedd}


/* Subscribers export 0.1.68 */
.export-menu-wrap{position:relative}
.export-menu[hidden]{display:none!important}
.export-menu{
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  z-index:80;
  width:360px;
  padding:16px;
  border:1px solid #dbe3ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.15);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .1s ease,transform .1s ease;
}
.export-menu.is-open{opacity:1;transform:none}
.export-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.export-menu-head strong{font-size:16px;color:#17233d}
.export-menu-head button{
  width:30px;height:30px;
  display:grid;place-items:center;
  border:0;border-radius:8px;
  background:transparent;color:#64748b;
  font-size:23px;line-height:1;cursor:pointer
}
.export-menu-head button:hover{background:#f3f6fa}
.export-section{
  display:grid;
  gap:8px;
  padding:13px 0;
  border-top:1px solid #edf1f5
}
.export-section:first-of-type{border-top:0;padding-top:0}
.export-section-title{
  margin-bottom:1px;
  color:#475569;
  font-size:13px;
  font-weight:800
}
.export-choice{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer
}
.export-choice:hover{background:#f7faff}
.export-choice input{position:absolute;opacity:0;pointer-events:none}
.export-checkmark{
  width:18px;height:18px;
  margin-top:2px;
  border:1.5px solid #9aa7b7;
  border-radius:4px;
  background:#fff;
  position:relative
}
.export-choice input:checked + .export-checkmark{
  border-color:#1677ff;
  background:#1677ff
}
.export-choice input:checked + .export-checkmark:after{
  content:"";
  position:absolute;
  left:5px;top:2px;
  width:5px;height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg)
}
.export-choice-copy{display:grid;gap:2px}
.export-choice-copy strong{font-size:13px;color:#17233d}
.export-choice-copy small{font-size:11px;color:#7a899d;line-height:1.35}
.export-submit-btn{
  width:100%;
  min-height:44px;
  margin-top:4px
}
.export-submit-btn:disabled{opacity:.7;cursor:wait}
.export-error{
  margin-top:9px;
  padding:9px 10px;
  border:1px solid #fecaca;
  border-radius:9px;
  background:#fff1f2;
  color:#b91c1c;
  font-size:12px;
  line-height:1.4
}
html[data-theme="dark"] .export-menu{
  background:#111a2b;
  border-color:#2a3951;
  box-shadow:0 18px 42px rgba(0,0,0,.4)
}
html[data-theme="dark"] .export-menu-head strong,
html[data-theme="dark"] .export-choice-copy strong{color:#e5edf8}
html[data-theme="dark"] .export-section{border-color:#243148}
html[data-theme="dark"] .export-section-title{color:#b7c4d5}
html[data-theme="dark"] .export-choice:hover{background:#17233a}
html[data-theme="dark"] .export-checkmark{background:#111a2b;border-color:#66768c}
html[data-theme="dark"] .export-choice-copy small{color:#93a4bd}
@media(max-width:720px){
  .export-menu{
    position:fixed;
    left:16px;right:16px;top:90px;
    width:auto
  }
}


/* Subscribers pagination/dropdown fixes 0.1.69 */
.page-size-control .simple-select{
  position:relative;
  z-index:30;
}
.page-size-control .simple-select-menu{
  top:auto;
  bottom:calc(100% + 6px);
  left:0;
  right:auto;
  min-width:100%;
  z-index:120;
}
.page-size-control .simple-select.is-open .simple-select-arrow{
  transform:rotate(180deg);
}
.pagination button:disabled{
  opacity:.42;
  cursor:default;
}
.pagination-ellipsis{
  min-width:24px;
  height:34px;
  display:grid;
  place-items:center;
  color:#64748b;
}
@media(max-width:760px){
  .pagination{
    flex-wrap:nowrap;
    max-width:100%;
    overflow-x:auto;
    padding-bottom:3px;
  }
}


/* Mailings 0.1.70 */
.mailings-page{max-width:1500px}
.mailings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.mailings-head h1{margin:0;font-size:42px;line-height:1.05}
.mailings-head p{margin:7px 0 0;color:#66778f;font-size:16px}
.mailings-head-actions{display:flex;gap:10px;flex-wrap:wrap}
.mailings-head-actions .btn{min-height:48px;padding:0 20px}
.mailings-tabs{margin-top:14px}

.mailing-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:16px
}
.mailing-stat{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:1px solid #d9e4f2;
  border-radius:14px;
  background:#fff
}
.mailing-stat>div{display:grid;gap:2px}
.mailing-stat small{color:#6b7b91;font-size:13px;font-weight:750}
.mailing-stat strong{font-size:29px;color:#101a33;line-height:1}
.mailing-stat-icon{
  width:50px;height:50px;display:grid;place-items:center;border-radius:13px;
  background:#edf5ff;color:#1677ff;font-size:24px
}
.mailing-stat.stat-green{background:#f3fff7;border-color:#ccefd7}
.mailing-stat.stat-green .mailing-stat-icon{background:#dff8e7;color:#16a157}
.mailing-stat.stat-orange{background:#fffaf0;border-color:#f7dfad}
.mailing-stat.stat-orange .mailing-stat-icon{background:#fff0c8;color:#ed9708}
.mailing-stat.stat-gray{background:#f8f9fc;border-color:#dce2eb}
.mailing-stat.stat-gray .mailing-stat-icon{background:#e9eef5;color:#6f7d91}

.mailing-toolbar{
  display:grid;
  grid-template-columns:minmax(320px,1.6fr) minmax(180px,.75fr) auto auto auto;
  gap:10px;
  align-items:center;
  margin-top:16px
}
.mailing-search{height:52px}
.mailing-toolbar>.btn,.mailing-toolbar .view-secondary-btn{height:52px}
.mailing-simple-select .simple-select-trigger{height:52px;border-radius:12px}
.mailing-view-wrap{position:relative}
.mailing-columns-menu{right:0;left:auto;min-width:220px}
.mailing-filter-btn.filter-active{border-color:#7eb4ff;background:#eef5ff;color:#136dde}

.mailing-filter-panel{
  position:absolute;
  right:46px;
  z-index:75;
  width:min(670px,calc(100vw - 70px));
  margin-top:8px;
  padding:16px;
  border:1px solid #dbe3ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 46px rgba(15,23,42,.16)
}
.mailing-filter-panel[hidden]{display:none!important}
.mailing-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.mailing-filter-grid label{
  display:grid;gap:7px;color:#475569;font-size:12px;font-weight:800
}
.mailing-filter-grid input{
  height:42px;padding:0 12px;border:1px solid #dbe3ed;border-radius:10px;
  background:#fff;color:#334155;font:inherit
}

.mailings-table-card{
  margin-top:14px;
  border:1px solid #dce5ef;
  border-radius:15px;
  background:#fff;
  overflow:visible
}
.mailings-table-scroll{overflow:auto;border-radius:15px 15px 0 0}
.mailings-table{width:100%;border-collapse:collapse;min-width:1180px}
.mailings-table th{
  position:sticky;top:0;z-index:5;
  padding:13px 12px;border-bottom:1px solid #e6edf5;background:#f8fafc;
  color:#617189;font-size:12px;text-align:left;white-space:nowrap
}
.mailings-table td{
  padding:10px 12px;border-bottom:1px solid #edf1f5;
  color:#17233d;font-size:12px;vertical-align:middle;white-space:nowrap
}
.mailings-table tbody tr:hover{background:#fbfdff}
.mailing-select-col{width:38px;text-align:center!important}
.mailing-menu-col{width:64px;text-align:center!important}
.mailing-title-btn{
  max-width:360px;padding:0;border:0;background:transparent;text-align:left;cursor:pointer
}
.mailing-title-btn strong{
  display:block;color:#17233d;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mailing-title-btn small{
  display:block;margin-top:2px;color:#7a899d;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mailing-title-btn:hover strong{color:#1677ff}
.mailing-status{
  display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;
  font-size:11px;font-weight:800
}
.mailing-status.sent{background:#e5f8eb;color:#16994e}
.mailing-status.draft{background:#eef2f7;color:#65758a}
.mailing-status.scheduled{background:#fff1d4;color:#db8100}
.mailing-status.sending{background:#e6f2ff;color:#1677ff}
.mailing-status.stopped{background:#ffe7e7;color:#dc2d2d}
.mailing-status.error{background:#ffe5e5;color:#e52d2d}

.row-menu-wrap{position:relative;display:inline-block}
.row-menu-btn{
  min-width:34px;height:30px;border:0;border-radius:8px;background:transparent;
  color:#334155;font-size:14px;font-weight:900;letter-spacing:1px;cursor:pointer
}
.row-menu-btn:hover{background:#f1f5f9}
.row-action-menu{
  position:absolute;right:0;top:calc(100% + 5px);z-index:60;
  width:150px;padding:6px;border:1px solid #dbe3ed;border-radius:10px;background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.14)
}
.row-action-menu[hidden]{display:none!important}
.row-action-menu button{
  width:100%;height:34px;padding:0 10px;border:0;border-radius:7px;background:transparent;
  color:#334155;text-align:left;font:inherit;font-size:12px;cursor:pointer
}
.row-action-menu button:hover{background:#f5f8fc}
.row-action-menu button.danger{color:#dc2626}

.mailings-table-footer{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:12px 16px
}
.mailing-count{color:#64748b;font-size:12px}
.mailings-table-footer .page-size-control{justify-self:start}
.mailings-table-footer .pagination{justify-self:end}
.mailings-table-footer .page-size-control .simple-select-menu{
  top:auto;bottom:calc(100% + 6px)
}

html[data-theme="dark"] .mailing-stat,
html[data-theme="dark"] .mailings-table-card,
html[data-theme="dark"] .mailing-filter-panel,
html[data-theme="dark"] .mailing-filter-grid input,
html[data-theme="dark"] .row-action-menu{
  background:#111a2b;border-color:#2a3951
}
html[data-theme="dark"] .mailing-stat.stat-green{background:#12291e;border-color:#235b3b}
html[data-theme="dark"] .mailing-stat.stat-orange{background:#2d2414;border-color:#5b4722}
html[data-theme="dark"] .mailing-stat.stat-gray{background:#171f2e;border-color:#2b374a}
html[data-theme="dark"] .mailing-stat strong,
html[data-theme="dark"] .mailings-table td,
html[data-theme="dark"] .mailing-title-btn strong{color:#e5edf8}
html[data-theme="dark"] .mailings-table th{background:#0f1728;border-color:#243148;color:#aebdd0}
html[data-theme="dark"] .mailings-table td{border-color:#202c3d}
html[data-theme="dark"] .mailings-table tbody tr:hover{background:#152035}
html[data-theme="dark"] .row-action-menu button{color:#dbe5f2}
html[data-theme="dark"] .row-action-menu button:hover{background:#17233a}
html[data-theme="dark"] .row-menu-btn{color:#c2cfdf}

@media(max-width:1100px){
  .mailing-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mailing-toolbar{grid-template-columns:1fr 1fr auto auto auto}
  .mailing-search{grid-column:1/-1}
}
@media(max-width:760px){
  .mailings-head{display:grid}
  .mailing-stats{grid-template-columns:1fr}
  .mailing-toolbar{grid-template-columns:1fr 1fr}
  .mailing-toolbar>*{min-width:0}
  .mailing-toolbar .mailing-search{grid-column:1/-1}
  .mailing-filter-panel{position:fixed;left:16px;right:16px;top:100px;width:auto}
  .mailing-filter-grid{grid-template-columns:1fr}
  .mailings-table-footer{grid-template-columns:1fr;gap:10px}
  .mailings-table-footer .pagination{justify-self:start}
}

/* Forms demo 0.1.72 */
.forms-page{max-width:1500px}
.forms-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.forms-page-head h1{margin:0;font-size:42px;line-height:1.05}
.forms-page-head p{margin:7px 0 0;color:#66778f;font-size:16px}
.forms-create-btn{height:48px;padding:0 22px}
.forms-tabs{margin-top:14px}
.forms-toolbar{display:grid;grid-template-columns:minmax(320px,1fr) auto auto;gap:18px;align-items:center;margin-top:16px}
.forms-search{max-width:520px;height:52px}
.forms-sort{display:flex;align-items:center;gap:10px;color:#66778f;font-size:13px;justify-self:end}
.forms-sort select{height:44px;min-width:220px;padding:0 42px 0 14px;border:1px solid #d8e2ee;border-radius:10px;background:#fff;color:#24324a;font:inherit}
.forms-view-toggle{display:flex;border:1px solid #d8e2ee;border-radius:10px;overflow:hidden}
.forms-view-toggle button{width:48px;height:44px;border:0;background:#fff;color:#64748b;font-size:21px;cursor:pointer}
.forms-view-toggle button.active{background:#1677ff;color:#fff}
.forms-section{margin-top:18px}
.forms-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.forms-section-title h2{margin:0;color:#17233d;font-size:20px}
.forms-section-title h2 span{color:#65758a;font-weight:700}
.forms-show-all{border:0;background:transparent;color:#1677ff;font:inherit;font-weight:750;cursor:pointer}

.forms-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.form-card,.template-card{border:1px solid #dce5ef;border-radius:13px;background:#fff;padding:8px;min-width:0}
.form-preview{min-height:205px;border-radius:9px;overflow:hidden;display:grid;place-items:center;padding:16px;background:#eef4fb;position:relative}
.form-preview-inner{width:min(100%,285px);text-align:center;position:relative;z-index:2}
.form-preview-headline{font-size:22px;line-height:1.12;font-weight:900;margin-bottom:8px;color:#111827}
.form-preview-text{font-size:12px;line-height:1.35;color:#52637a;margin-bottom:12px}
.form-preview-input{height:36px;border:1px solid #d6dfea;border-radius:7px;background:#fff;color:#96a3b4;display:flex;align-items:center;padding:0 12px;font-size:11px;text-align:left;margin-bottom:7px}
.form-preview-button{height:36px;border-radius:7px;background:#1677ff;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.form-preview-note{margin-top:7px;font-size:9px;color:#5d6d80}

.form-preview-mountain{background:linear-gradient(rgba(25,62,100,.28),rgba(18,39,65,.42)),linear-gradient(145deg,#8dc2eb 0%,#4f89bd 42%,#294e72 100%)}
.form-preview-mountain .form-preview-headline,.form-preview-mountain .form-preview-text,.form-preview-mountain .form-preview-note{color:#fff}
.form-preview-pdf,.form-preview-gift,.form-preview-navy,.form-preview-dark{background:radial-gradient(circle at 75% 22%,#215c9f,#102e55 52%,#081a31)}
.form-preview-pdf .form-preview-headline,.form-preview-pdf .form-preview-text,.form-preview-pdf .form-preview-note,
.form-preview-gift .form-preview-headline,.form-preview-gift .form-preview-text,.form-preview-gift .form-preview-note,
.form-preview-navy .form-preview-headline,.form-preview-navy .form-preview-text,.form-preview-navy .form-preview-note,
.form-preview-dark .form-preview-headline,.form-preview-dark .form-preview-text,.form-preview-dark .form-preview-note{color:#fff}
.form-preview-pdf .form-preview-button,.form-preview-gift .form-preview-button{background:#ff7a13}
.form-preview-blog,.form-preview-classic,.form-preview-minimal,.form-preview-light,.form-preview-news,.form-preview-course{background:#f7fbff}
.form-preview-youtube,.form-preview-coffee{background:linear-gradient(rgba(12,26,20,.38),rgba(12,26,20,.54)),linear-gradient(135deg,#53715c,#324637 52%,#6e533d)}
.form-preview-youtube .form-preview-headline,.form-preview-youtube .form-preview-text,.form-preview-youtube .form-preview-note,
.form-preview-coffee .form-preview-headline,.form-preview-coffee .form-preview-text,.form-preview-coffee .form-preview-note{color:#fff}
.form-preview-youtube .form-preview-button{background:#ff3636}
.form-preview-coffee .form-preview-button{background:#11af57}
.form-preview-webinar{background:linear-gradient(135deg,#f3e8ff,#e5d2ff)}
.form-preview-webinar .form-preview-button{background:#7b43e8}

.form-card-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 3px 8px}
.form-card-meta>div:first-child{min-width:0}
.form-card-meta strong{display:block;color:#17233d;font-size:13px}
.form-card-meta small{display:block;margin-top:4px;color:#718198;font-size:11px}
.form-card-side{display:flex;align-items:center;gap:7px}
.form-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}
.form-status.active{background:#e7f8ed;color:#16994e}
.form-status.inactive{background:#e9eef5;color:#65758a}
.form-more-btn{width:28px;height:28px;border:0;background:transparent;border-radius:7px;color:#52647b;font-size:19px;cursor:pointer}
.form-more-btn:hover{background:#f1f5f9}
.form-card-actions{display:grid;grid-template-columns:1.45fr .75fr;gap:8px}
.form-card-actions .btn{height:40px;padding:0 10px;font-size:12px}
.template-card{cursor:pointer}
.template-card-name{padding:9px 4px 3px;color:#17233d;font-size:13px;font-weight:800}

.forms-card-grid.is-list{grid-template-columns:1fr}
.forms-card-grid.is-list .form-card{display:grid;grid-template-columns:280px minmax(0,1fr) auto;gap:14px;align-items:center}
.forms-card-grid.is-list .form-preview{min-height:150px}
.forms-card-grid.is-list .form-card-meta{padding:0}
.forms-card-grid.is-list .form-card-actions{width:270px}

.forms-demo-modal[hidden]{display:none!important}
.forms-demo-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;opacity:0;transition:.1s ease}
.forms-demo-modal.is-open{opacity:1}
.forms-demo-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}
.forms-demo-dialog{position:relative;width:min(480px,calc(100vw - 32px));padding:24px;border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.28)}
.forms-demo-dialog h2{margin:0 0 8px;color:#17233d;font-size:24px}
.forms-demo-dialog p{margin:0 0 20px;color:#64748b;line-height:1.5}
.forms-demo-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:9px;background:#f2f5f9;color:#64748b;font-size:23px;cursor:pointer}

html[data-theme="dark"] .form-card,
html[data-theme="dark"] .template-card,
html[data-theme="dark"] .forms-sort select,
html[data-theme="dark"] .forms-view-toggle button,
html[data-theme="dark"] .forms-demo-dialog{background:#111a2b;border-color:#2a3951}
html[data-theme="dark"] .form-card-meta strong,
html[data-theme="dark"] .template-card-name,
html[data-theme="dark"] .forms-section-title h2,
html[data-theme="dark"] .forms-demo-dialog h2{color:#e5edf8}
html[data-theme="dark"] .forms-sort select{color:#e5edf8}
html[data-theme="dark"] .forms-view-toggle{border-color:#2a3951}
html[data-theme="dark"] .forms-view-toggle button.active{background:#1677ff}

@media(max-width:1200px){.forms-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .forms-page-head{display:grid}
  .forms-toolbar{grid-template-columns:1fr}
  .forms-sort{justify-self:start}
  .forms-card-grid{grid-template-columns:1fr}
  .forms-card-grid.is-list .form-card{display:block}
  .forms-card-grid.is-list .form-card-actions{width:auto}
}


/* Analytics demo 0.1.73 */
.analytics-page{max-width:1500px}
.analytics-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.analytics-head h1{margin:0;font-size:42px;line-height:1.05}
.analytics-head p{margin:7px 0 0;color:#66778f;font-size:16px}
.analytics-period{
  height:44px;min-width:220px;padding:0 40px 0 14px;border:1px solid #d8e2ee;border-radius:10px;
  background:#fff;color:#24324a;font:inherit
}
.analytics-tabs{margin-top:14px}
.analytics-pane{display:none}
.analytics-pane.active{display:block}

.analytics-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:16px
}
.analytics-kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.analytics-kpi{
  position:relative;min-height:132px;padding:20px;border-radius:14px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;box-shadow:0 10px 30px rgba(15,23,42,.08)
}
.analytics-kpi small{font-size:14px;font-weight:800;opacity:.95}
.analytics-kpi strong{display:block;font-size:34px;line-height:1;margin:13px 0 6px}
.analytics-kpi span{font-size:12px;opacity:.92}
.analytics-kpi em{
  position:absolute;right:16px;bottom:16px;padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.18);font-size:11px;font-weight:800;font-style:normal
}
.kpi-blue{background:linear-gradient(135deg,#2aa6f8,#1677ff)}
.kpi-green{background:linear-gradient(135deg,#4bd966,#1fc052)}
.kpi-purple{background:linear-gradient(135deg,#b44af0,#8f31eb)}
.kpi-red{background:linear-gradient(135deg,#ff9a54,#ff4f5f)}
.kpi-orange{background:linear-gradient(135deg,#ffb03a,#ff7b2d)}

.analytics-chart-card,.analytics-table-card{
  margin-top:16px;padding:16px;border:1px solid #dce5ef;border-radius:14px;background:#fff
}
.analytics-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.analytics-card-head h2{margin:0;color:#17233d;font-size:20px}
.analytics-card-head a{color:#1677ff;text-decoration:none;font-size:12px;font-weight:800}
.analytics-card-head select{
  height:36px;padding:0 34px 0 12px;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#475569
}

.analytics-chart-demo{
  height:250px;display:flex;align-items:flex-end;gap:8px;padding:18px 10px 8px;
  border-bottom:1px solid #dfe7f0;
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(to top, transparent 24%,#edf2f7 25%,transparent 26%,transparent 49%,#edf2f7 50%,transparent 51%,transparent 74%,#edf2f7 75%,transparent 76%)
}
.analytics-line-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  overflow:visible
}
.analytics-line{
  fill:none;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke
}
.analytics-line-open{stroke:#24bd59}
.analytics-line-click{stroke:#913ee8}
.analytics-bar{
  flex:1;height:var(--h);min-width:8px;border-radius:5px 5px 0 0;background:linear-gradient(#69b7ff,#2f88ef);
  position:relative;
  z-index:1
}
.analytics-bar .bar-open,.analytics-bar .bar-click{
  position:absolute;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;
  z-index:4
}
.analytics-bar .bar-open{bottom:var(--p);background:#24bd59;box-shadow:0 0 0 2px #fff}
.analytics-bar .bar-click{bottom:var(--c);background:#913ee8;box-shadow:0 0 0 2px #fff}
.analytics-chart-legend{display:flex;gap:18px;margin-top:10px;color:#66778f;font-size:11px}
.legend-blue{color:#2d8cf0}.legend-green{color:#24bd59}.legend-purple{color:#913ee8}

.analytics-table{width:100%;border-collapse:collapse}
.analytics-table th{
  padding:9px 10px;border-bottom:1px solid #e5ecf3;color:#68788e;background:#f8fafc;font-size:11px;text-align:left
}
.analytics-table td{padding:10px;border-bottom:1px solid #edf1f5;color:#1e293b;font-size:12px}
.analytics-table td strong{display:block}
.analytics-table td small{display:block;margin-top:2px;color:#8996a8;font-size:10px}
.analytics-status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#def5e5;color:#168c47;font-size:10px;font-weight:800}

.analytics-subscriber-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.subscriber-growth-demo{height:240px;display:flex;align-items:flex-end;gap:9px;padding:20px 8px 4px}
.subscriber-growth-demo span{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(#67b5ff,#2785ea)}
.segment-list{display:grid;gap:10px}
.segment-list>div{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:12px;border:1px solid #edf1f5;border-radius:10px
}
.segment-list span{color:#475569;font-size:12px}
.segment-list strong{color:#17233d;font-size:14px}
.segment-list em{font-style:normal;color:#718197;font-size:11px}

.funnel-demo{display:grid;gap:10px;padding:8px 0 2px}
.funnel-step{
  width:var(--w);margin:0 auto;min-height:62px;padding:12px 18px;border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:linear-gradient(90deg,#e8f2ff,#f6f9fd);border:1px solid #dbe7f5
}
.funnel-step strong{display:block;color:#17233d;font-size:13px}
.funnel-step span{display:block;margin-top:4px;color:#708198;font-size:11px}
.funnel-step em{font-style:normal;color:#1677ff;font-weight:900}

html[data-theme="dark"] .analytics-period,
html[data-theme="dark"] .analytics-chart-card,
html[data-theme="dark"] .analytics-table-card,
html[data-theme="dark"] .analytics-card-head select{background:#111a2b;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .analytics-card-head h2,
html[data-theme="dark"] .analytics-table td,
html[data-theme="dark"] .segment-list strong,
html[data-theme="dark"] .funnel-step strong{color:#e5edf8}
html[data-theme="dark"] .analytics-table th{background:#0f1728;border-color:#243148;color:#aebdd0}
html[data-theme="dark"] .analytics-table td{border-color:#202c3d}
html[data-theme="dark"] .segment-list>div{border-color:#243148}
html[data-theme="dark"] .funnel-step{background:linear-gradient(90deg,#14233b,#172131);border-color:#2a3951}

@media(max-width:1100px){
  .analytics-kpis,.analytics-kpis.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-subscriber-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .analytics-head{display:grid}
  .analytics-kpis,.analytics-kpis.three{grid-template-columns:1fr}
  .analytics-table-card{overflow:auto}
  .analytics-table{min-width:760px}
}


/* =========================================================
   Mailing builder 0.1.77
   ========================================================= */
.mailing-builder-page{max-width:1500px;padding-bottom:92px}
.builder-back{display:inline-flex;margin-bottom:12px;padding:7px 12px;border-radius:9px;background:#edf5ff;color:#1677ff;text-decoration:none;font-size:13px;font-weight:700}
.builder-title h1{margin:0;font-size:40px;line-height:1.05}
.builder-title p{margin:6px 0 18px;color:#718198;font-size:15px}
.builder-steps{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #dbe5f0;border-radius:13px;background:#fff;overflow:hidden;margin-bottom:18px}
.builder-step{min-height:68px;border:0;border-right:1px solid #dbe5f0;background:#fff;color:#66768d;display:flex;align-items:center;justify-content:center;gap:12px;font:inherit;cursor:pointer}
.builder-step:last-child{border-right:0}
.builder-step span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#edf2f7;color:#718198;font-weight:800}
.builder-step b{font-size:14px}
.builder-step.active{color:#1677ff;background:#fbfdff}
.builder-step.active span{background:#1677ff;color:#fff}
.builder-step.done span{background:#68adfa;color:#fff}
.builder-step.done{color:#607189}

.builder-panel{display:none;background:#fff;border:1px solid #dce6f0;border-radius:14px;padding:22px;margin-bottom:16px}
.builder-panel.active{display:block}
.builder-panel-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.builder-panel-number{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:#e8f2ff;color:#1677ff;font-size:26px;font-weight:900}
.builder-panel-heading h2{margin:2px 0 4px;font-size:26px;color:#101a33}
.builder-panel-heading p{margin:0;color:#72839c;font-size:15px}

.builder-grid{display:grid;gap:18px}
.builder-grid.two{grid-template-columns:1fr 1fr}
.builder-field{display:block;color:#14213a;font-size:13px;font-weight:800}
.builder-field>span{display:block;margin-bottom:8px}
.builder-field input,.builder-field select,.activity-row select{
  width:100%;height:47px;border:1px solid #d3deea;border-radius:9px;background:#fff;color:#18243b;padding:0 14px;font:inherit;outline:none
}
.builder-field input:focus,.builder-field select:focus,.activity-row select:focus{border-color:#2784f4;box-shadow:0 0 0 3px rgba(39,132,244,.08)}
.builder-field small{display:block;margin-top:7px;color:#8290a5;font-size:12px;font-weight:500}
.sender-card{width:100%;min-height:74px;border:1px solid #d3deea;border-radius:10px;background:#fff;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:10px;padding:9px 13px;text-align:left;cursor:pointer}
.sender-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#f0f4f9;color:#17213d;font-weight:900;font-size:20px}
.sender-data{display:flex;flex-direction:column;min-width:0}
.sender-data em{font-style:normal;color:#20b663;font-size:11px;font-weight:800}
.sender-data strong{font-size:15px;color:#15203a;margin:3px 0}
.sender-data small{color:#75859d}
.sender-arrow{font-size:20px;color:#66778d}

.builder-info{margin-top:22px;padding:13px 16px;border-radius:9px;background:#eaf4ff;color:#0870ed;font-size:13px;line-height:1.4}
.builder-warning{margin:-2px 0 22px;padding:15px 18px;border:1px solid #ffd1d1;border-radius:10px;background:#fff6f6;color:#78859b;font-size:13px}
.builder-warning::first-letter{color:#f3535b}

.audience-modes,.content-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.audience-card,.content-mode{position:relative;min-height:138px;padding:17px 17px 16px;border:1px solid #d8e2ed;border-radius:11px;background:#fff;text-align:left;color:#15203a;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.audience-card i,.content-mode i{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#f2f6fa;font-style:normal;font-size:23px}
.audience-card b,.content-mode b{font-size:15px}
.audience-card small,.content-mode small{color:#75869f;font-size:12px;line-height:1.35}
.audience-card>span,.content-mode>span{position:absolute;right:16px;top:16px;width:24px;height:24px;border:2px solid #c8d4e2;border-radius:50%}
.audience-card.active,.content-mode.active{border:2px solid #1677ff;background:#f8fbff;padding:16px}
.audience-card.active i,.content-mode.active i{background:#e6f1ff;color:#1677ff}
.audience-card.active b,.content-mode.active b{color:#1677ff}
.audience-card.active>span,.content-mode.active>span{border:7px solid #1677ff}
.content-modes{grid-template-columns:repeat(3,1fr)}
.content-mode{min-height:105px;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;align-content:center}
.content-mode i{grid-row:1/3}.content-mode>span{display:block}

.audience-detail{position:relative;border:1px solid #dce5ef;border-radius:11px;padding:16px;background:#fff}
.audience-simple-message{display:flex;flex-direction:column;gap:5px;color:#687991;font-size:13px}
.audience-simple-message strong{color:#1c2941;font-size:15px}
.recipient-total{margin:14px 0 0 auto;width:max-content;padding:10px 14px;border-radius:8px;background:#edf5ff;color:#42516a;font-size:12px}
.recipient-total strong{color:#0873ed;font-size:16px}

.activity-detail{padding:16px}
.activity-row{display:grid;grid-template-columns:72px 1.45fr 1fr .8fr 32px;gap:12px;align-items:end;margin-bottom:12px}
.activity-row label{font-size:11px;color:#64758d}
.activity-row label small{display:block;margin-bottom:6px;font-weight:700}
.activity-join{width:72px;height:47px;border:1px solid #d3deea;border-radius:9px;background:#fff;color:#1b2940;padding:0 10px}
.activity-join-first{border:0;background:transparent}
.activity-remove{height:47px;border:0;background:transparent;color:#17233e;font-size:17px;cursor:pointer}
.builder-text-btn{border:0;background:transparent;color:#0873ed;font:inherit;font-weight:800;font-size:13px;cursor:pointer;padding:5px 0}
.exclusion-activity h3{margin:18px 0 3px;font-size:14px}

.token-field{min-height:52px;padding:7px 10px;border:1px solid #d3deea;border-radius:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.token{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:#edf3fb;border-radius:999px;color:#273650;font-size:12px;font-weight:600}
.token button{border:0;background:transparent;color:#6d7d94;cursor:pointer;font-size:16px}
.token-add{margin-left:auto;border:0;background:transparent;color:#1677ff;font-weight:800;cursor:pointer}

.selected-template{border:1px solid #dce5ef;border-radius:10px;padding:12px 16px;margin-bottom:12px}
.selected-template h3{margin:0 0 8px;font-size:15px}
.selected-template-row{display:grid;grid-template-columns:260px 1fr;gap:14px;align-items:end}
.template-current small{margin:0 0 4px;color:#8290a5}
.content-info{margin:0 0 14px}
.html-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #9ec3ee;border-radius:10px;background:#f7fbff;padding:22px;color:#50617a;cursor:pointer;margin-bottom:12px}
.html-drop input{display:none}.html-drop strong{color:#1677ff;margin-bottom:5px}.html-drop span{font-size:12px}

.email-editor{border-top:1px solid #e4eaf1;padding-top:14px}
.email-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.email-editor-head h3{margin:0;font-size:20px}
.btn-small{min-height:36px!important;padding:0 13px!important}
.btn-tiny{min-height:32px!important;padding:0 10px!important;font-size:11px!important}
.emoji-input{display:grid;grid-template-columns:1fr 38px;border:1px solid #d3deea;border-radius:9px;overflow:hidden}
.emoji-input input{border:0!important;border-radius:0!important;box-shadow:none!important}
.emoji-input button{border:0;background:#fff;color:#62738b;cursor:pointer}

.editor-shell{display:grid;grid-template-columns:1fr 310px;border:1px solid #d9e3ee;border-radius:10px;overflow:hidden;margin-top:14px}
.editor-main{min-width:0;background:#f2f5f8}
.editor-toolbar{height:48px;background:#fff;border-bottom:1px solid #d9e3ee;display:flex;align-items:center;gap:3px;padding:5px 8px;overflow:auto}
.editor-toolbar select{height:34px;border:0;background:#fff;padding:0 8px}
.editor-toolbar button{width:34px;height:34px;border:0;border-radius:6px;background:#fff;cursor:pointer;font-size:15px}
.editor-toolbar button:hover{background:#eef5fd}
.email-canvas{min-height:390px;max-width:760px;margin:0 auto;background:#fff;padding:22px 48px;text-align:center;outline:none;color:#25324a}
.email-canvas h1{font-size:31px;margin:30px 0 10px;color:#111b36}
.email-canvas p{font-size:15px;line-height:1.5}
.demo-email-logo{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#17213c}
.demo-email-logo a{font-size:10px;color:#8492a5}
.demo-email-button{display:inline-block;padding:12px 38px;border-radius:7px;background:#0875f6;color:#fff!important;text-decoration:none}
.editor-blocks{background:#fff;border-left:1px solid #d9e3ee}
.editor-side-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #d9e3ee}
.editor-side-tabs button{height:47px;border:0;background:#fff;font-weight:800;color:#273650}
.editor-side-tabs button.active{color:#1677ff;border-bottom:3px solid #1677ff}
.editor-block-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.editor-block-grid button{height:88px;border:1px solid #dce5ef;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:#1d2a42}
.editor-block-grid button:hover{background:#f7fbff;border-color:#a8c9ef}
.editor-block-grid i{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;background:#f1f5f9;font-style:normal;font-size:21px}

.send-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.send-left,.send-right{display:grid;gap:14px;align-content:start}
.send-card{border:1px solid #dce5ef;border-radius:11px;padding:16px;background:#fff}
.send-card h3{margin:0 0 15px;font-size:17px}
.send-note{margin:13px 0 0;color:#74859e;font-size:12px}
.builder-checkbox{display:flex;align-items:center;gap:10px;margin-top:16px;color:#1c2941;font-size:13px}
.builder-checkbox input{width:20px;height:20px}
.builder-checkbox b{display:grid;place-items:center;width:18px;height:18px;border:1px solid #9eb4cc;border-radius:50%;color:#67809b;font-size:11px}
.summary-head{display:flex;align-items:center;justify-content:space-between}
.summary-list{display:grid}
.summary-list>div{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #edf1f5;font-size:12px}
.summary-list span{color:#72839b}.summary-list strong{font-weight:700}
.ready-info{margin:0;display:flex;flex-direction:column;gap:4px}.ready-info b{font-size:15px}
.launch-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-radius:11px;background:#effcf6;border:1px solid #dcf7e9}
.launch-card>div{display:flex;align-items:center;gap:14px}.launch-card>div>span{font-size:34px;color:#119255}
.launch-card p{margin:0;display:flex;flex-direction:column;color:#33445c;font-size:11px}
.launch-card strong{font-size:30px;color:#108a4f;line-height:1.05}.launch-card small{color:#108a4f}
.btn-launch{min-width:260px!important;min-height:50px!important}

.builder-footer{position:sticky;bottom:0;z-index:20;display:flex;gap:10px;align-items:center;margin:16px -22px -22px;padding:14px 22px;background:rgba(255,255,255,.96);border-top:1px solid #e0e7ef;backdrop-filter:blur(8px)}
.builder-footer #builderNext{margin-left:auto}
.builder-footer .btn{min-height:46px;padding:0 20px}

.sf-modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(24,39,58,.54);padding:18px}
.sf-modal-backdrop[hidden]{display:none!important}
.sf-modal{position:relative;width:min(620px,96vw);max-height:88vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 24px 90px rgba(0,0,0,.24);padding:28px}
.sf-modal-x{position:absolute;right:18px;top:15px;border:0;background:transparent;color:#63758e;font-size:27px;cursor:pointer}
.unsaved-modal{text-align:center;width:min(610px,96vw);padding:34px 30px 26px}
.unsaved-title-row{display:flex;align-items:center;justify-content:center;gap:12px}
.unsaved-title-row h2{margin:0;font-size:27px}
.unsaved-warning-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff2e6;color:#f69339;font-size:27px}
.unsaved-modal p{color:#718099;line-height:1.45;margin:20px 0 24px}
.unsaved-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.unsaved-actions .btn{min-height:46px}
.builder-dialog h2{margin:0 0 18px}
.template-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.template-pick{min-height:110px;border:1px solid #dce5ef;border-radius:10px;background:#fff;text-align:left;padding:15px;display:grid;grid-template-columns:42px 1fr;gap:3px 10px;cursor:pointer}
.template-pick span{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:#edf5ff;color:#1677ff;font-size:20px}
.template-pick small{color:#7a899e}.template-pick:hover,.template-pick.selected{border-color:#1677ff;background:#f8fbff}
.dialog-options{display:grid;gap:8px}.dialog-options button{height:46px;border:1px solid #dce5ef;border-radius:8px;background:#fff;text-align:left;padding:0 14px;cursor:pointer}
.dialog-options button:hover{border-color:#1677ff;background:#f7fbff}
.email-preview-dialog{background:#f1f4f7;padding:14px;border-radius:10px}
.preview-subject{background:#fff;border-radius:8px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:4px}.preview-subject span{color:#8090a5;font-size:12px}
.preview-paper{background:#fff;border-radius:8px;padding:25px;text-align:center}
.launch-success{text-align:center}.launch-success>span{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:#e8f8ef;color:#1a9b58;font-size:34px}.launch-success h3{font-size:24px;margin:0 0 10px}.launch-success p{color:#6f7f96;margin-bottom:20px}
.sf-toast{position:fixed;z-index:1100;right:24px;bottom:24px;padding:12px 18px;border-radius:9px;background:#17233d;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.18);font-size:13px}
.sf-toast[hidden]{display:none!important}

html[data-theme="dark"] .builder-steps,
html[data-theme="dark"] .builder-step,
html[data-theme="dark"] .builder-panel,
html[data-theme="dark"] .sender-card,
html[data-theme="dark"] .audience-card,
html[data-theme="dark"] .content-mode,
html[data-theme="dark"] .audience-detail,
html[data-theme="dark"] .selected-template,
html[data-theme="dark"] .email-editor,
html[data-theme="dark"] .editor-toolbar,
html[data-theme="dark"] .editor-blocks,
html[data-theme="dark"] .editor-side-tabs button,
html[data-theme="dark"] .editor-block-grid button,
html[data-theme="dark"] .send-card,
html[data-theme="dark"] .sf-modal{background:#111a2b;border-color:#2a3951;color:#e6edf7}
html[data-theme="dark"] .builder-panel-heading h2,
html[data-theme="dark"] .builder-field,
html[data-theme="dark"] .sender-data strong,
html[data-theme="dark"] .audience-card,
html[data-theme="dark"] .content-mode,
html[data-theme="dark"] .email-editor-head h3,
html[data-theme="dark"] .send-card h3,
html[data-theme="dark"] .unsaved-title-row h2{color:#e6edf7}
html[data-theme="dark"] .builder-field input,
html[data-theme="dark"] .builder-field select,
html[data-theme="dark"] .activity-row select,
html[data-theme="dark"] .activity-join,
html[data-theme="dark"] .emoji-input,
html[data-theme="dark"] .emoji-input button,
html[data-theme="dark"] .token-field{background:#0f1728;border-color:#2a3951;color:#e6edf7}
html[data-theme="dark"] .builder-footer{background:rgba(15,23,40,.96);border-color:#2a3951}

@media(max-width:1150px){
  .builder-steps{grid-template-columns:1fr}
  .builder-step{justify-content:flex-start;padding:0 18px;border-right:0;border-bottom:1px solid #dbe5f0}
  .builder-step:last-child{border-bottom:0}
  .audience-modes{grid-template-columns:repeat(2,1fr)}
  .activity-row{grid-template-columns:70px 1fr 1fr}.activity-row label:nth-of-type(3){grid-column:2/3}.activity-remove{grid-column:3}
  .editor-shell{grid-template-columns:1fr}.editor-blocks{border-left:0;border-top:1px solid #d9e3ee}
  .send-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .builder-title h1{font-size:32px}
  .builder-grid.two,.content-modes,.audience-modes,.selected-template-row{grid-template-columns:1fr}
  .activity-row{grid-template-columns:1fr}.activity-join,.activity-remove{width:100%}.activity-row label:nth-of-type(3),.activity-remove{grid-column:auto}
  .editor-block-grid{grid-template-columns:repeat(2,1fr)}
  .email-canvas{padding:18px}
  .summary-list>div{grid-template-columns:1fr}
  .launch-card{display:grid}.btn-launch{min-width:0!important;width:100%}
  .builder-footer{flex-wrap:wrap}.builder-footer #builderNext{margin-left:0}
}


/* =========================================================
   Compact top navigation — 0.1.79
   Active channel is expanded; inactive channels are icon-only.
   ========================================================= */

.topbar{
  padding:9px 18px;
  gap:14px;
  min-height:68px;
}

.platforms{
  gap:7px;
  flex-basis:auto;
}

.platform{
  position:relative;
  min-height:44px;
  height:44px;
  padding:7px 11px;
  border-radius:10px;
  gap:8px;
  transition:
    width .18s ease,
    padding .18s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

/* Active section stays fully expanded */
.platform.active{
  min-width:118px;
  padding-left:12px;
  padding-right:14px;
}

/* Inactive sections collapse to icon only */
.platform:not(.active){
  width:44px;
  min-width:44px;
  max-width:44px;
  padding:0;
  justify-content:center;
}

.platform:not(.active) .platform-text{
  display:none;
}

.platform-icon{
  width:22px;
  height:22px;
  flex-basis:22px;
  font-size:14px;
}

.image-icon{
  width:24px;
  height:24px;
  border-radius:7px;
}

.email-image-icon img{
  width:21px;
  height:21px;
}

.max-app-icon img{
  width:18px;
  height:18px;
}

.platform-text b{
  font-size:13px;
  line-height:1;
}

.platform small{
  font-size:9px;
  line-height:1;
}

/* Tooltip for collapsed channels */
.platform:not(.active)::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%) translateY(-2px);
  z-index:90;
  padding:6px 9px;
  border-radius:7px;
  background:#17233d;
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(15,23,42,.18);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.platform:not(.active):hover::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.platform:not(.active):hover{
  background:#f3f7fc;
  border-color:#d5e0ec;
  transform:translateY(-1px);
}

/* Compact user block */
.top-right{
  gap:9px;
}

.user-chip{
  min-width:184px;
  min-height:46px;
  padding:5px 10px;
  border-radius:11px;
  gap:8px;
}

.user-chip__avatar{
  width:34px;
  height:34px;
  font-size:15px;
}

.user-chip__label{
  font-size:9px;
  line-height:1;
}

.user-chip__meta strong{
  font-size:12px;
  line-height:1.05;
}

.user-chip__meta small{
  font-size:10px;
  line-height:1.05;
}

/* Compact utility buttons */
.icon-actions{
  gap:7px;
}

.icon-btn{
  width:44px;
  height:44px;
  border-radius:11px;
}

.icon-btn img{
  width:22px;
  height:22px;
}

.icon-btn span{
  font-size:17px;
}

/* Keep utility tooltips clear of the smaller buttons */
.icon-btn::after{
  bottom:-31px;
  padding:5px 8px;
  border-radius:7px;
  font-size:11px;
}

/* Dark mode */
html[data-theme="dark"] .platform:not(.active):hover{
  background:#19263b;
  border-color:#39506e;
}

/* Responsive behavior */
@media(max-width:1350px){
  .topbar{
    align-items:center;
  }
  .top-right{
    width:auto;
    justify-content:flex-end;
  }
  .platforms{
    flex-basis:auto;
  }
}

@media(max-width:1050px){
  .user-chip{
    min-width:160px;
  }
}

@media(max-width:900px){
  .topbar{
    flex-wrap:wrap;
  }
  .platforms{
    flex:1 1 auto;
  }
  .top-right{
    width:100%;
    justify-content:space-between;
  }
}

@media(max-width:800px){
  .topbar{
    display:flex;
    padding:9px 12px;
  }
  .platforms{
    overflow:visible;
    flex-wrap:nowrap;
    padding-bottom:0;
  }
  .top-right{
    display:flex;
    margin-top:0;
  }
  .icon-actions{
    margin-top:0;
  }
}

@media(max-width:620px){
  .user-chip{
    min-width:0;
    width:auto;
  }
  .user-chip__meta{
    display:none;
  }
  .platform.active{
    min-width:106px;
  }
}

@media(max-width:520px){
  .platform{
    height:40px;
    min-height:40px;
  }
  .platform:not(.active){
    width:40px;
    min-width:40px;
    max-width:40px;
  }
  .platform.active{
    min-width:100px;
    padding:6px 10px;
  }
  .icon-btn{
    width:40px;
    height:40px;
    border-radius:10px;
  }
  .icon-btn img{
    width:20px;
    height:20px;
  }
}


/* =========================================================
   Platform navigation labels — 0.1.82
   Keep compact sizing, but show names and "Скоро" for all channels.
   Max is temporarily removed from markup.
   ========================================================= */

.platforms{
  gap:7px;
}

/* All platform buttons are compact but labeled */
.platform,
.platform:not(.active),
.platform.active{
  width:auto;
  max-width:none;
  min-width:0;
  min-height:44px;
  height:44px;
  padding:6px 11px;
  justify-content:flex-start;
  gap:7px;
}

.platform.active{
  padding-left:11px;
  padding-right:12px;
}

.platform:not(.active) .platform-text{
  display:flex;
}

.platform-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}

.platform-text b{
  font-size:12px;
  line-height:1.05;
  font-weight:700;
  white-space:nowrap;
}

.platform-text small{
  display:block;
  margin-top:2px;
  font-size:9px;
  line-height:1;
  font-weight:400;
  white-space:nowrap;
}

.platform-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  font-size:13px;
}

.image-icon{
  width:21px;
  height:21px;
  flex:0 0 21px;
}

.email-image-icon img{
  width:19px;
  height:19px;
}

/* Tooltips for collapsed channels are no longer needed */
.platform:not(.active)::after{
  display:none !important;
}

/* Keep disabled channels visually quiet */
.platform.disabled{
  padding-left:10px;
  padding-right:10px;
}

@media(max-width:1100px){
  .platform{
    padding-left:8px;
    padding-right:8px;
    gap:6px;
  }

  .platform-text b{
    font-size:11px;
  }

  .platform-text small{
    font-size:8px;
  }
}

@media(max-width:850px){
  .platforms{
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:none;
  }

  .platforms::-webkit-scrollbar{
    display:none;
  }

  .platform{
    flex:0 0 auto;
  }
}

@media(max-width:520px){
  .platform,
  .platform:not(.active),
  .platform.active{
    height:40px;
    min-height:40px;
    padding:5px 8px;
  }

  .platform-text b{
    font-size:10px;
  }

  .platform-text small{
    font-size:8px;
  }
}


/* =========================================================
   Readable Typography Standard — 0.1.83
   Based on the visual scale of 0.1.77.
   Headings and navigation are intentionally preserved.
   ========================================================= */

:root{
  --sf-font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Main readable interface scale */
  --sf-text-main:15px;
  --sf-text-control:14px;
  --sf-text-label:14px;
  --sf-text-secondary:13px;
  --sf-text-table:13px;
  --sf-text-tiny:12px;

  --sf-line-main:1.48;
  --sf-line-compact:1.35;

  --sf-weight-regular:400;
  --sf-weight-medium:500;
  --sf-weight-semibold:600;
  --sf-weight-bold:700;
}

/* Base font family only. Sizes for page titles and navigation remain untouched. */
html,
body,
button,
input,
select,
textarea{
  font-family:var(--sf-font-family);
}

/* Main content text */
.content p,
.content li,
.content .description,
.content .note,
.content .info-text,
.builder-panel,
.analytics-page,
.mailing-page,
.forms-page,
.subscribers-page,
.settings-page{
  font-size:var(--sf-text-main);
  line-height:var(--sf-line-main);
  font-weight:var(--sf-weight-regular);
}

/* Form labels — readable, but not oversized */
.builder-field,
.builder-field > span,
.form-label,
.field-label,
.settings-label,
.filter-label,
label > span:first-child{
  font-size:var(--sf-text-label);
  line-height:var(--sf-line-compact);
  font-weight:var(--sf-weight-semibold);
}

/* Inputs, selects, textareas */
input,
select,
textarea,
.builder-field input,
.builder-field select,
.activity-row select,
.activity-join,
.emoji-input input{
  font-size:var(--sf-text-control);
  line-height:1.35;
  font-weight:var(--sf-weight-regular);
}

/* Buttons — keep compact, but readable */
.btn,
.builder-footer .btn,
.builder-text-btn,
.token-add,
.row-action-menu button,
.dialog-options button,
.template-pick,
.audience-card,
.content-mode{
  font-size:var(--sf-text-control);
  line-height:1.3;
  font-weight:var(--sf-weight-semibold);
}

/* Secondary text and hints */
.builder-field small,
.audience-card small,
.content-mode small,
.template-pick small,
.send-note,
.helper-text,
.muted,
.card-subtitle,
.form-hint,
.field-hint,
.builder-panel-heading p,
.builder-title p,
.analytics-head p,
.content-header p{
  font-size:var(--sf-text-secondary);
  line-height:1.4;
  font-weight:var(--sf-weight-regular);
}

/* Informational and warning strips */
.builder-info,
.builder-warning,
.info-box,
.notice-box,
.alert-box{
  font-size:var(--sf-text-secondary);
  line-height:1.45;
  font-weight:var(--sf-weight-regular);
}

/* Tables: slightly compact, but still comfortable for older users */
table{
  font-size:var(--sf-text-table);
  line-height:1.4;
}

table th{
  font-size:var(--sf-text-tiny);
  line-height:1.3;
  font-weight:var(--sf-weight-semibold);
}

table td{
  font-size:var(--sf-text-table);
  line-height:1.4;
  font-weight:var(--sf-weight-regular);
}

table td strong{
  font-weight:var(--sf-weight-semibold);
}

/* Status badges, chips and tags */
.status-badge,
.mailing-status,
.analytics-status,
.badge,
.pill,
.tag,
.token{
  font-size:var(--sf-text-tiny);
  line-height:1.25;
  font-weight:var(--sf-weight-semibold);
}

/* Modal body text */
.sf-modal p,
.sf-modal li,
.modal-body,
.dialog-body{
  font-size:var(--sf-text-main);
  line-height:var(--sf-line-main);
  font-weight:var(--sf-weight-regular);
}

/* Major headings and navigation intentionally keep their existing 0.1.77 rules above. */

/* Avoid very heavy synthetic text in secondary UI.
   Major headings/navigation remain governed by their existing CSS. */
.content p,
.content li,
.builder-field,
.builder-field small,
table,
table th,
table td,
.btn,
.builder-info,
.builder-warning{
  font-synthesis-weight:none;
}

/* Accessibility-oriented minimums for narrow screens:
   do not shrink body text below readable values. */
@media(max-width:760px){
  .content p,
  .content li,
  .builder-panel,
  input,
  select,
  textarea,
  .btn{
    font-size:14px;
  }

  .builder-field small,
  .helper-text,
  .muted,
  table,
  table td{
    font-size:12px;
  }
}


/* =========================================================
   Mailing draft + sender selector fixes — 0.1.84
   ========================================================= */

/* Sender selector uses the same custom design as group creation */
.mailing-sender-select{
  position:relative;
}

.mailing-sender-select .sf-select__trigger{
  min-height:74px;
  padding-top:10px;
  padding-bottom:10px;
}

.mailing-sender-select .sf-select__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}

.mailing-sender-select .sf-select__content small,
.mailing-sender-select .sf-select__content strong,
.mailing-sender-select .sf-select__content em{
  display:block;
  margin:0;
  padding:0;
  line-height:16px;
}

.mailing-sender-select .sf-select__content small{
  color:#20a65a;
  font-weight:600;
}

.mailing-sender-select .sf-select__content strong{
  font-size:15px;
}

.mailing-sender-select .sf-select__content em{
  font-size:13px;
}

.mailing-sender-select .sf-select__option-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mailing-sender-select .sf-select__option-name,
.mailing-sender-select .sf-select__option-email{
  line-height:18px;
}

/* Draft icon supplied by the project owner */
.builder-save-draft-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.builder-save-draft-btn img{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:0 0 20px;
}

/* Draft status in the mailing list */
.mailing-status.draft{
  background:#eef2f6;
  color:#66768b;
}


/* =========================================================
   Mailing builder step tabs refinement — 0.1.85
   ========================================================= */
.builder-steps{
  display:flex;
  align-items:stretch;
  gap:0;
  border:1px solid #dbe5f0;
  border-radius:16px;
  background:#f7faff;
  overflow:hidden;
  margin-bottom:18px;
}
.builder-step{
  position:relative;
  flex:1 1 0;
  min-height:78px;
  padding:0 22px 0 30px;
  border:0;
  border-right:1px solid transparent;
  background:#fff;
  color:#6b7a91;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  font:inherit;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.builder-step + .builder-step{padding-left:36px;}
.builder-step:last-child{border-right:0;}
.builder-step::before,
.builder-step::after{
  content:"";
  position:absolute;
  top:-1px;
  right:-27px;
  width:28px;
  height:calc(100% + 2px);
  clip-path:polygon(0 0,100% 50%,0 100%);
  pointer-events:none;
}
.builder-step::before{
  background:#dbe5f0;
  z-index:1;
}
.builder-step::after{
  right:-25px;
  width:26px;
  height:100%;
  top:0;
  background:#fff;
  z-index:2;
}
.builder-step:last-child::before,
.builder-step:last-child::after{display:none;}
.builder-step > *{position:relative;z-index:3;}
.builder-step span{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#edf2f7;
  color:#718198;
  font-weight:800;
  font-size:21px;
  line-height:1;
  flex:0 0 38px;
}
.builder-step b{
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.builder-step:hover{
  background:#f9fbff;
  color:#2d486f;
}
.builder-step:hover::after{background:#f9fbff;}
.builder-step.active{
  background:#eef5ff;
  color:#1677ff;
  box-shadow:inset 0 0 0 1px rgba(22,119,255,.08);
}
.builder-step.active::after{background:#eef5ff;}
.builder-step.active span{
  background:#1677ff;
  color:#fff;
}
.builder-step.done{
  background:#fbfdff;
  color:#51627b;
}
.builder-step.done::after{background:#fbfdff;}
.builder-step.done span{
  background:#68adfa;
  color:#fff;
}
html[data-theme="dark"] .builder-steps{
  background:#0f1728;
  border-color:#2a3951;
}
html[data-theme="dark"] .builder-step{
  background:#111a2b;
  color:#9fb0c7;
}
html[data-theme="dark"] .builder-step::before{background:#2a3951;}
html[data-theme="dark"] .builder-step::after{background:#111a2b;}
html[data-theme="dark"] .builder-step:hover{background:#162237;color:#d7e3f5;}
html[data-theme="dark"] .builder-step:hover::after{background:#162237;}
html[data-theme="dark"] .builder-step.active{background:#13294e;color:#65a9ff;}
html[data-theme="dark"] .builder-step.active::after{background:#13294e;}
html[data-theme="dark"] .builder-step.done{background:#111f34;color:#c8d6eb;}
html[data-theme="dark"] .builder-step.done::after{background:#111f34;}
@media(max-width:1150px){
  .builder-steps{
    display:grid;
    grid-template-columns:1fr;
  }
  .builder-step,
  .builder-step + .builder-step{
    min-height:62px;
    padding:0 18px;
  }
  .builder-step{
    border-right:0;
    border-bottom:1px solid #dbe5f0;
    justify-content:flex-start;
  }
  .builder-step:last-child{border-bottom:0;}
  .builder-step::before,
  .builder-step::after{display:none;}
}


/* =========================================================
   Key mailing field emphasis — 0.1.86
   ========================================================= */

#mailingName{
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  color:#17233d;
}

#mailingName::placeholder{
  font-size:16px;
  font-weight:400;
  color:#8b98aa;
}

html[data-theme="dark"] #mailingName{
  color:#e8eef7;
}

html[data-theme="dark"] #mailingName::placeholder{
  color:#7f91aa;
}


/* =========================================================
   Recipients step refinement — 0.1.87
   ========================================================= */
.audience-modes{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.audience-card{position:relative;min-height:104px;padding:14px 14px 13px;border:1px solid #d8e2ed;border-radius:12px;background:#fff;color:#15203a;cursor:pointer;display:grid;grid-template-columns:48px 1fr 24px;column-gap:12px;align-items:center;text-align:left}
.audience-card i{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#f2f6fa;font-style:normal;grid-row:1 / span 2;align-self:start}
.audience-card i img{width:22px;height:22px;object-fit:contain;display:block}
.audience-card__copy{display:grid;gap:4px;align-self:center}
.audience-card b{font-size:16px;line-height:1.2;color:#17233d}
.audience-card small{color:#75869f;font-size:12px;line-height:1.35;display:block}
.audience-card>span{position:static;justify-self:end;align-self:start;width:22px;height:22px;border:2px solid #c8d4e2;border-radius:50%;display:block}
.audience-card.active{border:2px solid #1677ff;background:#f8fbff;padding:13px}
.audience-card.active i{background:#e6f1ff}
.audience-card.active b{color:#1677ff}
.audience-card.active>span{border:7px solid #1677ff}
.recipient-scope-select .sf-select__content strong{font-size:15px}
.recipient-scope-select .sf-select__content em{font-size:12px;line-height:1.35;white-space:normal}
.recipient-scope-select .sf-select__trigger{min-height:70px}
.tree-select{position:relative}
.tree-select__trigger{width:100%;min-height:54px;border:1px solid #d8e2ed;border-radius:12px;background:#fff;padding:0 48px 0 16px;text-align:left;color:#17233d;font-size:15px;font-weight:600;cursor:pointer;position:relative}
.tree-select__trigger:hover{border-color:#bfd0e3;background:#fbfdff}
.tree-select.is-open .tree-select__trigger{border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,.12)}
.tree-select__value{display:block;line-height:1.35;padding:16px 0;color:#17233d}
.tree-select__chevron{position:absolute;right:18px;top:50%;width:10px;height:10px;border-right:2px solid #78889e;border-bottom:2px solid #78889e;transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.tree-select.is-open .tree-select__chevron{transform:translateY(-30%) rotate(225deg)}
.tree-select__menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid #d8e2ed;border-radius:14px;box-shadow:0 20px 45px rgba(12,25,48,.14);padding:10px;z-index:30;max-height:360px;overflow:auto}
.tree-select__section + .tree-select__section{margin-top:6px}
.tree-select__section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:#f6f8fc;border-radius:10px;padding:12px 14px;font-size:14px;font-weight:700;color:#17233d;cursor:pointer}
.tree-select__section-toggle::after{content:'';width:9px;height:9px;border-right:2px solid #78889e;border-bottom:2px solid #78889e;transform:rotate(45deg);transition:transform .18s ease}
.tree-select__section.is-open .tree-select__section-toggle::after{transform:rotate(225deg);margin-top:5px}
.tree-select__items{display:none;padding:10px 8px 4px 8px}
.tree-select__section.is-open .tree-select__items{display:grid;gap:8px}
.tree-select__item{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;cursor:pointer}
.tree-select__item:hover{background:#f8fbff}
.tree-select__item input{width:16px;height:16px;accent-color:#1677ff}
.tree-select__item span{font-size:14px;color:#24324b}
.selected-group-tokens{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.selected-group-tokens .token{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eef4ff;color:#29508a;font-size:13px;font-weight:600}
.selected-group-tokens .token button{border:0;background:transparent;color:#5f6f86;font-size:16px;line-height:1;cursor:pointer;padding:0}
html[data-theme="dark"] .audience-card,
html[data-theme="dark"] .tree-select__trigger,
html[data-theme="dark"] .tree-select__menu,
html[data-theme="dark"] .tree-select__section-toggle{background:#111a2b;border-color:#2a3951;color:#e5edf8}
html[data-theme="dark"] .audience-card b,
html[data-theme="dark"] .tree-select__value,
html[data-theme="dark"] .tree-select__item span{color:#e5edf8}
html[data-theme="dark"] .audience-card small{color:#9fb0c5}
html[data-theme="dark"] .audience-card i{background:#13263f}
html[data-theme="dark"] .audience-card.active{background:#142038}
html[data-theme="dark"] .tree-select__item:hover{background:#17233a}
html[data-theme="dark"] .selected-group-tokens .token{background:#173152;color:#c8dcff}
@media (max-width: 1200px){.audience-modes{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 820px){.audience-modes{grid-template-columns:1fr}.audience-card{grid-template-columns:42px 1fr 22px}}


/* =========================================================
   Recipients compact cards + select positioning — 0.1.88
   ========================================================= */
.audience-card{
  min-height:84px;
  padding:10px 12px;
  grid-template-columns:40px 1fr 20px;
  column-gap:10px;
}
.audience-card i{
  width:36px;
  height:36px;
  border-radius:9px;
  align-self:center;
}
.audience-card i img{
  width:19px;
  height:19px;
}
.audience-card__copy{
  gap:2px;
}
.audience-card b{
  font-size:15px;
  line-height:1.15;
}
.audience-card small{
  font-size:11px;
  line-height:1.28;
}
.audience-card>span{
  width:20px;
  height:20px;
  align-self:center;
}
.audience-card.active{
  padding:9px 11px;
}

/* Dropdown must anchor directly under its trigger */
.recipient-scope-select{
  position:relative;
  z-index:45;
}
.recipient-scope-select.is-open{
  z-index:80;
}
.recipient-scope-select .sf-select__trigger{
  min-height:62px;
}
.recipient-scope-select .sf-select__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  width:auto;
  margin:0;
  z-index:100;
}
.recipient-scope-select .sf-select__option{
  min-height:58px;
  padding-top:10px;
  padding-bottom:10px;
}
.recipient-scope-select .sf-select__option-email{
  line-height:1.3;
}
.recipient-safety-note{
  margin-top:10px;
  color:#72839c;
  font-size:12px;
  line-height:1.4;
}

@media(max-width:820px){
  .audience-card{
    min-height:78px;
    grid-template-columns:38px 1fr 20px;
  }
}


/* =========================================================
   Recipients activity refinement — 0.1.89
   ========================================================= */
/* Platform choice cards: 3 compact columns, content centered vertically */
.audience-modes{grid-template-columns:repeat(3,1fr);gap:12px}
.audience-card,
.audience-card.active{
  min-height:76px;
  padding:9px 12px;
  grid-template-columns:20px 38px 1fr;
  column-gap:10px;
  align-items:center;
}
.audience-card>span{
  grid-column:1;
  grid-row:1;
  justify-self:center;
  align-self:center;
  width:18px;
  height:18px;
}
.audience-card i{
  grid-column:2;
  grid-row:1;
  align-self:center;
  width:36px;
  height:36px;
}
.audience-card__copy{
  grid-column:3;
  grid-row:1;
  align-self:center;
  justify-self:stretch;
  gap:3px;
}
.audience-card b{font-size:15px;line-height:1.15}
.audience-card small{font-size:11px;line-height:1.25}

/* Global dropdown standard: keep chevron comfortably away from right border */
.sf-select__trigger{padding-right:26px}
.tree-select__trigger{padding-right:58px}
.tree-select__chevron{right:24px}

/* Activity filters use the same custom dropdown styling as other SendFactory selects */
.activity-conditions{display:grid;gap:12px}
.activity-row{
  display:grid;
  grid-template-columns:52px minmax(260px,1.45fr) minmax(210px,1fr) minmax(180px,.8fr) 34px;
  gap:12px;
  align-items:end;
  margin-bottom:0;
}
.activity-field{display:block;min-width:0}
.activity-field>small{display:block;margin:0 0 6px;font-size:12px;font-weight:700;color:#64758d}
.activity-row-marker{
  width:44px;height:44px;border-radius:11px;background:#edf5ff;
  display:grid;place-items:center;align-self:end;margin-bottom:1px;
}
.activity-row-marker img{width:20px;height:20px;object-fit:contain}
.activity-operator-field{align-self:end}
.activity-operator-field .sf-select__trigger{min-height:46px;padding-left:13px;padding-right:22px}
.activity-custom-select{position:relative;z-index:20}
.activity-custom-select.is-open{z-index:120}
.activity-custom-select .sf-select__trigger{
  min-height:46px;
  padding-top:9px;
  padding-bottom:9px;
  padding-left:14px;
  padding-right:26px;
  border-radius:9px;
}
.activity-custom-select .sf-select__content{display:block}
.activity-custom-select .sf-select__content strong{
  display:block;font-size:14px;line-height:1.25;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.activity-custom-select .sf-select__menu{
  top:calc(100% + 6px);
  z-index:140;
  max-height:260px;
  overflow:auto;
}
.activity-custom-select .sf-select__option{min-height:42px;padding:9px 12px}
.activity-custom-select .sf-select__option-name{font-size:13px;font-weight:600}
.activity-remove{
  width:34px;height:46px;border:0;background:transparent;color:#7a8aa0;
  font-size:27px;line-height:1;cursor:pointer;border-radius:8px;
}
.activity-remove:hover{background:#fff0f0;color:#e34b55}

@media(max-width:1200px){
  .audience-modes{grid-template-columns:repeat(3,1fr)}
  .activity-row{grid-template-columns:52px 1fr 1fr;align-items:end}
  .activity-period-field{grid-column:2/3}
  .activity-remove{grid-column:3;justify-self:start}
}
@media(max-width:820px){
  .audience-modes{grid-template-columns:1fr}
  .activity-row{grid-template-columns:44px 1fr}
  .activity-field,.activity-period-field{grid-column:2}
  .activity-remove{grid-column:2;justify-self:end}
}


/* =========================================================
   Activity selector + groups completeness fixes — 0.1.90
   ========================================================= */

/* More space between condition rows and the add-condition action */
#addActivityCondition{
  margin-top:14px;
  padding-top:6px;
}

/* Operator selector must be wide enough to show И / ИЛИ in both trigger and menu */
.activity-row{
  grid-template-columns:86px minmax(260px,1.45fr) minmax(210px,1fr) minmax(180px,.8fr) 34px;
}
.activity-operator-field{
  width:86px;
  min-width:86px;
}
.activity-operator-field .activity-custom-select,
.activity-operator-field .sf-select__trigger{
  width:86px;
  min-width:86px;
}
.activity-operator-field .sf-select__trigger{
  padding-left:14px;
  padding-right:30px;
}
.activity-operator-field .sf-select__content strong{
  overflow:visible;
  text-overflow:clip;
}
.activity-operator-field .sf-select__menu{
  min-width:96px;
  width:96px;
  left:0;
  right:auto;
  overflow:visible;
}
.activity-operator-field .sf-select__option{
  grid-template-columns:minmax(0,1fr) 18px;
  padding-left:14px;
  padding-right:10px;
}
.activity-operator-field .sf-select__option-name{
  display:block;
  min-width:34px;
  color:#17233d;
  white-space:nowrap;
  overflow:visible;
}

/* Result count icon */
.recipient-total{
  display:flex;
  align-items:center;
  gap:7px;
}
.recipient-total__icon{
  width:17px;
  height:17px;
  object-fit:contain;
  flex:0 0 17px;
}

/* Empty category text */
.tree-select__empty{
  padding:8px 10px;
  color:#8997aa;
  font-size:13px;
}

html[data-theme="dark"] .activity-operator-field .sf-select__option-name{
  color:#e5edf8;
}

@media(max-width:1200px){
  .activity-row{grid-template-columns:86px 1fr 1fr;}
}
@media(max-width:820px){
  .activity-row{grid-template-columns:86px 1fr;}
}


/* =========================================================
   Activity mailing dropdown — 0.1.91
   ========================================================= */
.activity-custom-select[data-activity-select="mailing"] .sf-select__menu{
  max-height:226px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  padding-right:6px;
}
.activity-custom-select[data-activity-select="mailing"] .sf-select__option{
  min-height:42px;
}
.activity-custom-select[data-activity-select="mailing"] .sf-select__menu::-webkit-scrollbar{
  width:8px;
}
.activity-custom-select[data-activity-select="mailing"] .sf-select__menu::-webkit-scrollbar-track{
  background:transparent;
}
.activity-custom-select[data-activity-select="mailing"] .sf-select__menu::-webkit-scrollbar-thumb{
  background:#c6d3e3;
  border-radius:999px;
}
.activity-custom-select[data-activity-select="mailing"] .sf-select__menu{
  scrollbar-width:thin;
  scrollbar-color:#c6d3e3 transparent;
}
html[data-theme="dark"] .activity-custom-select[data-activity-select="mailing"] .sf-select__menu::-webkit-scrollbar-thumb{
  background:#41546d;
}
html[data-theme="dark"] .activity-custom-select[data-activity-select="mailing"] .sf-select__menu{
  scrollbar-color:#41546d transparent;
}


/* =========================================================
   Unsaved mailing guard — 0.1.92
   ========================================================= */
body.sf-modal-open{
  overflow:hidden;
}


/* =========================================================
   Unsaved mailing modal visibility fix — 0.1.96
   There are two generations of modal styles in SendFactory.
   Older .sf-modal-backdrop rules left opacity:0 on the new
   mailing warning overlay, so it blocked the page but its
   dialog was invisible. These scoped rules resolve the clash.
   ========================================================= */

#unsavedModal.sf-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  background:rgba(24,39,58,.54) !important;
  backdrop-filter:blur(2px);
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#unsavedModal.sf-modal-backdrop[hidden]{
  display:none !important;
}

#unsavedModal > .unsaved-modal{
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  display:block !important;
  width:min(610px,96vw) !important;
  max-width:610px !important;
  height:auto !important;
  max-height:calc(100vh - 40px) !important;
  margin:0 !important;
  padding:34px 30px 26px !important;
  overflow:auto !important;
  place-items:initial !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  background:#fff !important;
  border:1px solid #dbe3ed !important;
  border-radius:14px !important;
  box-shadow:0 24px 90px rgba(0,0,0,.24) !important;
  text-align:center !important;
}

#unsavedModal .unsaved-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

#unsavedModal .unsaved-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

html[data-theme="dark"] #unsavedModal > .unsaved-modal{
  background:#111a2b !important;
  border-color:#2a3951 !important;
  color:#e6edf7 !important;
}


/* =========================================================
   Exclusions step refinement — 0.1.97
   ========================================================= */

.exclusion-section{
  margin-top:26px;
}

.exclusion-groups-section{
  margin-top:0;
}

.exclusion-date-block{
  margin-top:28px;
}

.exclusion-activity{
  margin-top:30px;
}

.exclusion-activity h3{
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
}

#excludeTreeMount .tree-select{
  width:100%;
}

#excludeGroupTokens{
  margin-top:12px;
}

#excludeActivityConditions + #addExcludeActivity{
  margin-top:14px;
  padding-top:6px;
}

#excludeActivityConditions .activity-custom-select[data-activity-select="mailing"] .sf-select__menu{
  max-height:226px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}



/* =========================================================
   Exclusions result counter — 0.1.98
   ========================================================= */
.exclusion-total{
  margin-top:20px;
}


/* =========================================================
   Content step refinement — 0.1.101
   ========================================================= */

.content-modes{
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:16px;
}

.content-mode,
.content-mode.active{
  position:relative;
  min-height:76px;
  padding:9px 12px;
  border-radius:12px;
  display:grid;
  grid-template-columns:20px 38px 1fr;
  column-gap:10px;
  align-items:center;
  text-align:left;
}

.content-mode.active{
  padding:8px 11px;
}

.content-mode-radio{
  grid-column:1;
  grid-row:1;
  justify-self:center;
  align-self:center;
  position:static!important;
  width:18px!important;
  height:18px!important;
  border:2px solid #c8d4e2!important;
  border-radius:50%!important;
  display:block!important;
}

.content-mode.active .content-mode-radio{
  border:6px solid #1677ff!important;
}

.content-mode i{
  grid-column:2;
  grid-row:1;
  width:36px;
  height:36px;
  border-radius:9px;
  align-self:center;
  display:grid;
  place-items:center;
  background:#f2f6fa;
}

.content-mode i img{
  display:block;
  width:20px;
  height:20px;
  object-fit:contain;
}

.content-mode.active i{
  background:#e6f1ff;
}

.content-mode-copy{
  grid-column:3;
  grid-row:1;
  display:grid;
  gap:3px;
  align-self:center;
}

.content-mode b{
  font-size:15px;
  line-height:1.15;
}

.content-mode small{
  font-size:11px;
  line-height:1.25;
}

.choose-template-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.choose-template-btn img{
  width:19px;
  height:19px;
  object-fit:contain;
}

.template-current input[readonly]{
  background:#f8fafc;
  color:#17233d;
  cursor:default;
  font-weight:600;
}

.preview-email-btn{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
}

.preview-email-eye{
  font-size:16px;
  line-height:1;
}

/* Template chooser */
.builder-dialog:has(.template-picker-cards){
  width:min(760px,96vw);
}

.template-modal-intro{
  margin:0 0 14px;
  color:#6f8099;
  font-size:13px;
}

.template-picker-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.template-picker-cards .template-pick{
  position:relative;
  min-height:180px;
  padding:12px;
  border:1px solid #d9e3ee;
  border-radius:12px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}

.template-picker-cards .template-pick:hover{
  border-color:#a9c9ee;
  background:#fbfdff;
}

.template-picker-cards .template-pick.selected{
  border:2px solid #1677ff;
  padding:11px;
  background:#f8fbff;
}

.template-pick-preview{
  display:flex;
  flex-direction:column;
  min-height:154px;
  padding:14px;
  border-radius:9px;
  background:linear-gradient(180deg,#f1f7ff,#fff);
}

.template-pick-brand{
  margin-bottom:18px;
  color:#17233d;
  font-size:11px;
  font-weight:800;
}

.template-pick-preview strong{
  margin-bottom:7px;
  color:#17233d;
  font-size:15px;
}

.template-pick-preview small{
  color:#71839b;
  font-size:12px;
  line-height:1.35;
}

.template-pick-preview em{
  width:max-content;
  margin-top:auto;
  padding:4px 7px;
  border-radius:999px;
  background:#eaf3ff;
  color:#1677ff;
  font-size:10px;
  font-style:normal;
  font-weight:700;
}

.template-pick-radio{
  position:absolute;
  top:12px;
  right:12px;
  width:20px;
  height:20px;
  border:2px solid #c8d4e2;
  border-radius:50%;
  background:#fff;
}

.template-pick.selected .template-pick-radio{
  border:6px solid #1677ff;
}

.template-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e5ebf2;
}

/* Email preview */
.builder-dialog:has(.email-preview-modal){
  width:min(980px,96vw);
}

.email-preview-tabs{
  display:flex;
  justify-content:center;
  margin:4px 0 18px;
}

.email-preview-tab{
  min-width:145px;
  height:40px;
  border:1px solid #d7e2ee;
  background:#fff;
  color:#33445f;
  font-weight:700;
  cursor:pointer;
}

.email-preview-tab:first-child{
  border-radius:9px 0 0 9px;
}

.email-preview-tab:last-child{
  margin-left:-1px;
  border-radius:0 9px 9px 0;
}

.email-preview-tab.active{
  position:relative;
  z-index:1;
  border-color:#1677ff;
  background:#1677ff;
  color:#fff;
}

.email-preview-subject,
.email-preview-preheader{
  display:flex;
  gap:8px;
  align-items:baseline;
  margin-bottom:10px;
  color:#26354d;
  font-size:13px;
}

.email-preview-subject span,
.email-preview-preheader span{
  color:#7b8ca4;
}

.email-preview-device{
  margin:18px auto 0;
  border:1px solid #d6e1ec;
  background:#eef3f8;
  overflow:hidden;
  transition:max-width .18s ease;
}

.email-preview-device.desktop{
  max-width:820px;
  border-radius:14px;
}

.email-preview-device.mobile{
  max-width:390px;
  border-radius:28px;
  border-width:8px;
  border-color:#1d2430;
}

.email-preview-browserbar{
  display:flex;
  gap:6px;
  padding:10px 12px;
  background:#e6edf5;
}

.email-preview-device.mobile .email-preview-browserbar{
  display:none;
}

.email-preview-browserbar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#b9c5d2;
}

.email-preview-content{
  min-height:420px;
  padding:24px 36px;
  background:#fff;
  color:#25324a;
  text-align:center;
  overflow:auto;
}

.email-preview-device.mobile .email-preview-content{
  min-height:560px;
  padding:22px 18px;
}

.email-preview-content h1{
  font-size:28px;
  color:#111b36;
}

.email-preview-device.mobile .email-preview-content h1{
  font-size:22px;
}

.email-preview-content p{
  font-size:14px;
  line-height:1.5;
}

html[data-theme="dark"] .template-picker-cards .template-pick,
html[data-theme="dark"] .email-preview-tab{
  background:#111a2b;
  border-color:#2a3951;
  color:#dbe6f4;
}

html[data-theme="dark"] .template-pick-preview{
  background:linear-gradient(180deg,#17233a,#111a2b);
}

html[data-theme="dark"] .template-pick-brand,
html[data-theme="dark"] .template-pick-preview strong,
html[data-theme="dark"] .email-preview-subject,
html[data-theme="dark"] .email-preview-preheader{
  color:#e6edf7;
}

html[data-theme="dark"] .template-current input[readonly]{
  background:#0f1728;
  color:#e6edf7;
}

@media(max-width:760px){
  .content-modes,
  .template-picker-cards{
    grid-template-columns:1fr;
  }
  .selected-template-row{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Content mode cards layout fix — 0.1.102
   ========================================================= */

/* Old generic rule .content-mode > span was also applied to the text wrapper.
   Keep only the radio as a round selector and restore the copy block to the grid. */
.content-mode > .content-mode-copy,
.content-mode.active > .content-mode-copy{
  position:static !important;
  right:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  border-radius:0 !important;
  display:grid !important;
  grid-column:3 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:stretch !important;
  gap:3px !important;
  min-width:0 !important;
  background:transparent !important;
}

/* The radio is the only direct span that should look like the active selector. */
.content-mode > .content-mode-radio,
.content-mode.active > .content-mode-radio{
  position:static !important;
  right:auto !important;
  top:auto !important;
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:center !important;
  align-self:center !important;
  width:18px !important;
  height:18px !important;
  border:2px solid #c8d4e2 !important;
  border-radius:50% !important;
  display:block !important;
  background:#fff !important;
}

.content-mode.active > .content-mode-radio{
  border:6px solid #1677ff !important;
}

/* Match the compact recipient cards without letting legacy flex/grid rules interfere. */
.content-mode,
.content-mode.active{
  display:grid !important;
  grid-template-columns:20px 38px minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  align-content:center !important;
  gap:0 10px !important;
  min-height:76px !important;
  overflow:hidden !important;
}

.content-mode{
  padding:9px 12px !important;
}

.content-mode.active{
  padding:8px 11px !important;
}

.content-mode i,
.content-mode.active i{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  margin:0 !important;
}

.content-mode-copy b,
.content-mode-copy small{
  display:block !important;
  width:auto !important;
  height:auto !important;
  position:static !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
}

.content-mode-copy b{
  white-space:normal;
}

.content-mode-copy small{
  white-space:normal;
  max-width:100%;
}

/* Preserve the existing selected-template layout from 0.1.100. */
.selected-template-row{
  grid-template-columns:260px minmax(0,1fr) !important;
  align-items:end !important;
}

@media(max-width:760px){
  .content-mode,
  .content-mode.active{
    grid-template-columns:20px 38px minmax(0,1fr) !important;
  }

  .selected-template-row{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   Generic mailing builder modal visibility fix — 0.1.103
   The old global .sf-modal-backdrop rule sets opacity:0.
   Scope the actual builder dialog so template selection and
   email preview are visible when the JS unhides the modal.
   ========================================================= */

#builderDialog.sf-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:10020 !important;
  display:grid !important;
  place-items:center !important;
  padding:20px !important;
  background:rgba(24,39,58,.54) !important;
  backdrop-filter:blur(2px);
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#builderDialog.sf-modal-backdrop[hidden]{
  display:none !important;
}

#builderDialog > .builder-dialog{
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  display:block !important;
  width:min(760px,96vw);
  max-height:calc(100vh - 40px) !important;
  overflow:auto !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  background:#fff !important;
  border:1px solid #dbe3ed !important;
  border-radius:14px !important;
  box-shadow:0 24px 90px rgba(0,0,0,.24) !important;
}

#builderDialog > .builder-dialog:has(.email-preview-modal){
  width:min(980px,96vw) !important;
}

#builderDialog > .builder-dialog:has(.template-picker-cards){
  width:min(760px,96vw) !important;
}

html[data-theme="dark"] #builderDialog > .builder-dialog{
  background:#111a2b !important;
  border-color:#2a3951 !important;
  color:#e6edf7 !important;
}


/* =========================================================
   Template chooser + preview corrections — 0.1.104
   ========================================================= */

/* The project already had old generic rules for .template-pick span.
   Reset the new card structure so those rules cannot break the layout. */
#builderDialog .template-picker-cards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
}

#builderDialog .template-picker-cards .template-pick{
  position:relative !important;
  display:block !important;
  min-width:0 !important;
  min-height:190px !important;
  padding:12px !important;
  border:1px solid #d8e2ed !important;
  border-radius:12px !important;
  background:#fff !important;
  overflow:hidden !important;
  text-align:left !important;
}

#builderDialog .template-picker-cards .template-pick.selected{
  padding:11px !important;
  border:2px solid #1677ff !important;
  background:#f8fbff !important;
}

#builderDialog .template-picker-cards .template-pick > .template-pick-preview{
  position:static !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  place-items:unset !important;
  grid-row:auto !important;
  width:100% !important;
  height:164px !important;
  padding:15px !important;
  border:0 !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#f1f7ff 0%,#fff 100%) !important;
  color:#17233d !important;
  box-sizing:border-box !important;
}

#builderDialog .template-picker-cards .template-pick-preview > .template-pick-brand{
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 0 20px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#17233d !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

#builderDialog .template-picker-cards .template-pick-preview > strong{
  display:block !important;
  margin:0 34px 7px 0 !important;
  color:#17233d !important;
  font-size:15px !important;
  line-height:1.25 !important;
}

#builderDialog .template-picker-cards .template-pick-preview > small{
  display:block !important;
  margin:0 !important;
  color:#71839b !important;
  font-size:12px !important;
  line-height:1.35 !important;
}

#builderDialog .template-picker-cards .template-pick-preview > em{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  height:auto !important;
  margin-top:auto !important;
  padding:4px 7px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#eaf3ff !important;
  color:#1677ff !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
}

#builderDialog .template-picker-cards .template-pick > .template-pick-radio{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  display:block !important;
  place-items:unset !important;
  grid-row:auto !important;
  width:20px !important;
  height:20px !important;
  padding:0 !important;
  border:2px solid #c8d4e2 !important;
  border-radius:50% !important;
  background:#fff !important;
  box-sizing:border-box !important;
}

#builderDialog .template-picker-cards .template-pick.selected > .template-pick-radio{
  border:6px solid #1677ff !important;
}

#builderDialog .template-modal-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid #e5ebf2 !important;
}

/* Preview device switcher */
#builderDialog .email-preview-tabs{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  margin:2px auto 18px !important;
}

#builderDialog .email-preview-tab{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:160px !important;
  height:42px !important;
  padding:0 18px !important;
  border:1px solid #d5e0ec !important;
  background:#fff !important;
  color:#33445f !important;
  font-size:13px !important;
  font-weight:700 !important;
  cursor:pointer !important;
}

#builderDialog .email-preview-tab:first-child{
  border-radius:9px 0 0 9px !important;
}

#builderDialog .email-preview-tab:last-child{
  margin-left:-1px !important;
  border-radius:0 9px 9px 0 !important;
}

#builderDialog .email-preview-tab.active{
  position:relative !important;
  z-index:2 !important;
  border-color:#1677ff !important;
  background:#1677ff !important;
  color:#fff !important;
}

#builderDialog .email-preview-tab-icon{
  position:static !important;
  display:inline !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:inherit !important;
  font-size:17px !important;
}

#builderDialog .email-preview-stage{
  display:flex !important;
  justify-content:center !important;
  width:100% !important;
  padding:2px 0 6px !important;
  overflow:auto !important;
}

#builderDialog .email-preview-device.desktop{
  width:100% !important;
  max-width:820px !important;
}

#builderDialog .email-preview-device.mobile{
  width:360px !important;
  max-width:360px !important;
}

#builderDialog .email-preview-device.mobile .email-preview-content{
  width:auto !important;
  min-height:540px !important;
}

html[data-theme="dark"] #builderDialog .template-picker-cards .template-pick{
  background:#111a2b !important;
  border-color:#2a3951 !important;
}

html[data-theme="dark"] #builderDialog .template-picker-cards .template-pick > .template-pick-preview{
  background:linear-gradient(180deg,#17233a,#111a2b) !important;
}

html[data-theme="dark"] #builderDialog .template-picker-cards .template-pick-preview > .template-pick-brand,
html[data-theme="dark"] #builderDialog .template-picker-cards .template-pick-preview > strong{
  color:#e6edf7 !important;
}

@media(max-width:720px){
  #builderDialog .template-picker-cards{
    grid-template-columns:1fr !important;
  }

  #builderDialog .email-preview-tab{
    min-width:130px !important;
  }
}


/* =========================================================
   Base email editor v2 — 0.1.105
   ========================================================= */

.email-builder-v2{
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 265px;
  min-height:620px;
  border:1px solid #d9e3ee;
  border-radius:12px;
  overflow:hidden;
  margin-top:14px;
  background:#f4f7fb;
}

.email-builder-v2 .editor-library,
.email-builder-v2 .editor-inspector{
  background:#fff;
}

.email-builder-v2 .editor-library{
  border-right:1px solid #d9e3ee;
}

.editor-library-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid #e4ebf3;
}

.editor-library-tabs button{
  height:46px;
  border:0;
  background:#fff;
  color:#718299;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  border-bottom:3px solid transparent;
}

.editor-library-tabs button.active{
  color:#1677ff;
  border-bottom-color:#1677ff;
}

.editor-library-panel{
  display:none;
  padding:14px;
}

.editor-library-panel.active{
  display:block;
}

.editor-library-section{
  margin-bottom:18px;
}

.editor-library-section>strong{
  display:block;
  margin-bottom:10px;
  color:#1d2a42;
  font-size:13px;
}

.editor-library-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.editor-library-section-head strong{
  font-size:13px;
}

.editor-small-link{
  border:0;
  background:transparent;
  color:#1677ff;
  font-size:11px;
  cursor:pointer;
}

.editor-column-presets{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.editor-column-presets>button{
  height:62px;
  padding:6px;
  border:1px solid #dce5ef;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.editor-column-presets>button:hover{
  border-color:#8fbaed;
  background:#f7fbff;
}

.column-preset{
  display:grid;
  width:100%;
  height:100%;
  gap:3px;
}

.column-preset.one{grid-template-columns:1fr}
.column-preset.two{grid-template-columns:1fr 1fr}
.column-preset.three{grid-template-columns:1fr 1fr 1fr}

.column-preset i{
  display:block;
  background:#9dcff2;
  border:1px solid #73b3e5;
  border-radius:2px;
}

.editor-block-grid-v2{
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:0;
}

.editor-block-grid-v2 button{
  height:72px;
  gap:6px;
  border-radius:8px;
  font-size:11px;
}

.editor-block-icon{
  width:auto!important;
  height:auto!important;
  min-width:24px;
  min-height:24px;
  background:transparent!important;
  color:#2469b3;
  font-size:22px!important;
  font-weight:500;
}

.editor-block-icon.button-icon{
  font-size:8px!important;
  padding:6px 7px;
  border-radius:3px;
  background:#2469b3!important;
  color:#fff;
}

.editor-composite-btn{
  width:100%;
  min-height:42px;
  margin-top:10px;
  border:1px solid #dce5ef;
  border-radius:8px;
  background:#fff;
  color:#42688e;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.editor-setting-row{
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:#63758c;
}

.editor-setting-row input[type="color"]{
  width:44px;
  height:34px;
  border:1px solid #d8e2ec;
  border-radius:7px;
  padding:3px;
  background:#fff;
}

.editor-width-select select{
  width:100%;
  height:38px;
  border:1px solid #d8e2ec;
  border-radius:8px;
  background:#fff;
  padding:0 10px;
}

.editor-toggle-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#52647b;
}

.email-builder-v2 .editor-main{
  min-width:0;
  background:#eaf1f9;
}

.email-builder-v2 .editor-toolbar{
  position:sticky;
  top:0;
  z-index:3;
  min-height:48px;
  height:auto;
  flex-wrap:wrap;
  gap:3px;
  padding:7px 9px;
  box-shadow:0 2px 8px rgba(20,45,80,.05);
}

.editor-toolbar-sep{
  width:1px;
  height:24px;
  margin:0 3px;
  background:#dbe3ed;
  flex:0 0 1px;
}

.editor-stage{
  min-height:570px;
  padding:28px 22px 44px;
  background:#dfeaf7;
  overflow:auto;
}

.email-builder-v2 .email-canvas{
  min-height:500px;
  max-width:760px;
  margin:0 auto;
  padding:28px 48px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(43,71,105,.10);
}

.editor-selected-element{
  outline:2px solid #1677ff!important;
  outline-offset:3px;
  position:relative;
}

.email-builder-v2 .editor-inspector{
  display:flex;
  flex-direction:column;
  border-left:1px solid #d9e3ee;
}

.editor-inspector-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:0 14px;
  border-bottom:1px solid #e4ebf3;
}

.editor-inspector-head strong{
  font-size:13px;
}

.editor-inspector-head button{
  width:28px;
  height:28px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#7d8da2;
  cursor:pointer;
  font-size:18px;
}

.editor-inspector-body{
  padding:14px;
  overflow:auto;
}

.editor-inspector-section{
  padding:14px 0;
  border-bottom:1px solid #edf1f5;
}

.editor-inspector-section:first-child{
  padding-top:0;
}

.editor-inspector-section>strong,
.editor-inspector-section-head strong{
  display:block;
  margin-bottom:9px;
  font-size:12px;
  color:#1e2b43;
}

.editor-inspector-section em{
  display:block;
  margin-top:6px;
  color:#7e8ca0;
  font-size:11px;
  font-style:normal;
}

.editor-inspector-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.editor-inspector-section-head button{
  border:0;
  background:transparent;
  color:#1677ff;
  font-size:11px;
  cursor:pointer;
}

.editor-inspector-color{
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:8px;
  color:#6f8097;
  font-size:11px;
}

.editor-inspector-color input{
  width:40px;
  height:34px;
  border:1px solid #d8e2ec;
  border-radius:7px;
  padding:3px;
  background:#fff;
}

.editor-ai-btn{
  width:100%;
  min-height:40px;
  margin:2px 0 4px;
  border:1px solid #f0b6df;
  border-radius:8px;
  background:#fff;
  color:#1677ff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.editor-device-switch{
  display:grid;
  grid-template-columns:1fr 42px 42px;
  border:1px solid #d9e3ee;
  border-radius:8px;
  overflow:hidden;
}

.editor-device-switch button{
  height:38px;
  border:0;
  border-right:1px solid #e1e8f0;
  background:#fff;
  color:#667991;
  cursor:pointer;
  font-size:11px;
}

.editor-device-switch button:last-child{
  border-right:0;
}

.editor-device-switch button.active{
  color:#1677ff;
  background:#f3f8ff;
  font-weight:700;
}

.editor-padding-grid{
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  grid-template-areas:
    ". top ."
    "left link right"
    ". bottom .";
  gap:6px;
  align-items:center;
}

.editor-padding-grid input{
  width:100%;
  height:36px;
  border:1px solid #d8e2ec;
  border-radius:7px;
  text-align:center;
}

#paddingTop{grid-area:top}
#paddingLeft{grid-area:left}
#paddingRight{grid-area:right}
#paddingBottom{grid-area:bottom}

#linkPaddings{
  grid-area:link;
  width:40px;
  height:36px;
  border:1px solid #d8e2ec;
  border-radius:7px;
  background:#fff;
  cursor:pointer;
}

#linkPaddings.active{
  border-color:#1677ff;
  color:#1677ff;
  background:#f2f7ff;
}

.editor-padding-presets{
  font-size:10px!important;
}

.editor-inspector-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-top:1px solid #e4ebf3;
  background:#fff;
}

.editor-delete-btn{
  width:38px;
  height:36px;
  border:1px solid #f3b6b6;
  border-radius:7px;
  background:#fff;
  color:#e44b4b;
  cursor:pointer;
}

html[data-theme="dark"] .email-builder-v2 .editor-library,
html[data-theme="dark"] .email-builder-v2 .editor-inspector,
html[data-theme="dark"] .editor-library-tabs button,
html[data-theme="dark"] .editor-block-grid-v2 button,
html[data-theme="dark"] .editor-composite-btn,
html[data-theme="dark"] .editor-inspector-footer{
  background:#111a2b;
  color:#e6edf7;
}

html[data-theme="dark"] .editor-stage{
  background:#0f1725;
}

html[data-theme="dark"] .editor-library-section>strong,
html[data-theme="dark"] .editor-inspector-section>strong,
html[data-theme="dark"] .editor-inspector-section-head strong,
html[data-theme="dark"] .editor-inspector-head strong{
  color:#e6edf7;
}

@media(max-width:1280px){
  .email-builder-v2{
    grid-template-columns:220px minmax(0,1fr) 235px;
  }

  .editor-block-grid-v2{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:980px){
  .email-builder-v2{
    grid-template-columns:1fr;
  }

  .email-builder-v2 .editor-library,
  .email-builder-v2 .editor-inspector{
    border:0;
    border-bottom:1px solid #d9e3ee;
  }

  .email-builder-v2 .editor-inspector{
    border-top:1px solid #d9e3ee;
  }

  .editor-block-grid-v2{
    grid-template-columns:repeat(5,1fr);
  }
}


/* =========================================================
   Email editor v3 — two-column layout — 0.1.106
   ========================================================= */

.email-builder-v3{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 320px !important;
  min-height:650px;
  margin-top:14px;
  border:1px solid #d9e3ee;
  border-radius:12px;
  overflow:hidden;
  background:#f4f7fb;
}

.email-builder-v3 .editor-workspace{
  min-width:0;
  background:#eaf1f9;
}

.email-builder-v3 .editor-toolbar{
  position:sticky;
  top:0;
  z-index:4;
  min-height:48px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px;
  padding:7px 9px;
  border-bottom:1px solid #d9e3ee;
  background:#fff;
}

.email-builder-v3 .editor-stage{
  min-height:600px;
  padding:30px 24px 48px;
  background:#dfeaf7;
  overflow:auto;
}

.email-builder-v3 .email-canvas{
  min-height:520px;
  max-width:760px;
  margin:0 auto;
  padding:28px 48px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(43,71,105,.10);
  background:#fff;
}

.email-builder-v3 .editor-sidepanel{
  min-width:0;
  background:#fff;
  border-left:1px solid #d9e3ee;
}

.editor-sidepanel-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid #e3eaf2;
  background:#fff;
}

.editor-sidepanel-tabs button{
  height:48px;
  padding:0 8px;
  border:0;
  border-bottom:3px solid transparent;
  background:#fff;
  color:#73839a;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.editor-sidepanel-tabs button.active{
  color:#1677ff;
  border-bottom-color:#1677ff;
}

.editor-sidepanel-body{
  min-height:600px;
  background:#fff;
}

.editor-sidepanel-panel{
  display:none;
  min-height:600px;
  padding:14px;
}

.editor-sidepanel-panel.active{
  display:block;
}

.editor-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  margin-bottom:8px;
}

.editor-panel-head strong{
  color:#1d2a42;
  font-size:13px;
}

.editor-panel-head button{
  width:28px;
  height:28px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#7e8da1;
  cursor:pointer;
  font-size:18px;
}

.editor-panel-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #edf1f5;
}

.editor-block-section{
  margin-bottom:20px;
}

.editor-block-section>strong{
  display:block;
  margin-bottom:10px;
  color:#1d2a42;
  font-size:12px;
}

.editor-column-presets-v3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.editor-column-presets-v3>button{
  height:72px;
  padding:7px;
  border:1px solid #d9e3ee;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}

.editor-column-presets-v3>button:hover{
  border-color:#9bbfe9;
  background:#f7fbff;
}

.editor-block-grid-v3{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  padding:0;
}

.editor-block-grid-v3 button{
  min-height:84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 8px;
  border:1px solid #d9e3ee;
  border-radius:9px;
  background:#fff;
  color:#25344e;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
}

.editor-block-grid-v3 button:hover{
  border-color:#9bbfe9;
  background:#f7fbff;
}

.editor-block-grid-v3 button i{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:28px;
  color:#2b6fb7;
  font-size:23px;
  font-style:normal;
}

.editor-block-grid-v3 .button-mini{
  min-width:auto;
  min-height:auto;
  padding:5px 7px;
  border-radius:4px;
  background:#2b6fb7;
  color:#fff;
  font-size:8px;
}

.editor-native-select{
  width:100%;
  height:40px;
  border:1px solid #d8e2ec;
  border-radius:8px;
  padding:0 10px;
  background:#fff;
  color:#26354d;
}

.editor-global-padding-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.editor-global-padding-grid label{
  display:grid;
  gap:5px;
}

.editor-global-padding-grid label span{
  color:#78889d;
  font-size:10px;
}

.editor-global-padding-grid input{
  width:100%;
  height:36px;
  border:1px solid #d8e2ec;
  border-radius:7px;
  padding:0 8px;
}

html[data-theme="dark"] .email-builder-v3 .editor-toolbar,
html[data-theme="dark"] .email-builder-v3 .editor-sidepanel,
html[data-theme="dark"] .editor-sidepanel-tabs,
html[data-theme="dark"] .editor-sidepanel-tabs button,
html[data-theme="dark"] .editor-sidepanel-body,
html[data-theme="dark"] .editor-sidepanel-panel,
html[data-theme="dark"] .editor-column-presets-v3>button,
html[data-theme="dark"] .editor-block-grid-v3 button{
  background:#111a2b;
  color:#e6edf7;
}

html[data-theme="dark"] .editor-panel-head strong,
html[data-theme="dark"] .editor-block-section>strong{
  color:#e6edf7;
}

html[data-theme="dark"] .email-builder-v3 .editor-stage{
  background:#0f1725;
}

@media(max-width:1120px){
  .email-builder-v3{
    grid-template-columns:minmax(0,1fr) 285px !important;
  }
}

@media(max-width:900px){
  .email-builder-v3{
    grid-template-columns:1fr !important;
  }

  .email-builder-v3 .editor-sidepanel{
    border-left:0;
    border-top:1px solid #d9e3ee;
  }

  .editor-sidepanel-panel,
  .editor-sidepanel-body{
    min-height:0;
  }
}


/* =========================================================
   Editor guides, letter appearance and drag/drop — 0.1.107
   ========================================================= */

.editor-guide-toggle{
  font-weight:600;
}

.editor-range-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.editor-range-row input[type="range"]{
  width:100%;
}

.editor-range-row>span:last-child{
  min-width:48px;
  text-align:right;
  color:#61738b;
  font-size:11px;
}

.editor-range-label{
  grid-column:1 / -1;
  color:#78889d;
  font-size:10px;
  margin-bottom:-5px;
}

.editor-shadow-settings{
  display:grid;
  gap:11px;
  margin-top:12px;
}

.editor-shadow-settings.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* Visible layout lines, enabled only by the settings checkbox. */
.email-canvas.show-email-guides{
  outline:1px dashed #86b8ef;
  outline-offset:-1px;
}

.email-canvas.show-email-guides > *:not(.editor-drop-line){
  outline:1px dashed rgba(69,143,225,.55);
  outline-offset:2px;
}

.email-canvas.show-email-guides [data-editor-column-cell]{
  outline:1px dashed rgba(83,156,235,.45);
  outline-offset:-2px;
}

/* Palette drag state */
.editor-block-grid-v3 button[draggable="true"],
.editor-column-presets-v3 button[draggable="true"]{
  cursor:grab;
  user-select:none;
}

.editor-block-grid-v3 button[draggable="true"]:active,
.editor-column-presets-v3 button[draggable="true"]:active{
  cursor:grabbing;
}

.editor-block-grid-v3 button.is-dragging,
.editor-column-presets-v3 button.is-dragging{
  opacity:.5;
}

/* Existing blocks are movable with LMB drag. */
.email-canvas > [draggable="true"]{
  cursor:grab;
}

.email-canvas > [draggable="true"]:active{
  cursor:grabbing;
}

.email-canvas > .is-dragging-block{
  opacity:.45;
}

.editor-drop-line{
  height:4px !important;
  min-height:4px !important;
  margin:7px 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px;
  background:#1677ff;
  box-shadow:0 0 0 2px rgba(22,119,255,.10);
  pointer-events:none;
}

.email-canvas.show-email-guides > .editor-drop-line{
  outline:0 !important;
}

html[data-theme="dark"] .editor-range-row>span:last-child,
html[data-theme="dark"] .editor-range-label{
  color:#a8b5c7;
}


/* =========================================================
   Settings accordion — 0.1.108
   ========================================================= */

.editor-settings-head{
  margin-bottom:6px;
}

.editor-guide-under-title{
  margin:0 0 12px;
  padding:10px 0 12px;
  border-bottom:1px solid #edf1f5;
}

.editor-settings-accordion{
  display:grid;
  gap:8px;
}

.editor-settings-group{
  border:1px solid #e1e8f0;
  border-radius:9px;
  background:#fff;
  overflow:hidden;
}

.editor-settings-toggle{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  border:0;
  background:#fff;
  color:#24344e;
  font-size:12px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}

.editor-settings-toggle:hover{
  background:#f8fbff;
}

.editor-settings-chevron{
  flex:0 0 auto;
  color:#8392a6;
  font-size:16px;
  line-height:1;
  transition:transform .16s ease;
}

.editor-settings-toggle[aria-expanded="true"] .editor-settings-chevron{
  transform:rotate(180deg);
}

.editor-settings-content{
  padding:12px;
  border-top:1px solid #edf1f5;
  background:#fbfdff;
}

.editor-settings-content[hidden]{
  display:none !important;
}

html[data-theme="dark"] .editor-settings-group,
html[data-theme="dark"] .editor-settings-toggle{
  background:#111a2b;
  border-color:#2a3951;
  color:#e6edf7;
}

html[data-theme="dark"] .editor-settings-toggle:hover,
html[data-theme="dark"] .editor-settings-content{
  background:#152036;
}


/* =========================================================
   Settings groups merge — 0.1.109
   ========================================================= */
.editor-setting-stack{
  display:grid;
  gap:12px;
}

.editor-setting-stack .editor-toggle-row{
  margin:0;
}


/* =========================================================
   Custom email width select — 0.1.110
   ========================================================= */
.editor-width-custom-select{
  width:100%;
}

.editor-width-custom-select .sf-select__trigger{
  width:100%;
  min-height:40px;
  padding-right:44px;
}

.editor-width-custom-select .sf-select__chevron{
  right:16px;
}

.editor-width-custom-select .sf-select__menu{
  left:0;
  right:0;
  width:100%;
  z-index:30;
}

.editor-width-custom-select .sf-select__option{
  min-height:40px;
}


/* =========================================================
   Width dropdown positioning fix — 0.1.111
   ========================================================= */

/* The custom width select must be the positioning parent for its menu. */
.editor-width-custom-select{
  position:relative !important;
  width:100% !important;
}

/* Let the opened dropdown leave the accordion body without being clipped. */
.editor-settings-group:has(.editor-width-custom-select.is-open){
  overflow:visible !important;
  position:relative;
  z-index:40;
}

.editor-settings-group:has(.editor-width-custom-select.is-open) .editor-settings-content{
  overflow:visible !important;
  position:relative;
  z-index:41;
}

.editor-width-custom-select .sf-select__menu{
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  top:calc(100% + 8px) !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  z-index:100 !important;
  box-sizing:border-box !important;
}

.editor-width-custom-select .sf-select__trigger{
  box-sizing:border-box !important;
}


/* =========================================================
   Width select typography + arrow spacing — 0.1.112
   ========================================================= */

/* Match the visual weight/size of numeric spacing controls. */
.editor-width-custom-select .sf-select__trigger,
.editor-width-custom-select .sf-select__option,
.editor-width-custom-select .sf-select__option-name,
#emailContentWidthLabel{
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
}

.editor-width-custom-select .sf-select__trigger{
  min-height:36px !important;
  padding-left:10px !important;
  padding-right:32px !important;
}

/* Keep the chevron comfortably inset, but not too far from the right edge. */
.editor-width-custom-select .sf-select__chevron{
  right:10px !important;
}

.editor-width-custom-select .sf-select__option{
  min-height:36px !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}


/* =========================================================
   Width select font size match — 0.1.113
   ========================================================= */

/* Match the numeric size used in the padding inputs (e.g. 28). */
.editor-width-custom-select .sf-select__trigger,
.editor-width-custom-select .sf-select__option,
.editor-width-custom-select .sf-select__option-name,
#emailContentWidthLabel{
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
}


/* =========================================================
   Drag behavior + nested column content — 0.1.116
   ========================================================= */

/* Blocks show open hand; while LMB drag is active browser shows closed hand. */
.email-canvas > [draggable="true"],
.email-canvas [data-editor-column-cell] > [draggable="true"]{
  cursor:grab;
}

.email-canvas > [draggable="true"]:active,
.email-canvas [data-editor-column-cell] > [draggable="true"]:active,
.email-canvas .is-dragging-block{
  cursor:grabbing !important;
}

.email-canvas .is-dragging-block{
  opacity:.48;
}

/* Columns are true drop containers for text and all other supported blocks. */
.editor-column-cell{
  position:relative;
  min-height:86px;
  padding:10px;
  border:1px dashed #c7d7e8;
  border-radius:7px;
  background:rgba(247,250,253,.7);
}

.editor-column-cell:has(.editor-drop-line){
  border-color:#7fb4ee;
  background:#f3f8ff;
}

.editor-column-drop-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  color:#91a0b3;
  font-size:11px;
  text-align:center;
  pointer-events:none;
}

.editor-column-drop-hint[hidden]{
  display:none !important;
}

/* Drop line also works inside a column cell. */
.editor-column-cell .editor-drop-line{
  margin:5px 0 !important;
}

/* Clicking an empty editor area is visually neutral and can clear selection. */
.email-builder-v3 .editor-stage,
.email-builder-v3 .email-canvas{
  cursor:default;
}


/* =========================================================
   Block movement mode — 0.1.117
   ========================================================= */

.editor-settings-top-toggles{
  display:grid;
  gap:8px;
  margin:0 0 12px;
  padding:10px 0 12px;
  border-bottom:1px solid #edf1f5;
}

.editor-settings-top-toggles .editor-toggle-row{
  margin:0;
}

.email-builder-v3 .editor-toolbar.is-disabled-by-move-mode{
  opacity:.42;
  pointer-events:none;
  user-select:none;
}

/* Normal edit mode: blocks behave like editable content, not draggable objects. */
.email-canvas:not(.move-blocks-mode) > [draggable="false"],
.email-canvas:not(.move-blocks-mode) [data-editor-column-cell] > [draggable="false"]{
  cursor:text;
}

/* Movement mode: blocks use grab / grabbing cursor. */
.email-canvas.move-blocks-mode > [draggable="true"],
.email-canvas.move-blocks-mode [data-editor-column-cell] > [draggable="true"]{
  cursor:grab;
}

.email-canvas.move-blocks-mode > [draggable="true"]:active,
.email-canvas.move-blocks-mode [data-editor-column-cell] > [draggable="true"]:active,
.email-canvas.move-blocks-mode .is-dragging-block{
  cursor:grabbing !important;
}

/* Palette blocks are draggable only while movement mode is enabled. */
.editor-block-grid-v3 button.drag-disabled,
.editor-column-presets-v3 button.drag-disabled{
  cursor:pointer !important;
}

.email-canvas.move-blocks-mode{
  user-select:none;
}

.email-canvas.move-blocks-mode a{
  pointer-events:auto;
}


/* =========================================================
   Editor context menu — 0.1.118
   ========================================================= */
.editor-context-menu{
  position:fixed;
  z-index:12000;
  width:220px;
  padding:6px;
  border:1px solid #d9e3ee;
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 34px rgba(26,44,72,.18);
}

.editor-context-menu[hidden]{
  display:none !important;
}

.editor-context-menu button{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#25344e;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}

.editor-context-menu button:hover:not(:disabled){
  background:#f3f7fc;
}

.editor-context-menu button:disabled{
  opacity:.4;
  cursor:default;
}

.editor-context-menu button small{
  color:#95a2b3;
  font-size:10px;
  font-weight:400;
}

.editor-context-menu button.is-danger{
  color:#dc4c4c;
}

.editor-context-menu button.is-danger:hover:not(:disabled){
  background:#fff3f3;
}

.editor-context-menu-separator{
  height:1px;
  margin:5px 4px;
  background:#e9eef4;
}

html[data-theme="dark"] .editor-context-menu{
  background:#111a2b;
  border-color:#2a3951;
}

html[data-theme="dark"] .editor-context-menu button{
  color:#e6edf7;
}

html[data-theme="dark"] .editor-context-menu button:hover:not(:disabled){
  background:#18253a;
}

html[data-theme="dark"] .editor-context-menu button.is-danger{
  color:#ff8585;
}

html[data-theme="dark"] .editor-context-menu-separator{
  background:#2a3951;
}


/* =========================================================
   Empty column guides visibility — 0.1.120
   ========================================================= */

/* Empty column containers remain usable as drop zones,
   but their guide border/text are hidden in normal mode. */
.email-canvas:not(.show-email-guides) .editor-column-cell{
  border-color:transparent !important;
  background:transparent !important;
}

.email-canvas:not(.show-email-guides) .editor-column-drop-hint{
  visibility:hidden !important;
}

/* In layout-guide mode show the empty column placeholders again. */
.email-canvas.show-email-guides .editor-column-cell{
  border-color:#c7d7e8;
  background:rgba(247,250,253,.7);
}

.email-canvas.show-email-guides .editor-column-drop-hint{
  visibility:visible !important;
}

/* While dragging over a column, keep the active drop target visible
   even if layout guides are currently disabled. */
.email-canvas:not(.show-email-guides) .editor-column-cell:has(.editor-drop-line){
  border-color:#7fb4ee !important;
  background:#f3f8ff !important;
}


/* =========================================================
   Text element inspector — 0.1.121
   ========================================================= */

/* Device buttons: all devices + supplied desktop/smartphone icons. */
.editor-device-switch{
  grid-template-columns:1fr 44px 44px;
}

.editor-device-switch button img{
  display:block;
  width:18px;
  height:18px;
  margin:0 auto;
  object-fit:contain;
  opacity:.72;
}

.editor-device-switch button.active img{
  opacity:1;
}

/* Four padding inputs have the same dimensions.
   Top and bottom are centered; the link control stays in the middle. */
.editor-padding-grid{
  width:100%;
  display:grid;
  grid-template-columns:84px 42px 84px;
  grid-template-areas:
    "top top top"
    "left link right"
    "bottom bottom bottom";
  justify-content:center;
  gap:7px 9px;
  align-items:center;
}

.editor-padding-grid input{
  width:84px !important;
  min-width:84px;
  max-width:84px;
  height:38px;
  box-sizing:border-box;
  justify-self:center;
  font-size:14px;
  font-weight:400;
}

#paddingTop{
  grid-area:top;
  justify-self:center;
}

#paddingLeft{
  grid-area:left;
  justify-self:center;
}

#paddingRight{
  grid-area:right;
  justify-self:center;
}

#paddingBottom{
  grid-area:bottom;
  justify-self:center;
}

#linkPaddings{
  grid-area:link;
  width:42px;
  height:38px;
  justify-self:center;
}

/* Only one separator before the Done/Delete row:
   section's bottom border is removed, footer keeps its own top border. */
.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-inspector-section:last-of-type{
  border-bottom:0;
}

/* Keep the footer separator single and clean. */
.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-panel-footer{
  border-top:1px solid #edf1f5;
}


/* =========================================================
   Text inspector defaults/cleanup — 0.1.122
   ========================================================= */
.editor-transparent-bg-toggle{
  margin-top:10px;
}

/* Exactly one separator before footer buttons. */
.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-inspector-section:last-of-type{
  border-bottom:0 !important;
  margin-bottom:0 !important;
}

.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-panel-footer{
  border-top:1px solid #edf1f5 !important;
  margin-top:0 !important;
  padding-top:16px !important;
}

.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-panel-footer::before,
.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-panel-footer::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   Editor tab empty state + accordion controls — 0.1.123
   ========================================================= */

.editor-empty-state{
  padding:26px 22px;
  color:#73839a;
  font-size:13px;
  line-height:1.5;
}

.editor-empty-state[hidden],
#editorInspectorControls[hidden]{
  display:none !important;
}

.editor-inspector-accordion{
  padding:0 18px 18px;
  display:grid;
  gap:8px;
}

.editor-inspector-group{
  border:1px solid #dbe5ef;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

.editor-inspector-toggle{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border:0;
  background:#fff;
  color:#24344f;
  font-size:13px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}

.editor-inspector-toggle:hover{
  background:#f8fbfe;
}

.editor-inspector-chevron{
  color:#8292a8;
  font-size:15px;
  line-height:1;
  transition:transform .16s ease;
}

.editor-inspector-group.is-open .editor-inspector-chevron{
  transform:rotate(180deg);
}

.editor-inspector-content{
  padding:12px;
  border-top:1px solid #e8eef5;
}

.editor-inspector-content[hidden]{
  display:none !important;
}

/* Footer controls were removed from the Editor tab. */
.editor-sidepanel-panel[data-editor-side-panel="editor"] .editor-panel-footer{
  display:none !important;
}

html[data-theme="dark"] .editor-inspector-group,
html[data-theme="dark"] .editor-inspector-toggle{
  background:#111a2b;
  border-color:#2a3951;
}

html[data-theme="dark"] .editor-inspector-toggle{
  color:#e7edf6;
}

html[data-theme="dark"] .editor-inspector-toggle:hover{
  background:#18253a;
}

html[data-theme="dark"] .editor-inspector-content{
  border-top-color:#2a3951;
}


/* =========================================================
   Editor empty state — 0.1.124
   ========================================================= */

.editor-empty-state{
  padding:28px 20px;
}

.editor-empty-state-card{
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:26px 22px;
  border:1px dashed #cad8e8;
  border-radius:14px;
  background:linear-gradient(180deg, #fbfdff 0%, #f6f9fd 100%);
  text-align:center;
}

.editor-empty-state-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:13px;
  background:#edf5ff;
  border:1px solid #d8e9ff;
  position:relative;
}

.editor-empty-state-icon span{
  position:absolute;
  width:20px;
  height:12px;
  border:2px solid #1677ff;
  border-radius:3px;
  background:#fff;
}

.editor-empty-state-icon span:nth-child(1){
  transform:translate(-7px,-7px);
  opacity:.5;
}

.editor-empty-state-icon span:nth-child(2){
  transform:translate(7px,0);
  opacity:.72;
}

.editor-empty-state-icon span:nth-child(3){
  transform:translate(-2px,8px);
}

.editor-empty-state-card strong{
  color:#23344e;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}

.editor-empty-state-card p{
  max-width:240px;
  margin:7px 0 0;
  color:#7b8aa0;
  font-size:12px;
  line-height:1.5;
}

html[data-theme="dark"] .editor-empty-state-card{
  background:linear-gradient(180deg,#111b2c 0%,#0f1827 100%);
  border-color:#2d405a;
}

html[data-theme="dark"] .editor-empty-state-icon{
  background:#132846;
  border-color:#234d7d;
}

html[data-theme="dark"] .editor-empty-state-card strong{
  color:#eef4fb;
}

html[data-theme="dark"] .editor-empty-state-card p{
  color:#93a3b7;
}


/* =========================================================
   Image block + image editor — 0.1.125
   ========================================================= */
.editor-image-block{
  min-height:170px;
}

.editor-image-placeholder{
  width:100%;
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1px dashed #bcc9d8;
  border-radius:8px;
  background:#eef2f6;
  color:#6f8097;
  font-size:13px;
  cursor:pointer;
  box-sizing:border-box;
}

.editor-image-placeholder:hover{
  background:#e8eef5;
  border-color:#9fb4ca;
  color:#52647c;
}

.editor-image-only-group[hidden]{
  display:none !important;
}

.editor-image-size-controls{
  display:grid;
  gap:14px;
}

.editor-image-size-controls label{
  display:grid;
  gap:7px;
}

.editor-image-size-controls label > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#5f6f85;
  font-size:12px;
}

.editor-image-size-controls b{
  color:#22344f;
  font-weight:500;
}

.editor-image-size-controls input[type="range"]{
  width:100%;
}

.editor-image-align{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:14px;
}

.editor-image-align button{
  min-height:36px;
  padding:0 6px;
  border:1px solid #d5e1ed;
  border-radius:8px;
  background:#fff;
  color:#53647b;
  font-size:11px;
  cursor:pointer;
}

.editor-image-align button.active{
  border-color:#1677ff;
  background:#eef5ff;
  color:#1677ff;
  font-weight:600;
}

/* Image picker */
.editor-image-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:13000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(20,34,54,.36);
}

.editor-image-picker-backdrop[hidden]{
  display:none !important;
}

.editor-image-picker-dialog{
  width:min(680px, calc(100vw - 48px));
  max-height:min(720px, calc(100vh - 48px));
  overflow:hidden;
  border:1px solid #d9e3ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(25,45,75,.24);
}

.editor-image-picker-head{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 18px;
  border-bottom:1px solid #e9eef4;
}

.editor-image-picker-head strong{
  font-size:15px;
  color:#23344e;
}

.editor-image-picker-head button{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#8291a4;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.editor-image-picker-body{
  padding:18px;
}

.editor-image-library{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.editor-image-thumb{
  aspect-ratio:4/3;
  padding:8px;
  border:1px solid #dbe5ef;
  border-radius:10px;
  background:#f8fafc;
  cursor:pointer;
  overflow:hidden;
}

.editor-image-thumb:hover{
  border-color:#1677ff;
  box-shadow:0 0 0 2px rgba(22,119,255,.08);
}

.editor-image-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.editor-image-picker-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e9eef4;
}

html[data-theme="dark"] .editor-image-picker-dialog{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .editor-image-picker-head{
  border-bottom-color:#2a3951;
}

html[data-theme="dark"] .editor-image-picker-head strong{
  color:#eef4fb;
}

html[data-theme="dark"] .editor-image-thumb{
  background:#172236;
  border-color:#2a3951;
}


/* =========================================================
   Image library + proportional size — 0.1.126
   ========================================================= */

.editor-image-library.is-empty{
  display:block;
}

.editor-image-library-empty{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border:1px dashed #c8d5e3;
  border-radius:10px;
  background:#f8fafc;
  color:#7b8aa0;
  font-size:13px;
  text-align:center;
  box-sizing:border-box;
}

.editor-image-library-item{
  position:relative;
}

.editor-image-delete{
  position:absolute;
  top:7px;
  right:7px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #f2b7b7;
  border-radius:7px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(32,48,70,.12);
}

.editor-image-delete:hover{
  background:#fff4f4;
  border-color:#eb8e8e;
}

.editor-image-delete img{
  width:15px;
  height:15px;
  object-fit:contain;
}

.editor-image-upload-btn{
  min-height:38px;
  padding:0 16px;
}

/* Only one proportional image size slider. */
.editor-image-size-controls{
  gap:10px;
}


/* =========================================================
   Image picker drag & drop — 0.1.127
   ========================================================= */
.editor-image-dropzone{
  min-height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-bottom:16px;
  padding:18px;
  border:1px dashed #b9c8d9;
  border-radius:10px;
  background:#f8fafc;
  color:#5f7087;
  text-align:center;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.editor-image-dropzone strong{
  color:#30425d;
  font-size:13px;
  font-weight:600;
}

.editor-image-dropzone span{
  color:#8190a4;
  font-size:11px;
}

.editor-image-dropzone.is-dragover{
  border-color:#1677ff;
  background:#eef5ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

html[data-theme="dark"] .editor-image-dropzone{
  background:#172236;
  border-color:#344862;
  color:#a8b5c7;
}

html[data-theme="dark"] .editor-image-dropzone strong{
  color:#eef4fb;
}

html[data-theme="dark"] .editor-image-dropzone.is-dragover{
  border-color:#4b96ff;
  background:#142b4b;
}


/* =========================================================
   Image link settings — 0.1.128
   ========================================================= */
.editor-image-link-group[hidden]{
  display:none !important;
}

.editor-image-link-controls{
  display:grid;
  gap:10px;
}

.editor-image-link-controls input{
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  padding:0 10px;
  border:1px solid #d5e1ed;
  border-radius:8px;
  background:#fff;
  color:#23344e;
  font-size:12px;
  outline:none;
}

.editor-image-link-controls input:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.editor-image-link-controls button{
  justify-self:start;
  min-height:36px;
  padding:0 14px;
}

html[data-theme="dark"] .editor-image-link-controls input{
  background:#111a2b;
  border-color:#2a3951;
  color:#eef4fb;
}


/* =========================================================
   Image library scroll area — 0.1.129
   ========================================================= */

/* Show one row of 3 images; additional rows are available by scrolling
   inside the image library area. */
.editor-image-library:not(.is-empty){
  grid-template-columns:repeat(3, minmax(0, 1fr));
  max-height:190px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:5px;
  align-content:start;
  scrollbar-gutter:stable;
}

.editor-image-library:not(.is-empty)::-webkit-scrollbar{
  width:8px;
}

.editor-image-library:not(.is-empty)::-webkit-scrollbar-track{
  background:transparent;
}

.editor-image-library:not(.is-empty)::-webkit-scrollbar-thumb{
  background:#c3ceda;
  border-radius:999px;
}

.editor-image-library:not(.is-empty)::-webkit-scrollbar-thumb:hover{
  background:#aebdcb;
}

html[data-theme="dark"] .editor-image-library:not(.is-empty)::-webkit-scrollbar-thumb{
  background:#41536c;
}


/* =========================================================
   Button editor — 0.1.130
   ========================================================= */
.editor-button-only-group[hidden]{
  display:none !important;
}

.editor-button-radius-control label{
  display:grid;
  gap:8px;
}

.editor-button-radius-control label > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#5f6f85;
  font-size:12px;
}

.editor-button-radius-control b{
  color:#22344f;
  font-weight:500;
}

.editor-button-radius-control input[type="range"]{
  width:100%;
}

.editor-email-button{
  cursor:text;
}

.email-canvas.move-blocks-mode .editor-email-button{
  cursor:grab;
}

/* Formatting toolbar is meaningful for Text and Button only. */
.email-builder-v3 .editor-toolbar.is-disabled-for-selection{
  opacity:.42;
  pointer-events:none;
  user-select:none;
}


/* =========================================================
   Button size + alignment — 0.1.131
   ========================================================= */
.editor-button-size-controls{
  display:grid;
  gap:10px;
}

.editor-button-size-controls label{
  display:grid;
  gap:8px;
}

.editor-button-size-controls label > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#5f6f85;
  font-size:12px;
}

.editor-button-size-controls b{
  color:#22344f;
  font-weight:500;
}

.editor-button-size-controls input[type="range"]{
  width:100%;
}

.editor-button-align{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:14px;
}

.editor-button-align button{
  min-height:36px;
  padding:0 6px;
  border:1px solid #d5e1ed;
  border-radius:8px;
  background:#fff;
  color:#53647b;
  font-size:11px;
  cursor:pointer;
}

.editor-button-align button.active{
  border-color:#1677ff;
  background:#eef5ff;
  color:#1677ff;
  font-weight:600;
}


/* =========================================================
   Image rounding — 0.1.133
   ========================================================= */
.editor-image-radius-control label{
  display:grid;
  gap:8px;
}

.editor-image-radius-control label > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#5f6f85;
  font-size:12px;
}

.editor-image-radius-control b{
  color:#22344f;
  font-weight:500;
}

.editor-image-radius-control input[type="range"]{
  width:100%;
}


/* =========================================================
   Line editor — 0.1.134
   ========================================================= */
.editor-line-only-group[hidden]{
  display:none !important;
}

.editor-line-size-controls{
  display:grid;
  gap:14px;
}

.editor-line-size-controls label{
  display:grid;
  gap:8px;
}

.editor-line-size-controls label > span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#5f6f85;
  font-size:12px;
}

.editor-line-size-controls b{
  color:#22344f;
  font-weight:500;
}

.editor-line-size-controls input[type="range"]{
  width:100%;
}

.editor-line-align{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}

.editor-line-align button{
  min-height:36px;
  padding:0 6px;
  border:1px solid #d5e1ed;
  border-radius:8px;
  background:#fff;
  color:#53647b;
  font-size:11px;
  cursor:pointer;
}

.editor-line-align button.active{
  border-color:#1677ff;
  background:#eef5ff;
  color:#1677ff;
  font-weight:600;
}

.editor-line-block{
  min-height:1px;
}


/* Social block editor — 0.1.135 */
.editor-social-only-group[hidden]{display:none !important;}
.editor-social-block{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--social-icon-gap,14px);--social-icon-size:40px;--social-icon-gap:14px;--social-icon-color:#000000;min-height:48px;padding:8px 0;}
.editor-social-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:0;flex:0 0 auto;}
.editor-social-icon{display:block;width:var(--social-icon-size,40px);height:var(--social-icon-size,40px);background:var(--social-icon-color,#000000);-webkit-mask-image:var(--social-icon-mask);mask-image:var(--social-icon-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.editor-social-label-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.editor-social-empty-hint{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px dashed #d5e1ed;border-radius:12px;color:#8795a8;font-size:13px;line-height:1.4;}
.editor-social-size-controls{display:grid;gap:14px;margin-bottom:14px;}
.editor-social-size-controls label{display:grid;gap:8px;}
.editor-social-size-controls label > span{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#5f6f85;font-size:12px;}
.editor-social-size-controls b{color:#22344f;font-weight:500;}
.editor-social-size-controls input[type="range"]{width:100%;}
.editor-social-align{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.editor-social-align button{min-height:36px;padding:0 6px;border:1px solid #d5e1ed;border-radius:8px;background:#fff;color:#53647b;font-size:11px;cursor:pointer;}
.editor-social-align button.active{border-color:#1677ff;background:#eef5ff;color:#1677ff;font-weight:600;}
.editor-social-color-row{margin-top:0;}
.editor-social-links-form{display:grid;gap:10px;}
.editor-social-link-row{display:grid;gap:8px;padding:10px;border:1px solid #d5e1ed;border-radius:12px;background:#fff;}
.editor-social-link-head{display:flex;align-items:center;gap:10px;color:#22344f;font-weight:600;font-size:13px;}
.editor-social-link-head input{margin:0;}
.editor-social-link-row input[type="url"]{width:100%;min-height:40px;padding:0 12px;border:1px solid #d5e1ed;border-radius:10px;background:#fff;color:#22344f;font-size:13px;}
.editor-social-link-row input[type="url"]:focus{outline:none;border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,0.12);}
.editor-social-apply-btn{width:100%;margin-top:4px;}


/* =========================================================
   Social icons rendering fix + 50% default scale — 0.1.136
   ========================================================= */
.editor-social-icon{
  display:block;
  width:var(--social-icon-size,40px);
  height:var(--social-icon-size,40px);
  background-color:var(--social-icon-color,#000000);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.editor-social-icon[data-social-icon="vk"]{
  -webkit-mask-image:url("social-vk.png");
  mask-image:url("social-vk.png");
}
.editor-social-icon[data-social-icon="telegram"]{
  -webkit-mask-image:url("social-telegram.png");
  mask-image:url("social-telegram.png");
}
.editor-social-icon[data-social-icon="odnoklassniki"]{
  -webkit-mask-image:url("social-ok.png");
  mask-image:url("social-ok.png");
}
.editor-social-icon[data-social-icon="max"]{
  -webkit-mask-image:url("social-max.png");
  mask-image:url("social-max.png");
}
.editor-social-icon[data-social-icon="youtube"]{
  -webkit-mask-image:url("social-youtube.png");
  mask-image:url("social-youtube.png");
}
.editor-social-icon[data-social-icon="rutube"]{
  -webkit-mask-image:url("social-rutube.png");
  mask-image:url("social-rutube.png");
}
.editor-social-icon[data-social-icon="dzen"]{
  -webkit-mask-image:url("social-dzen.png");
  mask-image:url("social-dzen.png");
}


/* =========================================================
   Two-row text toolbar — 0.1.139
   ========================================================= */
.email-builder-v3 .editor-toolbar.editor-text-toolbar{
  height:auto;
  min-height:90px;
  display:block;
  padding:0;
  overflow:visible;
  background:#fff;
  border-bottom:1px solid #d9e3ee;
}

.editor-toolbar-row{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  box-sizing:border-box;
  overflow:visible;
}

.editor-toolbar-row + .editor-toolbar-row{
  border-top:1px solid #edf1f5;
}

.editor-toolbar-row-primary{
  min-height:46px;
}

.editor-toolbar-row-secondary{
  min-height:44px;
}

.editor-toolbar-field{
  height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 4px 0 8px;
  border:1px solid #dce5ef;
  border-radius:7px;
  background:#fff;
  box-sizing:border-box;
}

.editor-toolbar-field-label{
  color:#8391a4;
  font-size:10px;
  line-height:1;
}

.editor-toolbar-field select{
  height:30px !important;
  max-width:128px;
  padding:0 20px 0 4px !important;
  border:0 !important;
  outline:0;
  background:#fff;
  color:#25354e;
  font-size:12px;
  cursor:pointer;
}

.editor-toolbar-field-style select{
  width:112px;
}

.editor-toolbar-field-font select{
  width:110px;
}

.editor-toolbar-field-compact select{
  width:70px;
}

.editor-toolbar-color{
  width:38px;
  height:34px;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid #dce5ef;
  border-radius:7px;
  background:#fff;
  cursor:pointer;
  overflow:hidden;
}

.editor-toolbar-color-icon{
  font-size:14px;
  font-weight:700;
  color:#283952;
  pointer-events:none;
}

.editor-toolbar-highlight .editor-toolbar-color-icon{
  padding:1px 4px;
  background:#fff2a8;
  border-radius:2px;
}

.editor-toolbar-color input[type="color"]{
  position:absolute;
  inset:auto 4px 3px 4px;
  width:30px;
  height:5px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.editor-toolbar-spacer{
  flex:1 1 auto;
}

.editor-toolbar-group{
  display:flex;
  align-items:center;
  gap:2px;
}

.email-builder-v3 .editor-toolbar-row button{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#2c3d55;
  cursor:pointer;
  font-size:14px;
}

.email-builder-v3 .editor-toolbar-row button:hover,
.email-builder-v3 .editor-toolbar-row button.active{
  background:#edf5ff;
  color:#1677ff;
}

.editor-toolbar-row .editor-toolbar-sep{
  width:1px;
  height:24px;
  margin:0 3px;
  background:#dfe7ef;
  flex:0 0 auto;
}

.editor-toolbar-menu-wrap{
  position:relative;
}

.email-builder-v3 .editor-toolbar-row .editor-toolbar-vars-btn{
  width:auto;
  min-width:96px;
  padding:0 10px;
  font-size:12px;
}

.email-builder-v3 .editor-toolbar-row .editor-toolbar-html-btn{
  width:auto;
  min-width:78px;
  padding:0 10px;
  font-size:12px;
  font-weight:600;
}

.editor-toolbar-popup{
  position:absolute;
  z-index:14000;
  top:calc(100% + 6px);
  left:0;
  min-width:150px;
  padding:6px;
  border:1px solid #dbe4ee;
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 32px rgba(27,48,75,.18);
}

.editor-toolbar-popup[hidden]{
  display:none !important;
}

.editor-list-popup button{
  width:100% !important;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 10px !important;
  font-size:12px !important;
  text-align:left;
}

.editor-emoji-popup{
  width:300px;
  max-height:250px;
  overflow-y:auto;
}

.editor-emoji-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:3px;
}

.email-builder-v3 .editor-emoji-grid button{
  width:42px;
  height:38px;
  font-size:21px;
}

.editor-variables-popup{
  min-width:220px;
}

.editor-variables-popup button{
  width:100% !important;
  height:auto !important;
  min-height:48px;
  display:grid;
  gap:2px;
  justify-items:start;
  padding:7px 10px !important;
  text-align:left;
}

.editor-variables-popup strong{
  font-size:12px;
  color:#26364f;
}

.editor-variables-popup small{
  font-size:10px;
  color:#8b99aa;
  font-family:monospace;
}

.editor-html-source{
  width:100%;
  min-height:560px;
  resize:vertical;
  box-sizing:border-box;
  padding:16px 18px;
  border:0;
  outline:0;
  background:#111827;
  color:#d7e2f0;
  font-family:"Courier New",monospace;
  font-size:13px;
  line-height:1.55;
  tab-size:2;
}

.editor-html-source[hidden]{
  display:none !important;
}

/* In HTML mode only the HTML toggle and undo/redo remain visually active. */
.editor-text-toolbar.is-html-mode .editor-toolbar-row > *:not(.editor-toolbar-spacer):not(#htmlModeBtn):not(#undoBtn):not(#redoBtn){
  opacity:.42;
}

.editor-text-toolbar.is-html-mode .editor-toolbar-row select,
.editor-text-toolbar.is-html-mode .editor-toolbar-row input,
.editor-text-toolbar.is-html-mode .editor-toolbar-row button:not(#htmlModeBtn):not(#undoBtn):not(#redoBtn){
  pointer-events:none;
}

html[data-theme="dark"] .email-builder-v3 .editor-toolbar.editor-text-toolbar,
html[data-theme="dark"] .editor-toolbar-row,
html[data-theme="dark"] .editor-toolbar-field,
html[data-theme="dark"] .editor-toolbar-field select,
html[data-theme="dark"] .editor-toolbar-color,
html[data-theme="dark"] .editor-toolbar-popup{
  background:#101827;
  color:#e8eef8;
}

html[data-theme="dark"] .editor-toolbar-field,
html[data-theme="dark"] .editor-toolbar-color,
html[data-theme="dark"] .editor-toolbar-popup{
  border-color:#2a3951;
}

html[data-theme="dark"] .editor-toolbar-row + .editor-toolbar-row{
  border-top-color:#26354a;
}

html[data-theme="dark"] .editor-toolbar-field select,
html[data-theme="dark"] .editor-toolbar-row button{
  color:#e8eef8;
}

html[data-theme="dark"] .editor-variables-popup strong{
  color:#e8eef8;
}


/* =========================================================
   Text toolbar refinement — 0.1.140
   ========================================================= */

/* Custom SendFactory selects in toolbar */
.editor-toolbar-custom-field{
  height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 4px 0 8px;
  border:1px solid #dce5ef;
  border-radius:7px;
  background:#fff;
  box-sizing:border-box;
  position:relative;
}

.editor-toolbar-custom-select{
  width:auto;
  min-width:72px;
  position:relative;
}

.editor-toolbar-custom-select .sf-select__trigger{
  min-height:30px;
  height:30px;
  padding:0 24px 0 4px;
  border:0;
  border-radius:5px;
  background:transparent;
  box-shadow:none;
  font-size:12px;
}

.editor-toolbar-field-style .editor-toolbar-custom-select{
  width:118px;
}
.editor-toolbar-field-font .editor-toolbar-custom-select{
  width:116px;
}
.editor-toolbar-field-compact .editor-toolbar-custom-select{
  width:78px;
}

.editor-toolbar-custom-select .sf-select__menu{
  top:calc(100% + 6px);
  left:-8px;
  min-width:150px;
  max-height:280px;
  overflow-y:auto;
  z-index:14500;
}

.editor-toolbar-custom-select .sf-select__option{
  min-height:36px;
  height:auto;
  width:100% !important;
  justify-content:space-between;
  padding:6px 10px !important;
  font-size:12px !important;
}

/* Alignment icons */
.text-align-icon{
  width:20px;
  height:17px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.text-align-icon i{
  display:block;
  height:2px;
  border-radius:1px;
  background:currentColor;
}
.text-align-icon.align-left i:nth-child(1),
.text-align-icon.align-left i:nth-child(3){width:100%}
.text-align-icon.align-left i:nth-child(2),
.text-align-icon.align-left i:nth-child(4){width:68%}
.text-align-icon.align-center{align-items:center}
.text-align-icon.align-center i:nth-child(1),
.text-align-icon.align-center i:nth-child(3){width:100%}
.text-align-icon.align-center i:nth-child(2),
.text-align-icon.align-center i:nth-child(4){width:68%}
.text-align-icon.align-right{align-items:flex-end}
.text-align-icon.align-right i:nth-child(1),
.text-align-icon.align-right i:nth-child(3){width:100%}
.text-align-icon.align-right i:nth-child(2),
.text-align-icon.align-right i:nth-child(4){width:68%}
.text-align-icon.align-justify i{width:100%}

.broken-link-btn{
  font-size:16px !important;
}

/* Undo / redo supplied icons */
.editor-history-btn img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
  margin:auto;
}

/* Custom link dialog */
.editor-link-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:15000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(25,42,64,.38);
}
.editor-link-modal-backdrop[hidden]{display:none !important}
.editor-link-modal{
  width:min(460px,calc(100vw - 40px));
  border:1px solid #d9e3ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 22px 60px rgba(25,43,68,.22);
}
.editor-link-modal-head{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px 0 18px;
  border-bottom:1px solid #e9eef4;
}
.editor-link-modal-head strong{
  color:#22344e;
  font-size:15px;
}
.editor-link-modal-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#8291a4;
  font-size:23px;
  cursor:pointer;
}
.editor-link-modal-body{
  display:grid;
  gap:14px;
  padding:18px;
}
.editor-link-modal-body label{
  display:grid;
  gap:7px;
}
.editor-link-modal-body label span{
  color:#53647a;
  font-size:12px;
  font-weight:600;
}
.editor-link-modal-body input{
  min-height:42px;
  width:100%;
  box-sizing:border-box;
  padding:0 12px;
  border:1px solid #d5e1ed;
  border-radius:9px;
  background:#fff;
  color:#23344e;
  font-size:13px;
  outline:none;
}
.editor-link-modal-body input:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}
.editor-link-modal-body .btn{
  justify-self:start;
}

/* Custom list markers */
.email-canvas .editor-list-decimal-paren{
  counter-reset:sf-list;
  padding-left:26px;
}
.email-canvas .editor-list-decimal-paren > li{
  list-style:none;
  counter-increment:sf-list;
  position:relative;
}
.email-canvas .editor-list-decimal-paren > li::before{
  content:counter(sf-list) ") ";
  position:absolute;
  right:100%;
  margin-right:5px;
}
.email-canvas .editor-list-check,
.email-canvas .editor-list-cross{
  padding-left:27px;
}
.email-canvas .editor-list-check > li,
.email-canvas .editor-list-cross > li{
  list-style:none;
  position:relative;
}
.email-canvas .editor-list-check > li::before{
  content:"✓";
  position:absolute;
  right:100%;
  margin-right:7px;
  font-weight:700;
}
.email-canvas .editor-list-cross > li::before{
  content:"✕";
  position:absolute;
  right:100%;
  margin-right:7px;
  font-weight:700;
}

/* Expanded emoji library */
.editor-emoji-popup{
  width:330px;
  max-height:360px;
  overflow-y:auto;
}
.editor-emoji-section + .editor-emoji-section{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #edf1f5;
}
.editor-emoji-section > strong{
  display:block;
  margin:2px 4px 7px;
  color:#6b7a90;
  font-size:11px;
  font-weight:600;
}
.editor-emoji-basic{
  padding-bottom:2px;
}
.editor-emoji-grid{
  grid-template-columns:repeat(7,1fr);
}
.email-builder-v3 .editor-emoji-grid button{
  width:40px;
  height:36px;
  font-size:20px;
}

/* Emoji popup for Subject / Preheader */
.field-emoji-popup{
  position:fixed;
  z-index:15100;
  width:320px;
  max-height:340px;
  overflow-y:auto;
  padding:8px;
  border:1px solid #dbe4ee;
  border-radius:11px;
  background:#fff;
  box-shadow:0 14px 36px rgba(27,48,75,.2);
}
.field-emoji-popup[hidden]{display:none !important}
.field-emoji-popup .editor-emoji-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}
.field-emoji-popup .editor-emoji-grid button{
  width:39px;
  height:35px;
  border:0;
  border-radius:6px;
  background:#fff;
  font-size:20px;
  cursor:pointer;
}
.field-emoji-popup .editor-emoji-grid button:hover{
  background:#edf5ff;
}
.emoji-input .field-emoji-btn{
  font-size:17px;
}

/* Dark mode */
html[data-theme="dark"] .editor-toolbar-custom-field,
html[data-theme="dark"] .editor-toolbar-custom-select .sf-select__trigger,
html[data-theme="dark"] .editor-link-modal,
html[data-theme="dark"] .editor-link-modal-body input,
html[data-theme="dark"] .field-emoji-popup{
  background:#101827;
  color:#e8eef8;
}
html[data-theme="dark"] .editor-toolbar-custom-field,
html[data-theme="dark"] .editor-link-modal,
html[data-theme="dark"] .editor-link-modal-body input,
html[data-theme="dark"] .field-emoji-popup{
  border-color:#2a3951;
}
html[data-theme="dark"] .editor-link-modal-head{
  border-bottom-color:#2a3951;
}
html[data-theme="dark"] .editor-link-modal-head strong{
  color:#eef4fb;
}


/* =========================================================
   Button text editing boundary fix — 0.1.141
   ========================================================= */
.editor-email-button{
  max-width:100%;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  vertical-align:middle;
}

.editor-email-button-text{
  display:inline;
  max-width:100%;
  outline:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Keep the caret/text inside the button when editing at the very end. */
.editor-email-button-text:focus{
  outline:none;
}

/* Do not let browser-created inline editing fragments visually escape the button. */
.editor-email-button > *{
  max-width:100%;
  box-sizing:border-box;
}


/* =========================================================
   Button icon selector — 0.1.142
   ========================================================= */
.editor-button-icon-select{
  width:100%;
}

.editor-button-icon-select .sf-select__trigger{
  width:100%;
}

.editor-button-icon-select .sf-select__menu{
  max-height:280px;
  overflow-y:auto;
}

.editor-button-icon-select .sf-select__option-main{
  display:flex;
  align-items:center;
  gap:9px;
}

.button-icon-preview{
  width:22px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  color:#273851;
  font-size:16px;
  font-weight:600;
}

.editor-email-button-icon{
  display:inline-block;
  margin-right:.42em;
  line-height:1;
  vertical-align:baseline;
  font-size:1em;
  font-weight:600;
  pointer-events:none;
  user-select:none;
}

.editor-email-button-text{
  display:inline;
}

html[data-theme="dark"] .button-icon-preview{
  color:#e8eef8;
}


/* =========================================================
   Button icon menu layout + position — 0.1.143
   ========================================================= */

/* Keep the custom menu inside the right inspector instead of stretching across viewport. */
.editor-button-icon-select{
  position:relative;
  width:100%;
  max-width:100%;
}

.editor-button-icon-select .sf-select__menu{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  left:0 !important;
  right:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  max-height:260px;
  overflow-y:auto;
  box-sizing:border-box;
  z-index:14500;
}

/* Normal, slightly smaller typography for icon choices. */
.editor-button-icon-select .sf-select__option{
  width:100% !important;
  min-height:36px;
  padding:7px 10px !important;
  box-sizing:border-box;
  font-size:12px !important;
  font-weight:400 !important;
}

.editor-button-icon-select .sf-select__option-name{
  font-size:12px !important;
  font-weight:400 !important;
}

.editor-button-icon-select .sf-select__option-main{
  min-width:0;
  gap:8px;
}

.editor-button-icon-select .sf-select__trigger,
.editor-button-icon-select #editorButtonIconLabel{
  font-size:12px !important;
  font-weight:400 !important;
}

.button-icon-preview{
  width:18px;
  font-size:14px;
  font-weight:400;
}

/* Icon position control. */
.editor-button-icon-position{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.editor-button-icon-position > span{
  color:#6c7b90;
  font-size:11px;
  font-weight:500;
}

.editor-button-icon-position-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.editor-button-icon-position-buttons button{
  min-height:36px;
  border:1px solid #d5e1ed;
  border-radius:8px;
  background:#fff;
  color:#53647b;
  font-size:11px;
  font-weight:400;
  cursor:pointer;
}

.editor-button-icon-position-buttons button.active{
  border-color:#1677ff;
  background:#eef5ff;
  color:#1677ff;
  font-weight:600;
}

/* Correct spacing depending on icon side. */
.editor-email-button[data-editor-button-icon-position="left"] .editor-email-button-icon{
  margin-right:.42em;
  margin-left:0;
}

.editor-email-button[data-editor-button-icon-position="right"] .editor-email-button-icon{
  margin-left:.42em;
  margin-right:0;
}

html[data-theme="dark"] .editor-button-icon-position-buttons button{
  background:#111a2b;
  border-color:#2a3951;
  color:#cbd6e5;
}

html[data-theme="dark"] .editor-button-icon-position-buttons button.active{
  background:#142b4b;
  border-color:#4b96ff;
  color:#7db3ff;
}


/* =========================================================
   Button icon menu compact layout — 0.1.144
   ========================================================= */

/* The icon command is last, so its popup may extend below the accordion. */
.editor-inspector-group:has(#editorButtonIconSelect),
.editor-inspector-group:has(#editorButtonIconSelect).is-open{
  overflow:visible !important;
  position:relative;
  z-index:25;
}

.editor-inspector-group:has(#editorButtonIconSelect) .editor-inspector-content{
  overflow:visible !important;
  position:relative;
}

/* Compact popup: about 4 items visible, the rest via internal scroll. */
.editor-button-icon-select .sf-select__menu{
  max-height:158px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border-radius:9px;
  padding:4px !important;
  box-shadow:0 10px 26px rgba(31,49,75,.16);
}

/* Reduce vertical footprint of each option. */
.editor-button-icon-select .sf-select__option{
  min-height:32px !important;
  padding:5px 8px !important;
  border-radius:6px !important;
}

.editor-button-icon-select .sf-select__option-name{
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.25;
}

.editor-button-icon-select .button-icon-preview{
  width:17px;
  font-size:13px !important;
}

/* Slightly more compact trigger as well. */
.editor-button-icon-select .sf-select__trigger{
  min-height:38px !important;
  height:38px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.editor-button-icon-select #editorButtonIconLabel{
  font-size:12px !important;
  font-weight:400 !important;
}

/* Keep the last accordion above neighboring content while its menu is open. */
.editor-sidepanel-panel[data-editor-side-panel="editor"]{
  overflow:visible;
}


/* =========================================================
   Button icon accordion/dropdown final sizing — 0.1.145
   ========================================================= */

/* Restore the same visible border/radius as all other inspector sections. */
.editor-inspector-group:has(#editorButtonIconSelect){
  overflow:visible !important;
  position:relative;
  z-index:30;
  border:1px solid #dbe5ef !important;
  border-radius:10px !important;
  background:#fff;
}

.editor-inspector-group:has(#editorButtonIconSelect) > .editor-inspector-toggle{
  border-radius:10px !important;
}

.editor-inspector-group:has(#editorButtonIconSelect).is-open > .editor-inspector-toggle{
  border-radius:10px 10px 0 0 !important;
}

.editor-inspector-group:has(#editorButtonIconSelect) .editor-inspector-content{
  position:relative;
  overflow:visible !important;
  border-top:1px solid #e8eef5;
  border-radius:0 0 10px 10px;
  background:#fff;
}

/* Exactly three compact items are visible at once, then internal scroll. */
.editor-button-icon-select .sf-select__menu{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  left:0 !important;
  right:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:108px !important;
  max-height:108px !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  box-sizing:border-box;
  padding:4px !important;
  border:1px solid #dbe5ef !important;
  border-radius:9px !important;
  background:#fff;
  z-index:15000 !important;
  scrollbar-gutter:stable;
}

.editor-button-icon-select .sf-select__option{
  min-height:32px !important;
  height:32px !important;
  padding:4px 8px !important;
  margin:0 !important;
  border-radius:6px !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  box-sizing:border-box;
}

.editor-button-icon-select .sf-select__option + .sf-select__option{
  margin-top:2px !important;
}

.editor-button-icon-select .sf-select__option-name{
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
}

.editor-button-icon-select .sf-select__option-check{
  font-size:12px !important;
}

.editor-button-icon-select .button-icon-preview{
  width:17px;
  font-size:13px !important;
  font-weight:400 !important;
}

/* Compact trigger, matching the other controls. */
.editor-button-icon-select .sf-select__trigger{
  min-height:38px !important;
  height:38px !important;
  border-radius:8px !important;
  padding:0 34px 0 12px !important;
}

.editor-button-icon-select #editorButtonIconLabel{
  font-size:12px !important;
  font-weight:400 !important;
}

/* Compact scrollbar */
.editor-button-icon-select .sf-select__menu::-webkit-scrollbar{
  width:7px;
}
.editor-button-icon-select .sf-select__menu::-webkit-scrollbar-track{
  background:transparent;
}
.editor-button-icon-select .sf-select__menu::-webkit-scrollbar-thumb{
  background:#c2ccd8;
  border-radius:999px;
}
.editor-button-icon-select .sf-select__menu::-webkit-scrollbar-thumb:hover{
  background:#aebbc9;
}

html[data-theme="dark"] .editor-inspector-group:has(#editorButtonIconSelect),
html[data-theme="dark"] .editor-inspector-group:has(#editorButtonIconSelect) .editor-inspector-content,
html[data-theme="dark"] .editor-button-icon-select .sf-select__menu{
  background:#111a2b;
  border-color:#2a3951 !important;
}


/* =========================================================
   Top toolbar custom select layout fix — 0.1.146
   ========================================================= */

/* Remove conflicting generic sf-select visuals inside the top toolbar. */
.editor-toolbar-row-primary .editor-toolbar-custom-field{
  position:relative;
  min-width:0;
  height:38px;
  padding:0;
  border:1px solid #d7e2ed;
  border-radius:9px;
  background:#fff;
  overflow:visible;
}

.editor-toolbar-row-primary .editor-toolbar-field-label{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  pointer-events:none;
  color:#7f8da1;
  font-size:11px;
  line-height:1;
  background:#fff;
  padding-right:4px;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__trigger{
  width:100%;
  height:36px !important;
  min-height:36px !important;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:0 30px 0 66px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#26364f;
  font-size:12px !important;
  font-weight:400 !important;
  text-align:left;
}

.editor-toolbar-row-primary .editor-toolbar-field-style{
  width:210px;
}
.editor-toolbar-row-primary .editor-toolbar-field-font{
  width:210px;
}
.editor-toolbar-row-primary .editor-toolbar-field-compact{
  width:165px;
}

.editor-toolbar-row-primary .editor-toolbar-field-style .sf-select__trigger{
  padding-left:62px !important;
}
.editor-toolbar-row-primary .editor-toolbar-field-font .sf-select__trigger{
  padding-left:60px !important;
}
.editor-toolbar-row-primary .editor-toolbar-field-compact .sf-select__trigger{
  padding-left:70px !important;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__lead{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__content{
  min-width:0;
  width:100%;
  display:block;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .toolbar-select-label{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#26364f;
  font-size:12px !important;
  font-weight:400 !important;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__chevron{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
}

/* Dropdown stays under its own control and uses compact typography. */
.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__menu{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  left:0 !important;
  right:auto !important;
  width:100% !important;
  min-width:100% !important;
  max-width:260px !important;
  max-height:220px;
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
  padding:4px !important;
  border:1px solid #dbe5ef !important;
  border-radius:9px !important;
  background:#fff !important;
  box-shadow:0 10px 28px rgba(28,46,72,.16);
  z-index:16000 !important;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__option{
  width:100% !important;
  min-height:32px !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:4px 8px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:#fff !important;
  color:#26364f !important;
  font-size:11px !important;
  font-weight:400 !important;
  box-sizing:border-box;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__option:hover,
.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__option.is-selected{
  background:#edf5ff !important;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__option-name{
  font-size:11px !important;
  font-weight:400 !important;
}

.editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__option-check{
  color:#1677ff;
  font-size:12px;
}

/* Keep the first row above the canvas and prevent clipping. */
.email-builder-v3 .editor-toolbar,
.email-builder-v3 .editor-toolbar-row,
.email-builder-v3 .editor-toolbar-row-primary{
  overflow:visible !important;
  position:relative;
}

.email-builder-v3 .editor-toolbar-row-primary{
  z-index:100;
}

.email-builder-v3 .editor-toolbar-row-secondary{
  z-index:50;
}

/* Dark mode */
html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-custom-field,
html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-field-label,
html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__menu,
html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__option{
  background:#101827 !important;
  color:#e8eef8 !important;
}

html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-custom-field,
html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-custom-select .sf-select__menu{
  border-color:#2a3951 !important;
}

html[data-theme="dark"] .editor-toolbar-row-primary .editor-toolbar-custom-select .toolbar-select-label{
  color:#e8eef8;
}


/* =========================================================
   Mailing steps compact chevrons — 0.1.147
   ========================================================= */

/* Reduce the chevron depth so it does not approach the next step number. */
.builder-step + .builder-step{
  padding-left:30px;
}

.builder-step::before,
.builder-step::after{
  right:-18px;
  width:19px;
}

.builder-step::after{
  right:-16px;
  width:17px;
}

/* Preserve the same visual arrow shape with the smaller footprint. */
.builder-step::before,
.builder-step::after{
  clip-path:polygon(0 0,100% 50%,0 100%);
}


/* =========================================================
   Builder bottom action bar frame — 0.1.148
   ========================================================= */
.builder-footer{
  position:sticky;
  bottom:12px;
  z-index:20;
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  margin:16px 0 0 !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,.97);
  border:1px solid #dce6f0 !important;
  border-radius:12px;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(28,46,72,.04);
}

.builder-footer #builderNext{
  margin-left:auto;
}

html[data-theme="dark"] .builder-footer{
  background:rgba(15,23,40,.97);
  border-color:#2a3951 !important;
}


/* =========================================================
   Step 5: send screen cleanup — 0.1.149
   ========================================================= */

.send-card .summary-head h3{
  margin-bottom:0;
}

/* After cleanup the summary has only the information useful at launch. */
.summary-list>div{
  grid-template-columns:160px 1fr;
}

.launch-card{
  min-height:94px;
  padding:18px 20px;
}

.launch-count-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

.launch-recipient-icon{
  width:38px;
  height:38px;
  object-fit:contain;
  flex:0 0 38px;
}

.launch-card .launch-count-wrap p{
  margin:0;
  display:flex;
  flex-direction:column;
  color:#33445c;
  font-size:11px;
}

.launch-card .launch-count-wrap strong{
  font-size:30px;
  color:#108a4f;
  line-height:1.05;
}

.launch-card .launch-count-wrap small{
  color:#108a4f;
}

/* Main action button: icon separated from larger text. */
.btn-launch{
  min-width:300px !important;
  min-height:58px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 24px !important;
  font-size:16px !important;
  font-weight:700 !important;
}

.btn-launch .launch-send-icon{
  width:25px;
  height:25px;
  object-fit:contain;
  flex:0 0 25px;
}

.btn-launch span{
  display:block;
  line-height:1.2;
}

/* Final step never needs a "Next" action. */
.builder-panel[data-panel="5"].active ~ .builder-footer #builderNext{
  display:none !important;
}


/* =========================================================
   Step 5 refinements + test send — 0.1.150
   ========================================================= */
.send-right .send-card .summary-head{
  min-height:38px;
  padding-bottom:12px;
  margin-bottom:2px;
}

.send-right .send-card .summary-head h3{
  line-height:1.35;
}

.btn-launch .launch-send-icon{
  filter:brightness(0) invert(1);
}

.send-test-card .send-test-help{
  margin:0 0 12px;
}

.send-test-card textarea{
  width:100%;
  min-height:82px;
  resize:vertical;
  box-sizing:border-box;
  padding:11px 12px;
  border:1px solid #d5e1ed;
  border-radius:9px;
  background:#fff;
  color:#23344e;
  font:inherit;
  font-size:13px;
  line-height:1.45;
  outline:none;
}

.send-test-card textarea:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.send-test-btn{
  margin-top:12px;
  min-height:40px;
  padding:0 16px;
  font-weight:600;
}

html[data-theme="dark"] .send-test-card textarea{
  background:#111a2b;
  border-color:#2a3951;
  color:#eef4fb;
}


/* =========================================================
   Step 5 summary spacing / typography — 0.1.152
   ========================================================= */

/* Remove divider under "Информация о рассылке" and add more space after heading. */
.send-card:has(.summary-head) .summary-head{
  border-bottom:0 !important;
  padding-bottom:0 !important;
  margin-bottom:14px !important;
  min-height:auto !important;
}

.send-card:has(.summary-head) .summary-head h3{
  margin:0 !important;
}

/* Match the explanatory helper-text size used under date/time. */
.send-card:has(.summary-head) .summary-list > div{
  font-size:13px !important;
  line-height:1.45;
}

.send-card:has(.summary-head) .summary-list > div > span{
  font-size:13px !important;
  font-weight:400 !important;
  color:#7d8ca1;
}

.send-card:has(.summary-head) .summary-list > div > strong{
  font-size:13px !important;
  font-weight:600 !important;
  color:#25354e;
}


/* =========================================================
   Draft saved modal + Step 5 count sync — 0.1.153
   ========================================================= */
#draftSavedModal{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(25,42,64,.38);
  z-index:17000;
}

#draftSavedModal[hidden]{
  display:none !important;
}

.draft-saved-modal{
  width:min(430px, calc(100vw - 40px));
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:34px 30px 28px;
  text-align:center;
  border-radius:16px;
}

.draft-saved-modal .sf-modal-x{
  top:12px;
  right:12px;
}

.draft-saved-icon-wrap{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf3ff;
}

.draft-saved-icon-wrap img{
  width:36px;
  height:36px;
  object-fit:contain;
}

.draft-saved-modal h2{
  max-width:330px;
  margin:0;
  color:#1f3049;
  font-size:19px;
  line-height:1.35;
  font-weight:700;
}

.draft-saved-modal .btn{
  min-width:130px;
  min-height:42px;
}

html[data-theme="dark"] .draft-saved-icon-wrap{
  background:#173052;
}

html[data-theme="dark"] .draft-saved-modal h2{
  color:#eef4fb;
}


/* =========================================================
   Mailings main page refinements — 0.1.154
   ========================================================= */

/* User supplied icons */
.mailing-stat-icon img{
  width:27px;
  height:27px;
  object-fit:contain;
  display:block;
}

.mailings-templates-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.mailings-templates-btn img{
  width:19px;
  height:19px;
  object-fit:contain;
}

/* Search field: full available width up to Statuses. */
.mailing-toolbar{
  grid-template-columns:minmax(0,1fr) minmax(220px,280px) auto auto auto;
}

.mailing-search{
  width:100%;
  min-width:0;
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
}

.mailing-search input{
  width:100%;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#273851;
  font:inherit;
  font-size:13px;
}

.mailing-search input::placeholder{
  color:#8795a8;
  font-style:italic;
  opacity:1;
}

.mailing-search:focus-within{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

/* No multi-select column on this page. */
.mailings-table{
  min-width:1190px;
}

/* Mailing title is slightly larger. */
.mailing-title-btn strong{
  font-size:14px;
}

/* Dedicated statistics action before row menu. */
.mailing-statistics-col{
  width:116px;
  text-align:center !important;
}

.mailing-statistics-btn{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px;
  border:1px solid #d9e4f2;
  border-radius:8px;
  background:#fff;
  color:#334155;
  font:inherit;
  font-size:11px;
  font-weight:650;
  cursor:pointer;
}

.mailing-statistics-btn img{
  width:16px;
  height:16px;
  object-fit:contain;
}

.mailing-statistics-btn:hover{
  border-color:#b9d4f6;
  background:#f7fbff;
}

/* Keep row action menu compact and above table. */
.row-action-menu{
  width:145px;
}

html[data-theme="dark"] .mailing-search,
html[data-theme="dark"] .mailing-statistics-btn{
  background:#101827;
  border-color:#2a3951;
  color:#e5edf8;
}

html[data-theme="dark"] .mailing-search input{
  color:#e5edf8;
}

@media (max-width:1100px){
  .mailing-toolbar{
    grid-template-columns:1fr 1fr auto auto auto;
  }
  .mailing-search{
    grid-column:1/-1;
  }
}


/* =========================================================
   Mailings row floating menu — 0.1.155
   ========================================================= */
.row-action-menu-floating{
  position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  width:150px !important;
  z-index:20000 !important;
  padding:6px;
  border:1px solid #dbe3ed;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.18);
}

.row-action-menu-floating[hidden]{
  display:none !important;
}

.row-action-menu-floating button{
  width:100%;
  height:34px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#334155;
  text-align:left;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.row-action-menu-floating button:hover{
  background:#f5f8fc;
}

.row-action-menu-floating button.danger{
  color:#dc2626;
}

html[data-theme="dark"] .row-action-menu-floating{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .row-action-menu-floating button{
  color:#dbe5f2;
}

html[data-theme="dark"] .row-action-menu-floating button:hover{
  background:#17233a;
}

html[data-theme="dark"] .row-action-menu-floating button.danger{
  color:#ff6b6b;
}


/* =========================================================
   Autoseries tab — 0.1.157
   ========================================================= */
.autoseries-pane{
  margin-top:16px;
}

.autoseries-pane[hidden]{
  display:none !important;
}

.autoseries-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.autoseries-create-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.autoseries-create-btn{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:650;
}

.autoseries-create-icon{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  font-size:17px;
  line-height:1;
}

.autoseries-funnel-symbol{
  display:inline-block;
  transform:scaleX(1.15);
}

.autoseries-search{
  width:min(470px, 44vw);
  min-width:320px;
  height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid #d9e4f2;
  border-radius:11px;
  background:#fff;
  box-sizing:border-box;
}

.autoseries-search input{
  width:100%;
  height:100%;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#273851;
  font:inherit;
  font-size:13px;
}

.autoseries-search input::placeholder{
  color:#8795a8;
}

.autoseries-search:focus-within{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.autoseries-table-card{
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.autoseries-table-scroll{
  overflow:auto;
}

.autoseries-table{
  width:100%;
  min-width:860px;
  border-collapse:collapse;
  table-layout:fixed;
}

.autoseries-table thead{
  background:#f7f9fc;
}

.autoseries-table th,
.autoseries-table td{
  padding:13px 16px;
  border-bottom:1px solid #e9eef5;
  text-align:left;
  vertical-align:middle;
}

.autoseries-table th{
  color:#65758a;
  font-size:12px;
  font-weight:650;
}

.autoseries-table tr:last-child td{
  border-bottom:0;
}

.autoseries-type-col{
  width:205px;
}

.autoseries-order-col{
  width:150px;
  text-align:center !important;
}

.autoseries-menu-col{
  width:64px;
  text-align:center !important;
}

.autoseries-type-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:650;
}

.autoseries-type-badge.series{
  color:#1473e6;
  background:#eaf3ff;
}

.autoseries-type-badge.funnel{
  color:#7a3ff2;
  background:#f2ebff;
}

.autoseries-type-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:15px;
  line-height:1;
}

.autoseries-title-btn{
  width:100%;
  display:grid;
  gap:3px;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.autoseries-title-btn strong{
  color:#182843;
  font-size:14px;
  font-weight:700;
}

.autoseries-title-btn small{
  color:#8190a5;
  font-size:12px;
}

.autoseries-order-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.autoseries-order-buttons button,
.autoseries-menu-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #d9e4f2;
  border-radius:8px;
  background:#fff;
  color:#24344e;
  font:inherit;
  font-size:17px;
  cursor:pointer;
}

.autoseries-order-buttons button:hover,
.autoseries-menu-btn:hover{
  background:#f7fbff;
  border-color:#b9d4f6;
}

.autoseries-order-buttons button:disabled{
  color:#c7d0dc;
  background:#f8fafc;
  cursor:default;
}

.autoseries-action-menu{
  position:fixed;
  width:150px;
  z-index:21000;
  padding:6px;
  border:1px solid #dbe3ed;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.18);
}

.autoseries-action-menu[hidden]{
  display:none !important;
}

.autoseries-action-menu button{
  width:100%;
  height:34px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#334155;
  text-align:left;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.autoseries-action-menu button:hover{
  background:#f5f8fc;
}

.autoseries-action-menu button.danger{
  color:#dc2626;
}

.autoseries-row-opened{
  animation:sfAutoseriesFlash .45s ease;
}

@keyframes sfAutoseriesFlash{
  0%,100%{background:transparent}
  50%{background:#edf5ff}
}

html[data-theme="dark"] .autoseries-search,
html[data-theme="dark"] .autoseries-table-card,
html[data-theme="dark"] .autoseries-order-buttons button,
html[data-theme="dark"] .autoseries-menu-btn,
html[data-theme="dark"] .autoseries-action-menu{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .autoseries-search input,
html[data-theme="dark"] .autoseries-title-btn strong,
html[data-theme="dark"] .autoseries-order-buttons button,
html[data-theme="dark"] .autoseries-menu-btn,
html[data-theme="dark"] .autoseries-action-menu button{
  color:#e8eef8;
}

html[data-theme="dark"] .autoseries-table thead{
  background:#141f31;
}

html[data-theme="dark"] .autoseries-table th,
html[data-theme="dark"] .autoseries-table td{
  border-bottom-color:#25344a;
}

html[data-theme="dark"] .autoseries-action-menu button:hover{
  background:#17233a;
}

@media (max-width:1100px){
  .autoseries-topbar{
    align-items:stretch;
    flex-direction:column;
  }

  .autoseries-search{
    width:100%;
    min-width:0;
  }

  .autoseries-create-actions{
    flex-wrap:wrap;
  }
}


/* =========================================================
   Autofunnels refinement — 0.1.158
   ========================================================= */

/* Hide mailing-only controls when this pane is active. */
.mailings-campaign-pane[hidden]{
  display:none !important;
}

/* Search placeholder requested in italic. */
.autoseries-search input::placeholder{
  font-style:italic;
}

/* Real image icons in buttons and type badges. */
.autoseries-create-btn img{
  width:17px;
  height:17px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.autoseries-type-icon-img{
  width:15px;
  height:15px;
  object-fit:contain;
}

.autoseries-type-badge.series .autoseries-type-icon-img{
  filter:invert(42%) sepia(97%) saturate(1913%) hue-rotate(195deg) brightness(96%) contrast(91%);
}

.autoseries-type-badge.funnel .autoseries-type-icon-img{
  filter:invert(35%) sepia(83%) saturate(3131%) hue-rotate(251deg) brightness(99%) contrast(92%);
}

/* New columns */
.autoseries-mails-col{
  width:95px;
  text-align:center !important;
}

.autoseries-duration-col{
  width:120px;
  text-align:center !important;
  color:#53647a;
  font-size:12px;
}

.autoseries-number-box{
  min-width:30px;
  height:30px;
  display:inline-grid;
  place-items:center;
  padding:0 7px;
  border:1px solid #d7e2ed;
  border-radius:7px;
  background:#f7f9fc;
  color:#25354e;
  font-size:12px;
  font-weight:700;
}

/* Menu button exactly like campaign table: plain three dots, no frame. */
.autoseries-menu-btn.row-menu-btn{
  width:auto !important;
  height:auto !important;
  min-width:28px;
  min-height:28px;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:17px !important;
}

.autoseries-menu-btn.row-menu-btn:hover{
  background:#f3f7fb !important;
}

/* Remove legacy framed style from the menu button only. */
.autoseries-menu-btn{
  border:0 !important;
  background:transparent !important;
}

/* Stable order controls. Only the unavailable direction is disabled. */
.autoseries-order-buttons button:disabled{
  opacity:.38;
}

.autoseries-order-buttons button:not(:disabled){
  opacity:1;
}

/* Footer identical in rhythm to mailings list. */
.autoseries-table-footer{
  border-top:1px solid #e9eef5;
}

/* Autoseries table needs enough width for the two new columns. */
.autoseries-table{
  min-width:1030px;
}

html[data-theme="dark"] .autoseries-number-box{
  background:#141f31;
  border-color:#2a3951;
  color:#e8eef8;
}


/* =========================================================
   Autofunnels: remove order column — 0.1.159
   ========================================================= */
.autoseries-order-col,
.autoseries-order-buttons{
  display:none !important;
}

/* Rebalance remaining table columns after removing "Порядок". */
.autoseries-type-col{
  width:210px;
}

.autoseries-mails-col{
  width:100px;
}

.autoseries-duration-col{
  width:125px;
}

.autoseries-menu-col{
  width:58px;
}

.autoseries-table{
  min-width:900px;
}


/* =========================================================
   Simple autoseries editor — 0.1.160
   ========================================================= */
.sf-development-toast{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:30000;
  min-width:180px;
  padding:15px 22px;
  border:1px solid #cfe1f7;
  border-radius:12px;
  background:#fff;
  color:#25354e;
  box-shadow:0 18px 44px rgba(15,23,42,.2);
  text-align:center;
  font-size:14px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}

.sf-development-toast.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.autoseries-editor-page{
  max-width:none;
}

.autoseries-editor-head{
  margin-bottom:18px;
}

.autoseries-back-link{
  display:inline-block;
  margin-bottom:8px;
  color:#1677ff;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}

.autoseries-editor-settings{
  display:grid;
  grid-template-columns:minmax(340px,1.3fr) minmax(360px,1.4fr) minmax(250px,.8fr);
  gap:14px;
  margin-bottom:16px;
}

.autoseries-editor-settings > *{
  min-height:104px;
  box-sizing:border-box;
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
}

.autoseries-name-field{
  padding:18px;
}

.autoseries-name-field > span{
  margin-bottom:8px;
  display:block;
  color:#25354e;
  font-size:12px;
  font-weight:700;
}

.autoseries-name-field input{
  width:100%;
  height:44px;
  box-sizing:border-box;
  padding:0 12px;
  border:1px solid #d5e1ed;
  border-radius:9px;
  background:#fff;
  color:#25354e;
  font:inherit;
  font-size:13px;
  outline:none;
}

.autoseries-name-field input:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.autoseries-unbroken-option{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:20px 18px;
  cursor:pointer;
}

.autoseries-unbroken-option input{
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:#1677ff;
}

.autoseries-unbroken-option span{
  display:grid;
  gap:5px;
}

.autoseries-unbroken-option strong{
  color:#25354e;
  font-size:13px;
}

.autoseries-unbroken-option small{
  color:#7d8ca1;
  font-size:11px;
  line-height:1.4;
}

.autoseries-current-status{
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px;
  background:#f4fbf7 !important;
  border-color:#cfead9 !important;
}

.autoseries-current-status-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#dff5e8;
}

.autoseries-current-status-icon img{
  width:25px;
  height:25px;
  object-fit:contain;
}

.autoseries-current-status > div:last-child{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:6px;
  align-items:end;
}

.autoseries-current-status small{
  grid-column:1/-1;
  color:#6c7b90;
  font-size:11px;
}

.autoseries-current-status strong{
  color:#168a4e;
  font-size:27px;
  line-height:1;
}

.autoseries-current-status span{
  color:#168a4e;
  font-size:11px;
  padding-bottom:2px;
}

.autoseries-editor-table-card{
  overflow:hidden;
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
}

.autoseries-editor-table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 18px;
  border-bottom:1px solid #e8eef5;
}

.autoseries-editor-table-head h2{
  margin:0 0 4px;
  color:#17213b;
  font-size:16px;
}

.autoseries-editor-table-head p{
  margin:0;
  color:#8190a5;
  font-size:11px;
}

.autoseries-editor-table-scroll{
  overflow:auto;
}

.autoseries-editor-table{
  width:100%;
  min-width:1120px;
  border-collapse:collapse;
}

.autoseries-editor-table th,
.autoseries-editor-table td{
  padding:13px 14px;
  border-bottom:1px solid #e9eef5;
  text-align:left;
  vertical-align:middle;
  font-size:12px;
}

.autoseries-editor-table th{
  background:#f7f9fc;
  color:#65758a;
  font-size:11px;
  font-weight:650;
}

.autoseries-editor-table tr:last-child td{
  border-bottom:0;
}

.series-letter-number{
  width:50px;
  text-align:center !important;
}

.series-letter-interval{
  width:170px;
}

.series-letter-stat-col{
  width:118px;
  text-align:center !important;
}

.series-letter-delete-col{
  width:92px;
  text-align:center !important;
}

.autoseries-letter-title{
  padding:0;
  border:0;
  background:transparent;
  color:#17213b;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.autoseries-letter-title:hover{
  color:#1677ff;
}

.series-letter-delete-btn{
  min-height:32px;
  padding:0 10px;
  border:1px solid #f3b3b3;
  border-radius:8px;
  background:#fff;
  color:#dc2626;
  font:inherit;
  font-size:11px;
  font-weight:650;
  cursor:pointer;
}

.series-letter-delete-btn:hover{
  background:#fff5f5;
}

html[data-theme="dark"] .sf-development-toast,
html[data-theme="dark"] .autoseries-editor-settings > *,
html[data-theme="dark"] .autoseries-editor-table-card,
html[data-theme="dark"] .autoseries-name-field input,
html[data-theme="dark"] .series-letter-delete-btn{
  background:#101827;
  border-color:#2a3951;
  color:#e8eef8;
}

html[data-theme="dark"] .autoseries-current-status{
  background:#11271f !important;
  border-color:#214735 !important;
}

html[data-theme="dark"] .autoseries-editor-table th{
  background:#141f31;
}

html[data-theme="dark"] .autoseries-editor-table th,
html[data-theme="dark"] .autoseries-editor-table td,
html[data-theme="dark"] .autoseries-editor-table-head{
  border-color:#25344a;
}

html[data-theme="dark"] .autoseries-letter-title,
html[data-theme="dark"] .autoseries-name-field > span,
html[data-theme="dark"] .autoseries-unbroken-option strong,
html[data-theme="dark"] .autoseries-editor-table-head h2{
  color:#eef4fb;
}

@media (max-width:1200px){
  .autoseries-editor-settings{
    grid-template-columns:1fr 1fr;
  }
  .autoseries-current-status{
    grid-column:1/-1;
  }
}


/* =========================================================
   Autoseries unbroken option vertical alignment — 0.1.162
   ========================================================= */
.autoseries-unbroken-option{
  align-items:center !important;
}

.autoseries-unbroken-option input{
  margin-top:0 !important;
}

.autoseries-unbroken-option span{
  align-self:center;
}


/* =========================================================
   Autoseries add-letter action — 0.1.163
   ========================================================= */
.autoseries-editor-table-head{
  align-items:center;
}

.autoseries-add-letter-btn{
  flex:0 0 auto;
  min-height:42px;
  padding:0 16px;
  font-size:12px;
  font-weight:650;
}


/* =========================================================
   Autoseries letters: status + two intervals — 0.1.164
   ========================================================= */
.series-letter-status-col{
  width:110px;
}

.series-letter-total-interval{
  width:140px;
}

.series-letter-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
}

.series-letter-status.active{
  color:#159447;
  background:#e6f7ec;
}

.series-letter-status.disabled{
  color:#718096;
  background:#edf1f5;
}

.autoseries-letter-row.is-disabled td{
  color:#98a5b5;
}

.autoseries-letter-row.is-disabled .autoseries-letter-title{
  color:#8897a8;
}

.autoseries-editor-table{
  min-width:1320px;
}

/* =========================================================
   Autoseries letter editor page — 0.1.164
   ========================================================= */
.autoseries-letter-builder-page .builder-steps,
.autoseries-letter-builder-page .builder-panel:not([data-panel="4"]),
.autoseries-letter-builder-page > .builder-footer{
  display:none !important;
}

.autoseries-letter-builder-page .builder-panel[data-panel="4"]{
  display:block !important;
}

.autoseries-letter-builder-page .content-step > .builder-panel-heading{
  padding-left:0;
}

.autoseries-letter-settings-card{
  margin-bottom:16px;
  padding:18px;
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
}

.autoseries-letter-main-grid,
.autoseries-letter-secondary-grid{
  display:grid;
  gap:14px;
}

.autoseries-letter-main-grid{
  grid-template-columns:1fr 1fr;
}

.autoseries-letter-secondary-grid{
  grid-template-columns:minmax(220px,.7fr) minmax(260px,.8fr) minmax(340px,1.1fr);
  margin-top:14px;
}

.autoseries-letter-main-grid .builder-field,
.autoseries-letter-secondary-grid .builder-field{
  margin:0;
}

.autoseries-letter-secondary-grid > .builder-field{
  padding:14px;
  border:1px solid #e1e9f2;
  border-radius:10px;
  background:#fbfcfe;
}

.autoseries-letter-secondary-grid .builder-field > span{
  margin-bottom:8px;
}

.autoseries-letter-order-field input,
.autoseries-delay-control > input{
  width:100%;
  height:44px;
  box-sizing:border-box;
  padding:0 12px;
  border:1px solid #d5e1ed;
  border-radius:9px;
  background:#fff;
  color:#25354e;
  font:inherit;
  font-size:13px;
  outline:none;
}

.autoseries-letter-order-field input:focus,
.autoseries-delay-control > input:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.autoseries-delay-control{
  display:grid;
  grid-template-columns:minmax(100px,.75fr) minmax(150px,1fr);
  gap:8px;
}

.autoseries-letter-select{
  position:relative;
  width:100%;
}

.autoseries-letter-select .sf-select__trigger{
  min-height:44px;
}

.autoseries-letter-select .sf-select__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  width:100%;
  z-index:18000;
}

.autoseries-letter-footer{
  position:sticky;
  bottom:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 -8px 24px rgba(28,46,72,.05);
}

.autoseries-letter-footer-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.autoseries-letter-save-state{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:8px;
  color:#b56a00;
  background:#fff4df;
  font-size:11px;
  font-weight:650;
}

.autoseries-letter-save-state.is-saved{
  color:#14834a;
  background:#e8f7ef;
}

.autoseries-letter-builder-page #unsavedModal{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

.autoseries-letter-builder-page #unsavedModal[hidden]{
  display:none !important;
}

html[data-theme="dark"] .autoseries-letter-settings-card,
html[data-theme="dark"] .autoseries-letter-footer{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .autoseries-letter-secondary-grid > .builder-field,
html[data-theme="dark"] .autoseries-letter-order-field input,
html[data-theme="dark"] .autoseries-delay-control > input{
  background:#111a2b;
  border-color:#2a3951;
  color:#eef4fb;
}

@media (max-width:1100px){
  .autoseries-letter-main-grid,
  .autoseries-letter-secondary-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Autoseries editor save/apply model — 0.1.168
   ========================================================= */
.autoseries-pending-notice{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  padding:11px 14px;
  border:1px solid #f0d8a8;
  border-radius:10px;
  background:#fff8e8;
  color:#8b6115;
  font-size:12px;
  font-weight:600;
}

.autoseries-pending-notice[hidden]{
  display:none !important;
}

.autoseries-pending-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 22px;
  border-radius:50%;
  background:#ffe8b8;
  color:#a36a00;
  font-weight:800;
}

.autoseries-editor-footer{
  position:sticky;
  bottom:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #d9e4f2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 -8px 24px rgba(28,46,72,.05);
}

.autoseries-editor-footer-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.autoseries-save-state{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:8px;
  background:#fff4df;
  color:#b56a00;
  font-size:11px;
  font-weight:650;
}

.autoseries-save-state.is-saved{
  background:#e8f7ef;
  color:#14834a;
}

#autoseriesUnsavedModal{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:19000;
}

#autoseriesUnsavedModal[hidden]{
  display:none !important;
}

.autoseries-unsaved-modal{
  width:min(520px, calc(100vw - 40px));
}

html[data-theme="dark"] .autoseries-pending-notice{
  background:#332817;
  border-color:#58472a;
  color:#f0ca7c;
}

html[data-theme="dark"] .autoseries-editor-footer{
  background:#101827;
  border-color:#2a3951;
}


/* =========================================================
   Forms tabs / search cleanup — 0.1.169
   ========================================================= */

.forms-tab-pane[hidden]{
  display:none !important;
}

.forms-toolbar-search-only{
  display:block;
  margin-top:16px;
}

.forms-toolbar-search-only .forms-search{
  width:100%;
  max-width:none;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid #d9e4f2;
  border-radius:11px;
  background:#fff;
  box-sizing:border-box;
}

.forms-toolbar-search-only .forms-search > span{
  color:#7f8da1;
  font-size:18px;
  line-height:1;
}

.forms-toolbar-search-only .forms-search input{
  width:100%;
  height:46px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#273851;
  font:inherit;
  font-size:13px;
}

.forms-toolbar-search-only .forms-search input::placeholder{
  color:#8795a8;
  opacity:1;
}

.forms-toolbar-search-only .forms-search:focus-within{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.forms-tabs .section-tab{
  cursor:pointer;
}

html[data-theme="dark"] .forms-toolbar-search-only .forms-search{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .forms-toolbar-search-only .forms-search input{
  color:#e8eef8;
}


/* =========================================================
   Forms card menu + diversified templates — 0.1.170
   ========================================================= */

.form-card{
  position:relative;
}

.form-card-menu-wrap{
  position:relative;
}

.form-card-menu{
  position:absolute;
  top:34px;
  right:0;
  z-index:80;
  min-width:150px;
  padding:6px;
  border:1px solid #dbe4ee;
  border-radius:10px;
  background:#fff;
  box-shadow:0 12px 30px rgba(28,46,72,.16);
}

.form-card-menu[hidden]{
  display:none !important;
}

.form-card-menu button{
  width:100%;
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#314158;
  font:inherit;
  font-size:12px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}

.form-card-menu button:hover{
  background:#f2f6fb;
}

.form-card-menu button.danger{
  color:#dc2626;
}

.form-card-menu button.danger:hover{
  background:#fff1f1;
}

/* Distinct template directions */
.form-preview-classic{
  background:linear-gradient(180deg,#f8fbff,#edf4fb);
}
.form-preview-classic .form-preview-inner{
  padding:14px;
  border:1px solid #dce7f2;
  border-radius:10px;
  background:#fff;
  box-shadow:0 7px 20px rgba(39,66,100,.08);
}

.form-preview-gift{
  background:
    radial-gradient(circle at 84% 16%,rgba(255,181,76,.45) 0 12%,transparent 13%),
    linear-gradient(140deg,#172b4d,#0d1830);
}
.form-preview-gift .form-preview-headline,
.form-preview-gift .form-preview-text,
.form-preview-gift .form-preview-note{
  color:#fff;
}
.form-preview-gift .form-preview-inner{
  text-align:left;
}
.form-preview-gift .form-preview-button{
  background:#ff7a13;
}

.form-preview-minimal{
  background:#fff;
  border:1px solid #e2e8f0;
}
.form-preview-minimal .form-preview-inner{
  width:min(100%,250px);
}
.form-preview-minimal .form-preview-headline{
  font-size:20px;
  font-weight:750;
}
.form-preview-minimal .form-preview-button{
  border-radius:999px;
  background:#17233d;
}

.form-preview-expert{
  background:linear-gradient(135deg,#eef7ff 0 48%,#dfefff 48% 100%);
}
.form-preview-expert .form-preview-inner{
  text-align:left;
}
.form-preview-expert .form-preview-headline{
  color:#0d5fad;
}
.form-preview-expert .form-preview-button{
  width:70%;
  background:#0d75d8;
}

.form-preview-webinar{
  background:
    radial-gradient(circle at 80% 18%,rgba(139,92,246,.22) 0 17%,transparent 18%),
    linear-gradient(135deg,#f3e8ff,#e5d2ff);
}
.form-preview-webinar .form-preview-inner{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.7);
}
.form-preview-webinar .form-preview-button{
  background:#7b43e8;
}

.form-preview-course{
  background:linear-gradient(145deg,#ecfff4,#d8f6e5);
}
.form-preview-course .form-preview-inner{
  text-align:left;
}
.form-preview-course .form-preview-headline{
  color:#117442;
}
.form-preview-course .form-preview-input{
  border-color:#bfe4cf;
}
.form-preview-course .form-preview-button{
  background:#16a05d;
}

.form-preview-news{
  background:linear-gradient(180deg,#fffaf0,#fff3d8);
}
.form-preview-news .form-preview-headline{
  font-family:Georgia,serif;
  font-weight:700;
  color:#513b18;
}
.form-preview-news .form-preview-button{
  background:#d58a18;
}

.form-preview-premium{
  background:
    radial-gradient(circle at 76% 20%,rgba(255,209,102,.25),transparent 28%),
    linear-gradient(145deg,#17151f,#29233a);
}
.form-preview-premium .form-preview-headline,
.form-preview-premium .form-preview-text,
.form-preview-premium .form-preview-note{
  color:#fff;
}
.form-preview-premium .form-preview-button{
  background:linear-gradient(90deg,#d7a83e,#f0cf79);
  color:#2f250e;
}

html[data-theme="dark"] .form-card-menu{
  background:#111a2b;
  border-color:#2a3951;
}

html[data-theme="dark"] .form-card-menu button{
  color:#e5edf8;
}

html[data-theme="dark"] .form-card-menu button:hover{
  background:#1b273a;
}

html[data-theme="dark"] .form-card-menu button.danger{
  color:#ff8b8b;
}


/* =========================================================
   Subscription form editor — 0.1.171
   ========================================================= */

.form-editor-page{
  max-width:1550px;
}

.form-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.form-editor-head h1{
  margin:2px 0 5px;
  font-size:34px;
}

.form-editor-head p{
  margin:0;
  color:#64748b;
  font-size:14px;
}

.form-editor-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:26px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.form-editor-save-state{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:8px;
  background:#fff4df;
  color:#b56a00;
  font-size:11px;
  font-weight:700;
}

.form-editor-save-state.is-saved{
  background:#e8f7ef;
  color:#14834a;
}

.form-editor-tabs{
  margin-top:20px;
}

.form-editor-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,470px);
  gap:18px;
  align-items:start;
  margin-top:16px;
}

.form-editor-settings{
  min-width:0;
}

.form-editor-pane[hidden]{
  display:none !important;
}

.form-editor-card{
  padding:20px;
  border:1px solid #d9e4f2;
  border-radius:13px;
  background:#fff;
}

.form-editor-card h2{
  margin:0 0 16px;
  color:#17233d;
  font-size:18px;
}

.form-editor-card-note{
  margin:-7px 0 16px;
  color:#738197;
  font-size:12px;
}

.form-editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-editor-wide{
  grid-column:1/-1;
}

.form-editor-card .builder-field{
  margin:0;
}

.form-editor-card textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:88px;
  padding:11px 12px;
  border:1px solid #d5e1ed;
  border-radius:9px;
  outline:none;
  color:#25354e;
  background:#fff;
  font:inherit;
  font-size:13px;
}

.form-editor-card textarea:focus{
  border-color:#1677ff;
  box-shadow:0 0 0 3px rgba(22,119,255,.08);
}

.form-editor-card input[type="color"]{
  width:100%;
  height:44px;
  padding:4px;
  border:1px solid #d5e1ed;
  border-radius:9px;
  background:#fff;
}

.form-fields-list{
  display:grid;
  gap:10px;
}

.form-field-option{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid #e0e8f1;
  border-radius:10px;
  background:#fbfcfe;
  cursor:pointer;
}

.form-field-option.locked{
  cursor:default;
}

.form-field-option span{
  display:grid;
  gap:3px;
}

.form-field-option strong{
  color:#26364e;
  font-size:13px;
}

.form-field-option small{
  color:#7b899d;
  font-size:11px;
}

.form-field-option input{
  width:18px;
  height:18px;
  accent-color:#1677ff;
}

.form-editor-select{
  position:relative;
}

.form-editor-select .sf-select__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:18000;
  width:100%;
}

.form-double-optin-card{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:16px;
  padding:15px;
  border:1px solid #bfe4cf;
  border-radius:11px;
  background:#f1fbf5;
}

.form-double-optin-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  border-radius:50%;
  background:#dff5e8;
  color:#168a4e;
  font-weight:900;
}

.form-double-optin-card > div:nth-child(2){
  min-width:0;
}

.form-double-optin-card strong{
  display:block;
  color:#146f42;
  font-size:13px;
}

.form-double-optin-card p{
  margin:3px 0 0;
  color:#61806d;
  font-size:11px;
  line-height:1.4;
}

.form-double-optin-lock{
  margin-left:auto;
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:#e0f4e8;
  color:#167f4a;
  font-size:10px;
  font-weight:750;
}

.form-align-buttons{
  display:flex;
  gap:8px;
}

.form-align-buttons button{
  min-height:38px;
  padding:0 14px;
  border:1px solid #d7e1ec;
  border-radius:8px;
  background:#fff;
  color:#52647b;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.form-align-buttons button.active{
  border-color:#1677ff;
  background:#eaf3ff;
  color:#1677ff;
}

.form-editor-preview-panel{
  position:sticky;
  top:16px;
  overflow:hidden;
  border:1px solid #d9e4f2;
  border-radius:13px;
  background:#fff;
}

.form-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  border-bottom:1px solid #e8eef5;
}

.form-preview-head > div{
  display:grid;
  gap:2px;
}

.form-preview-head strong{
  color:#17233d;
  font-size:13px;
}

.form-preview-head small{
  color:#8a98aa;
  font-size:10px;
}

.form-live-preview-stage{
  min-height:560px;
  display:grid;
  place-items:center;
  padding:24px;
  background:#eef3f8;
}

.form-live-preview{
  width:100%;
  padding:24px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 14px 34px rgba(25,48,78,.12);
  box-sizing:border-box;
}

.form-live-preview h2{
  margin:0 0 10px;
  color:inherit;
  font-size:25px;
  line-height:1.15;
}

.form-live-preview p{
  margin:0 0 16px;
  color:inherit;
  opacity:.78;
  font-size:13px;
  line-height:1.45;
}

.form-live-input{
  width:100%;
  height:44px;
  margin:0 0 9px;
  padding:0 12px;
  border:1px solid #d6dfea;
  background:#fff;
  box-sizing:border-box;
  font:inherit;
  font-size:12px;
  outline:none;
}

.form-live-button{
  width:100%;
  height:44px;
  border:0;
  cursor:default;
  font:inherit;
  font-size:12px;
  font-weight:750;
}

.form-live-note{
  display:block;
  margin-top:9px;
  color:inherit;
  opacity:.68;
  font-size:10px;
}

.form-code-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.form-code-head h2{
  margin-bottom:4px;
}

.form-code-head p{
  margin:0;
  color:#738197;
  font-size:12px;
}

.form-code-output{
  width:100%;
  min-height:420px !important;
  padding:14px !important;
  resize:vertical;
  border-radius:10px !important;
  background:#0f172a !important;
  color:#dce8f6 !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace !important;
  font-size:11px !important;
  line-height:1.55;
}

.form-code-note{
  margin-top:10px;
  color:#748398;
  font-size:11px;
}

#formEditorUnsavedModal{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:20000;
}

#formEditorUnsavedModal[hidden]{
  display:none !important;
}

html[data-theme="dark"] .form-editor-card,
html[data-theme="dark"] .form-editor-preview-panel{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .form-editor-card h2,
html[data-theme="dark"] .form-preview-head strong{
  color:#e7edf7;
}

html[data-theme="dark"] .form-field-option,
html[data-theme="dark"] .form-editor-card textarea,
html[data-theme="dark"] .form-editor-card input[type="color"],
html[data-theme="dark"] .form-align-buttons button{
  background:#111a2b;
  border-color:#2a3951;
  color:#e7edf7;
}

html[data-theme="dark"] .form-double-optin-card{
  background:#11271f;
  border-color:#214735;
}

@media(max-width:1100px){
  .form-editor-workspace{
    grid-template-columns:1fr;
  }
  .form-editor-preview-panel{
    position:static;
  }
}

@media(max-width:760px){
  .form-editor-head{
    display:block;
  }
  .form-editor-head-actions{
    justify-content:flex-start;
    padding-top:16px;
  }
  .form-editor-grid{
    grid-template-columns:1fr;
  }
  .form-editor-wide{
    grid-column:auto;
  }
}


/* =========================================================
   Subscription form editor rebuild — 0.1.172
   ========================================================= */
.form-editor-head-main{min-width:0;flex:1}
.form-editor-name-top{display:grid;gap:6px;width:min(620px,100%);margin-top:18px}.form-editor-name-top span{font-size:12px;font-weight:700;color:#25354e}.form-editor-name-top input{height:44px;padding:0 12px;border:1px solid #d5e1ed;border-radius:9px;background:#fff;color:#25354e;font:inherit;font-size:13px;outline:none}.form-editor-name-top input:focus{border-color:#1677ff;box-shadow:0 0 0 3px rgba(22,119,255,.08)}
.form-editor-accordion-list{display:grid;gap:10px}.form-accordion{border:1px solid #d9e4f2;border-radius:12px;background:#fff;overflow:hidden}.form-accordion-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 12px;border-bottom:1px solid transparent}.form-accordion.is-open .form-accordion-head{border-bottom-color:#e9eef5}.form-accordion-toggle{flex:1;min-height:52px;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:#22324a;text-align:left;cursor:pointer}.form-accordion-toggle strong{font-size:13px}.form-accordion-toggle>span{font-size:18px;color:#7b8aa0;transition:.15s}.form-accordion:not(.is-open) .form-accordion-toggle>span{transform:rotate(-90deg)}.form-accordion-body{display:none;padding:16px}.form-accordion.is-open .form-accordion-body{display:block}.form-accordion.is-disabled .form-accordion-body{opacity:.52}.form-element-switch{display:flex;align-items:center;gap:7px;font-size:11px;color:#607189;cursor:pointer}.form-element-switch input{accent-color:#1677ff}.form-required-badge{padding:5px 8px;border-radius:999px;background:#eef4fb;color:#66778f;font-size:10px;font-weight:700}
.form-typography-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-typography-grid .builder-field{margin:0}.form-icon-buttons,.form-style-buttons,.form-segmented{display:flex;gap:7px;flex-wrap:wrap}.form-icon-buttons button,.form-style-buttons button,.form-segmented button{min-width:38px;height:38px;padding:0 11px;border:1px solid #d6e0eb;border-radius:8px;background:#fff;color:#52647b;font:inherit;cursor:pointer}.form-icon-buttons button:nth-child(2){text-align:center}.form-icon-buttons button:nth-child(3){text-align:right}.form-icon-buttons button.active,.form-style-buttons button.active,.form-segmented button.active{border-color:#1677ff;background:#eaf3ff;color:#1677ff}.form-editor-native-select{width:100%;height:44px;padding:0 36px 0 12px;border:1px solid #d5e1ed;border-radius:9px;background:#fff;color:#25354e;font:inherit;font-size:13px;outline:none}
.form-editor-checkline{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #e0e8f1;border-radius:10px;background:#fbfcfe}.form-editor-checkline input{width:18px;height:18px;margin-top:1px;accent-color:#1677ff}.form-editor-checkline span{display:grid;gap:3px}.form-editor-checkline strong{font-size:12px;color:#25354e}.form-editor-checkline small{font-size:10px;color:#7b8a9e;line-height:1.4}
.form-field-order-list{display:grid;gap:8px;margin-bottom:14px}.form-field-row{display:grid;grid-template-columns:125px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border:1px solid #e1e8f1;border-radius:9px;background:#fbfcfe}.form-field-row>label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650}.form-field-row>label input{accent-color:#1677ff}.form-field-row>input{height:38px;padding:0 10px;border:1px solid #d7e1ec;border-radius:7px;background:#fff;color:#34465f;font:inherit;font-size:12px}.form-field-row>div{display:flex;gap:4px}.form-field-row>div button{width:31px;height:31px;border:1px solid #d7e1ec;border-radius:7px;background:#fff;color:#607189;cursor:pointer}.form-fields-design-grid{margin-top:14px}
.form-policy-block{padding:12px;border:1px solid #e1e8f1;border-radius:10px;margin-bottom:10px}.form-policy-block.is-disabled .form-policy-settings{opacity:.45;pointer-events:none}.form-policy-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.form-policy-common{margin-top:14px}.form-policy-common.is-disabled{opacity:.45;pointer-events:none}
.form-actions-section{margin-top:18px;padding-top:18px;border-top:1px solid #e8eef5}.form-actions-section h3{margin:0 0 12px;color:#25354e;font-size:14px}.form-radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.form-radio-cards label{display:flex;gap:9px;padding:12px;border:1px solid #dfe7f0;border-radius:10px;background:#fbfcfe;cursor:pointer}.form-radio-cards input{margin-top:2px;accent-color:#1677ff}.form-radio-cards span{display:grid;gap:3px}.form-radio-cards strong{font-size:12px;color:#25354e}.form-radio-cards small{font-size:10px;color:#7b899d;line-height:1.35}
.form-code-modal-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:20000;display:flex;align-items:center;justify-content:center}.form-code-modal-backdrop[hidden]{display:none!important}.form-code-modal{width:min(900px,calc(100vw - 40px));max-height:88vh;overflow:auto}.form-code-modal .form-code-output{min-height:430px!important}
.form-live-preview-stage{overflow:auto}.form-live-preview[data-responsive="1"]{width:100%}.form-live-preview #fePreviewFields{display:grid}.form-live-input.is-responsive{max-width:100%}.form-live-policies{margin-top:8px;display:grid;gap:5px}.form-live-policy{display:flex;gap:7px;align-items:flex-start}.form-live-policy input{margin:2px 0 0}.form-live-policy a{color:inherit}.form-live-button{display:block;width:100%}
html[data-theme="dark"] .form-editor-name-top span{color:#dfe8f3}html[data-theme="dark"] .form-editor-name-top input,html[data-theme="dark"] .form-accordion,html[data-theme="dark"] .form-icon-buttons button,html[data-theme="dark"] .form-style-buttons button,html[data-theme="dark"] .form-segmented button,html[data-theme="dark"] .form-editor-native-select,html[data-theme="dark"] .form-field-row,html[data-theme="dark"] .form-field-row>input,html[data-theme="dark"] .form-field-row>div button,html[data-theme="dark"] .form-editor-checkline,html[data-theme="dark"] .form-radio-cards label{background:#101827;border-color:#2a3951;color:#e5edf8}html[data-theme="dark"] .form-accordion-toggle,html[data-theme="dark"] .form-editor-checkline strong,html[data-theme="dark"] .form-radio-cards strong,html[data-theme="dark"] .form-actions-section h3{color:#e5edf8}
@media(max-width:760px){.form-typography-grid,.form-policy-settings,.form-radio-cards{grid-template-columns:1fr}.form-field-row{grid-template-columns:1fr}.form-editor-name-top{width:100%}}


/* =========================================================
   Form editor appearance UI refinement — 0.1.173
   ========================================================= */

/* Element headers: larger and visually stronger */
.form-editor-accordion-list{
  gap:12px;
}

.form-accordion{
  overflow:visible;
}

.form-accordion-head{
  min-height:58px;
  padding:0 10px 0 12px;
  background:#f8fbff;
  border:1px solid #dce6f1;
  border-radius:11px;
}

.form-accordion.is-open .form-accordion-head{
  border-color:#c9ddf5;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  background:#f4f9ff;
}

.form-accordion-toggle{
  min-height:56px;
  padding:0 4px 0 0;
}

.form-accordion-toggle strong{
  font-size:15px;
  font-weight:750;
  color:#243650;
}

.form-accordion-chevron{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  border:1px solid #d3dfec;
  border-radius:8px;
  background:#fff;
  color:#66788f !important;
  font-size:17px !important;
  transition:.16s ease;
}

.form-accordion:not(.is-open) .form-accordion-chevron{
  transform:rotate(-90deg);
}

.form-accordion-toggle:hover .form-accordion-chevron{
  border-color:#9cc4f5;
  background:#edf5ff;
  color:#1677ff !important;
}

/* Checkbox is left of title, SendFactory-styled, no text label */
.form-element-switch-only{
  position:relative;
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-right:8px;
  padding:0;
}

.form-element-switch-only input{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin:0;
  border:1.5px solid #b9c8d8;
  border-radius:5px;
  background:#fff;
  cursor:pointer;
}

.form-element-switch-only input:checked{
  border-color:#1677ff;
  background:#1677ff;
}

.form-element-switch-only input:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.form-fixed-element-mark{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-right:10px;
  border:1.5px solid #c8d4e1;
  border-radius:5px;
  background:#eef3f8;
  position:relative;
}

.form-fixed-element-mark::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #8ba0b7;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* All panels start collapsed; body appears only after click */
.form-accordion-body{
  padding:20px;
  border:1px solid #dce6f1;
  border-top:0;
  border-radius:0 0 11px 11px;
  background:#fff;
}

/* Consistent vertical spacing */
.form-accordion-body > * + *{
  margin-top:18px;
}

.form-control-row{
  margin-bottom:0 !important;
}

.form-control-row > span,
.form-typography-toolbar .builder-field > span,
.form-fields-layout-grid .builder-field > span{
  display:block;
  margin-bottom:7px;
}

.form-typography-toolbar{
  display:grid;
  gap:14px;
  padding-top:2px;
}

.form-typography-main{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(110px,.7fr) minmax(110px,.72fr);
  gap:12px;
  align-items:end;
}

.form-typography-actions{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.form-typography-actions .builder-field{
  margin:0;
}

.form-fields-layout-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.form-fields-typography,
.form-button-typography,
.form-policy-common{
  margin-top:18px !important;
}

.form-fields-responsive-row{
  margin-top:18px !important;
}

/* Custom font selector */
.form-font-select{
  width:100%;
  position:relative;
}

.form-font-select .sf-select__trigger{
  width:100%;
  min-height:44px;
  padding-left:12px;
  padding-right:40px;
  box-sizing:border-box;
}

.form-font-select .sf-select__chevron{
  right:16px !important;
}

.form-font-select .sf-select__menu{
  left:0;
  right:0;
  width:100%;
  z-index:19000;
}

.form-font-select .sf-select__option{
  min-height:40px;
}

/* More readable alignment controls, with true line icons */
.form-align-icon-buttons{
  flex-wrap:nowrap;
}

.form-align-icon-buttons button{
  width:42px;
  min-width:42px;
  padding:0;
  display:grid;
  place-items:center;
}

.text-align-icon{
  width:20px;
  height:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.text-align-icon i{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

.text-align-left{
  align-items:flex-start;
}

.text-align-left i:nth-child(1),
.text-align-left i:nth-child(3){
  width:20px;
}
.text-align-left i:nth-child(2),
.text-align-left i:nth-child(4){
  width:13px;
}

.text-align-center{
  align-items:center;
}

.text-align-center i:nth-child(1),
.text-align-center i:nth-child(3){
  width:20px;
}
.text-align-center i:nth-child(2),
.text-align-center i:nth-child(4){
  width:13px;
}

.text-align-right{
  align-items:flex-end;
}

.text-align-right i:nth-child(1),
.text-align-right i:nth-child(3){
  width:20px;
}
.text-align-right i:nth-child(2),
.text-align-right i:nth-child(4){
  width:13px;
}

/* Keep text/style buttons aligned on the second row */
.form-style-buttons{
  flex-wrap:nowrap;
}

.form-style-buttons button,
.form-align-icon-buttons button{
  height:40px;
  border-radius:8px;
}

/* One-line subtitle field */
#feSubtitle{
  height:44px;
  min-height:44px;
}

/* Old 2-column typography grid is no longer used in Appearance */
.form-editor-pane[data-form-editor-pane="appearance"] .form-typography-grid{
  display:block;
}

/* Dark theme */
html[data-theme="dark"] .form-accordion-head{
  background:#121d2f;
  border-color:#2a3951;
}

html[data-theme="dark"] .form-accordion.is-open .form-accordion-head{
  background:#152238;
  border-color:#365071;
}

html[data-theme="dark"] .form-accordion-toggle strong{
  color:#e7edf7;
}

html[data-theme="dark"] .form-accordion-chevron,
html[data-theme="dark"] .form-element-switch-only input{
  background:#101827;
  border-color:#3a4b64;
}

html[data-theme="dark"] .form-element-switch-only input:checked{
  background:#1677ff;
  border-color:#1677ff;
}

html[data-theme="dark"] .form-fixed-element-mark{
  background:#1a2739;
  border-color:#3a4b64;
}

html[data-theme="dark"] .form-accordion-body{
  background:#101827;
  border-color:#2a3951;
}

@media(max-width:900px){
  .form-typography-main{
    grid-template-columns:1fr 1fr;
  }
  .form-typography-main > :first-child{
    grid-column:1/-1;
  }
  .form-fields-layout-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){
  .form-typography-main,
  .form-fields-layout-grid{
    grid-template-columns:1fr;
  }
  .form-typography-main > :first-child{
    grid-column:auto;
  }
}


/* =========================================================
   Fields settings responsive single row — 0.1.174
   ========================================================= */

/* Five field appearance controls stay on one row while space allows,
   then automatically wrap to the next row as the editor gets narrower. */
.form-accordion[data-accordion="fields"] .form-fields-layout-grid{
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  align-items:end;
}

@media(max-width:620px){
  .form-accordion[data-accordion="fields"] .form-fields-layout-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:430px){
  .form-accordion[data-accordion="fields"] .form-fields-layout-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Fields placeholder/text + preview typing — 0.1.175
   ========================================================= */

/* Disclosure control: precise visual centering */
.form-accordion-toggle{
  align-items:center;
}

.form-accordion-chevron{
  position:relative;
  font-size:0 !important;
  line-height:0 !important;
}

.form-accordion-chevron::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translate(-62%,-50%) rotate(-45deg);
  transform-origin:center;
}

.form-accordion.is-open .form-accordion-chevron::before{
  transform:translate(-50%,-64%) rotate(45deg);
}

.form-accordion:not(.is-open) .form-accordion-chevron{
  transform:none !important;
}

/* Separate placeholder ("mask") typography from entered text typography */
.form-fields-text-settings{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.form-fields-text-row{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(145px,.8fr) minmax(130px,.75fr);
  gap:12px;
  align-items:end;
}

.form-fields-text-row .builder-field{
  margin:0;
}

.form-fields-text-row .builder-field > span{
  display:block;
  margin-bottom:7px;
}

.form-fields-align-row{
  margin-top:0;
}

.form-live-input::placeholder{
  font-family:var(--field-mask-font, Inter, Arial, sans-serif);
  font-size:var(--field-mask-size, 13px);
  color:var(--field-mask-color, #96a3b4);
  opacity:1;
}

/* Preview fields are real interactive inputs */
#fePreview .form-live-input{
  pointer-events:auto;
  cursor:text;
}

#fePreview .form-live-input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(22,119,255,.09);
}

@media(max-width:900px){
  .form-fields-text-row{
    grid-template-columns:1fr 1fr;
  }
  .form-fields-text-row > :first-child{
    grid-column:1/-1;
  }
}

@media(max-width:620px){
  .form-fields-text-row{
    grid-template-columns:1fr;
  }
  .form-fields-text-row > :first-child{
    grid-column:auto;
  }
}


/* =========================================================
   Form element spacing / button icon / policies — 0.1.176
   ========================================================= */

.form-element-spacing-settings{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:18px !important;
  padding-top:18px;
  border-top:1px solid #e8eef5;
}

.form-element-spacing-settings .builder-field{
  margin:0;
}

.form-button-icon-settings{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(200px,.8fr);
  gap:12px;
  margin-top:18px;
  align-items:end;
}

.form-button-icon-select{
  width:100%;
  position:relative;
}

.form-button-icon-select .sf-select__trigger{
  width:100%;
  padding-right:40px;
}

.form-button-icon-select .sf-select__chevron{
  right:16px !important;
}

.form-button-icon-position{
  flex-wrap:nowrap;
}

.form-button-icon-position button{
  min-width:82px;
}

.form-policy-settings-extended{
  grid-template-columns:1fr 1fr;
}

.form-policy-default-check{
  align-self:end;
  min-height:44px;
  margin:0;
}

.form-live-note[hidden]{
  display:none !important;
}

#fePreviewHeadline[hidden],
#fePreviewSubtitle[hidden]{
  display:none !important;
}

#fePreviewFields{
  display:grid;
}

#fePreviewButton span{
  line-height:1;
}

@media(max-width:760px){
  .form-element-spacing-settings,
  .form-button-icon-settings,
  .form-policy-settings-extended{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Button width / icon size / additional alignment — 0.1.177
   ========================================================= */

/* Button visual settings stay on one row when the editor is wide enough. */
.form-button-layout-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(115px,1fr));
  gap:12px;
  margin-top:18px;
  align-items:end;
}

.form-button-layout-grid .builder-field{
  margin:0;
}

/* Icon settings: icon, position and size in one row. */
.form-button-icon-settings{
  grid-template-columns:minmax(220px,1.2fr) minmax(180px,.8fr) minmax(190px,.9fr);
}

.form-icon-size-field input[type="range"]{
  width:100%;
  height:40px;
  margin:0;
  accent-color:#1677ff;
}

.form-icon-size-field > span strong{
  color:#1677ff;
  font-weight:750;
}

/* Narrow field widths remain centered inside the form preview. */
#fePreviewFields .form-live-input{
  justify-self:center;
}

/* Policies: vertically center checkbox against its text. */
.form-live-policy{
  align-items:center !important;
  width:100%;
}

.form-live-policy input{
  margin:0 !important;
  flex:0 0 auto;
}

.form-live-policy span{
  min-width:0;
}

/* Policy setting layout follows the requested order:
   URL | link text
   default checked | full text */
.form-policy-settings-extended{
  align-items:end;
}

/* Button itself can be narrower and stays centered. */
#fePreviewButton{
  max-width:100%;
}

/* Responsive wrapping */
@media(max-width:1050px){
  .form-button-layout-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .form-button-icon-settings{
    grid-template-columns:1fr 1fr;
  }
  .form-icon-size-field{
    grid-column:1/-1;
  }
}

@media(max-width:760px){
  .form-button-layout-grid{
    grid-template-columns:1fr 1fr;
  }
  .form-button-icon-settings{
    grid-template-columns:1fr;
  }
  .form-icon-size-field{
    grid-column:auto;
  }
}

@media(max-width:430px){
  .form-button-layout-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Form button image icons + custom additional fields — 0.1.178
   ========================================================= */

.form-icon-option-img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
  margin-right:7px;
}

.form-button-inline-icon{
  flex:0 0 auto;
  vertical-align:middle;
}

.form-button-inline-icon--arrow{
  position:relative;
  top:-1px;
}

.form-policy-settings-extended{
  grid-template-columns:1fr 1fr;
  grid-auto-flow:row;
}

.form-custom-policy-section{
  margin-top:18px !important;
  padding-top:18px;
  border-top:1px solid #e8eef5;
}

.form-custom-policy-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.form-custom-policy-head > div{
  display:grid;
  gap:3px;
}

.form-custom-policy-head strong{
  color:#25354e;
  font-size:13px;
}

.form-custom-policy-head small{
  color:#7b899d;
  font-size:10px;
}

.form-custom-policy-list{
  display:grid;
  gap:10px;
}

.form-custom-policy-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.form-custom-policy-title .form-editor-checkline{
  flex:1;
  margin:0;
}

.form-custom-policy-delete{
  flex:0 0 auto;
  height:38px;
  padding:0 11px;
  border:1px solid #f0c7c7;
  border-radius:8px;
  background:#fff;
  color:#dc2626;
  font:inherit;
  font-size:11px;
  font-weight:650;
  cursor:pointer;
}

.form-custom-policy-delete:hover{
  background:#fff4f4;
}

/* Policies and custom consent fields move as one unit with alignment. */
.form-live-policy{
  display:flex;
  align-items:center !important;
}

.form-live-policy span{
  line-height:1.35;
}

html[data-theme="dark"] .form-custom-policy-head strong{
  color:#e5edf8;
}

html[data-theme="dark"] .form-custom-policy-delete{
  background:#111a2b;
  border-color:#5b343b;
  color:#ff8b8b;
}

@media(max-width:760px){
  .form-policy-settings-extended{
    grid-template-columns:1fr;
  }
  .form-custom-policy-head{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   Monochrome button icons + underlined policy links — 0.1.179
   ========================================================= */

.form-icon-option-mask{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 18px;
  margin-right:7px;
  background:currentColor;
}

.form-icon-option-mask--mail{
  -webkit-mask:url("form-icon-email.png") center/contain no-repeat;
  mask:url("form-icon-email.png") center/contain no-repeat;
}

.form-icon-option-mask--gift{
  -webkit-mask:url("form-icon-gift.png") center/contain no-repeat;
  mask:url("form-icon-gift.png") center/contain no-repeat;
}

.form-button-inline-icon--mail,
.form-button-inline-icon--gift{
  background:currentColor;
}

.form-live-policy a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:currentColor;
  text-underline-offset:2px;
}


/* =========================================================
   Form actions: multiple subscriber groups — 0.1.180
   ========================================================= */

.form-actions-groups-field{
  grid-column:1/-1;
}

.form-group-tree-select{
  position:relative;
  width:100%;
}

.form-group-tree-select .tree-select__menu{
  z-index:19000;
  max-height:390px;
  overflow:auto;
}

.form-group-tokens{
  margin-top:10px;
}

.form-actions-groups-field > small{
  display:block;
  margin-top:7px;
  color:#7b899d;
  font-size:11px;
  line-height:1.4;
}

html[data-theme="dark"] .form-actions-groups-field > small{
  color:#93a4bd;
}


/* =========================================================
   Actions: redirect default + active/inactive modes — 0.1.181
   ========================================================= */

.form-radio-cards label{
  transition:opacity .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.form-radio-cards label:not(.is-active){
  opacity:.5;
  background:#f6f8fb;
}

.form-radio-cards label.is-active{
  opacity:1;
  border-color:#9fc7f8;
  background:#eef6ff;
  box-shadow:0 0 0 2px rgba(22,119,255,.06);
}

.form-radio-cards label.is-active strong{
  color:#1677ff;
}

.form-actions-section .builder-field.is-action-inactive{
  opacity:.42;
  pointer-events:none;
}

.form-actions-section .builder-field.is-action-inactive input,
.form-actions-section .builder-field.is-action-inactive textarea{
  background:#f4f7fa;
  color:#94a3b8;
}

html[data-theme="dark"] .form-radio-cards label:not(.is-active){
  background:#101827;
  opacity:.45;
}

html[data-theme="dark"] .form-radio-cards label.is-active{
  background:#15253b;
  border-color:#2f67a8;
}

html[data-theme="dark"] .form-actions-section .builder-field.is-action-inactive input,
html[data-theme="dark"] .form-actions-section .builder-field.is-action-inactive textarea{
  background:#0d1420;
  color:#627087;
}


/* =========================================================
   Form preview devices + compact code modal — 0.1.182
   ========================================================= */

.form-preview-head-controls{
  display:flex;
  align-items:center;
  gap:9px;
}

.form-preview-device-switch{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px;
  border:1px solid #dbe5ef;
  border-radius:9px;
  background:#f7f9fc;
}

.form-preview-device-switch button{
  width:34px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#73849a;
  font:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.form-preview-device-switch button.active{
  background:#fff;
  color:#1677ff;
  box-shadow:0 1px 5px rgba(31,57,90,.12);
}

.form-live-preview-stage{
  transition:padding .18s ease;
}

.form-live-preview-stage.is-mobile-preview{
  padding-left:42px;
  padding-right:42px;
}

.form-live-preview-stage.is-mobile-preview .form-live-preview{
  width:360px !important;
  max-width:100% !important;
}

.form-code-modal{
  width:min(680px,calc(100vw - 40px)) !important;
  max-height:82vh;
  padding:24px !important;
}

.form-code-modal .form-code-head{
  display:block;
  margin:0 42px 16px;
  text-align:center;
}

.form-code-modal .form-code-head h2{
  margin:0 0 6px;
  text-align:center;
}

.form-code-modal .form-code-head p{
  margin:0;
  text-align:center;
}

.form-code-modal .form-code-output{
  min-height:300px !important;
  max-height:44vh;
}

.form-code-modal .form-code-note{
  text-align:center;
}

.form-code-copy-bottom{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.form-code-copy-bottom .btn{
  min-width:220px;
  min-height:48px;
  padding:0 24px;
  font-size:14px;
}

html[data-theme="dark"] .form-preview-device-switch{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .form-preview-device-switch button.active{
  background:#1b2940;
}

@media(max-width:620px){
  .form-preview-head{
    align-items:flex-start;
  }
  .form-preview-head-controls{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .form-live-preview-stage.is-mobile-preview{
    padding-left:18px;
    padding-right:18px;
  }
  .form-code-modal{
    width:calc(100vw - 24px) !important;
    padding:18px !important;
  }
}


/* =========================================================
   Preview toolbar alignment + device icons + toast layering — 0.1.183
   ========================================================= */

.form-preview-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center !important;
  gap:14px;
}

.form-preview-title{
  justify-self:start;
}

.form-preview-device-switch{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:5px;
}

.form-preview-code-action{
  justify-self:end;
}

.form-preview-device-switch button{
  display:grid;
  place-items:center;
}

.form-preview-device-switch button img{
  width:18px;
  height:18px;
  object-fit:contain;
  opacity:.72;
}

.form-preview-device-switch button.active img{
  opacity:1;
}

/* Make monochrome supplied icons follow the current button color. */
.form-preview-device-switch button img{
  filter:grayscale(1) opacity(.8);
}

.form-preview-device-switch button.active img{
  filter:none;
}

/* Toast must sit above the blurred modal backdrop. */
#formEditorToast.sf-toast{
  z-index:21050 !important;
}

@media(max-width:720px){
  .form-preview-head{
    grid-template-columns:1fr auto;
  }
  .form-preview-title{
    grid-column:1;
    grid-row:1;
  }
  .form-preview-device-switch{
    grid-column:1/-1;
    grid-row:2;
    justify-self:center;
  }
  .form-preview-code-action{
    grid-column:2;
    grid-row:1;
  }
}


/* =========================================================
   Preview device switch: horizontal + blue active — 0.1.184
   ========================================================= */

.form-preview-device-switch{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px;
  white-space:nowrap;
}

.form-preview-device-switch button{
  width:38px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#73849a;
  cursor:pointer;
}

.form-preview-device-switch button.active{
  border-color:#1677ff;
  background:#1677ff;
  color:#fff;
  box-shadow:none;
}

.form-preview-device-switch button img{
  width:18px;
  height:18px;
  object-fit:contain;
  filter:grayscale(1) opacity(.75);
}

.form-preview-device-switch button.active img{
  filter:brightness(0) invert(1);
  opacity:1;
}

/* Desktop stays the left button and is active by default in markup. */
.form-preview-device-switch [data-preview-device="desktop"]{
  order:1;
}
.form-preview-device-switch [data-preview-device="mobile"]{
  order:2;
}


/* =========================================================
   Form background: color / gradient — 0.1.186
   ========================================================= */

.form-background-settings{
  display:grid;
  gap:12px;
}

.form-background-settings > span{
  margin-bottom:0 !important;
}

.form-background-mode{
  width:max-content;
}

.form-background-mode button{
  min-width:92px;
}

.form-background-color-controls,
.form-background-gradient-controls{
  display:grid;
  gap:12px;
  align-items:end;
}

.form-background-color-controls{
  grid-template-columns:minmax(180px,280px);
}

.form-background-gradient-controls{
  grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) minmax(110px,.55fr);
}

.form-background-color-controls[hidden],
.form-background-gradient-controls[hidden]{
  display:none !important;
}

.form-background-color-controls .builder-field,
.form-background-gradient-controls .builder-field{
  margin:0;
}

@media(max-width:760px){
  .form-background-gradient-controls{
    grid-template-columns:1fr 1fr;
  }
  .form-background-gradient-controls .builder-field:last-child{
    grid-column:1/-1;
  }
}

@media(max-width:480px){
  .form-background-gradient-controls{
    grid-template-columns:1fr;
  }
  .form-background-gradient-controls .builder-field:last-child{
    grid-column:auto;
  }
}


/* =========================================================
   Form appearance rows — 0.1.187
   ========================================================= */

.form-appearance-layout{
  display:grid;
  gap:14px;
}

.form-settings-row{
  display:grid;
  gap:12px;
  align-items:end;
}

.form-settings-row .builder-field{
  margin:0;
}

.form-settings-row-main{
  grid-template-columns:repeat(3,minmax(150px,1fr));
}

.form-settings-row-border{
  grid-template-columns:minmax(150px,.7fr) minmax(180px,.8fr) minmax(330px,1.6fr);
}

.form-shadow-field .form-segmented{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.form-shadow-field .form-segmented button{
  flex:1 1 auto;
  min-width:88px;
}

.form-settings-row-bg{
  grid-template-columns:minmax(230px,.8fr) minmax(180px,1.2fr);
}

.form-background-mode-field{
  min-width:0;
}

.form-background-mode{
  width:100%;
  max-width:260px;
}

.form-background-mode button{
  flex:1 1 0;
}

.form-settings-row-bg .form-background-color-controls{
  grid-template-columns:minmax(180px,280px);
  align-items:end;
}

.form-settings-row-bg .form-background-gradient-controls{
  grid-template-columns:repeat(3,minmax(120px,1fr));
  align-items:end;
}

.form-appearance-layout > .form-editor-checkline{
  margin-top:0;
}

/* As the editor gets narrower, controls move to the next row instead of shrinking too far. */
@media(max-width:1180px){
  .form-settings-row-border{
    grid-template-columns:1fr 1fr;
  }
  .form-shadow-field{
    grid-column:1/-1;
  }

  .form-settings-row-bg{
    grid-template-columns:1fr;
  }

  .form-background-mode{
    max-width:320px;
  }
}

@media(max-width:860px){
  .form-settings-row-main{
    grid-template-columns:1fr 1fr;
  }

  .form-settings-row-main .builder-field:last-child{
    grid-column:1/-1;
  }

  .form-settings-row-border{
    grid-template-columns:1fr 1fr;
  }

  .form-settings-row-bg .form-background-gradient-controls{
    grid-template-columns:1fr 1fr;
  }

  .form-settings-row-bg .form-background-gradient-controls .builder-field:last-child{
    grid-column:1/-1;
  }
}

@media(max-width:620px){
  .form-settings-row-main,
  .form-settings-row-border{
    grid-template-columns:1fr;
  }

  .form-settings-row-main .builder-field:last-child,
  .form-shadow-field{
    grid-column:auto;
  }

  .form-settings-row-bg .form-background-gradient-controls{
    grid-template-columns:1fr;
  }

  .form-settings-row-bg .form-background-gradient-controls .builder-field:last-child{
    grid-column:auto;
  }
}


/* =========================================================
   Form shadow on separate row — 0.1.188
   ========================================================= */

.form-settings-row-border{
  grid-template-columns:repeat(2,minmax(180px,1fr));
}

.form-settings-row-shadow{
  grid-template-columns:1fr;
}

.form-settings-row-shadow .form-shadow-field{
  max-width:100%;
}

.form-settings-row-shadow .form-segmented{
  width:100%;
  max-width:640px;
}

@media(max-width:1180px){
  .form-settings-row-border{
    grid-template-columns:1fr 1fr;
  }

  .form-shadow-field{
    grid-column:auto;
  }
}

@media(max-width:620px){
  .form-settings-row-border{
    grid-template-columns:1fr;
  }

  .form-settings-row-shadow .form-segmented{
    max-width:none;
  }
}


/* =========================================================
   Background row: no vertical shift on Color/Gradient switch — 0.1.189
   ========================================================= */

/* The background row must stay pinned to the top.
   Gradient controls may become taller, but they expand only downward. */
.form-settings-row-bg{
  align-items:start !important;
}

.form-settings-row-bg > .builder-field,
.form-settings-row-bg > .form-background-color-controls,
.form-settings-row-bg > .form-background-gradient-controls{
  align-self:start !important;
}

.form-settings-row-bg .form-background-color-controls,
.form-settings-row-bg .form-background-gradient-controls{
  align-items:start !important;
}

/* Keep label/control baselines stable in both modes. */
.form-background-mode-field,
.form-background-color-controls .builder-field,
.form-background-gradient-controls .builder-field{
  min-height:68px;
}

.form-background-mode-field{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.form-background-mode-field .form-background-mode{
  margin-top:0;
}


/* =========================================================
   Appearance accordion checkboxes: standard SendFactory style — 0.1.190
   ========================================================= */

/* Use the same native-accent checkbox treatment as the rest of SendFactory. */
.form-element-switch-only{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.form-element-switch-only input{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  accent-color:#1677ff;
  cursor:pointer;
}

.form-element-switch-only input:checked{
  background:transparent !important;
  border:0 !important;
}

.form-element-switch-only input:checked::after{
  content:none !important;
  display:none !important;
}

/* "Поля формы" and "Кнопка" remain permanently active,
   but visually follow the same checkbox family in disabled state. */
.form-fixed-element-mark{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-right:10px;
  border:1px solid #b9c8d8;
  border-radius:4px;
  background:#edf3f9;
  position:relative;
  box-sizing:border-box;
}

.form-fixed-element-mark::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #8ca2ba;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

html[data-theme="dark"] .form-element-switch-only input{
  accent-color:#1677ff;
}

html[data-theme="dark"] .form-fixed-element-mark{
  background:#1a2739;
  border-color:#3a4b64;
}


/* =========================================================
   My forms cards refinement + direct code modal — 0.1.191
   ========================================================= */

#myFormsGrid .form-card{
  display:flex;
  flex-direction:column;
}

.form-card-title{
  padding:5px 4px 11px;
  color:#17233d;
  font-size:16px;
  line-height:1.28;
  font-weight:800;
  overflow-wrap:anywhere;
}

#myFormsGrid .form-preview{
  width:100%;
  box-sizing:border-box;
  flex:0 0 auto;
}

#myFormsGrid .form-card-meta{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 3px 7px;
}

.form-card-date{
  display:block;
  margin:0 !important;
  color:#718198;
  font-size:11px;
  line-height:28px;
  white-space:nowrap;
}

#myFormsGrid .form-card-side{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:7px;
}

#myFormsGrid .form-card-actions{
  margin-top:auto;
}

.form-card-menu button[data-form-copy]{
  color:#314158;
}

#formsCodeModal{
  z-index:20000;
}

#formsCodeModal[hidden]{
  display:none !important;
}

#formsCodeToast.sf-toast{
  z-index:21050 !important;
}

html[data-theme="dark"] .form-card-title{
  color:#e5edf8;
}

@media(max-width:760px){
  .form-card-title{
    min-height:0 !important;
  }
  #myFormsGrid .form-preview{
    height:auto !important;
    min-height:205px !important;
  }
}


/* =========================================================
   Templates cards layout refinement — 0.1.192
   ========================================================= */

#templatesGrid .template-card{
  display:flex;
  flex-direction:column;
}

#templatesGrid .template-card-name{
  padding:5px 4px 11px;
  color:#17233d;
  font-size:16px;
  line-height:1.28;
  font-weight:800;
  overflow-wrap:anywhere;
}

#templatesGrid .form-preview{
  width:100%;
  box-sizing:border-box;
  flex:0 0 auto;
}

html[data-theme="dark"] #templatesGrid .template-card-name{
  color:#e5edf8;
}

@media(max-width:760px){
  #templatesGrid .template-card-name{
    min-height:0 !important;
  }

  #templatesGrid .form-preview{
    height:auto !important;
    min-height:205px !important;
  }
}


/* =========================================================
   t1 Classic: single border like t3 Minimal — 0.1.195
   ========================================================= */

/* Old classic preview styling added a second inner "card".
   Remove it so t1 has only the main form border, exactly like t3. */
#templatesGrid .form-preview-classic .form-preview-inner{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* =========================================================
   Separate placeholder alignment support — 0.1.196
   ========================================================= */

.form-live-input::placeholder{
  text-align:var(--field-mask-align, left);
}


/* =========================================================
   Custom delete confirmation modal — 0.1.199
   ========================================================= */

.forms-delete-modal-backdrop{
  z-index:20500 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.52);
}

.forms-delete-modal-backdrop[hidden]{
  display:none !important;
}

.forms-delete-modal{
  position:relative;
  width:min(430px,calc(100vw - 40px));
  padding:28px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e1e8f1;
  box-shadow:0 26px 80px rgba(15,23,42,.24);
  text-align:center;
}

.forms-delete-icon{
  width:48px;
  height:48px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff1f2;
  color:#dc2626;
  font-size:24px;
  font-weight:800;
}

.forms-delete-modal h2{
  margin:0;
  color:#17233d;
  font-size:22px;
}

.forms-delete-modal p{
  margin:10px auto 22px;
  max-width:340px;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

.forms-delete-actions{
  display:flex;
  justify-content:center;
  gap:10px;
}

.forms-delete-actions .btn{
  min-width:120px;
}

.forms-delete-actions .btn-danger{
  background:#dc2626;
  color:#fff;
  border:1px solid #dc2626;
}

.forms-delete-actions .btn-danger:hover{
  background:#b91c1c;
  border-color:#b91c1c;
}

html[data-theme="dark"] .forms-delete-modal{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] .forms-delete-modal h2{
  color:#e7edf7;
}

html[data-theme="dark"] .forms-delete-modal p{
  color:#9fb0c5;
}

html[data-theme="dark"] .forms-delete-icon{
  background:#3a1820;
  color:#ff7b86;
}

@media(max-width:480px){
  .forms-delete-actions{
    flex-direction:column-reverse;
  }
  .forms-delete-actions .btn{
    width:100%;
  }
}


/* =========================================================
   Delete modal visibility/cascade fix — 0.1.200
   There are two old generations of .sf-modal / .sf-modal-backdrop
   rules in the project. They turn the backdrop transparent and
   reinterpret .sf-modal as a fullscreen overlay. Scope this dialog
   explicitly so it behaves like the already-fixed unsaved modal.
   ========================================================= */

#formsDeleteModal.sf-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:20500 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  place-items:initial !important;
  padding:20px !important;
  background:rgba(15,23,42,.52) !important;
  backdrop-filter:blur(2px);
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#formsDeleteModal.sf-modal-backdrop[hidden]{
  display:none !important;
}

#formsDeleteModal > .forms-delete-modal.sf-modal{
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  display:block !important;
  place-items:initial !important;
  width:min(430px,calc(100vw - 40px)) !important;
  max-width:430px !important;
  height:auto !important;
  max-height:calc(100vh - 40px) !important;
  margin:0 !important;
  padding:28px !important;
  overflow:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  background:#fff !important;
  border:1px solid #e1e8f1 !important;
  border-radius:18px !important;
  box-shadow:0 26px 80px rgba(15,23,42,.24) !important;
  text-align:center !important;
}

#formsDeleteModal .sf-modal-x{
  position:absolute !important;
  right:16px !important;
  top:12px !important;
  z-index:2 !important;
}

html[data-theme="dark"] #formsDeleteModal > .forms-delete-modal.sf-modal{
  background:#101827 !important;
  border-color:#2a3951 !important;
}


/* =========================================================
   Delete modal fully isolated from legacy modal classes — 0.1.201
   ========================================================= */

#formsDeleteModal.forms-delete-overlay{
  position:fixed;
  inset:0;
  z-index:20500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(2px);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  box-sizing:border-box;
}

#formsDeleteModal.forms-delete-overlay[hidden]{
  display:none !important;
}

#formsDeleteModal .forms-delete-dialog{
  position:relative;
  width:min(430px,calc(100vw - 40px));
  height:auto;
  max-height:calc(100vh - 40px);
  margin:0;
  padding:28px;
  overflow:auto;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e1e8f1;
  border-radius:18px;
  box-shadow:0 26px 80px rgba(15,23,42,.24);
  text-align:center;
}

#formsDeleteModal .forms-delete-close{
  position:absolute;
  right:16px;
  top:12px;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#63758e;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

#formsDeleteModal .forms-delete-close:hover{
  background:#f2f5f9;
}

#formsDeleteModal .forms-delete-icon{
  width:48px;
  height:48px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff1f2;
  color:#dc2626;
  font-size:24px;
  font-weight:800;
}

#formsDeleteModal .forms-delete-dialog h2{
  margin:0;
  color:#17233d;
  font-size:22px;
}

#formsDeleteModal .forms-delete-dialog p{
  margin:10px auto 22px;
  max-width:340px;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

#formsDeleteModal .forms-delete-actions{
  display:flex;
  justify-content:center;
  gap:10px;
}

#formsDeleteModal .forms-delete-actions .btn{
  min-width:120px;
}

#formsDeleteModal .forms-delete-actions .btn-danger{
  background:#dc2626;
  color:#fff;
  border:1px solid #dc2626;
}

#formsDeleteModal .forms-delete-actions .btn-danger:hover{
  background:#b91c1c;
  border-color:#b91c1c;
}

html[data-theme="dark"] #formsDeleteModal .forms-delete-dialog{
  background:#101827;
  border-color:#2a3951;
}

html[data-theme="dark"] #formsDeleteModal .forms-delete-dialog h2{
  color:#e7edf7;
}

html[data-theme="dark"] #formsDeleteModal .forms-delete-dialog p{
  color:#9fb0c5;
}

html[data-theme="dark"] #formsDeleteModal .forms-delete-close{
  color:#9fb0c5;
}

html[data-theme="dark"] #formsDeleteModal .forms-delete-close:hover{
  background:#18243a;
}

html[data-theme="dark"] #formsDeleteModal .forms-delete-icon{
  background:#3a1820;
  color:#ff7b86;
}

@media(max-width:480px){
  #formsDeleteModal .forms-delete-actions{
    flex-direction:column-reverse;
  }

  #formsDeleteModal .forms-delete-actions .btn{
    width:100%;
  }
}