:root { --ink: #1b2430; --muted: #5e6b7a; --line: #dde3ea; --bg: #f5f7fa; --acc: #1f6feb; --good: #1a7f37; --bad: #c23b22; --warn: #9a6700; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
.top, main, .foot { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.top { padding-top: 28px; }
h1 { font-size: 1.9rem; margin: 0 0 6px; }
h2 { font-size: 1.2rem; margin: 0 0 10px; }
h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.lede { font-size: 1.05rem; margin: 0 0 6px; }
.small { font-size: .88rem; }
.muted { color: var(--muted); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 16px 0; }
.lbl { display: block; font-weight: 600; margin-bottom: 4px; }
select, input[type=text], input:not([type]), textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #c5ced8; border-radius: 6px; background: #fff; }
textarea { resize: vertical; }
.chk { display: block; margin-top: 10px; }
.brief { margin: 10px 0 0; padding: 10px 12px; background: #f0f4f9; border-radius: 8px; font-size: .95rem; }
.brief b { display: inline-block; min-width: 92px; }
.lock { color: var(--warn); font-weight: 600; }
button, .buy, .filebtn { font: inherit; border: 0; border-radius: 6px; padding: 8px 14px; cursor: pointer; background: var(--acc); color: #fff; text-decoration: none; display: inline-block; }
button.ghost, .filebtn { background: #fff; color: var(--acc); border: 1px solid var(--acc); }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.callhead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.meter { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.bar { width: 140px; height: 10px; background: #e6ebf1; border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .3s; }
.log { min-height: 140px; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 10px 0; background: #fbfcfd; }
.say { margin: 6px 0; padding: 8px 10px; border-radius: 8px; max-width: 86%; white-space: pre-wrap; }
.say.buyer { background: #eef1f5; }
.say.rep { background: #e3efff; margin-left: auto; }
.say small { display: block; color: var(--muted); font-size: .78rem; }
.say.end { border-left: 3px solid var(--bad); }
.score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.score .big { font-size: 2.6rem; font-weight: 700; }
.oc { font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.oc.win { background: #dafbe1; color: var(--good); }
.oc.lose { background: #ffebe9; color: var(--bad); }
.oc.mid { background: #fff8c5; color: var(--warn); }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .93rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk { height: 8px; background: #e6ebf1; border-radius: 4px; overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.sk i { display: block; height: 100%; background: var(--acc); }
.tip { border-left: 3px solid var(--warn); padding: 6px 10px; margin: 8px 0; background: #fffdf3; }
.tip q { color: var(--bad); }
.tip .try { color: var(--good); }
.upsell { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--acc); border-radius: 8px; }
.plist { margin: 0 0 10px 18px; padding: 0; }
.buyrow { display: flex; gap: 10px; flex-wrap: wrap; }
.buy.alt { background: #0b4fbf; }
.keyrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.keyrow input { max-width: 300px; }
.keyrow .lbl { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.builder label { display: block; font-size: .9rem; margin: 6px 0; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; padding: 10px; }
.frow { border-bottom: 1px dotted var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.ok { color: var(--good); } .err { color: var(--bad); }
.foot { padding: 10px 16px 30px; }
@media print {
  body { background: #fff; }
  .top, #setup, #call, #pro, #how, .foot, .upsell, #out .row { display: none !important; }
  .card { border: 0; }
}