.ms { --ms-blue:#2254cf; --ms-ink:#172334; --ms-muted:#58677c; --ms-line:#dce2eb; color:var(--ms-ink); max-width:1480px; margin:auto; }
.ms-header,.ms-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.ms-header h1 { margin:0 0 6px; }.ms-header p { margin:0; color:var(--ms-muted); }.ms-header>.btn { flex-shrink:0; }
.ms-tabs { display:flex; gap:6px; overflow-x:auto; border-bottom:1px solid var(--ms-line); margin:0 0 24px; }
.ms-tabs a { white-space:nowrap; color:var(--ms-muted); padding:13px 18px; font-weight:650; text-decoration:none; border-bottom:3px solid transparent; }
.ms-tabs a[aria-current] { color:var(--ms-blue); border-color:var(--ms-blue); background:#eff4ff; }
.ms .f { min-width:0; }.ms input,.ms select,.ms textarea { max-width:100%; }.ms .f small { color:var(--ms-muted); font-weight:400; }
.ms .f>input:not([type=checkbox]) { display:block; width:100%; min-height:40px; padding:9px 12px; border:1px solid #c7d1df; border-radius:8px; background:#fff; color:var(--ms-ink); font:inherit; }
.ms .f>input:focus { border-color:var(--ms-blue); outline:2px solid #dce6ff; outline-offset:1px; }
.ms-toolbar,.ms-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:18px; }
.ms-toolbar>.f,.ms-filters>.f { flex:1 1 145px; margin:0; }.ms-toolbar>.f:first-of-type,.ms-filters>.f:first-of-type { flex:2 1 200px; }
.ms-toolbar>.btn { margin-bottom:1px; }.ms h2 { font-size:1.4rem; margin:0 0 16px; }.ms h3 { font-size:1.1rem; }
.ms-panel,.ms-editor,.ms-preview { background:#fff; border:1px solid var(--ms-line); border-radius:12px; padding:22px; margin-bottom:22px; }
.ms-editor-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.ms-editor>.f,.ms-editor>.cols2 { margin-bottom:16px; }.ms-editor .cols2 { gap:14px; }.ms-editor .cols2>.f { margin:0; }
.ms-preview { position:sticky; top:20px; background:#eaf0f8; }.ms-preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ms-preview-toolbar h2 { font-size:1rem; margin:0; }.ms-preview-toolbar .btn[aria-pressed=true] { color:white; background:var(--ms-blue); }
.ms-preview iframe { display:block; border:0; background:#fff; width:100%; max-width:100%; height:650px; margin:0 auto 14px; border-radius:8px; }
.ms-preview iframe.ms-phone { width:360px; }.ms-preview-subject { font-size:.85rem; overflow-wrap:anywhere; }.ms-history-preview { width:100%; height:650px; border:1px solid var(--ms-line); margin-top:16px; background:#fff; }
.ms-hint { font-size:.8rem; color:var(--ms-muted); }.ms-actions,.ms-template-actions,.ms-selection { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ms-actions form,.ms-inline { display:inline-block; margin:0; }.ms-selection { margin-bottom:10px; }.ms-selection>b { margin-inline-start:auto; font-size:.85rem; }
.ms-save-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--ms-line); padding:20px 0; }.ms-save-bar>span { color:var(--ms-muted); font-size:.85rem; }
.ms-template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); gap:20px; }.ms-template { background:#fff; border:1px solid var(--ms-line); border-radius:12px; padding:22px; display:flex; flex-direction:column; border-top:4px solid #ffd23f; }
.ms-template h3 { margin:18px 0 10px; }.ms-template>b { font-size:.9rem; }.ms-template>p { color:var(--ms-muted); font-size:.86rem; line-height:1.6; flex:1; }.ms-template-top { display:flex; justify-content:space-between; gap:10px; font-size:.75rem; }.ms-language { font-weight:650; }.ms-template-actions .btn { font-size:.78rem; }
.ms-table-scroll { width:100%; overflow-x:auto; border:1px solid var(--ms-line); border-radius:10px; background:#fff; }.ms-audience-scroll { max-height:510px; overflow-y:auto; }.ms .ms-table { margin:0; width:100%; border-collapse:collapse; font-size:.86rem; }.ms .ms-table th { background:#f2f5fa; color:#4c5d73; white-space:nowrap; font-weight:600; position:sticky; top:0; z-index:1; }.ms .ms-table th,.ms .ms-table td { padding:13px 16px; text-align:start; vertical-align:middle; border-bottom:1px solid #e8ecf2; }.ms .ms-table td { min-width:95px; }.ms .ms-table td:first-child { min-width:60px; }.ms .ms-table small { display:block; color:var(--ms-muted); margin-top:4px; overflow-wrap:anywhere; }.ms .ms-table tr:last-child td { border-bottom:0; }.ms .ms-table tr:hover td { background:#f8faff; }.ms .ms-table input[type=checkbox] { width:20px; height:20px; accent-color:var(--ms-blue); cursor:pointer; }.ms-title-link { font-weight:650; }
.ms-badge { display:inline-flex; border-radius:5px; padding:4px 8px; font-size:.73rem; font-weight:600; white-space:nowrap; background:#edf0f5; color:#4a596c; }.ms-sent,.ms-completed { background:#e5f4eb; color:#20673e; }.ms-failed { background:#fce9e9; color:#9f2424; }.ms-sending { background:#fff2d5; color:#80530c; }.ms-running,.ms-queued { background:#eaf0ff; color:#2854aa; }
.ms-metrics { display:flex; flex-wrap:wrap; gap:0; background:#fff; border:1px solid var(--ms-line); border-radius:12px; margin-bottom:22px; }.ms-metrics>div { flex:1 1 140px; padding:20px; }.ms-metrics b { display:block; font-size:1.8rem; line-height:1.2; font-variant-numeric:tabular-nums; }.ms-metrics span { display:block; font-size:.8rem; color:var(--ms-muted); margin-top:7px; }
.ms-run-status { font-weight:600; margin:14px 0 0; }.ms-error { color:#a52a2a!important; }.ms-empty,.ms-welcome { padding:38px 24px; text-align:center; background:#fff; border-radius:12px; border:1px dashed var(--ms-line); }.ms-welcome p { color:var(--ms-muted); max-width:640px; margin:0 auto 22px; line-height:1.6; }.ms-pagination { display:flex; align-items:center; justify-content:center; gap:16px; padding:22px 0; }
.ms details>summary { cursor:pointer; font-weight:600; }.ms details[open]>summary { margin-bottom:14px; }.ms-attempt { border-top:1px solid var(--ms-line); padding:16px 0; }.ms-text { white-space:pre-wrap; overflow-wrap:anywhere; background:#f4f6f9; padding:16px; }.ms-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.ms [hidden] { display:none!important; }.ms a:focus-visible,.ms button:focus-visible,.ms summary:focus-visible { outline:3px solid #608cee; outline-offset:3px; }
@media(max-width:1050px) { .ms-editor-grid { grid-template-columns:1fr; }.ms-preview { position:static; }.ms-preview iframe { height:570px; } }
@media(max-width:600px) { .ms-header,.ms-section-heading { align-items:flex-start; flex-direction:column; gap:12px; }.ms-header h1 { font-size:1.65rem; }.ms-tabs a { padding:12px; }.ms-panel,.ms-editor,.ms-preview { padding:16px; }.ms .cols2 { grid-template-columns:1fr; }.ms-save-bar { flex-direction:column; align-items:stretch; }.ms-selection>b { width:100%; margin:0; }.ms .ms-table th,.ms .ms-table td { padding:11px; }.ms-metrics>div { flex-basis:45%; padding:15px; }.ms-template-grid { gap:14px; } }

/* 📲 перемикач значків застосунку в редакторі */
.ms-check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .8rem; font-size: .9rem; cursor: pointer; }
.ms-check input { width: 1.1rem; height: 1.1rem; }

/* ✨ Що нового → розсилка */
.ms-news-aud { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0; }
.ms-news-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin-top: 1rem; }
.ms-news { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.05rem; background: #fff; color: var(--ms-ink); border: 2px solid #15161c; border-radius: 12px; box-shadow: 3px 3px 0 #15161c; }
.ms-news.is-sent { box-shadow: 3px 3px 0 #1a7f37; }
.ms-news-top { display: flex; align-items: center; gap: .5rem; }
.ms-news-ic { font-size: 1.5rem; }
.ms-news-open { margin-left: auto; font-size: .82rem; font-weight: 700; }
.ms-news ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.45; flex: 1; }
.ms-news li { margin-bottom: .3rem; }
.ms-news-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.ms-news-tags span { padding: .05rem .55rem; border: 1.5px solid #15161c; border-radius: 99px; background: #fff3c4; font-size: .78rem; font-weight: 800; }
.ms-news-camps { display: grid; gap: .3rem; padding: .5rem; background: #f4f7fc; border-radius: 8px; }
.ms-news-camps a { display: flex; align-items: center; gap: .45rem; font-size: .84rem; text-decoration: none; color: var(--ms-ink); }
.ms-news form { margin: 0; }
/* 🙏 Тестувальники */
.ms-testers tr.is-top td { background: rgba(255, 210, 63, .2); }
.ms-testers tr.is-off td { opacity: .55; }
.ms-testers .ms-rank { white-space: nowrap; font-weight: 800; }
.ms-tag { display: inline-block; margin: 0 .2rem .15rem 0; padding: .05rem .45rem; border: 1px solid currentColor; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; opacity: .85; }
.ms-thanks-prev { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: .8rem; }
.ms-thanks-prev figure { margin: 0; }
.ms-thanks-prev figcaption { font-size: .85rem; margin-bottom: .35rem; }
.ms-mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; line-height: 1.6; }
/* 🌙 темна тема адмінки: панелі й таблиці беруть кольори з admin_ui (--paper, --text …), листи в iframe лишаються світлими */
:root[data-theme="dark"] .ms { --ms-ink: var(--text); --ms-muted: var(--muted); --ms-line: var(--line); --ms-blue: var(--blue); }
:root[data-theme="dark"] .ms-panel, :root[data-theme="dark"] .ms-editor, :root[data-theme="dark"] .ms-template, :root[data-theme="dark"] .ms-table-scroll,
:root[data-theme="dark"] .ms-metrics, :root[data-theme="dark"] .ms-empty, :root[data-theme="dark"] .ms-welcome, :root[data-theme="dark"] .ms-news { background: var(--paper); color: var(--text); }
:root[data-theme="dark"] .ms-preview { background: var(--soft); }
:root[data-theme="dark"] .ms-tabs a[aria-current] { background: var(--soft); }
:root[data-theme="dark"] .ms .ms-table th { background: var(--soft); color: var(--muted); }
:root[data-theme="dark"] .ms .ms-table th, :root[data-theme="dark"] .ms .ms-table td { border-bottom-color: var(--line); }
:root[data-theme="dark"] .ms-text { background: var(--soft); }
:root[data-theme="dark"] .ms .f>input:not([type=checkbox]), :root[data-theme="dark"] .ms select, :root[data-theme="dark"] .ms textarea { background: var(--board); color: var(--text); border-color: var(--edge); }
:root[data-theme="dark"] .ms-error { color: var(--err-fg)!important; }
:root[data-theme="dark"] .ms-badge { background: var(--soft); color: var(--muted); }
:root[data-theme="dark"] .ms-sent, :root[data-theme="dark"] .ms-completed { background: var(--ok-bg); color: var(--ok-fg); }
:root[data-theme="dark"] .ms-failed { background: var(--err-bg); color: var(--err-fg); }
:root[data-theme="dark"] .ms-sending { background: var(--warn-bg); color: var(--warn-fg); }
:root[data-theme="dark"] .ms-running, :root[data-theme="dark"] .ms-queued { background: var(--info-bg); color: var(--info-fg); }
:root[data-theme="dark"] .ms-testers tr.is-top td { background: rgba(255, 210, 63, .1); }
:root[data-theme="dark"] .ms-news-camps { background: var(--soft); }
:root[data-theme="dark"] .ms-news-tags span { color: #141414; }
/* 🖼 Фото в листі */
.ms-photo-now { margin: 0 0 1rem; }
.ms-photo-now img { display: block; max-width: min(100%, 540px); max-height: 360px; object-fit: contain; border: 3px solid #141414; border-radius: 12px; background: #fff; }
.ms-photo-now figcaption { font-size: .85rem; color: var(--ms-muted); margin-top: .35rem; }
.ms-photo-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-bottom: 12px; }
/* 🖼 Вставка скриншота */
.ms-photo-field { border: 1px solid var(--ms-line); border-radius: 12px; padding: 12px 16px 4px; margin: 16px 0; }
.ms-photo-field legend { font-weight: 700; padding: 0 6px; }
.ms-photo-box .ms-photo-now { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ms-drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 18px 14px; border: 2px dashed var(--ms-line); border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.ms-drop:hover, .ms-drop:focus-visible, .ms-drop.is-over { border-color: var(--ms-blue); background: rgba(34, 84, 207, .06); outline: none; }
.ms-drop.is-busy { opacity: .6; pointer-events: none; }
.ms-drop b { font-size: 1rem; }
.ms-drop span, .ms-drop small { color: var(--ms-muted); font-size: .85rem; }
.ms-drop-pick { color: var(--ms-blue); font-weight: 700; text-decoration: underline; cursor: pointer; }
.ms-drop-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ms-photo-status { min-height: 1.2em; margin: 6px 0 10px; font-size: .88rem; font-weight: 600; }
/* 📭 Відмови */
.ms-bnc-grid { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ms-purge { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ms-line); }
.ms-confirm { margin: 0; max-width: 260px; }
.ms-table td small { display: block; color: var(--ms-muted); }