:root {
  --bg: #1a1a2e;
  --surface: #20203a;
  --surface-alt: #27273d;
  --line: #34344f;
  --line-soft: #2b2b45;
  --text: #e6e6f2;
  --text-mute: #b8b8d0;
  --text-faint: #7a7a98;
  --accent: #a78bfa;
  --accent-hov: #b9a4fb;
  --accent-soft: rgba(167,139,250,0.16);
  --accent-line: rgba(167,139,250,0.55);
  --accent-ink: #1a1a2e;
  --danger: #f87171;
  --sent: #4ade80;  --sent-soft: rgba(74,222,128,0.14);  --sent-line: rgba(74,222,128,0.32);
  --draft: #fbbf24; --draft-soft: rgba(251,191,36,0.16);
  --craft: #a78bfa;
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
a { color: inherit; }

#app { max-width: 440px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.empty { padding: 48px 16px; text-align: center; color: var(--text-faint); font-size: 13px; line-height: 1.6; }

/* Sign-in */
.signin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; }
.signin .pin { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; }
.signin h1 { font-size: 19px; font-weight: 700; margin: 0; }
.signin p { color: var(--text-mute); margin: 0; max-width: 280px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13.5px; padding: 11px 18px; cursor: pointer; }
.btn-primary:active { transform: scale(.97); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 10; flex: none; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.hdr-row { display: flex; align-items: center; gap: 9px; min-height: 34px; }
.pin { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.brand { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; flex: 1; }
.icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; color: var(--text-mute); }
.icon-btn:hover { background: var(--surface); color: var(--text); }
/* Client tier pill (Prelim / W-60 / Touring) */
.cstatus { display: inline-flex; align-items: center; gap: 3px; flex: none; white-space: nowrap; padding: 1.5px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.cstatus.prelim { color: var(--draft); background: var(--draft-soft); border: 1px solid rgba(251,191,36,0.4); }
.cstatus.w60 { color: var(--craft); background: rgba(167,139,250,0.16); border: 1px solid rgba(167,139,250,0.5); }
.cstatus.tour { color: var(--sent); background: var(--sent-soft); border: 1px solid var(--sent-line); }
.cstatus.new { color: var(--text); background: var(--surface-alt); border: 1px solid var(--line); }
/* Touring view: the property's tour date/time on its row */
.tour-sched { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--sent); }
.tour-sched.none { color: var(--text-faint); font-weight: 600; }
a.tour-sched.link { text-decoration: none; padding: 1px 4px; margin-left: -4px; border-radius: 5px; }
a.tour-sched.link:hover { background: var(--sent-soft); }
.tier-wrap { position: relative; display: inline-flex; }
button.cstatus.tier-pill { cursor: pointer; font-family: var(--font); }
button.tier-pill svg { transform: rotate(90deg); }
.tier-drop { position: absolute; top: calc(100% + 5px); left: 0; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 9px; padding: 4px; z-index: 40; box-shadow: 0 8px 22px rgba(0,0,0,.5); white-space: nowrap; }
.tier-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 7px; cursor: pointer; }
.tier-opt:hover { background: var(--surface); }
.tier-opt.on { color: var(--craft); }
.tour-time::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.home-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.home-tab { flex: 1; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--text-faint); font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .12s, color .12s; }
.home-tab:hover { color: var(--text); }
.home-tab.on { background: var(--accent); color: var(--accent-ink); }
.search-row { display: flex; align-items: center; gap: 7px; }
.add-sq { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: background .12s; }
.add-sq:hover { background: var(--accent-hov); }
.pill { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 36px; padding: 0 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.pill:focus-within { border-color: var(--accent-line); }
.pill input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-family: var(--font); font-size: 13px; color: var(--text); }
.pill svg { color: var(--text-faint); flex: none; }

/* Client list */
.client-row { display: flex; align-items: center; gap: 11px; padding: 15px 13px; cursor: pointer; }
.client-row + .client-row { border-top: 1px solid var(--line-soft); }
.client-row:hover, .client-row:active { background: var(--surface); }
.avatar { border-radius: 10px; color: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.avatar.lg { width: 36px; height: 36px; font-size: 13px; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11.5px; }
.row-main { min-width: 0; flex: 1; }
.row-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.updated { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }
.chev { color: var(--text-faint); flex: none; }

/* Client detail header */
.client-head { min-width: 0; flex: 1; }
.client-head .row-name { font-weight: 700; letter-spacing: -0.2px; }
.prop-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.row-marks { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.bmark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.bmark.craft { color: var(--craft); }
.bmark.craft:hover { background: var(--accent-soft); }
.bmark.crm:hover { background: var(--surface-alt); }

/* Property rows */
.prop-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 13px; }
.prop-row + .prop-row { border-top: 1px solid var(--line-soft); }
.prop-row:hover { background: var(--surface); }
.prop-row[data-act="view-prop-notes"] { cursor: pointer; }
.prop-tag { flex: none; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-mute); background: var(--surface-alt); border: 1px solid var(--line); padding: 2px 7px; border-radius: 999px; }
.prop-row.selected { background: var(--accent-soft); }
.rail { position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: transparent; }
.prop-row.selected .rail { background: var(--accent); }
.prop-name { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.prop-row.selected .prop-name { color: var(--accent-hov); }
.prop-line2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.prop-email { flex: 1; min-width: 0; font-size: 12px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.prop-email:hover { color: var(--accent); text-decoration: underline; }
/* Guest-card email pill: yellow = sent, green = replied, red crossed = bounced */
.bmark.mail-sent { color: var(--draft); }
.bmark.mail-sent:hover { background: var(--draft-soft); }
.bmark.mail-replied { color: var(--sent); }
.bmark.mail-replied:hover { background: var(--sent-soft); }
.bmark.mail-bounced { color: var(--danger); position: relative; }
.bmark.mail-bounced:hover { background: rgba(248,113,113,0.16); }
.bmark.mail-bounced:not(.lbl)::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: var(--danger); transform: rotate(-45deg); border-radius: 1px; }
.bmark.sent { color: var(--sent); }
.bmark.sent:hover { background: var(--sent-soft); }
.bmark.draft { color: var(--draft); }
.bmark.draft:hover { background: var(--draft-soft); }
.grab-arrow { display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: none; height: 28px; padding: 0 5px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--text-faint); }
.grab-arrow:hover { background: var(--surface-alt); color: var(--text); }
.grab-count { font-size: 11px; font-weight: 700; color: var(--accent); }

/* Toolbar */
.toolbar { position: sticky; bottom: 0; flex: none; border-top: 1px solid var(--line); background: var(--bg); padding: 9px 11px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; }
.count-chip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 52px; border-radius: 10px; background: var(--surface); color: var(--text-mute); }
.count-chip.has-sel { background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.count-chip.del { background: var(--danger); color: var(--accent-ink); cursor: pointer; }
.count-chip .num { font-size: 16px; font-weight: 800; line-height: 1; }
.count-chip .lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.3px; margin-top: 2px; }
.tool-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; border: 0; border-radius: 10px; cursor: pointer; }
.tool-btn .lbl { font-size: 10px; font-weight: 700; line-height: 1.1; text-align: center; }
.tool-btn:disabled { background: var(--surface) !important; color: var(--text-faint) !important; cursor: default; opacity: .55; }
.tool-btn.craft { background: rgba(167,139,250,0.08); color: var(--craft); }
.tool-btn.sent  { background: rgba(74,222,128,0.08);  color: var(--sent); }
.tool-btn.del   { background: rgba(248,113,113,0.08); color: var(--danger); }
.tool-btn.map   { background: rgba(167,139,250,0.08); color: var(--accent); }

/* Grab cards */
.tk-body { margin-top: 10px; font-size: 12px; color: var(--text-mute); white-space: pre-wrap; word-break: break-word; }
.icon-btn { position: relative; }
.tk-note { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); font-style: italic; padding: 10px; border: 1px dashed var(--line-soft); border-radius: 8px; background: var(--surface-alt); }

/* Add-property pill + dropdown */
.addprop { position: relative; padding: 10px 12px 2px; }
.addprop-menu { position: absolute; left: 12px; right: 12px; top: calc(100% - 0px); z-index: 50; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 28px rgba(0,0,0,.4); padding: 5px; max-height: 260px; overflow-y: auto; }
.addprop-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.addprop-item:hover { background: var(--surface); }
.addprop-item .nm { font-size: 13px; font-weight: 600; color: var(--text); }
.addprop-item .em { font-size: 11.5px; color: var(--text-mute); }
.addprop-empty { padding: 12px 10px; color: var(--text-faint); font-size: 12px; }

/* Settings */
.sect { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); padding: 16px 14px 8px; display: flex; align-items: center; }
.sfield { padding: 8px 14px; }
.sfield label { display: block; font-size: 11.5px; color: var(--text-faint); margin-bottom: 6px; }
.select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-family: var(--font); font-size: 13.5px; padding: 10px 11px; outline: none; }
.select:focus { border-color: var(--accent-line); }
.srow-sub { font-size: 12px; color: var(--text-mute); padding: 0 14px 4px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--surface-alt); border: 1px solid var(--line); color: var(--text); font-size: 12.5px; padding: 9px 14px; border-radius: 10px; z-index: 100; opacity: 0; transition: opacity .18s; pointer-events: none; max-width: 88%; text-align: center; }
.toast.show { opacity: 1; }
.toast.ok { border-color: var(--sent-line); }
.toast.err { border-color: rgba(248,113,113,0.5); }

/* ── pwa-2.0 parity additions ── */
@keyframes spin { to { transform: rotate(360deg); } }
.tool-btn.busy svg { animation: spin .7s linear infinite; }
.input { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-family: var(--font); font-size: 13.5px; padding: 10px 11px; outline: none; }
.input:focus { border-color: var(--accent-line); }
textarea.input { resize: vertical; line-height: 1.5; }
.linkish { border: 0; background: transparent; padding: 0; color: var(--accent); font-family: inherit; font-size: inherit; font-weight: 600; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* Hover edit pencils (client rows + property rows) */
.edit-btn { width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex: none; opacity: 0; transition: opacity .12s, background .12s; }
.client-row:hover .edit-btn, .prop-row:hover .edit-btn, .prop-row.selected .edit-btn { opacity: 1; }
.edit-btn:hover { background: var(--accent-soft); color: var(--accent); }
/* {property} wildcard highlight: a transparent text mirror sits over the field,
   painting only the tokens (metrics must match .input exactly). */
.hl-wrap { position: relative; }
.hl-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; color: transparent; font-family: var(--font); font-size: 13.5px; border: 1px solid transparent; border-radius: 9px; box-sizing: border-box; }
.hl-line { padding: 10px 11px; white-space: pre; }
.hl-area { padding: 10px 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.hl-marks mark.wc { background: var(--accent-soft); outline: 1px solid var(--accent-line); border-radius: 4px; color: transparent; pointer-events: auto; cursor: help; }

/* ── Compose (guest cards) ── */
/* recipient chips: property name + remove x; hovering shows the email via title */
.cmp-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); cursor: default; }
.cmp-chip .chip-x { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; margin: 0; color: var(--text-faint); cursor: pointer; }
.cmp-chip .chip-x:hover { color: var(--danger); }
.cmp-attach { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; background: var(--surface); border: 1px dashed var(--line); border-radius: 9px; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--text-mute); cursor: pointer; transition: border-color .12s, color .12s; }
.cmp-attach:hover { border-color: var(--accent); color: var(--text); }

/* ── Property search (Properties tab) ── */
.ps-filter-btn { flex: none; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text-mute); font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ps-filter-btn.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.ps-count { padding: 10px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: var(--text-faint); }
.ps-terms { margin-top: 3px; font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-comm { flex: none; font-size: 12.5px; font-weight: 800; letter-spacing: -0.2px; color: var(--accent); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-footer { flex: none; padding: 11px 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.ps-map { flex: 1; min-height: 0; background: #15152a;  position: relative; z-index: 0; }
.ps-map .leaflet-container { background: #15152a; }
.ps-footer .btn-primary { width: 100%; justify-content: center; }
.ps-note { display: flex; align-items: center; gap: 6px; background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.ps-taggroups { max-height: 240px; overflow-y: auto; }
.tag-opt.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.ps-rail { display: none; }
.ps-rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.ps-results { min-width: 0; }
@media (min-width: 900px) {
  html.ps-wide #app { max-width: none; }
  html.ps-wide .ps-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 18px 20px 56px; }
  html.ps-wide .ps-rail { display: block; position: sticky; top: 0; height: calc(100vh - 96px); max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 4px; padding-bottom: 12px; box-sizing: border-box; }
  html.ps-wide .ps-filter-btn { display: none; }
  html.ps-wide .ps-row { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 13px 16px; margin-bottom: 12px; }
  html.ps-wide .ps-row + .ps-row { border-top: 1px solid var(--line); }
  html.ps-wide .ps-row:hover { background: var(--surface-alt); border-color: var(--accent-line); }
  html.ps-wide .ps-row { min-height: 64px; box-sizing: border-box; }
  html.ps-wide .ps-rail::-webkit-scrollbar { width: 8px; height: 8px; }
  html.ps-wide .ps-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  html.ps-wide .ps-rail::-webkit-scrollbar-track { background: transparent; }
  html.ps-wide .ps-rail { scrollbar-color: var(--line) transparent; }
}

@media (pointer: coarse) { .edit-btn { opacity: 1; } } /* touch devices have no hover */

/* Unmatched property name (not in the market's property list) */
.prop-name.unmatched, .prop-row.selected .prop-name.unmatched { color: var(--danger); }

/* Drag-to-reorder feedback */
.prop-row.dragging { opacity: .45; }
.prop-row.drag-over-top { box-shadow: inset 0 2px 0 var(--accent); }
.prop-row.drag-over-bottom { box-shadow: inset 0 -2px 0 var(--accent); }

/* Grab rows */
.bmark.copy { color: var(--text-mute); }
.bmark.copy:hover { background: var(--surface-alt); color: var(--text); }
.grab-detail { padding: 4px 14px 14px 17px; border-bottom: 1px solid var(--line-soft); }
.grab-detail .tk-note { margin: 8px 0; }

/* Modals */
#modal-host { position: relative; z-index: 200; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 20, 0.55); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 3000; }
.modal { width: 100%; max-width: 380px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-title { font-size: 14.5px; font-weight: 700; }
.modal-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; }
.modal-x:hover { background: var(--surface); color: var(--text); }
.modal-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.modal-input { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-family: var(--font); font-size: 13.5px; padding: 10px 11px; outline: none; }
.modal-input:focus { border-color: var(--accent-line); }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal-actions .cancel { border: 1px solid var(--line); background: transparent; color: var(--text-mute); border-radius: 9px; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 13px; cursor: pointer; }
.modal-actions .cancel:hover { background: var(--surface); color: var(--text); }
.modal-actions .create { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 9px; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 10px 14px; cursor: pointer; }
.modal-actions .create:disabled { background: var(--surface); color: var(--text-faint); cursor: default; }
.danger-btn { color: var(--danger) !important; border-color: rgba(248,113,113,0.4) !important; }

/* Onboarding */
.ob-select { width: 240px; }
.ob-hint { color: var(--text-faint); font-size: 12px; margin: 0; }

/* ── pwa-2.2: Craft wizard + settings cards + grab images ── */
.tut-media { display: block; width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--line-soft); margin-bottom: 12px; }
.tut-media-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 120px; box-sizing: border-box; padding: 12px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface); color: var(--text-faint); font-size: 11.5px; text-align: center; margin-bottom: 12px; }
.tut-count { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.tut-body { font-size: 13px; line-height: 1.45; color: var(--text); }
.tut-body b { font-weight: 700; }
.tut-nav .cancel:disabled { opacity: .45; cursor: default; }
.set-msg { color: var(--danger); font-size: 11.5px; margin: 0; padding: 6px 0 0; min-height: 1em; }
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.modal-label { font-size: 11px; font-weight: 700; color: var(--text-mute); margin: 10px 0 3px; }
.pick-note { font-size: 11px; color: var(--text-faint); margin-bottom: 5px; line-height: 1.4; }
.fb-space { display: flex; align-items: center; gap: 8px; margin: -4px 0 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.fb-space-cur { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.fb-space-cur svg { color: var(--accent); }
.fb-space .linkish { margin-left: auto; }
.fb-crumbs { font-size: 11px; color: var(--text-mute); margin: -4px 0 10px; word-break: break-word; }
.fb-list { max-height: 260px; overflow-y: auto; margin-bottom: 12px; }
.fb-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 8px 9px; cursor: pointer; font-family: var(--font); }
.fb-item:hover { background: var(--surface); }
.fb-item .fb-ico { display: flex; color: var(--text-mute); flex: none; }
.fb-item .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-item .fb-arrow { display: flex; color: var(--text-faint); flex: none; }
.fb-create { display: flex; gap: 8px; align-items: center; }
.fb-create .modal-input { flex: 1; }
.fb-create .create { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; }
.pickrow { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; cursor: pointer; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-family: var(--font); font-size: 12.5px; }
.pickrow:hover { background: var(--surface-alt); border-color: var(--accent-line); }
.pickrow .pickico { display: flex; color: var(--text-mute); flex: none; }
.pickrow .pickval { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.pickrow .picknote { color: var(--accent); font-weight: 600; font-size: 11px; flex: none; }
.pickrow .pickchev { display: flex; color: var(--text-faint); flex: none; }
.mkt-card { display: flex; align-items: center; gap: 10px; margin: 2px 14px 6px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 11px; }
.mkt-ic { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.mkt-text { min-width: 0; flex: 1; }
.mkt-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-dot { display: flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 1px; color: var(--text-mute); }
.mkt-dot.on { color: var(--sent); }
.mkt-dot.err { color: var(--danger); }
.mkt-dot i { display: none; width: 6px; height: 6px; border-radius: 3px; }
.mkt-dot.on i { display: block; background: var(--sent); }
.mkt-dot.err i { display: block; background: var(--danger); }
.connect-btn { flex: none; border: 1px solid var(--line); background: var(--surface-alt); color: var(--text); font-family: var(--font); font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.connect-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.restricted-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 0; border: 0; background: none; color: var(--danger); font-family: var(--font); font-size: 10px; font-weight: 700; cursor: pointer; }
.restricted-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
.restricted-badge:hover { text-decoration: underline; }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; border: 0; cursor: pointer; padding: 0; background: var(--line); transition: background .15s; flex: none; }
.toggle.on { background: var(--accent); }
.toggle:disabled { opacity: .45; cursor: not-allowed; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.toggle.on .knob { left: 18px; }
.req-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--danger); background: var(--danger-soft, rgba(248,113,113,.12)); border: 1px solid rgba(248,113,113,.35); vertical-align: 1px; }
.grab-img { margin: 4px 0 8px; }
.grab-img img { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--line-soft); }

/* ── pwa-2.6: settings pane mirrors the extension ── */
.sect .sp { flex: 1; }
.sect.btn { width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); text-align: left; }
.sect.btn.disabled { opacity: .4; cursor: not-allowed; }
.srow { display: flex; align-items: center; gap: 12px; padding: 9px 14px; }
.srow-main { min-width: 0; flex: 1; }
.srow-title { font-size: 13px; font-weight: 600; color: var(--text); }
.srow .srow-sub, .saction .srow-sub { padding: 0; }
.divider { height: 1px; background: var(--line-soft); margin: 6px 14px; }
.saction { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 9px 14px; text-align: left; color: var(--text); font-family: var(--font); transition: background .12s; }
.saction:hover { background: var(--surface); }
.saction:disabled { opacity: .4; cursor: default; }
.saction:disabled:hover { background: transparent; }
.saction .chip { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; flex: none; color: var(--text-mute); }
.saction .ref { color: var(--text-faint); flex: none; }
.select-wrap { position: relative; flex: none; }
.select-wrap .chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; color: var(--text-faint); }
.help-q { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin-left: 5.5px; border-radius: 50%; background: var(--surface-alt); color: var(--text-faint); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; transition: color .12s, background .12s; }
.help-q:hover { color: var(--accent); background: var(--surface); }

/* ── pwa-2.7: dropdown matches the extension's select ── */
.select { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; height: 32px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); background-image: none; outline: none; cursor: pointer; text-align: left; text-align-last: left; }
.select:focus { background: var(--surface-alt); border-color: var(--accent-line); }
.ob-select .select-wrap { width: 100%; }

/* ── pwa-2.12: compact skin for the extension popup (html.embed) ──
   Restores the classic popup's density; standalone web + phone keep the roomier
   touch-friendly spacing. Values match v1.x popup.css exactly. */
html.embed .hdr { padding: 10px 10px 9px; gap: 9px; }
html.embed .hdr-row { gap: 8px; }
html.embed .brand { font-size: 14px; }
html.embed .search-row { gap: 6px; }
html.embed .pill { height: 32px; padding: 0 10px; gap: 7px; border-radius: 9px; }
html.embed .pill input { font-size: 12.5px; }
html.embed .add-sq { width: 32px; height: 32px; border-radius: 9px; }
html.embed .client-row { gap: 10px; padding: 14px 12px; }
html.embed .row-name { font-size: 13.5px; }
html.embed .avatar.lg { width: 34px; height: 34px; font-size: 12.5px; }
html.embed .prop-row { gap: 9px; padding: 10px 12px 10px 13px; }
html.embed .prop-name { font-size: 13.5px; }
html.embed .updated { font-size: 11px; }
html.embed .toolbar { padding: 8px 10px 9px; gap: 7px; }
html.embed .tool-btn { height: 50px; }
html.embed .tool-btn .lbl { font-size: 9.5px; letter-spacing: .1px; }
html.embed .count-chip { width: 46px; height: 50px; }
html.embed .count-chip .num { font-size: 15px; }
html.embed .sect { padding: 15px 14px 8px; }
html.embed .sfield { padding: 0 14px; margin-bottom: 11px; }
html.embed .sfield label { font-size: 11px; font-weight: 600; color: var(--text-mute); margin-bottom: 5px; }
html.embed .empty { padding: 40px 16px; line-height: 1.5; }
/* Notes screen wasn't part of the original compact skin: the fee sheet / site map
   file boxes and section heads render at full web size, so they look extra tall in
   the popup. Tighten them to match the rest of the embed. */
html.embed .ns-head { padding: 13px 14px 6px; }
html.embed .ns-head.first { padding-top: 12px; }
html.embed .ns-file { padding: 8px 12px; }
html.embed .ns-file-name { font-size: 12.5px; line-height: 1.2; }
html.embed .ns-file-meta { line-height: 1.2; margin-top: 2px; }
html.embed .ns-collapse { padding: 9px 12px; }
html.embed .ns-fblock { padding: 9px 12px; }

/* ── Property Notes (communal) ── */
.prop-name.link { cursor: pointer; }
.prop-name.link:not(.unmatched):hover { color: var(--accent-hov); }
.shared-pill { flex: none; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.ns-intro { padding: 14px 14px 2px; font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }
.ns-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 14px 7px; }
.ns-head.first { padding-top: 14px; }
.ns-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }
.ns-upd { font-size: 10px; font-weight: 600; color: var(--text-faint); }
.ns-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--draft); }
/* "From OSS" lock on a detail field: same lock glyph + colour as the "Coming soon"
   lock, shown inline in the field label; the value below renders read-only. */
.ns-fblock label.ns-oss-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ns-oss { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; color: var(--draft); text-transform: none; }
.ns-osval { min-height: 38px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-alt); color: var(--text-mute); font-size: 13px; word-break: break-word; }
.ns-body { padding: 0 13px; }
.ns-help { padding: 0 14px 6px; font-size: 11px; color: var(--text-faint); }
.ns-card { margin: 0 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ns-card.locked { opacity: .5; pointer-events: none; padding: 11px 12px; }
.ns-fblock { padding: 11px 12px; }
.ns-fblock + .ns-fblock, .ns-col-body .ns-fblock + .ns-fblock { border-top: 1px solid var(--line-soft); }
.ns-fblock label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.ns-collapse { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 11px 12px; text-align: left; color: var(--text); font-family: var(--font); transition: background .12s; }
.ns-collapse:hover { background: var(--surface-alt); }
.ns-collapse svg { color: var(--text-faint); flex: none; }
.ns-col-main { flex: 1; min-width: 0; }
.ns-col-title { font-size: 13px; font-weight: 600; }
.ns-col-sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.ns-col-body { border-top: 1px solid var(--line-soft); }
.ns-torow { display: flex; align-items: center; gap: 10px; }
.ns-file { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; text-align: left; border: 0; background: transparent; font-family: var(--font); cursor: default; }
.ns-file.empty { cursor: pointer; }
.ns-file.empty:hover { background: var(--surface-alt); }
.ns-file-ic { display: flex; color: var(--accent); flex: none; }
.ns-file-main { flex: 1; min-width: 0; }
.ns-file-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ns-file-meta { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.ns-file .connect-btn { flex: none; }
.ns-tilerow { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ns-tile { position: relative; flex: none; width: 112px; height: 112px; border-radius: 7px; background: var(--surface-alt); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-faint); }
.ns-tile.add { border-style: dashed; }
.ns-unit { position: absolute; top: 6px; left: 6px; background: rgba(10,10,20,.7); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px; }
.ns-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--accent); }
.ns-group-name { font-size: 13px; font-weight: 600; color: var(--text); }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chips.clip { max-height: 60px; overflow: hidden; }
.tag-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 11.5px; font-weight: 700; padding: 3px 4px 3px 10px; border-radius: 999px; }
.tag-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; border-radius: 999px; background: transparent; color: var(--accent); cursor: pointer; padding: 0; }
.tag-x:hover { background: var(--accent-line); color: var(--accent-ink); }
.tag-ctrls { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tag-add { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--line); background: transparent; color: var(--text-mute); font-family: var(--font); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.tag-add:hover { border-color: var(--accent-line); color: var(--accent); }
.tag-menu { margin-top: 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.tag-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tag-menu .pill { margin-bottom: 8px; }
.tag-groups { max-height: 232px; overflow-y: auto; }
.tag-group-head { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); margin: 12px 2px 6px; }
.tag-group-head:first-child { margin-top: 2px; }
.tag-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-opts + .tag-group-head { margin-top: 12px; }
.tag-opt { border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.tag-opt:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.ns-empty-note { font-size: 11.5px; color: var(--text-faint); padding: 4px 2px; }
.ns-empty-note.faint { margin-top: 6px; opacity: .8; }
.notes-status { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 26px 13px 22px; font-size: 11.5px; color: var(--text-mute); }
.notes-status .ns-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--sent); }
.notes-status.saving .ns-dot { background: var(--draft); }
.notes-status.err { color: var(--danger); }
.notes-status.err .ns-dot { background: var(--danger); }

/* Stop iOS auto-zooming into a field on focus: it only zooms when the control's
   text is < 16px. Touch devices only, so the compact desktop popup keeps its size. */
@media (pointer: coarse) {
  .input, .input.mono, textarea, textarea.input, .select, .pill input, .modal-input, input[type="number"], input[type="text"], input[type="password"] { font-size: 16px; }
}

.ps-vtx { background: #4ade80; border: 2px solid #10101a; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.ps-vtx.first { background: #fff; }

/* Clients-page development notice */
.dev-banner { display: flex; align-items: center; gap: 10px; margin: 10px 14px 2px; padding: 9px 12px; border: 1px solid rgba(250, 204, 21, 0.35); background: rgba(250, 204, 21, 0.08); border-radius: 10px; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }
.dev-banner span { flex: 1; }
.dev-banner-x { flex: none; border: 0; background: transparent; color: var(--text-faint); font: 700 15px system-ui, sans-serif; cursor: pointer; padding: 0 2px; }
.dev-banner-x:hover { color: var(--text); }

/* Desktop chrome (property search design): topbar nav + results header */
.lh-topbar { display: none; }
.ps-deskhead { display: none; }
@media (min-width: 900px) {
  html.lh-desk #app { max-width: none; }
  html.lh-desk .lh-topbar { display: block; position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
  html.lh-desk .lh-topbar-in { max-width: none; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 58px; }
  .lh-wordmark { flex: none; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
  .lh-dot { color: var(--accent); }
  .lh-nav { display: flex; align-items: stretch; gap: 18px; }
  .lh-nav-item { position: relative; appearance: none; background: transparent; border: 0; padding: 0; height: 58px; font: 600 12.5px/1 inherit; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-faint); cursor: pointer; transition: color .12s; }
  .lh-nav-item:hover { color: var(--text-mute); }
  .lh-nav-item.on { color: var(--text); }
  .lh-nav-item.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
  html.lh-desk .hdr .hdr-row { display: none; }
  html.lh-desk .home-tabs { display: none; }
  html.ps-wide .search-row { display: none; }
  html.ps-wide .hdr { display: none; }
  html.ps-wide .ps-deskhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 8px 0 18px; }
  .ps-desktitle { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); }
  .ps-desksub { font-size: 12.5px; color: var(--text-mute); margin-top: 5px; }
  .ps-deskright { flex: none; display: flex; align-items: center; gap: 8px; }
  .ps-deskpill { width: 380px; }
  html.ps-wide .ps-count { display: none; }
}

/* Numeric note fields (hold time, screening) */
.ns-numrow { display: flex; align-items: center; gap: 8px; }
.ns-numrow .input { width: 110px; text-align: left; }
.ns-suffix { font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
.ns-fsub { font-size: 10.5px; color: var(--text-faint); margin: -2px 0 6px; line-height: 1.35; }

/* Admin screen */
.adm-addrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.adm-addrow .pill { flex: 1; min-width: 0; }

/* Bulk tag import */
.imp-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line-soft); }
.imp-all { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-mute); cursor: pointer; }
.imp-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.imp-row:hover { background: var(--surface-alt); }
.imp-row.on { background: rgba(167, 139, 250, 0.06); }
.imp-main { flex: 1; min-width: 0; }
.imp-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.imp-dec { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--accent); }
.imp-dec.undecided { color: var(--text-faint); font-weight: 600; }
.imp-dec.ignored { color: var(--text-faint); text-decoration: line-through; }

/* Settings redesign (design_handoff_settings_redesign) — scoped to .set-page */
.set-layout { padding: 14px 13px 24px; display: flex; flex-direction: column; }
.set-rail { display: none; }
.set-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.set-sect { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 20px; }
.set-head-row { display: flex; align-items: baseline; gap: 10px; }
.set-page .sect.head { padding: 0; font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: -0.2px; color: var(--text); }
.sect-cap { font-size: 12.5px; color: var(--text-mute); line-height: 1.45; }
.set-save { margin-left: auto; font-size: 11.5px; color: var(--text-faint); flex: none; }
.scard { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.set-page .srow { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 0; }
.set-page .srow + .srow, .set-page .srow + .saction, .set-page .saction + .saction { border-top: 1px solid var(--line-soft); }
.set-page .saction { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text); min-height: 48px; }
.set-page .saction:hover { background: var(--surface-alt); }
.set-page .chip2 { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-alt); color: var(--text-mute); display: flex; align-items: center; justify-content: center; flex: none; }
.set-page .chip2.accent { background: var(--accent-soft); color: var(--accent); }
.set-admin-note { font-size: 11px; font-weight: 700; color: var(--accent); flex: none; }
.mkt-status { font-size: 11.5px; color: var(--sent); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.mkt-status i { width: 6px; height: 6px; border-radius: 999px; background: var(--sent); display: inline-block; flex: none; }
.mkt-status.off { color: var(--text-faint); } .mkt-status.off i { background: var(--text-faint); }
.set-suffix { font-size: 11.5px; font-weight: 700; color: var(--text-faint); flex: none; }
.set-gap6 { display: flex; flex-direction: column; gap: 6px; }
.set-gap6 label { font-size: 11.5px; font-weight: 600; color: var(--text-mute); }
.gcard-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.wild-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wild-chip { padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 11.5px; color: var(--text-mute); }
.wild-chip b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--accent); }
.wild-block { border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.wild-cap, .conn-cap, .docs-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-faint); }
.mode-strip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; font-size: 12.5px; font-weight: 650; border: 1px solid transparent; }
.mode-strip svg { flex: none; }
.mode-strip .note { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-mute); text-align: right; }
.mode-strip.personal { color: var(--sent); background: var(--sent-soft); border-color: var(--sent-line); }
.mode-strip.communal { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.mode-strip.off { color: var(--draft); background: var(--draft-soft); border-color: rgba(251,191,36,0.4); }
.craft-conn { background: var(--bg); border-bottom: 1px solid var(--line); padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
.conn-head { display: flex; align-items: center; gap: 8px; }
.conn-head .one-time { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.linked-pill { padding: 2px 8px; border-radius: 999px; background: var(--sent-soft); border: 1px solid var(--sent-line); font-size: 10px; font-weight: 700; color: var(--sent); flex: none; }
.lock-chip { padding: 2px 8px; border-radius: 999px; background: var(--draft-soft); border: 1px solid rgba(251,191,36,0.4); font-size: 10px; font-weight: 700; color: var(--draft); display: inline-flex; align-items: center; gap: 4px; flex: none; }
.conn-note { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }
.conn-fields { display: flex; flex-direction: column; gap: 10px; }
.conn-fields .input { background: var(--surface); }
.conn-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.conn-key-note { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.set-docs { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.docs-head { display: flex; align-items: center; gap: 8px; }
.docs-grid { display: flex; flex-direction: column; gap: 12px; }
.doc-cell { display: flex; flex-direction: column; gap: 5px; justify-content: space-between; min-width: 0; }
.doc-label { font-size: 12px; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.doc-note { font-size: 11px; color: var(--text-faint); line-height: 1.4; }
.docs-locked .pickrow { opacity: .45; pointer-events: none; }
.set-note { font-size: 11px; color: var(--text-faint); line-height: 1.45; display: flex; gap: 6px; align-items: flex-start; }
.set-note svg { flex: none; margin-top: 1px; }
@media (min-width: 900px) {
  html.lh-desk .set-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; padding: 26px 30px 56px; align-items: start; }
  html.lh-desk .set-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; }
  html.lh-desk .rail-title { font-size: 21px; font-weight: 650; letter-spacing: -0.4px; padding: 0 11px 2px; }
  html.lh-desk .rail-sub { font-size: 12px; color: var(--text-faint); padding: 0 11px 10px; }
  html.lh-desk .rail-item { padding: 8px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-mute); background: transparent; border: 0; text-align: left; cursor: pointer; }
  html.lh-desk .rail-item:hover { background: var(--surface-alt); }
  html.lh-desk .rail-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
  html.lh-desk .rail-note { border-top: 1px solid var(--line-soft); margin-top: 10px; padding: 10px 11px; font-size: 11px; line-height: 1.45; color: var(--text-faint); display: flex; gap: 6px; }
  html.lh-desk .rail-note svg { flex: none; margin-top: 1px; }
  html.lh-desk .set-col { max-width: 720px; gap: 34px; }
  html.lh-desk .set-page .sect.head { font-size: 15.5px; }
  html.lh-desk .scard { border-radius: 12px; }
  html.lh-desk .conn-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
  html.lh-desk .docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Admin redesign (design_handoff_admin_redesign) — shares the Settings kit */
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.adm-chip .rmv { height: 20px; padding: 0 7px; border: 0; border-radius: 999px; background: rgba(248,113,113,0.16); color: var(--danger); font-size: 10.5px; font-weight: 700; cursor: pointer; }
.adm-chip.armed { border-color: rgba(248,113,113,0.55); color: var(--danger); }
.adm-chip.armed .rmv { background: var(--danger); color: var(--bg); }
.adm-addbar { display: flex; gap: 8px; align-items: center; }
.adm-addbar .pill { flex: 1; }
.acc-btn { height: 36px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; padding: 0 15px; border-radius: 9px; cursor: pointer; flex: none; }
.acc-btn:hover { background: rgba(167,139,250,0.24); }
.conn-pill { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; flex: none; background: var(--surface-alt); border: 1px solid var(--line); color: var(--text-mute); }
.conn-pill.ok { background: var(--sent-soft); border-color: var(--sent-line); color: var(--sent); }
.conn-pill.err { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.4); color: var(--danger); }
.tag-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag-toolbar .pill { flex: 1; min-width: 140px; }
.tag-groupgrid { display: flex; flex-direction: column; gap: 12px; }
.tag-groupcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tag-groupcard .ghead { display: flex; align-items: baseline; gap: 8px; }
.tag-groupcard .gname { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--accent); }
.tag-groupcard .gcount { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.tag-chip2 { border: 1px solid var(--line); background: var(--surface-alt); color: var(--text); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.tag-chip2:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.region-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.region-row:last-of-type { border-bottom: 0; }
.neutral-btn { border: 1px solid var(--line); background: var(--surface-alt); color: var(--text-mute); font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; flex: none; }
.neutral-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.danger-icon-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(248,113,113,0.4); background: transparent; color: var(--danger); padding: 6px 9px; border-radius: 8px; cursor: pointer; font-size: 11.5px; font-weight: 700; flex: none; }
.danger-icon-btn.armed { background: rgba(248,113,113,0.22); }
.dashed-btn { border: 1px dashed var(--line); background: transparent; color: var(--text-mute); font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: 9px; cursor: pointer; }
.dashed-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.region-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.region-hint { font-size: 11px; color: var(--text-faint); }
.region-strip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 12px; font-weight: 650; margin-bottom: 10px; }
.tool-cards { display: flex; flex-direction: column; gap: 12px; }
.tool-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tool-card.primary { border-color: var(--accent-line); }
.tool-tile { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-alt); color: var(--text-mute); display: flex; align-items: center; justify-content: center; }
.tool-card.primary .tool-tile { background: var(--accent-soft); color: var(--accent); }
.tool-title { font-size: 13.5px; font-weight: 650; }
.tool-body { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; }
.tool-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.btn-solid { background: var(--accent); color: var(--bg); border: 0; font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: 9px; cursor: pointer; }
.btn-solid:hover { background: var(--accent-hov); }
.fb-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-faint); padding: 8px 2px 4px; }
.match-warn { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--draft); padding: 4px 0 6px; }
.closest-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; }
.imp-progress { height: 4px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; margin-top: 8px; }
.imp-progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; }
.imp-dec { flex: none; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.imp-dec.addfill { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.imp-dec.undecided { background: var(--draft-soft); border-color: rgba(251,191,36,0.5); color: var(--draft); text-decoration: none; }
.imp-dec.ignored { background: var(--surface-alt); border-color: var(--line); color: var(--text-faint); text-decoration: line-through; }
.imp-row.undec { background: rgba(251,191,36,0.04); }
.imp-subbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); font-size: 11.5px; color: var(--text-mute); flex-wrap: wrap; }
.imp-footnote { font-size: 11px; color: var(--text-faint); padding: 0 2px 8px; }
.notadmin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; }
.notadmin .locktile { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-alt); color: var(--text-mute); display: flex; align-items: center; justify-content: center; }
.notadmin h2 { font-size: 13.5px; font-weight: 650; margin: 0; }
.notadmin p { font-size: 12px; color: var(--text-mute); margin: 0; max-width: 260px; }
.adm-intro { font-size: 11.5px; color: var(--text-faint); }
@media (min-width: 900px) {
  html.lh-desk .adm-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; padding: 26px 30px 56px; align-items: start; }
  html.lh-desk .adm-col { max-width: 720px; gap: 34px; }
  html.lh-desk .adm-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; }
  html.lh-desk .tag-groupgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.lh-desk .tool-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* OSS-owned data (sheet is the bulk-info source) */
.tag-chip.locked { border-style: dashed; color: var(--text-mute); gap: 5px; }
.tag-chip.locked svg { color: var(--text-faint); flex: none; }

/* Clients desktop workspace (design_handoff_clients_desktop) */
:root { --accent-wash: rgba(167,139,250,0.10); }
.lh-mkt { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.cl-work { display: grid; grid-template-columns: 316px minmax(0, 1fr) 344px; height: calc(100dvh - 58px); min-height: 0; }
.cl-pane { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cl-list { border-right: 1px solid var(--line); }
.cl-ctx { border-left: 1px solid var(--line); background: var(--bg); }
.cl-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--line-soft); flex: none; }
.cl-head .cl-srow { min-height: 40px; align-items: center; }
.cl-head .cl-srow { display: flex; gap: 8px; }
.cl-head .pill { flex: 1; height: 34px; background: var(--surface); }
.cl-rowsbox { flex: 1; overflow-y: auto; min-height: 0; }
.cl-work .client-row { position: relative; border-radius: 0; margin: 0; padding: 0 14px; height: 64px; box-sizing: border-box; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-soft); background: transparent; }
.cl-work .client-row:last-child { border-bottom: 0; }
.cl-work .client-row:hover { background: var(--surface); }
.cl-work .client-row .row-name { font-size: 13.5px; font-weight: 650; color: var(--text-mute); }
.cl-work .client-row.on { background: var(--accent-wash); }
.cl-work .client-row.on:hover { background: rgba(167,139,250,0.14); }
.cl-work .client-row.on .row-name { color: var(--text); }
.cl-work .client-row.on::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 40px; background: #c4b2fc; border-radius: 0 2px 2px 0; }
.cl-work .client-row .avatar { border-radius: 10px; }
.cl-work .client-row .edit-btn { opacity: 1; position: static; }
.cl-name-pencil { width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.cl-name-pencil:hover { background: var(--surface-alt); color: var(--text); }
/* pane 2 */
.cl-main-head { padding: 14px 18px 0; height: 67px; box-sizing: border-box; border-bottom: 0; flex: none; display: flex; flex-direction: column; row-gap: 12px; }
.cl-main-row1 { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cl-main-row1 .avatar { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.cl-main-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cl-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-cname { font-size: 17px; font-weight: 650; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-doclink { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent); text-decoration: none; flex: none; }
.cl-doclink:hover { text-decoration: underline; }
.cl-addfield { margin-left: auto; position: relative; width: 244px; flex: 0 1 244px; min-width: 130px; }
.cl-addfield .pill { height: 34px; background: var(--surface); }
.cl-addfield .addprop-menu { left: 0; right: 0; }
.cl-main-row2 { display: flex; align-items: center; gap: 10px; }
.cl-main-row2 .updated { font-size: 11.5px; color: var(--text-faint); }
.tier-drop .tcount { margin-left: auto; min-width: 18px; height: 16px; border-radius: 999px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; background: var(--line); color: var(--text-mute); }
.tier-opt.on .tcount { background: var(--bg); }
.act-bar { display: flex; align-items: center; gap: 8px; padding: 0 18px; height: 64px; box-sizing: border-box; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--surface); flex: none; }
.act-bar .count-chip { width: 48px; height: 38px; border-radius: 8px; flex: none; }
.abtn { flex: 1; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.abtn:disabled { opacity: .5; cursor: default; }
.abtn.craft { background: var(--accent); color: var(--bg); }
.abtn.craft:hover:not(:disabled) { background: var(--accent-hov); }
.abtn.guest { background: var(--sent-soft); border-color: var(--sent-soft); color: var(--sent); }
.abtn.mapcal { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.cl-rows { flex: 1; overflow-y: auto; min-height: 0; }
.pdrow { position: relative; display: flex; align-items: center; gap: 9px; padding: 0 18px; height: 64px; box-sizing: border-box; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.pdrow:last-child { border-bottom: 0; }
.pdrow:hover { background: var(--surface); }
.pdrow.selected { background: var(--accent-wash); }
.pdrow.selected:hover { background: rgba(167,139,250,0.14); }
.pdrow.selected::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 40px; background: #c4b2fc; border-radius: 0 2px 2px 0; }
.drag-handle { width: 22px; height: 30px; border-radius: 7px; background: var(--surface-alt); color: var(--text-mute); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: grab; }
.pdrow:hover .drag-handle { background: var(--line); color: var(--text); }
.pdrow.selected .drag-handle { background: var(--accent-soft); color: var(--accent); }
.pdrow .prop-name { font-size: 13.5px; font-weight: 650; }
.pdrow .prop-line2 { margin-top: 2px; }
.pdrow .prop-email { font-size: 11.5px; }
.unm-chip { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: rgba(248,113,113,0.16); border: 1px solid rgba(248,113,113,0.4); color: var(--danger); font-size: 10px; font-weight: 700; }
.mrk-group { display: flex; align-items: center; gap: 4px; flex: none; width: 148px; }
.mrk-slot { display: flex; align-items: center; }
.mrk-slot.craft-s { width: 60px; }
.mrk-slot.mail-s { width: 84px; }
.bmark.lbl { width: auto; height: 22px; padding: 0 3px; gap: 4px; font-size: 10.5px; font-weight: 700; text-decoration: none; }
.bmark.lbl:hover span { text-decoration: underline; }
.bmark.lbl .mico { position: relative; display: inline-flex; }
.bmark.lbl.mail-bounced .mico::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--danger); transform: rotate(-45deg); border-radius: 1px; }
.grab-slot { width: 52px; flex: none; display: flex; justify-content: flex-end; }
.gbtn { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 4px; border-radius: 7px; background: none; border: 0; color: var(--text-mute); font-size: 11px; font-weight: 700; cursor: pointer; }
.gbtn:hover, .gbtn.on { color: var(--accent); }
/* pane 3 */
.cl-ctx-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: flex-start; gap: 8px; flex: none; }
.cl-ctx-title { font-size: 13.5px; font-weight: 650; }
.cl-ctx-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.cl-ctx-x { margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text-faint); font-size: 17px; line-height: 1; cursor: pointer; flex: none; }
.cl-ctx-x:hover { background: var(--surface); color: var(--text); }
.cl-ctx-body { flex: 1; overflow-y: auto; min-height: 0; padding: 12px 14px 20px; }
.cl-ctx-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; color: var(--text-faint); font-size: 12px; text-align: center; line-height: 1.6; }
.gcard { background: var(--surface); border: 1px solid transparent; border-radius: 11px; margin-bottom: 10px; overflow: hidden; }
.gcard.exp { border-color: var(--accent-line); }
.gcard-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; }
.gcard-title { font-size: 13px; font-weight: 650; }
.gcard-rent { font-size: 11.5px; color: var(--text-mute); margin-top: 1px; }
.gcard-btn { width: 24px; height: 24px; border-radius: 6px; border: 0; background: var(--surface-alt); color: var(--text-mute); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; text-decoration: none; }
.gcard-btn.craft { background: var(--accent-soft); color: var(--accent); }
.gcard-btn:hover { color: var(--text); }
.gcard-shot { height: 150px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gcard-shot img { width: 100%; height: 100%; object-fit: cover; }
.gcard-text { padding: 11px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6; color: var(--text-mute); white-space: pre-wrap; }
/* desktop composer modal */
.cmp-modal { width: 900px; max-width: calc(100vw - 48px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.55); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.cmp-mhead { display: flex; align-items: flex-start; gap: 10px; padding: 15px 18px 12px; }
.cmp-mtitle { font-size: 15px; font-weight: 700; }
.cmp-msub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.cmp-mgrid { display: grid; grid-template-columns: minmax(0, 1fr) 268px; min-height: 0; flex: 1; overflow: hidden; }
.cmp-mleft { padding: 4px 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cmp-mrail { background: var(--bg); border-left: 1px solid var(--line-soft); padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.cmp-mlabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.cmp-mfoot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--bg); border-top: 1px solid var(--line-soft); flex: none; }
.cmp-mnote { font-size: 11px; color: var(--text-faint); margin-right: auto; }
.cmp-rail-note { font-size: 11px; color: var(--text-faint); line-height: 1.55; margin-top: 8px; }