:root{
  --ink:#15171c; --muted:#6b7280; --line:#e6e8ec; --paper:#ffffff; --bg:#f5f6f8;
  --accent:#1f4fd8; --accent-ink:#1739a8; --accent-soft:#eef2ff;
  --ok:#15803d; --ok-bg:#eaf6ee; --err:#c0392b; --err-bg:#fbeceb;
  --warn:#8a6d1a; --warn-bg:#fff8e6; --field:#fcfcfd; --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
#app{display:flex; min-height:100vh}

/* ── Sidebar ── */
.sidebar{
  width:236px; flex:none; background:var(--paper); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px}
.brand-mark{
  width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;
}
.brand-name{font-weight:700;font-size:16px;letter-spacing:-.01em}
#nav{display:flex; flex-direction:column; gap:2px}
#nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  color:var(--ink); font-size:14px; font-weight:500; transition:.12s;
}
#nav a .ico{width:18px; text-align:center; color:var(--muted); font-size:14px}
#nav a:hover{background:var(--bg)}
#nav a.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
#nav a.active .ico{color:var(--accent)}
.sidebar-foot{margin-top:auto; padding:12px 8px 0; border-top:1px solid var(--line)}
.classic-link{font-size:12.5px; color:var(--muted)}
.classic-link:hover{color:var(--accent)}

/* ── Main ── */
.main{flex:1; min-width:0; padding:34px 40px 80px; max-width:1180px}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.page-head h1{font-size:23px; font-weight:700; letter-spacing:-.015em; margin:0}
.page-head .sub{color:var(--muted); font-size:13.5px; margin:3px 0 0}
.head-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ── Buttons ── */
button,.btn{
  font:inherit; font-size:14px; font-weight:600; border-radius:9px; border:1px solid transparent;
  padding:9px 15px; cursor:pointer; transition:.12s; display:inline-flex; align-items:center; gap:7px;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-primary:disabled{opacity:.5; cursor:not-allowed}
.btn-ghost{background:var(--paper); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:var(--bg)}
.btn-danger{background:var(--paper); border-color:#f0c9c4; color:var(--err)}
.btn-danger:hover{background:var(--err-bg)}
.btn-sm{padding:6px 11px; font-size:13px}
.btn-icon{padding:6px 9px; font-size:13px; background:transparent; border-color:transparent; color:var(--muted)}
.btn-icon:hover{background:var(--bg); color:var(--ink)}

/* ── Cards / tables ── */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card + .card{margin-top:16px}
.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.search{
  flex:1; min-width:200px; max-width:360px; padding:9px 13px; border:1px solid var(--line);
  border-radius:9px; background:var(--field); font-size:14px;
}
.search:focus{outline:2px solid var(--accent); border-color:transparent}
select.filter{padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:var(--field); font-size:14px}

table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:650; padding:0 14px 10px; border-bottom:1px solid var(--line);
}
tbody td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfc}
.cell-main{font-weight:600}
.cell-sub{color:var(--muted); font-size:12.5px}
.row-actions{display:flex; gap:4px; justify-content:flex-end}

.pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.pill-accent{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
.pill-ok{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.pill-warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.pill-err{background:var(--err-bg); color:var(--err); border-color:transparent}
.pills{display:flex; gap:5px; flex-wrap:wrap}

.empty{text-align:center; color:var(--muted); padding:48px 20px}
.empty .big{font-size:40px; opacity:.35; margin-bottom:8px}
.muted{color:var(--muted)}
.spinner{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:40px; text-align:center; color:var(--muted)}

/* ── Stat cards ── */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:8px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.stat .n{font-size:30px; font-weight:750; letter-spacing:-.02em}
.stat .l{color:var(--muted); font-size:13px; margin-top:2px}

/* ── Forms ── */
label{display:block; font-size:13px; font-weight:600; margin:0 0 6px}
.hint{font-size:12px; color:var(--muted); font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--field); color:var(--ink); font-size:14px; font-family:inherit;
}
textarea{resize:vertical; min-height:90px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.field{margin-bottom:15px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.checkline{display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; margin-bottom:7px; cursor:pointer; background:var(--field)}
.checkline:hover{background:var(--bg)}
.checkline input{width:auto}
.checkline .cl-name{font-weight:600; font-size:13.5px}
.checkline .cl-count{margin-left:auto; color:var(--muted); font-size:12.5px}

/* ── Modal ── */
.modal-overlay{position:fixed; inset:0; background:rgba(20,23,28,.44); display:grid; place-items:center; z-index:50; padding:24px}
.modal{background:var(--paper); border-radius:16px; width:100%; max-width:560px; max-height:88vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal.lg{max-width:820px}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper)}
.modal-head h3{margin:0; font-size:17px; font-weight:700}
.modal-body{padding:22px 24px}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--paper)}
.x{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;padding:2px 6px;line-height:1}

/* ── Toast ── */
#toast-root{position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:80}
.toast{background:var(--ink); color:#fff; padding:11px 16px; border-radius:10px; font-size:13.5px; box-shadow:0 8px 24px rgba(0,0,0,.2); animation:tin .18s ease}
.toast.ok{background:#14532d} .toast.err{background:#7f1d1d}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}

/* ── Wizard ── */
.steps{display:flex; gap:6px; margin-bottom:22px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--muted)}
.step .num{width:20px;height:20px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:11px}
.step.active{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.step.active .num{background:var(--accent); color:#fff}
.step.done{color:var(--ok)}
.step.done .num{background:var(--ok); color:#fff}
.wizard-foot{display:flex; justify-content:space-between; margin-top:20px; gap:10px}

.audience-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.audience-col h4{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
.audience-col.include h4{color:var(--ok)}
.audience-col.exclude h4{color:var(--err)}
.audience-summary{background:var(--accent-soft); border-radius:12px; padding:18px 20px; margin-top:18px}
.audience-summary .big{font-size:32px; font-weight:750; color:var(--accent-ink); letter-spacing:-.02em}
.audience-summary .brk{display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--muted)}

.editor-tools{display:flex; gap:8px; align-items:center; margin-bottom:8px; position:relative}
.token-menu{position:absolute; top:100%; left:0; margin-top:6px; background:var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.14); padding:6px; z-index:20; max-height:280px; overflow:auto; min-width:230px}
.token-menu .grp{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px}
.token-menu button{display:block; width:100%; text-align:left; background:none; border:none; padding:7px 10px; border-radius:7px; font-size:13.5px; font-weight:500}
.token-menu button:hover{background:var(--accent-soft); color:var(--accent-ink)}
.token-menu code{font-size:11.5px; color:var(--muted)}

.review-grid{display:grid; grid-template-columns:150px 1fr; gap:10px 16px; font-size:14px}
.review-grid .k{color:var(--muted); font-weight:600}
.preview-frame{width:100%; height:460px; border:1px solid var(--line); border-radius:10px; background:#fff}

.kv{display:grid; grid-template-columns:180px 1fr; gap:9px 16px; font-size:14px}
.kv .k{color:var(--muted); font-weight:600}
.notice{font-size:13px; padding:11px 14px; border-radius:10px; margin:12px 0}
.notice.warn{background:var(--warn-bg); border:1px solid #f2e2b3; color:var(--warn)}
.notice.info{background:var(--accent-soft); color:var(--accent-ink)}
.notice.ok{background:var(--ok-bg); color:var(--ok)}

@media (max-width:820px){
  .sidebar{width:64px; padding:16px 8px}
  .brand-name,#nav a span:not(.ico),.classic-link{display:none}
  #nav a{justify-content:center}
  .main{padding:22px 18px 60px}
  .field-row,.audience-cols,.review-grid{grid-template-columns:1fr}
}