/* Eleve Pro: customer portal + CRM */
:root {
  --bg: #f5f2ea;
  --surface: #ffffff;
  --sunk: #faf8f3;
  --ink: #17140f;
  --muted: #675f52;
  --line: #e3dccd;
  --line-strong: #cfc5b1;
  --black: #0b0a08;
  --gold: #c08930;
  --gold-ink: #7d5a1a;
  --gold-soft: #f6ecd8;
  --ok: #2c7650;
  --ok-soft: #e3f1e8;
  --warn: #93600f;
  --warn-soft: #fbf0d9;
  --err: #a93c2b;
  --err-soft: #f8e4df;
  --blue: #2f5f8a;
  --blue-soft: #e4edf5;
  --body: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --display: "Cinzel", Georgia, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--gold-ink); }
a:hover { color: var(--ink); }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar */
.topbar { background: var(--black); color: #f2ece0; border-bottom: 2px solid var(--gold); }
.topbar .inner { max-width: 1320px; margin: 0 auto; padding: 0 20px; min-height: 62px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .logo { display: flex; align-items: center; gap: 10px; color: #f2ece0; text-decoration: none; font-family: var(--display); letter-spacing: .12em; font-size: .95rem; }
.topbar .logo img { width: 34px; height: 34px; }
.topbar .logo small { font-family: var(--body); letter-spacing: .08em; color: #c9bfae; font-size: .72rem; margin-left: 4px; }
.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topbar nav a { color: #d9d0bf; text-decoration: none; padding: 8px 7px; border-radius: 6px; font-size: .86rem; white-space: nowrap; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { background: rgba(230, 194, 122, .14); color: #fff; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: .86rem; color: #c9bfae; }
.topbar .who a { color: #e6c27a; }
.badge-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: var(--black); font-size: .72rem; font-weight: 700; text-align: center; margin-left: 4px; }

.portal-banner { background: #000; line-height: 0; }
.portal-banner img { display: block; width: 100%; height: auto; }
@media print { .portal-banner { display: none; } }
.page { max-width: 1240px; margin: 0 auto; padding: 28px 20px 70px; }
.page.narrow { max-width: 820px; }
.page.tiny { max-width: 460px; padding-top: 56px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: 1.7rem; font-weight: 600; }
.page-head p { color: var(--muted); margin-top: 4px; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.card + .card { margin-top: 16px; }
.card h2 { font-size: 1.12rem; font-weight: 600; margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.grid-2 > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.grid-2 .card + .card { margin-top: 0; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stats.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--gold); }
.stat span { display: block; font-size: .82rem; color: var(--muted); }
.stat strong { display: block; font-size: 1.8rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat small { color: var(--muted); font-size: .8rem; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 .94rem/1 var(--body); padding: 11px 16px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--black); color: #f6efe0; }
.btn-primary:hover { background: #2a2620; color: #fff; }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: #d59d42; color: var(--black); }
.btn-line { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-danger { background: var(--surface); border-color: #dcb2a8; color: var(--err); }
.btn-sm { padding: 7px 11px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 500; white-space: nowrap; background: var(--sunk); border: 1px solid var(--line); color: var(--muted); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill.ok { background: var(--ok-soft); border-color: #bddcc9; color: var(--ok); }
.pill.warn { background: var(--warn-soft); border-color: #ecd4a3; color: var(--warn); }
.pill.err { background: var(--err-soft); border-color: #e7bfb6; color: var(--err); }
.pill.blue { background: var(--blue-soft); border-color: #c3d4e4; color: var(--blue); }
.pill.gold { background: var(--gold-soft); border-color: #e6cf9f; color: var(--gold-ink); }
.pill.plain::before { display: none; }

/* Flash */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash-ok { background: var(--ok-soft); border-color: #bddcc9; color: #1f5a3c; }
.flash-err { background: var(--err-soft); border-color: #e7bfb6; color: #7f2c1f; }
.flash-warn { background: var(--warn-soft); border-color: #ecd4a3; color: #6d4709; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label, .field legend, .lbl { display: block; font-weight: 500; margin-bottom: 6px; font-size: .95rem; }
.field fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field .req { color: var(--err); }
.field .opt { color: var(--muted); font-weight: 400; font-size: .86rem; }
.field .help { color: var(--muted); font-size: .87rem; margin: -2px 0 8px; }
.field .help.saved { color: var(--ok); }
.field .lock { margin-left: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); padding: 2px 6px; border-radius: 4px; vertical-align: 2px; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=url], input[type=date], input[type=search], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; padding: 11px 12px; min-height: 46px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 137, 48, .22); }
input[type=file] { font: inherit; width: 100%; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 7px; background: var(--sunk); }
.with-prefix { display: flex; align-items: stretch; }
.with-prefix .prefix { display: grid; place-items: center; padding: 0 12px; background: var(--sunk); border: 1px solid var(--line-strong); border-right: 0; border-radius: 7px 0 0 7px; color: var(--muted); }
.with-prefix input { border-radius: 0 7px 7px 0; }
.choices { display: grid; gap: 8px; }
.choices.inline { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); cursor: pointer; font-weight: 400; margin: 0; }
.choices.inline .choice { min-width: 110px; }
.choice input { width: 18px; height: 18px; accent-color: var(--gold-ink); margin: 0; }
.choice:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.field.has-error input, .field.has-error select, .field.has-error .choice { border-color: var(--err); }
.field-error { color: var(--err); font-size: .88rem; margin-top: 6px; font-weight: 500; }
.file-current { font-size: .9rem; color: var(--ok); margin-bottom: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold-ink); flex: none; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* Auth screens */
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 30px; }
.auth-card h1 { font-size: 1.5rem; margin-bottom: 6px; }
.auth-card > p { color: var(--muted); margin-bottom: 20px; }
.auth-card form { display: grid; gap: 16px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .92rem; color: var(--muted); }

/* Portal: steps */
.progress { height: 10px; background: #ece5d6; border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #d9a54a); border-radius: 999px; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.journey li { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.journey li:last-child { border-bottom: 0; }
.journey .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; border: 2px solid var(--line-strong); color: var(--muted); background: var(--surface); }
.journey li.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.journey li.current .dot { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }
.journey h3 { font-size: 1rem; font-weight: 600; }
.journey p { color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { .journey li { grid-template-columns: 34px 1fr; } .journey li > :last-child { grid-column: 2; justify-self: start; } }

.onb-layout { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
.onb-nav { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.onb-nav ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.onb-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: .93rem; }
.onb-nav a:hover { background: var(--sunk); }
.onb-nav a[aria-current="step"] { background: var(--gold-soft); font-weight: 600; }
.onb-nav .st { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; font-size: .7rem; color: #fff; }
.onb-nav .st.done { background: var(--ok); border-color: var(--ok); }
.onb-form .section-title { font-size: 1.4rem; font-weight: 600; }
.onb-form .intro { color: var(--muted); margin: 6px 0 20px; }
.onb-form .fields { display: grid; gap: 20px; }
.onb-form .outro { margin-top: 20px; padding: 12px 14px; background: var(--warn-soft); border: 1px solid #ecd4a3; border-radius: 8px; color: #6d4709; font-size: .93rem; }
.onb-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.onb-actions .right { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .onb-layout { grid-template-columns: 1fr; } .onb-nav { position: static; } .onb-nav ol { display: none; } .onb-nav.open ol { display: grid; } }
.onb-toggle { display: none; }
@media (max-width: 860px) { .onb-toggle { display: inline-flex; margin-top: 10px; } }

/* Review / data lists */
.dl { display: grid; grid-template-columns: minmax(160px, 40%) 1fr; gap: 0; margin: 0; }
.dl dt, .dl dd { padding: 9px 0; border-bottom: 1px solid var(--line); margin: 0; }
.dl dt { color: var(--muted); font-size: .92rem; padding-right: 14px; }
.dl dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dl dd.missing { color: var(--err); }
@media (max-width: 560px) { .dl { grid-template-columns: 1fr; } .dl dt { border-bottom: 0; padding-bottom: 0; } }
.review-section { margin-top: 18px; }
.review-section .card-head { margin-bottom: 4px; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--sunk); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfaf5; }
td.num { font-variant-numeric: tabular-nums; }
.row-link { color: var(--ink); text-decoration: none; font-weight: 500; }
.row-link:hover { text-decoration: underline; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 6px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filters input[type=search] { max-width: 280px; }
.filters select { width: auto; min-width: 170px; }
.empty { padding: 34px; text-align: center; color: var(--muted); }

/* Board */
.board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding-bottom: 8px; }
.col { background: #ece6d8; border-radius: 10px; padding: 8px; min-height: 200px; min-width: 0; }
.col h2 { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; color: var(--muted); display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 4px 4px 10px; }
.col .item { overflow-wrap: anywhere; }
@media (max-width: 1200px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .board { grid-template-columns: minmax(0, 1fr); } .col { min-height: 0; } }
.col .item { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: block; text-decoration: none; color: var(--ink); }
.col .item:hover { border-color: var(--gold); }
.col .item strong { display: block; font-weight: 600; font-size: .94rem; }
.col .item span { font-size: .82rem; color: var(--muted); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.tl-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .02em; background: var(--sunk); border: 1px solid var(--line); color: var(--muted); }
.tl-email .tl-icon { background: var(--blue-soft); color: var(--blue); border-color: #c3d4e4; }
.tl-sms .tl-icon { background: var(--ok-soft); color: var(--ok); border-color: #bddcc9; }
.tl-note .tl-icon { background: var(--gold-soft); color: var(--gold-ink); border-color: #e6cf9f; }
.tl-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl-head strong { font-weight: 600; font-size: .95rem; }
.tl-head time { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.tl-body { white-space: pre-line; margin-top: 4px; color: #3d372e; font-size: .93rem; overflow-wrap: anywhere; }
.tl-meta { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.tl-in .tl-body { background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; font: 500 .95rem var(--body); color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--gold); }
.tabpanel { display: grid; gap: 12px; }

.reveal { font: inherit; font-size: .8rem; margin-left: 8px; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; color: var(--gold-ink); }
.secret-val { font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: .94rem; }
.kv span:nth-child(odd) { color: var(--muted); }
.kv span { overflow-wrap: anywhere; }
.code { font-family: ui-monospace, Menlo, monospace; background: var(--sunk); border: 1px solid var(--line); padding: 10px 12px; border-radius: 7px; word-break: break-all; }


/* Tickets + messages */
.thread { display: grid; gap: 12px; }
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.msg-staff { border-left: 4px solid var(--gold); }
.msg-customer { border-left: 4px solid var(--blue); }
.msg-note { background: var(--warn-soft); border-color: #ecd4a3; border-left: 4px solid var(--warn); }
.msg-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: .92rem; }
.msg-head time { color: var(--muted); font-size: .84rem; }
.msg-body { white-space: pre-line; overflow-wrap: anywhere; }
.ticket-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ticket-layout { grid-template-columns: 1fr; } }
.chat { display: grid; gap: 14px; }
.chat-list { display: grid; gap: 10px; max-height: 62vh; overflow-y: auto; padding: 4px; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; background: var(--sunk); border: 1px solid var(--line); }
.bubble.mine { justify-self: end; background: var(--gold-soft); border-color: #e6cf9f; border-bottom-right-radius: 4px; }
.bubble.theirs { justify-self: start; border-bottom-left-radius: 4px; }
.bubble-body { white-space: pre-line; overflow-wrap: anywhere; }
.bubble-meta { font-size: .76rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .bubble { max-width: 92%; } }
.chat-form { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.inbox { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; } .inbox.has-thread .inbox-list { display: none; } }
.convo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 70vh; overflow-y: auto; }
.convo-list a { display: grid; gap: 2px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--ink); position: relative; }
.convo-list a:hover, .convo-list li.active a { background: var(--gold-soft); }
.convo-top { display: flex; justify-content: space-between; gap: 8px; }
.convo-top time { font-size: .78rem; color: var(--muted); }
.convo-preview { font-size: .86rem; color: var(--muted); padding-right: 28px; }
.convo-list .badge-count { position: absolute; right: 10px; bottom: 10px; }
.stat-alert { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

/* Renewals */
.renew-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.renew-card.overdue { border-color: #e7bfb6; background: var(--err-soft); }
.ren-actions { position: relative; }
.ren-actions summary { list-style: none; }
.ren-actions summary::-webkit-details-marker { display: none; }
.ren-menu { position: static; margin-top: 8px; width: 300px; max-width: 80vw; display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.25); }
.ren-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ren-inline input { min-height: 36px; padding: 6px 8px; flex: 1; min-width: 90px; }


/* Software login + training */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .setup-grid { grid-template-columns: 1fr; } }
.setup-box { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunk); }
.setup-box h3 { font-size: 1rem; }
.training-card { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-color: var(--gold); background: linear-gradient(135deg, var(--gold-soft), var(--surface) 70%); }
.training-card h2 { margin-bottom: 4px; }

/* Signature documents */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.doc-card h2 { font-size: 1.1rem; margin-top: 2px; }
.doc-form { display: grid; gap: 18px; }
.editor { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.editor textarea { border: 0; border-radius: 0; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--sunk); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.editor-toolbar button { font: 500 .86rem var(--body); padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.editor-toolbar button:hover { border-color: var(--gold); }
.editor-area { border: 0; border-radius: 0; margin: 0; min-height: 320px; max-height: 70vh; outline: none; }
.editor-area:focus { box-shadow: inset 0 0 0 2px rgba(192, 137, 48, .35); }
.version { border-top: 1px solid var(--line); padding: 10px 0; }
.version summary { cursor: pointer; }
.version form { margin-top: 10px; }

/* Purchase agreement + e-signature */
.agreement-doc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 30px 34px; margin-bottom: 18px; max-height: 60vh; overflow-y: auto; line-height: 1.65; }
.agreement-doc.signed-copy { max-height: none; overflow: visible; }
.agreement-doc h1 { font-family: var(--display); font-size: 1.45rem; margin-bottom: 14px; text-align: center; }
.agreement-doc h2 { font-size: 1.02rem; margin: 22px 0 8px; }
.agreement-doc ul { margin: 6px 0; padding-left: 22px; }
.agreement-doc li + li { margin-top: 4px; }
.agreement-doc p + p { margin-top: 10px; }
@media (max-width: 640px) { .agreement-doc { padding: 20px 18px; } }
.sign-card { display: grid; gap: 16px; }
.sig-pad { position: relative; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; height: 190px; touch-action: none; }
.sig-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; border-radius: 8px; }
.sig-pad .sig-line { position: absolute; left: 18px; right: 18px; bottom: 44px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: .9rem; line-height: 1; pointer-events: none; }
.sig-pad .sig-clear { position: absolute; right: 8px; top: 8px; }
.has-error .sig-pad { border-color: var(--err); }
.sign-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 14px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); }
.sign-date .lbl { margin: 0; }
.sig-block { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 18px; align-items: end; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.sig-label { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sig-img { max-width: 100%; max-height: 110px; border-bottom: 1px solid var(--ink); }
.sig-val { font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
@media (max-width: 640px) { .sig-block { grid-template-columns: 1fr; } }
.cert { margin-top: 18px; }
.cert .hash { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; word-break: break-all; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

@media print {
  .topbar, .no-print, .onb-nav { display: none !important; }
  body { background: #fff; }
  .card { border: 0; padding: 0; }
  .agreement-doc { border: 0; padding: 0; max-height: none; overflow: visible; }
  .cert { page-break-before: always; }
}

/* ---- Profits ---- */
.neg { color: var(--err); }
td.num, th.num { text-align: right; white-space: nowrap; }
.money-table td, .money-table th { white-space: nowrap; }
.money-table .total-row td { border-top: 2px solid var(--line-strong); background: var(--sunk); }
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 240px; padding-top: 8px; }
.bar-col { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 6px; outline-offset: 2px; cursor: default; }
.bar-col:hover, .bar-col:focus-visible { background: var(--sunk); }
.bar-area { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 18%; }
.bar-pos, .bar-neg { position: relative; flex: 1; display: flex; }
.bar-pos { align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.bar-neg { align-items: flex-start; }
.bar-pos i, .bar-neg i { display: block; width: 100%; min-height: 2px; }
.bar-pos i { background: var(--gold); border-radius: 4px 4px 0 0; }
.bar-neg i { background: var(--err); border-radius: 0 0 4px 4px; opacity: .75; }
.bar-label { text-align: center; font-size: .78rem; color: var(--muted); padding: 6px 0 2px; }
.bar-col[data-tip]:hover::after, .bar-col[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; padding: 7px 10px; border-radius: 7px; background: var(--black); color: #f2ece0;
  font-size: .8rem; line-height: 1.35; z-index: 5; pointer-events: none; white-space: normal;
}
.bar-col:nth-child(-n+2)[data-tip]:hover::after, .bar-col:nth-child(-n+2)[data-tip]:focus-visible::after { left: 0; transform: none; }
.bar-col:nth-last-child(-n+2)[data-tip]:hover::after, .bar-col:nth-last-child(-n+2)[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
@media (max-width: 640px) { .bars { gap: 2px; height: 200px; } .bar-area { padding: 0 8%; } .bar-label { font-size: .68rem; } }
.cost-row { border: 0; border-top: 1px solid var(--line); margin: 14px 0 0; padding: 12px 0 0; min-width: 0; }
.cost-row legend { font-weight: 600; padding: 0 8px 0 0; }
.cost-row .field label { font-size: .85rem; font-weight: 400; color: var(--muted); }

/* ---- Service Bureaus ---- */
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sb-grid h3, .sb-agreement h3 { font-size: 1rem; margin: 0 0 8px; }
.sb-agreement { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.inline-form { display: inline-block; margin: 4px 0 0 6px; vertical-align: middle; }
.member-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.member-add .field { margin: 0; }
.member-add label { font-size: .85rem; }
.member-rows { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.member-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.member-row .field { margin: 0; }
.member-row label { font-size: .85rem; font-weight: 400; color: var(--muted); }
.sig-party { margin-top: 22px; }
.sig-party-name { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: var(--gold-ink); margin: 0; }
.sig-party .sig-block { margin-top: 10px; }
.sig-preview { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; background: #fff; }
.sig-preview img { max-height: 90px; max-width: 100%; display: block; }
h2.doc-group { font-size: 1.15rem; margin: 22px 0 8px; }
h2.doc-group:first-of-type { margin-top: 4px; }
@media (max-width: 760px) { .sb-grid, .member-row { grid-template-columns: 1fr; } }
.member-row .member-no { grid-column: 1 / -1; margin: 0; font-size: .8rem; font-weight: 600; color: var(--gold-ink); letter-spacing: .04em; text-transform: uppercase; }

/* ---- Admin portal preview ---- */
.preview-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 20px; background: var(--gold-soft); border-bottom: 1px solid #e6cf9f; color: var(--gold-ink); font-size: .92rem; text-align: center; }
.update-note { margin-bottom: 16px; }
.test-card { border-color: #e6cf9f; }

/* ---- Leads ---- */
.lead-list { display: grid; gap: 10px; }
.lead-item { padding: 0; }
.lead-item summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; list-style: none; }
.lead-item summary::-webkit-details-marker { display: none; }
.lead-item.unseen { border-color: #e6cf9f; }
.lead-item[open] summary { border-bottom: 1px solid var(--line); }
.lead-main { min-width: 0; }
.lead-main .small { margin-top: 4px; }
.lead-facts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lead-body { padding: 14px 18px 18px; }
.lead-sub { border-top: 1px solid var(--line); padding: 10px 0; }
.lead-sub:first-of-type { border-top: 0; padding-top: 0; }
.lead-sub summary { cursor: pointer; }

/* ---- Follow-ups ---- */
.page-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 16px; flex-wrap: wrap; }
.page-tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.page-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.auto-group { margin-bottom: 16px; }
.auto-table tr.is-off td { opacity: .55; }
.nowrap { white-space: nowrap; }
.auto-edit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.auto-edit aside { display: grid; gap: 14px; }
@media (max-width: 860px) { .auto-edit { grid-template-columns: 1fr; } }
.timing-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0; }
.with-suffix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.with-suffix input { width: auto; max-width: 180px; }
.sms-preview { background: #e9f1fb; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: .92rem; line-height: 1.45; }
.email-preview { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; font-size: .9rem; max-height: 420px; overflow: auto; }
.email-preview p { margin: 0 0 10px; }
.email-preview a { word-break: break-all; }
.tag-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.tag-list dt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--gold-ink); }
.tag-list dd { margin: 0; color: var(--muted); }
.fu-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.call-today { border-color: #e6cf9f; }

/* Chats */
.err-text { color: var(--err); }
.lead-item.is-off { opacity: .65; }
.chat-list { display: grid; gap: 8px; }
.chat-row { display: grid; grid-template-columns: 118px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; color: var(--ink); }
.card.chat-row + .card.chat-row { margin-top: 0; }
.chat-row:hover { border-color: var(--gold); }
.chat-row.is-waiting { border-left: 4px solid var(--err); }
.chat-row-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.chat-snippet { flex-basis: 100%; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ch { display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; text-align: center; }
.chat-ch.ch-web { background: var(--gold-soft); border-color: #e6cf9f; color: var(--gold-ink); }
.chat-ch.ch-sms { background: var(--ok-soft); border-color: #bddcc9; color: var(--ok); }
.chat-ch.ch-instagram { background: #fbe9f1; border-color: #efc3d6; color: #a03a68; }
.chat-ch.ch-facebook { background: var(--blue-soft); border-color: #c3d4e4; color: var(--blue); }
@media (max-width: 640px) { .chat-row { grid-template-columns: 1fr auto; } .chat-row .chat-ch { justify-self: start; grid-column: 1 / -1; } }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.chat-layout aside { display: grid; gap: 16px; }
.chat-layout aside .card + .card { margin-top: 0; }
@media (max-width: 960px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-card { padding: 0; overflow: hidden; }
.chat-log { display: flex; flex-direction: column; gap: 14px; padding: 20px; max-height: 62vh; min-height: 260px; overflow-y: auto; background: var(--sunk); }
.chat-msg { max-width: 78%; display: flex; flex-direction: column; }
.chat-msg .bubble { padding: 10px 14px; border-radius: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg.visitor { align-self: flex-start; }
.chat-msg.visitor .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.bot, .chat-msg.staff { align-self: flex-end; align-items: flex-end; }
.chat-msg.bot .bubble { background: #efe7d5; border: 1px solid #e2d6bd; border-bottom-right-radius: 4px; }
.chat-msg.staff .bubble { background: var(--black); color: #f6efe0; border-bottom-right-radius: 4px; }
.chat-meta, .chat-opts { font-size: .78rem; color: var(--muted); margin-top: 4px; padding: 0 4px; }
.chat-opts { font-style: italic; }
.chat-reply { padding: 16px 20px 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.chat-reply textarea { width: 100%; }
.chat-reply-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.chat-reply-bar > span { flex: 1; min-width: 220px; }
.chat-answers-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.chat-answers-grid > div { display: grid; gap: 16px; }
.chat-answers-grid .card + .card { margin-top: 0; }
@media (max-width: 960px) { .chat-answers-grid { grid-template-columns: 1fr; } }
.chat-test { margin-top: 14px; display: grid; gap: 8px; }
.chat-test .bubble { background: #efe7d5; border: 1px solid #e2d6bd; padding: 10px 14px; border-radius: 14px; line-height: 1.5; }
.chat-settings { display: grid; gap: 16px; max-width: 820px; }
.chat-settings .card + .card { margin-top: 0; }
.chat-settings textarea, .chat-settings input[type="text"] { width: 100%; }
@media (max-width: 820px) { .stats.stats-5 { grid-template-columns: 1fr 1fr; } }
.topbar .inner { gap: 12px; }
.topbar nav a { padding: 8px 6px; }
.topbar nav[aria-label="CRM"] ~ .who span { display: none; }