:root {
  --green: #1f4d3a; --green-2: #2b6a4f; --green-soft: #e4efe8;
  --gold: #c9a227; --gold-soft: #f6ecc9;
  --cream: #f6f1e7; --paper: #fffdf8; --ink: #1d2a23; --muted: #6b7a72; --line: #e2ddd0; --line-2: #ccc6b8;
  --sel: #f2a900; --ok: #4c9a6a; --warn: #e0a52a; --bad: #d0483e; --info: #2b8a9e;
  --shadow: 0 6px 24px rgba(30, 40, 35, .14);
  --radius: 10px;
  --panel-w: 400px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--cream); color: var(--ink); font-size: 14px; line-height: 1.4; overflow: hidden; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; margin: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
kbd { font-family: inherit; background: #fff; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.topbar { height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 24px; padding: 0 18px; background: var(--green); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.crest { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: var(--green); font-family: Georgia, serif; font-weight: 700; display: grid; place-items: center; font-size: 16px; letter-spacing: -.5px; }
.brand-name { font-family: Georgia, serif; font-size: 17px; line-height: 1.1; }
.brand-sub { font-size: 12px; opacity: .8; letter-spacing: .4px; text-transform: uppercase; }
.tabs { display: flex; gap: 4px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 999px; }
.tab { border: 0; background: transparent; color: rgba(255,255,255,.85); padding: 7px 18px; border-radius: 999px; font-weight: 600; }
.tab.active { background: #fff; color: var(--green); }
.tab-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--green); font-size: 11px; margin-left: 4px; }
.tab.active .tab-count { background: var(--green); color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.demo-badge { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; background: var(--gold); color: var(--green); padding: 4px 10px; border-radius: 999px; font-weight: 700; cursor: help; }

/* ---------- buttons ---------- */
.btn { border: 1px solid var(--line-2); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.btn:hover { border-color: var(--green-2); color: var(--green-2); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--green); }
.btn-primary:hover { background: #d9b23a; color: var(--green); border-color: #d9b23a; }
.btn-link { border: 0; background: none; color: var(--green-2); padding: 4px 6px; text-decoration: underline; font-weight: 600; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: var(--cream); color: var(--ink); }

/* ---------- views ---------- */
main { flex: 1; position: relative; min-height: 0; }
.view { position: absolute; inset: 0; }

/* ---------- map ---------- */
#map { position: absolute; top: 0; bottom: 0; left: 0; right: var(--panel-w); background: #eef0e9; font-family: inherit; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); }
.map-toolbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 10px; z-index: 700; flex-wrap: wrap; max-width: calc(100% - var(--panel-w) - 24px); }
.tool-group { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 10px; padding: 4px; box-shadow: var(--shadow); }
.tool { border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font-weight: 600; color: var(--ink); }
.tool:hover { background: var(--cream); }
.tool.active { background: var(--green); color: #fff; }
.tool-select { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 6px 8px; max-width: 200px; }
.tool-label { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.search-group { position: relative; }
#map-search { border: 0; padding: 7px 12px; width: 240px; border-radius: 7px; outline: none; }
.search-results { position: absolute; top: 44px; left: 0; width: 320px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; max-height: 360px; overflow-y: auto; }
.search-results div { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.search-results div:hover { background: var(--green-soft); }
.search-results small { display: block; color: var(--muted); }
.legend { position: absolute; left: 12px; bottom: 24px; z-index: 700; background: rgba(255,255,255,.94); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 12px; min-width: 170px; }
.legend h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.legend-row .sw { width: 14px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); }
.legend-row .n { margin-left: auto; color: var(--muted); }
.lasso-hint { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 700; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); }
#lasso-layer { position: absolute; inset: 0; z-index: 650; cursor: crosshair; touch-action: none; }
#lasso-layer svg { width: 100%; height: 100%; }
#lasso-layer path { fill: rgba(242,169,0,.18); stroke: #b87a00; stroke-width: 2; stroke-dasharray: 6 4; }
.street-label { background: transparent; border: 0; box-shadow: none; pointer-events: none; }
.street-label span { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 600; color: #4b5a50; letter-spacing: .3px; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; transform-origin: center; }
.poi-label { background: transparent; border: 0; box-shadow: none; pointer-events: none; }
.poi-label span { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 700; color: #4a3a7a; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 0 3px #fff, 0 0 4px #fff; transform: translate(-50%, -50%); }
.gate-icon { background: transparent; border: 0; }
.gate-icon span { display: inline-block; white-space: nowrap; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--bad); color: var(--bad); font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 6px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.gate-icon.main span { background: var(--bad); color: #fff; }
.house-tip { font-size: 12px; }
.house-tip b { display: block; font-size: 13px; }

/* ---------- side panel ---------- */
.panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel-w); background: var(--paper); border-left: 1px solid var(--line); overflow-y: auto; z-index: 10; }
.panel-inner { padding: 18px; }
.panel h2 { font-size: 20px; }
.panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 0 8px; font-family: inherit; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-family: Georgia, serif; color: var(--green); }
.stat span { font-size: 12px; color: var(--muted); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 13px; }
.quick button:hover { border-color: var(--green-2); color: var(--green-2); }
.hint { font-size: 13px; color: var(--muted); }
.hint li { margin: 4px 0; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
.pill.ok { background: #e6f3ea; color: #23643c; border-color: #bfe0ca; }
.pill.warn { background: #fbf0d5; color: #7a5300; border-color: #efd699; }
.pill.bad { background: #fbe3e0; color: #8b2018; border-color: #f0b8b2; }
.pill.gold { background: var(--gold-soft); color: #6d5200; border-color: #e8d48a; }
.pill.green { background: var(--green-soft); color: var(--green); border-color: #bcd6c6; }
.pill.info { background: #e1f1f4; color: #145e6b; border-color: #b6dbe2; }
.pill.muted { color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hh-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.hh-address { font-size: 20px; font-family: Georgia, serif; line-height: 1.15; }
.hh-name { color: var(--muted); margin-top: 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin-top: 8px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.people { display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: 0 0 34px; }
.avatar.F { background: #b5568c; } .avatar.M { background: #3b6fa8; } .avatar.child { opacity: .75; }
.person-main { flex: 1; min-width: 0; }
.person-name { font-weight: 700; }
.person-name small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.person-contact { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.person-contact .sep { margin: 0 5px; opacity: .5; }
.reach { display: inline-flex; gap: 4px; margin-top: 4px; }
.reach span { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--cream); color: var(--muted); }
.reach span.on { background: #e6f3ea; color: #23643c; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag { font-size: 11px; background: var(--gold-soft); color: #6d5200; padding: 1px 7px; border-radius: 4px; font-weight: 600; }
.tag.role { background: #e9e3f5; color: #4a3a7a; }
.panel-actions { display: flex; gap: 8px; margin-top: 14px; }
.panel-actions .btn { flex: 1; text-align: center; }
.sel-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sel-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.sel-item:last-child { border-bottom: 0; }
.sel-item:hover { background: var(--green-soft); }
.sel-item .nm { color: var(--muted); flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-item .x { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 0 4px; }
.sel-item .x:hover { color: var(--bad); }
.history { display: flex; flex-direction: column; gap: 6px; }
.hist { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.hist b { display: block; font-size: 13px; }
.hist .meta { color: var(--muted); }

/* ---------- contacts view ---------- */
#view-contacts { display: flex; }
.filters { width: 320px; flex: 0 0 320px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; padding: 16px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; }
.filters h2 { font-size: 18px; }
.presets { margin: 12px 0 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.presets-label { width: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.presets button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.presets button:hover { border-color: var(--green-2); color: var(--green-2); }
.presets button.active { background: var(--green); color: #fff; border-color: var(--green); }
.filter-block { border-top: 1px solid var(--line); padding: 12px 0; }
.filter-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.filter-block input[type=search], .filter-block input[type=number], .filter-block select { border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 8px; background: #fff; }
.filter-block input[type=search] { width: 100%; }
.filter-block input[type=number] { width: 64px; }
.filter-block select { max-width: 100%; }
.filter-block .full { width: 100%; margin-top: 6px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.row.indent { margin-left: 22px; }
.seg { display: inline-flex; background: var(--cream); border-radius: 8px; padding: 3px; margin: 4px 0; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.seg button.active { background: #fff; color: var(--green); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg.small button { padding: 3px 8px; font-size: 12px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px 3px 6px; font-size: 12px; background: #fff; cursor: pointer; }
.chip:has(input:checked) { background: var(--green); color: #fff; border-color: var(--green); }
.chip input { margin: 0; }
.street-list { max-height: 150px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; margin-top: 6px; padding: 4px 0; }
.street-list label { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.street-list label:hover { background: var(--green-soft); }
.street-list label span { color: var(--muted); margin-left: auto; }
.contacts-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.contacts-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--paper); border-bottom: 1px solid var(--line); gap: 12px; }
.contacts-count { font-family: Georgia, serif; font-size: 22px; color: var(--green); }
.contacts-sub { font-size: 13px; color: var(--muted); }
.contacts-actions { display: flex; gap: 8px; }
.table-wrap { flex: 1; overflow: auto; }
table.contacts { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
table.contacts th { position: sticky; top: 0; background: var(--cream); text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-bottom: 1px solid var(--line-2); white-space: nowrap; z-index: 1; }
table.contacts th[data-sort] { cursor: pointer; }
table.contacts th[data-sort]:hover { color: var(--green); }
table.contacts th.sorted::after { content: " ▲"; font-size: 9px; }
table.contacts th.sorted.desc::after { content: " ▼"; }
table.contacts td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.contacts tr:hover td { background: #fbf8f0; }
table.contacts tr.checked td { background: var(--gold-soft); }
table.contacts .chk-col { width: 32px; }
table.contacts .name { font-weight: 600; }
table.contacts .name small { color: var(--muted); font-weight: 400; margin-left: 4px; }
table.contacts .muted { color: var(--muted); }
table.contacts .mini { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--green-soft); color: var(--green); margin-right: 3px; }
table.contacts .tag { margin-right: 3px; }
.reach-cell span { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--cream); color: var(--muted); margin-right: 3px; }
.reach-cell span.on { background: #e6f3ea; color: #23643c; }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- messages view ---------- */
.messages-main { position: absolute; inset: 0; overflow-y: auto; padding: 0 0 40px; }
.messages-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.messages-head h2 { font-size: 22px; }
.stat-row { display: flex; gap: 10px; padding: 16px 24px 0; }
.stat-row .stat { flex: 1; }
.messages-list { padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.msg { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.msg-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.msg-head .subject { font-weight: 700; font-size: 15px; }
.msg-head .when { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.msg .aud { color: var(--muted); font-size: 13px; margin-top: 2px; }
.msg .body { margin-top: 8px; white-space: pre-wrap; font-size: 13px; }
.msg .counts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.msg .counts .btn { margin-left: auto; }
.msg .recips { margin-top: 8px; font-size: 12px; color: var(--muted); max-height: 140px; overflow-y: auto; border-top: 1px dashed var(--line); padding-top: 6px; }
.chan { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; }
.chan.SMS { background: #e1f1f4; color: #145e6b; } .chan.Email { background: #ede8f8; color: #4a3a7a; } .chan.Both { background: var(--gold-soft); color: #6d5200; }
.chan.session { background: var(--green); color: #fff; }
.chan.live { background: var(--bad); color: #fff; }

/* ---------- modal / composer ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 30, 25, .5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--paper); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); width: min(1080px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.modal.small { width: 460px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.modal-head h2 { font-size: 20px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--line); background: #fff; }
.foot-actions { display: flex; gap: 8px; }
.demo-note { font-size: 12px; color: var(--muted); }
.composer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.field { margin-bottom: 14px; }
.field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.field input.full, .field select.full, .field textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: #fff; }
.field textarea { resize: vertical; line-height: 1.45; }
.audience-box { background: var(--green-soft); border: 1px solid #bcd6c6; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.audience-box b { display: block; font-size: 15px; color: var(--green); }
.reach-summary { font-size: 13px; color: var(--muted); margin-top: 4px; }
.reach-summary b { color: var(--ink); }
.merge-fields { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; display: flex; gap: 4px; align-items: center; }
.merge-fields button { border: 1px solid var(--line-2); background: #fff; border-radius: 4px; font-size: 11px; padding: 1px 6px; }
.char-count { font-size: 12px; color: var(--muted); margin-top: 4px; text-align: right; }
.char-count.over { color: var(--bad); }
.inline-select { border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; max-width: 200px; }
.phone-preview { background: #1d2a23; border-radius: 22px; padding: 18px 14px; color: #fff; min-height: 220px; }
.phone-preview .pv-from { font-size: 11px; opacity: .6; text-align: center; margin-bottom: 10px; }
.phone-preview .bubble { background: #2f4a3d; border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; line-height: 1.4; max-width: 92%; }
.phone-preview .bubble.email { background: #fff; color: var(--ink); border-radius: 8px; max-width: 100%; }
.phone-preview .bubble.email .subj { font-weight: 700; border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 4px; }
.recipient-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; }
.recipient-list div { display: flex; gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--line); align-items: center; }
.recipient-list div:last-child { border-bottom: 0; }
.recipient-list .addr { color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipient-list .chan { font-size: 10px; }
.recipient-list div.unreach { opacity: .5; }
.progress { height: 8px; background: var(--cream); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--green-2); width: 0; transition: width .2s; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); z-index: 2000; font-weight: 600; max-width: 560px; text-align: center; }
.toast.ok { background: var(--green); }

@media (max-width: 1100px) {
  :root { --panel-w: 340px; }
  .composer-grid { grid-template-columns: 1fr; }
}

/* ---------- groups ---------- */
#view-groups { display: flex; }
.groups-list { width: 340px; flex: 0 0 340px; background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px; min-height: 0; }
.groups-list h2 { font-size: 18px; }
.groups-list input[type=search] { width: 100%; border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 8px; background: #fff; margin-bottom: 8px; }
.group-items { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-height: 0; }
.group-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.group-item:last-child { border-bottom: 0; }
.group-item:hover { background: #fbf8f0; }
.group-item.active { background: var(--green-soft); }
.group-item .dot, .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; display: inline-block; }
.gi-main { min-width: 0; }
.gi-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-sub { font-size: 12px; color: var(--muted); }
.groups-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; gap: 8px; }
.group-main { flex: 1; overflow-y: auto; padding: 22px 28px 40px; min-width: 0; }
.group-head { display: flex; gap: 14px; align-items: flex-start; }
.group-head .dot { width: 18px; height: 18px; margin-top: 10px; flex: 0 0 18px; cursor: pointer; }
.group-title-wrap { flex: 1; min-width: 0; }
.group-name-input { font-family: Georgia, serif; font-size: 26px; font-weight: 600; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 2px 6px; width: 100%; color: var(--ink); }
.group-name-input:hover, .group-desc-input:hover { border-color: var(--line-2); background: #fff; }
.group-name-input:focus, .group-desc-input:focus { border-color: var(--green-2); background: #fff; outline: none; }
.group-desc-input { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 2px 6px; width: 100%; color: var(--muted); font-size: 14px; }
.group-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 0 6px; }
.group-stats { display: flex; gap: 10px; margin: 16px 0; }
.group-stats .stat { flex: 1; }
.group-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rule-box { background: var(--green-soft); border: 1px solid #bcd6c6; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }
.rule-box b { color: var(--green); }
.add-members { position: relative; margin-bottom: 14px; }
.add-members input { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: #fff; }
.add-members .search-results { top: 40px; width: 420px; z-index: 5; }
.members-table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.members-table th { text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--cream); border-bottom: 1px solid var(--line-2); }
.members-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.members-table tr:last-child td { border-bottom: 0; }
.members-table .x { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 0 6px; cursor: pointer; }
.members-table .x:hover { color: var(--bad); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches span { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.swatches span.active { border-color: var(--ink); }
.color-pop { position: absolute; background: #fff; border-radius: 10px; box-shadow: var(--shadow); padding: 10px; z-index: 5; }
.btn-select { border: 1px solid var(--line-2); background: #fff; color: var(--ink); padding: 8px 10px; border-radius: 8px; font-weight: 600; }
.rule-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--gold-soft); border-bottom: 1px solid #e8d48a; padding: 8px 20px; font-size: 13px; }
.rule-actions { display: flex; gap: 6px; }
.group-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 4px 11px 4px 7px; font-size: 13px; cursor: pointer; }
.group-chip:hover { border-color: var(--green-2); color: var(--green-2); }
.group-chip .n { color: var(--muted); }
.tag.grp { background: #e6f0fb; color: #23507a; }
.sel-tools { display: flex; gap: 8px; margin-top: 8px; }
.sel-tools select, .sel-tools .btn { flex: 1; }

/* ---------- settings ---------- */
.settings-main { position: absolute; inset: 0; overflow-y: auto; padding: 0 0 60px; }
.settings-wrap { max-width: 980px; margin: 0 auto; padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.settings-wrap h2 { font-size: 24px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.card-head h3 { font-size: 16px; font-family: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.card-head .pill { margin-left: auto; }
.card-sub { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.form-grid .span2 { grid-column: 1 / -1; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.form-grid input, .form-grid select, .form-grid textarea { border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: #fff; font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-grid textarea { font-family: Consolas, Menlo, monospace; font-size: 12px; min-height: 70px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--green-2); }
.form-help { font-size: 12px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.card-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.card-foot .spacer { flex: 1; }
.card-foot .inline { display: flex; align-items: center; gap: 6px; }
.card-foot input { border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; background: #fff; min-width: 220px; }
.note { font-size: 13px; background: var(--gold-soft); border: 1px solid #e8d48a; border-radius: 8px; padding: 8px 12px; color: #6d5200; }
.note.info { background: #e1f1f4; border-color: #b6dbe2; color: #145e6b; }
.note.bad { background: #fbe3e0; border-color: #f0b8b2; color: #8b2018; }
.mode-options { display: flex; gap: 10px; }
.mode-option { flex: 1; border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.mode-option:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.mode-option input { margin-top: 3px; }
.mode-option b { display: block; }
.mode-option span { font-size: 12px; color: var(--muted); }
.activity { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.activity div { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; background: var(--cream); }
.activity .ok { color: #23643c; font-weight: 700; } .activity .fail { color: var(--bad); font-weight: 700; }
.activity .when { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.activity .err { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.btn-admin { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; padding: 7px 12px; border-radius: 8px; font-weight: 600; }
.btn-admin:hover { background: rgba(255,255,255,.12); }
.btn-admin.on { border-color: var(--gold); color: var(--gold); }
.delivery-note { font-size: 12px; color: var(--muted); }
.delivery-note b.live { color: var(--bad); }
.result-list { max-height: 200px; overflow-y: auto; font-size: 12px; margin-top: 8px; }
.result-list div { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.result-list .fail { color: var(--bad); }