:root { --paper:#f4f6f9; --surface:#fff; --ink:#0f172a; --muted:#475569; --faint:#7c8799; --line:#e2e8f0; --line-2:#cbd5e1;
    --acc:#0f172a; --acc-soft:#e9edf3; --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --live:#1d4ed8; --live-bg:#dbeafe; --hot:#b91c1c; --hot-bg:#fee2e2;
    --sans:Inter,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --r:12px }
  * { box-sizing:border-box }
  html,body { margin:0; background:#dfe4ea; color:var(--ink); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased }
  .board { max-width:1240px; margin:0 auto; padding:28px 20px 60px }
  .board-head { display:flex; align-items:baseline; gap:14px; margin:0 0 14px; flex-wrap:wrap }
  .board-head h1 { font-size:15px; font-weight:600; margin:0 } .board-head p { margin:0; color:var(--muted); font-size:13px }
  .tabs { display:flex; gap:6px; margin:0 0 14px; flex-wrap:wrap }
  .tabs button { font:inherit; font-size:13px; font-weight:500; border:1px solid var(--line-2); background:#eef2f6; color:var(--muted); padding:7px 12px; border-radius:999px; cursor:pointer }
  .tabs button.is-on { background:var(--ink); color:#fff; border-color:var(--ink) }
  .state { display:none } .state.is-on { display:block }
  body.all .state { display:block; margin-bottom:34px } body.all .tabs { display:none }
  .state-label { font-size:12px; color:var(--faint); margin:0 0 8px; font-family:var(--mono) }
  .app { background:var(--paper); border:1px solid var(--line-2); border-radius:16px; overflow:hidden; box-shadow:0 20px 50px -30px rgba(15,23,42,.45); min-height:720px; display:grid; grid-template-rows:auto 1fr }
  .top { display:flex; align-items:center; gap:18px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--line) }
  .brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px }
  .brand i { width:22px; height:22px; border-radius:7px; background:var(--ink); display:inline-grid; place-items:center }
  .brand i::after { content:""; width:12px; height:8px; border:1.5px solid #fff; border-radius:2px; box-shadow:inset 0 -3px 0 -1.5px #fff }
  .brand small { color:var(--faint); font-weight:500; margin-left:4px }
  .status { margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12px; color:var(--faint) }
  .status span { padding:4px 10px; border-radius:999px; background:#eef2f6 } .status span.ok { color:var(--ok); background:var(--ok-bg) } .status span.hot { color:var(--hot); background:var(--hot-bg); font-weight:600 }
  .who { width:28px; height:28px; border-radius:50%; background:#cbd5e1; margin-left:6px }
  .main { display:grid; grid-template-columns:260px 1fr; min-height:0 }
  .side { border-right:1px solid var(--line); background:var(--surface); padding:18px 16px }
  .side h4 { margin:0 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
  .recent { list-style:none; margin:0 0 18px; padding:0 }
  .recent li { padding:9px 10px; border-radius:10px; display:grid; gap:2px }
  .recent li.is-on { background:var(--acc-soft) }
  .recent b { font-weight:600; font-size:13px } .recent span { font-size:12px; color:var(--faint) }
  .chip { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:#eef2f6; color:var(--muted); white-space:nowrap }
  .chip.ok { background:var(--ok-bg); color:var(--ok) } .chip.live { background:var(--live-bg); color:var(--live) } .chip.warn { background:var(--warn-bg); color:var(--warn) } .chip.hot { background:var(--hot-bg); color:var(--hot) } .chip.ink { background:var(--ink); color:#fff }
  .content { padding:26px 30px; min-width:0 }
  .steps { display:flex; gap:22px; margin:0 0 20px; padding:0; list-style:none; font-size:13px; color:var(--faint) }
  .steps li { display:flex; gap:8px; align-items:center }
  .steps li i { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-2); display:inline-grid; place-items:center; font-size:11px; font-style:normal; font-weight:600 }
  .steps li.now { color:var(--ink); font-weight:600 } .steps li.now i { background:var(--ink); color:#fff; border-color:var(--ink) }
  .steps li.done { color:var(--muted) } .steps li.done i { background:var(--ok-bg); border-color:var(--ok-bg); color:var(--ok) }
  h2 { font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px }
  .lede { color:var(--muted); margin:0 0 22px; max-width:66ch }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:18px } .two-wide { display:grid; grid-template-columns:1.5fr 1fr; gap:18px }
  .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px }
  .panel h3 { margin:0 0 10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px }
  .panel h3 .note { margin-left:auto; font-weight:500 }
  .note { color:var(--faint); font-size:12px }
  .btns { display:flex; gap:10px; margin-top:22px; align-items:center; flex-wrap:wrap }
  .btn { font:inherit; font-weight:600; font-size:13px; border-radius:10px; padding:10px 16px; border:1px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer }
  .btn[disabled] { opacity:.45 }
  .btn.pri { background:var(--ink); border-color:var(--ink); color:#fff } .btn.quiet { border-color:transparent; background:transparent; color:var(--muted) } .btn.sm { padding:6px 11px; font-size:12px; border-radius:8px }
  .btns .note { margin-left:auto }
  /* providers */
  .prov { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
  .prov div { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:16px; display:grid; gap:6px }
  .prov b { font-size:14px } .prov .mark { width:30px; height:30px; border-radius:8px; background:var(--acc-soft); display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted) }
  .prov .btn { justify-self:start; margin-top:4px }
  .can { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:13px }
  .can li { display:flex; gap:10px; align-items:center } .can i { width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; flex:none }
  .can .y i { background:var(--ok-bg); color:var(--ok) } .can .n i { background:var(--hot-bg); color:var(--hot) }
  .habits { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 12px }
  .habits div { background:var(--paper); border-radius:10px; padding:10px 12px } .habits b { display:block; font-size:20px; font-weight:600; letter-spacing:-.01em } .habits span { font-size:12px; color:var(--muted) }
  .sugg { list-style:none; margin:0; padding:0; display:grid; gap:6px }
  .sugg li { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:13px; background:#fff }
  .sugg em { font-style:normal; color:var(--faint); font-size:12px; display:block }
  /* lanes */
  .lanes { display:grid; grid-template-columns:1fr 1fr; gap:12px }
  .lane { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:14px 16px; display:grid; gap:8px; align-content:start }
  .lane h3 { margin:0; font-size:14px; display:flex; align-items:center; gap:8px } .lane h3 .chip { margin-left:auto }
  .lane .sub { font-size:12px; color:var(--faint); margin:-4px 0 2px }
  .rules { list-style:none; margin:0; padding:0; display:grid; gap:6px }
  .rules li { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; background:var(--paper); border-radius:9px; padding:7px 10px; font-size:13px }
  .rules li.learn { outline:1.5px dashed var(--ok); outline-offset:-1.5px; background:#f3fbf5 }
  .rules .x { color:var(--faint); font-size:12px }
  .add { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center }
  .add input { font:inherit; font-size:13px; border:1px solid var(--line-2); border-radius:9px; padding:7px 10px; width:100%; color:var(--ink); background:#fff }
  .add input::placeholder { color:var(--faint) }
  .lane.hot h3 i, .lane.day h3 i, .lane.week h3 i, .lane.never h3 i { width:10px; height:10px; border-radius:3px; display:inline-block }
  .lane.hot h3 i { background:var(--hot) } .lane.day h3 i { background:var(--live) } .lane.week h3 i { background:var(--warn) } .lane.never h3 i { background:var(--faint) }
  .timing { display:grid; gap:10px } .timing div { display:grid; grid-template-columns:120px 1fr; gap:10px; font-size:13px; align-items:baseline } .timing dt { color:var(--faint); font-size:12px } .timing dd { margin:0 }
  .seg { display:inline-flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:#fff; font-size:12px; white-space:nowrap } .seg span { padding:5px 9px; color:var(--muted) } .seg span.on { background:var(--ink); color:#fff; font-weight:600 }
  .ladder { list-style:none; margin:0; padding:0; display:grid; gap:0 }
  .ladder li { display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:13px; padding:5px 0; position:relative }
  .ladder li i { width:22px; height:22px; border-radius:50%; background:var(--acc-soft); display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:700; color:var(--muted) }
  .ladder li + li::before { content:""; position:absolute; left:10.5px; top:-9px; height:14px; border-left:1.5px dashed var(--line-2) }
  .ladder small { display:block; color:var(--faint); font-size:12px }
  .ladder li.done i { background:var(--ok-bg); color:var(--ok) } .ladder li.sent i { background:var(--live-bg); color:var(--live) } .ladder li.skip { opacity:.55 }
  .tog { display:flex; align-items:center; gap:10px; font-size:13px } .tog i { width:34px; height:20px; border-radius:999px; background:var(--ink); position:relative; flex:none } .tog i::after { content:""; position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%; background:#fff }
  .tog.off i { background:var(--line-2) } .tog.off i::after { right:auto; left:3px }
  /* digest */
  .counts { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0 0 18px }
  .counts div { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px } .counts b { display:block; font-size:22px; font-weight:600; letter-spacing:-.01em } .counts span { font-size:12px; color:var(--muted) }
  .counts div.hot b { color:var(--hot) } .counts div.day b { color:var(--live) }
  .sec { margin:0 0 16px } .sec h3 { margin:0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px } .sec h3 .note { margin-left:auto; letter-spacing:0; text-transform:none }
  .need { display:grid; gap:10px }
  .mail { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:grid; gap:7px }
  .mail .from { display:flex; gap:10px; align-items:center; font-size:13px } .mail .from b { font-weight:600 } .mail .from .note { margin-left:auto }
  .mail .av { width:28px; height:28px; border-radius:50%; background:var(--acc-soft); color:var(--muted); font:600 11px/28px var(--sans); text-align:center; flex:none }
  .mail .sum { font-size:14px; line-height:1.5 }
  .mail .ask { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12.5px } .mail .ask b { font-weight:600 }
  .mail .why { font-size:12px; color:var(--faint); display:flex; gap:6px; align-items:center } .mail .why i { font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted); background:var(--paper); border-radius:999px; padding:2px 7px }
  .mail .acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px }
  .know { list-style:none; margin:0; padding:0; display:grid; gap:4px }
  .know li { display:grid; grid-template-columns:1fr auto; gap:10px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 12px; font-size:13px } .know li span { color:var(--faint); font-size:12px; white-space:nowrap }
  .money { border-collapse:collapse; width:100%; font-size:13px; background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden }
  .money td { padding:7px 12px; border-bottom:1px solid var(--line) } .money tr:last-child td { border-bottom:0 } .money td.n { text-align:right; font-family:var(--mono); font-size:12px } .money td.l { color:var(--muted) }
  .wait { font-size:13px; color:var(--muted) } .wait b { color:var(--ink); font-weight:600 }
  .foot { font-size:12px; color:var(--faint); border-top:1px solid var(--line); padding-top:10px; margin-top:6px }
  /* escalation */
  .phone { width:300px; margin:0 auto; background:#111827; border-radius:34px; padding:12px; box-shadow:0 30px 60px -30px rgba(15,23,42,.6) }
  .screen { background:linear-gradient(180deg,#1f2937,#111827); border-radius:24px; padding:14px 12px 22px; min-height:420px; color:#e5e7eb }
  .screen .time { text-align:center; font-size:11px; color:#9ca3af; margin:4px 0 14px } .screen .time b { display:block; font-size:34px; font-weight:500; color:#f9fafb; letter-spacing:-.02em }
  .push { background:rgba(255,255,255,.96); color:var(--ink); border-radius:16px; padding:11px 12px; display:grid; gap:4px; box-shadow:0 10px 30px -14px rgba(0,0,0,.6) }
  .push .h { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted) } .push .h i { width:14px; height:14px; border-radius:4px; background:var(--ink); display:inline-block } .push .h span { margin-left:auto }
  .push b { font-size:13px } .push p { margin:0; font-size:12.5px; line-height:1.4 }
  .push .pa { display:flex; gap:6px; margin-top:4px } .push .pa span { font-size:11px; font-weight:600; border:1px solid var(--line-2); border-radius:7px; padding:4px 8px } .push .pa span.pri { background:var(--ink); color:#fff; border-color:var(--ink) }
  .push.dim { opacity:.55; transform:scale(.97); margin-top:8px }
  .esc { display:grid; gap:12px }
  .quote { border-left:3px solid var(--line-2); padding:4px 12px; color:var(--muted); font-size:13px; margin:0 } .quote p { margin:0 0 4px }
  .near { list-style:none; margin:0; padding:0; display:grid; gap:6px } .near li { display:grid; grid-template-columns:1fr auto; gap:10px; font-size:12.5px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 10px } .near li em { font-style:normal; color:var(--faint); font-size:12px; display:block }
  .ann { margin-top:12px; font-size:12.5px; color:var(--muted); max-width:74ch } .ann b { color:var(--ink); display:block; margin-bottom:2px }