/* Pickup design system, demo layer. Loaded LAST on every page.
   One accent, neutral surfaces, one radius scale, hairlines not borders,
   system type with tabular numerals. Everything the older skins set is
   re-tokenised here so the app reads as one piece of work. */

:root {
  --pk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pk-accent: #d2621c;
  --pk-accent-hi: #e06f28;
  --pk-accent-tint: rgba(210,98,28,.10);
  --pk-accent-tint2: rgba(210,98,28,.18);
  --pk-on-accent: #fff;
  --pk-bg: #f4f4f5;
  --pk-pane: #ffffff;
  --pk-raised: #ffffff;
  --pk-sunk: #f1f1f3;
  --pk-in: #ececef;
  --pk-fg: #111113;
  --pk-fg2: #55555c;
  --pk-mute: #85858e;
  --pk-line: rgba(17,17,19,.08);
  --pk-line2: rgba(17,17,19,.14);
  --pk-red: #d93d3a;
  --pk-red-tint: rgba(217,61,58,.10);
  --pk-green: #2f9e5b;
  --pk-green-tint: rgba(47,158,91,.12);
  --pk-shadow: 0 12px 40px rgba(17,17,19,.14), 0 1px 2px rgba(17,17,19,.06);
  --pk-r-s: 8px; --pk-r-m: 12px; --pk-r-l: 16px;
  --pk-ease: cubic-bezier(.32,.72,0,1);
}
html[data-theme=dark] {
  --pk-accent: #ea7a2f;
  --pk-accent-hi: #f2883e;
  --pk-accent-tint: rgba(234,122,47,.14);
  --pk-accent-tint2: rgba(234,122,47,.24);
  --pk-bg: #0c0c0e;
  --pk-pane: #121214;
  --pk-raised: #1a1a1d;
  --pk-sunk: #1d1d21;
  --pk-in: #242428;
  --pk-fg: #f2f2f4;
  --pk-fg2: #b1b1b9;
  --pk-mute: #7f7f89;
  --pk-line: rgba(255,255,255,.08);
  --pk-line2: rgba(255,255,255,.14);
  --pk-red: #f0564f;
  --pk-red-tint: rgba(240,86,79,.14);
  --pk-green: #3fc06a;
  --pk-green-tint: rgba(63,192,106,.14);
  --pk-shadow: 0 16px 48px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}

/* ── Re-tokenise the older skins ─────────────────────────────────────────── */
html body.bd-im, html[data-theme=dark] body.bd-im, html[data-theme=light] body.bd-im {
  --bd-pane: var(--pk-pane); --bd-pane2: var(--pk-pane); --bd-bar: var(--pk-pane);
  --bd-sep: var(--pk-line); --bd-field: var(--pk-sunk); --bd-sunk: var(--pk-sunk);
  --bd-in: var(--pk-in); --bd-out: var(--pk-accent); --bd-out-fg: var(--pk-on-accent);
  --bd-blue: var(--pk-accent); --bd-mute: var(--pk-mute); --bd-red: var(--pk-red);
  --bd-bot: var(--pk-sunk); --bd-r: 18px;
  --bd-pop: var(--pk-raised); --bd-pop-fg: var(--pk-fg); --bd-pop-hi: var(--pk-sunk);
  --fg: var(--pk-fg); --fg2: var(--pk-fg2); --fg3: var(--pk-mute); --bg: var(--pk-bg);
  --card: var(--pk-pane); --card2: var(--pk-pane); --edge: var(--pk-line); --divider: var(--pk-line);
  --rim: transparent; --shadow: transparent; --field: var(--pk-sunk); --sunk-fg: var(--pk-fg2);
  --chip: var(--pk-sunk); --chip-fg: var(--pk-fg2); --glass: var(--pk-pane); --solid: var(--pk-fg);
  --accent: var(--pk-accent); --accent-dim: var(--pk-accent); --cta-bg: var(--pk-accent); --cta-fg: var(--pk-on-accent);
  --ink: var(--pk-fg); --green: var(--pk-green);
  --moon-face: var(--pk-pane); --moon-glass: var(--pk-sunk); --moon-hair: var(--pk-line); --moon-hair2: var(--pk-line2);
  --hc-tint: var(--pk-accent); --hc-bg: var(--pk-accent-tint);
  font-family: var(--pk-font);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  background: var(--pk-bg);
  color: var(--pk-fg);
}
html body.bd-im *, html body.bd-im *::before, html body.bd-im *::after { font-family: inherit; }
html body.bd-im button, html body.bd-im input, html body.bd-im select, html body.bd-im textarea { font-family: var(--pk-font); }
html body.bd-im :focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
html body.bd-im .i21, html body.bd-im i[data-icon] svg { width: 1em; height: 1em; }
html body.bd-im i[data-icon] { display: inline-flex; line-height: 0; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
html body.bd-im .ib-app { background: var(--pk-bg); }
html body.bd-im #ib-demo-bar { display: none !important; }
html body.bd-im .ib-top {
  background: var(--pk-pane) !important; color: var(--pk-fg) !important;
  border-bottom: 1px solid var(--pk-line); overflow: visible !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px 16px !important; gap: 8px !important;
  min-height: 52px; box-sizing: border-box;
}
html body.bd-im .ib-brand { gap: 8px !important; }
html body.bd-im .ib-brand .pk-mark { width: 24px; height: 24px; border-radius: 7px; display: block; }
html body.bd-im .ib-brand .pk-wm { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--pk-fg); }
html body.bd-im .ib-top .tabs { gap: 2px !important; }
html body.bd-im .ib-top .tabs button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px !important;
  border: 0 !important; border-radius: var(--pk-r-s) !important; background: transparent !important;
  color: var(--pk-fg2) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  box-shadow: none !important; transition: background .15s, color .15s;
}
html body.bd-im .ib-top .tabs button svg { width: 18px; height: 18px; opacity: .85; }
html body.bd-im .ib-top .tabs button:hover { background: var(--pk-sunk) !important; color: var(--pk-fg) !important; }
html body.bd-im .ib-top .tabs button.on { background: var(--pk-sunk) !important; color: var(--pk-fg) !important; font-weight: 600 !important; }
html body.bd-im .ib-top .tabs button.on svg { color: var(--pk-accent); opacity: 1; }
html body.bd-im .ib-top .tabs button b {
  margin: 0 0 0 2px !important; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pk-in) !important; color: var(--pk-fg2) !important; font-size: 11px !important; font-weight: 600 !important;
  box-shadow: none !important; border: 0 !important;
}
html body.bd-im .ib-top .tabs button b:empty, html body.bd-im .ib-top .tabs button b.pk-zero { display: none; }
html body.bd-im .ib-top .tabs button b.bd-ph-badge-red { background: var(--pk-red) !important; color: #fff !important; }
html body.bd-im #newmsg-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px !important; margin: 0 !important;
  border: 1px solid var(--pk-line2) !important; border-radius: var(--pk-r-s) !important; background: var(--pk-pane) !important;
  color: var(--pk-fg) !important; font-size: 13.5px !important; font-weight: 600 !important; box-shadow: none !important; width: auto;
}
html body.bd-im #newmsg-btn::before { content: none !important; }
html body.bd-im #newmsg-btn svg { width: 16px; height: 16px; }
html body.bd-im #newmsg-btn:hover { background: var(--pk-sunk) !important; }
html body.bd-im #themebtn {
  width: 34px !important; height: 34px !important; flex: 0 0 34px; border-radius: var(--pk-r-s) !important;
  border: 0 !important; background: transparent !important; color: var(--pk-fg2) !important; box-shadow: none !important;
}
html body.bd-im #themebtn:hover { background: var(--pk-sunk) !important; }
html body.bd-im #themebtn svg { width: 18px; height: 18px; }
html body.bd-im #pk-demo {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border-radius: 13px;
  background: var(--pk-accent-tint); color: var(--pk-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
html body.bd-im #pk-demo button {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
html body.bd-im #pk-demo button:hover { background: var(--pk-accent-tint2); }
html body.bd-im #pk-demo button svg { width: 13px; height: 13px; }
html body.bd-im #pk-demo em { font-style: normal; }

/* Bottom tab bar (phone) */
html body.bd-im #pk-tabbar {
  display: none; flex: 0 0 auto; grid-template-columns: repeat(3, 1fr);
  background: var(--pk-pane); border-top: 1px solid var(--pk-line);
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
html body.bd-im #pk-tabbar button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px;
  border: 0; background: none; color: var(--pk-mute); font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body.bd-im #pk-tabbar button svg { width: 24px; height: 24px; }
html body.bd-im #pk-tabbar button.on { color: var(--pk-accent); }
html body.bd-im #pk-tabbar button b {
  position: absolute; top: 0; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700;
  background: var(--pk-fg2); color: var(--pk-pane); border: 2px solid var(--pk-pane); box-sizing: content-box; line-height: 1;
}
html body.bd-im #pk-tabbar button b.red { background: var(--pk-red); color: #fff; }
html body.bd-im #pk-tabbar button b[hidden] { display: none; }

@media (max-width: 859px) {
  html body.bd-im .ib-top .tabs { display: none !important; }
  html body.bd-im #pk-tabbar { display: grid; }
  html body.bd-im:has(.ib-host.bd-open) #pk-tabbar { display: none; }
  html body.bd-im #newmsg-btn { width: 34px; padding: 0 !important; justify-content: center; border: 0 !important; background: transparent !important; color: var(--pk-fg2) !important; }
  html body.bd-im #newmsg-btn span { display: none; }
  html body.bd-im #newmsg-btn svg { width: 20px; height: 20px; }
  html body.bd-im #pk-demo em { display: none; }
  html body.bd-im #pk-demo button { padding: 0 5px; }
  html body.bd-im .bd-rows { padding-bottom: 24px !important; }
}

/* Desktop: the top bar becomes a left rail */
@media (min-width: 860px) {
  html body.bd-im .ib-app { flex-direction: row; }
  html body.bd-im .ib-top {
    flex-direction: column; align-items: stretch !important; width: 232px; height: 100%; box-sizing: border-box;
    padding: 18px 12px 14px !important; gap: 4px !important; border-bottom: 0; border-right: 1px solid var(--pk-line);
    background: var(--pk-bg) !important;
  }
  html body.bd-im .ib-brand { padding: 0 6px 14px; }
  html body.bd-im .ib-top .tabs { display: flex; flex-direction: column; gap: 2px !important; overflow: visible; }
  html body.bd-im .ib-top .tabs button { width: 100%; justify-content: flex-start; height: 36px; padding: 0 10px !important; font-size: 14px !important; }
  html body.bd-im .ib-top .tabs button b { margin-left: auto !important; }
  html body.bd-im .ib-top .tabs button.on { background: var(--pk-pane) !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--pk-line) !important; }
  html[data-theme=dark] body.bd-im .ib-top .tabs button.on { background: var(--pk-raised) !important; }
  html body.bd-im .ib-spacer { flex: 1 1 auto; }
  html body.bd-im #newmsg-btn { width: 100%; justify-content: center; height: 36px; order: 5; margin-top: 6px !important; }
  html body.bd-im .ib-top .pk-rail-foot { order: 6; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; padding: 0 2px; }
  html body.bd-im .ib-top .pk-rail-links { display: flex; gap: 2px; }
  html body.bd-im .ib-top .pk-rail-links a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--pk-r-s); color: var(--pk-fg2); }
  html body.bd-im .ib-top .pk-rail-links a:hover { background: var(--pk-sunk); color: var(--pk-fg); }
  html body.bd-im .ib-top .pk-rail-links a svg { width: 18px; height: 18px; }
  html body.bd-im #themebtn { order: 7; }
  html body.bd-im #pk-demo { order: 4; align-self: flex-start; margin: 2px 6px 0; }
  html body.bd-im .ib-top .bdx-nav-hidden { display: none; }
  html body.bd-im .bdx-nav { display: none !important; }
  html body.bd-im .ib-body { flex: 1 1 auto; min-width: 0; }
}

/* ── List pane ───────────────────────────────────────────────────────────── */
html body.bd-im .bd-pane { background: var(--pk-pane); }
html body.bd-im .bd-bar { background: var(--pk-pane); border-bottom: 1px solid var(--pk-line); min-height: 52px; padding: 8px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
html body.bd-im .bd-h { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html body.bd-im .bd-sub { font-size: 12px; color: var(--pk-mute); font-weight: 400; }
html body.bd-im .bd-round { width: 32px; height: 32px; flex-basis: 32px; border-radius: var(--pk-r-s); background: transparent; color: var(--pk-fg2); font-size: 14px; font-weight: 600; }
html body.bd-im .bd-round:hover { background: var(--pk-sunk); color: var(--pk-fg); }
html body.bd-im .bd-round svg { width: 18px; height: 18px; }
html body.bd-im .bd-round[data-bd=info] { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 15px; border: 1.5px solid currentColor; border-radius: 50%; width: 24px; height: 24px; flex-basis: 24px; line-height: 1; margin: 0 4px; }
html body.bd-im .bdx-nav { display: flex; gap: 2px; }
html body.bd-im .bdx-nav a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: var(--pk-r-s); color: var(--pk-fg2); text-decoration: none; font-size: 13px; font-weight: 500; }
html body.bd-im .bdx-nav a:hover { background: var(--pk-sunk); color: var(--pk-fg); }
html body.bd-im .bdx-nav a svg { width: 18px; height: 18px; }
html body.bd-im .bd-srch, html body.bd-im .bd-search, html body.bd-im .search, html body.bd-im .bd-srch input {
  border-radius: 10px !important; border: 0 !important; background: var(--pk-sunk) !important; color: var(--pk-fg); font-size: 15px; box-shadow: none !important;
}
html body.bd-im .bd-row { padding: 10px 14px 10px 10px; gap: 12px; align-items: flex-start; transition: background .12s; }
html body.bd-im .bd-row::after { content: ""; position: absolute; left: 62px; right: 0; bottom: 0; height: 1px; background: var(--pk-line); }
html body.bd-im .bd-row:last-child::after { display: none; }
html body.bd-im .bd-row:hover { background: var(--pk-sunk); }
html body.bd-im .bd-dot { width: 8px; height: 8px; flex-basis: 8px; background: var(--pk-accent); margin-left: 0; }
html body.bd-im .bd-av { width: 40px; height: 40px; flex-basis: 40px; font-size: 14px; font-weight: 600; letter-spacing: 0; filter: saturate(.75); }
html body.bd-im .bd-body { min-width: 0; flex: 1; }
html body.bd-im .bd-l1 { display: flex; align-items: baseline; gap: 8px; }
html body.bd-im .bd-nm { font-size: 15px; font-weight: 600; letter-spacing: -.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.bd-im .bd-when { font-size: 12px; color: var(--pk-mute); flex: 0 0 auto; }
html body.bd-im .bd-prev { font-size: 13.5px; line-height: 1.35; color: var(--pk-mute); margin-top: 2px; }
html body.bd-im .bd-unread .bd-prev { color: var(--pk-fg2); }
html body.bd-im .bd-tag {
  display: inline-block; vertical-align: 1px; margin: 0 6px 0 0; padding: 1px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0; text-transform: none;
  background: var(--pk-sunk) !important; color: var(--pk-fg2) !important; border: 0 !important; box-shadow: none !important;
}
html body.bd-im .bd-tag.bd-esc, html body.bd-im .bd-tag.bd-warn { background: var(--pk-accent-tint) !important; color: var(--pk-accent) !important; }
html body.bd-im .bd-tag.bd-urg, html body.bd-im .bd-tag.bd-rush { background: var(--pk-red-tint) !important; color: var(--pk-red) !important; }
html body.bd-im .bd-tag.bd-ok { background: var(--pk-green-tint) !important; color: var(--pk-green) !important; }
html body.bd-im .ib-who { background: var(--pk-sunk); color: var(--pk-fg2); box-shadow: none; font-weight: 500; }
html body.bd-im .ib-who::before { background: var(--pk-accent); }
@media (min-width: 860px) {
  html body.bd-im .bd-row.bd-sel, html[data-theme=dark] body.bd-im .bd-row.bd-sel { background: var(--pk-accent-tint) !important; box-shadow: inset 3px 0 0 var(--pk-accent) !important; color: var(--pk-fg) !important; }
  html body.bd-im .bd-row.bd-sel .bd-prev, html body.bd-im .bd-row.bd-sel .bd-when { color: var(--pk-fg2) !important; }
  html body.bd-im .bd-row.bd-sel .bd-tag { background: var(--pk-pane) !important; }
}

/* ── Thread ──────────────────────────────────────────────────────────────── */
html body.bd-im .bd-back { color: var(--pk-accent); font-size: 15px; font-weight: 500; gap: 2px; padding: 4px 6px 4px 0; }
html body.bd-im .bd-back .bd-chev { font-size: 26px; line-height: 0; position: relative; top: -1px; }
html body.bd-im .bd-ochips { display: none !important; }
html body.bd-im .bd-headacts { gap: 2px; }
html body.bd-im .bd-headbtn {
  height: 32px; padding: 0 10px; border: 0 !important; border-radius: var(--pk-r-s); background: transparent !important;
  color: var(--pk-accent) !important; font-size: 13.5px; font-weight: 600; box-shadow: none !important;
}
html body.bd-im .bd-headbtn:hover { background: var(--pk-accent-tint) !important; }
html body.bd-im .bd-headbtn.bd-headbtn-close { color: var(--pk-fg2) !important; }
html body.bd-im .bd-headbtn.bd-headbtn-close:hover { background: var(--pk-sunk) !important; }
html body.bd-im .ib-main { background: var(--pk-pane); }
html body.bd-im .card { background: var(--pk-pane); border: 0; border-radius: 0; box-shadow: none; margin: 0; }
html body.bd-im .customer-msg { background: var(--pk-pane); border-bottom: 1px solid var(--pk-line); padding: 8px 16px 14px; }
html body.bd-im .hist { margin-top: 0; }
html body.bd-im .bd-day { font-size: 12px; color: var(--pk-mute); margin: 14px 0 10px; }
html body.bd-im .bd-day b { font-weight: 600; color: var(--pk-fg2); }
html body.bd-im .hist-bubble { font-size: 15px; line-height: 1.4; border-radius: 18px; padding: 9px 13px; max-width: 78%; border: 0 !important; box-shadow: none !important; }
html body.bd-im .hist-bubble.in { background: var(--pk-in); color: var(--pk-fg); }
html body.bd-im .hist-bubble.out { background: var(--pk-accent); color: var(--pk-on-accent); }
html body.bd-im .hist-bubble.bot { background: var(--pk-sunk); color: var(--pk-fg2); border: 1px solid var(--pk-line) !important; }
html body.bd-im .hist-meta { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-mute); margin-bottom: 3px; }
html body.bd-im .hist-meta:empty { display: none; }
html body.bd-im .bd-stamp { font-size: 11px; color: var(--pk-mute); }
html body.bd-im .bd-sys { font-size: 12px; color: var(--pk-mute); text-align: center; padding: 10px 24px; background: transparent; border: 0; }
html body.bd-im .bd-flag {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 16px 0; padding: 10px 12px; border-radius: var(--pk-r-m);
  background: var(--pk-accent-tint); color: var(--pk-fg); font-size: 13.5px; line-height: 1.4; font-weight: 500; border: 0; box-shadow: inset 3px 0 0 var(--pk-accent);
}
html body.bd-im .bd-flag svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--pk-accent); }
html body.bd-im .bd-triage { padding: 10px 16px 0; background: transparent; border: 0; gap: 8px; }
html body.bd-im .btn { border-radius: var(--pk-r-s); font-size: 13.5px; font-weight: 600; padding: 0 12px; height: 34px; display: inline-flex; align-items: center; gap: 6px; }
html body.bd-im .btn.assign, html body.bd-im .btn.ask {
  background: var(--pk-pane); color: var(--pk-fg); border: 1px solid var(--pk-line2) !important; box-shadow: none;
}
html body.bd-im .btn.assign:hover, html body.bd-im .btn.ask:hover { background: var(--pk-sunk); }
html body.bd-im .reply-block { padding: 12px 16px 14px; border-top: 1px solid var(--pk-line); margin-top: 12px; }
html body.bd-im .reply-block .label { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
html body.bd-im .bd-ai-pill {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--pk-accent); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
html body.bd-im .bd-ai-pill svg { width: 14px; height: 14px; }
html body.bd-im .reply-edit {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 4px 0 8px !important;
  font-size: 15px !important; line-height: 1.5 !important; color: var(--pk-fg); min-height: 84px; resize: none; box-shadow: none !important;
}
html body.bd-im .reply-edit:focus { outline: none; }
html body.bd-im .reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: relative; }
html body.bd-im .reply-actions .att-chips { order: 0; flex: 1 0 100%; }
html body.bd-im .reply-actions .att-chips:empty { display: none; }
html body.bd-im .btn.attach { order: 1; width: 34px; padding: 0; justify-content: center; font-size: 0; background: transparent; color: var(--pk-fg2); border: 0; box-shadow: none; }
html body.bd-im .btn.attach:hover { background: var(--pk-sunk); }
html body.bd-im .btn.attach svg, html body.bd-im .btn.attach i { font-size: 18px; width: 18px; height: 18px; }
html body.bd-im .pk-snipbtn { order: 2; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--pk-r-s); background: transparent; color: var(--pk-fg2); cursor: pointer; }
html body.bd-im .pk-snipbtn:hover { background: var(--pk-sunk); }
html body.bd-im .pk-snipbtn svg { width: 18px; height: 18px; }
html body.bd-im select.snip { display: none !important; }
html body.bd-im .btn.send { order: 3; margin-left: auto; background: var(--pk-accent); color: var(--pk-on-accent); padding: 0 18px; box-shadow: none; }
html body.bd-im .btn.send:hover { background: var(--pk-accent-hi); }
html body.bd-im .btn.send:active { transform: scale(.98); }
html body.bd-im .pk-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60; min-width: 240px; max-width: 320px; padding: 6px;
  background: var(--pk-raised); border: 1px solid var(--pk-line); border-radius: var(--pk-r-m); box-shadow: var(--pk-shadow);
  animation: pkPop .16s var(--pk-ease);
}
@keyframes pkPop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
html body.bd-im .pk-pop-h { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-mute); padding: 6px 10px 4px; }
html body.bd-im .pk-pop-i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--pk-fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
html body.bd-im .pk-pop-i:hover { background: var(--pk-sunk); }
html body.bd-im .pk-pop-i svg { width: 15px; height: 15px; color: var(--pk-accent); }
html body.bd-im .pk-pop-new { color: var(--pk-accent); font-weight: 600; border-top: 1px solid var(--pk-line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 10px; }
html body.bd-im .feedback-block { padding: 0 16px 12px; }
html body.bd-im .feedback-toggle { font-size: 12.5px; color: var(--pk-mute); }
html body.bd-im .feedback-toggle:hover { color: var(--pk-fg2); }
html body.bd-im .bdx-ttags { padding: 6px 16px 18px; }
html body.bd-im .bdx-tlabel { font-size: 12px; color: var(--pk-mute); }
html body.bd-im .bdx-tag, html body.bd-im .bdx-tagadd { font-size: 12px; border-radius: 6px; background: var(--pk-sunk); color: var(--pk-fg2); border: 0; }
html body.bd-im .bdx-tagadd { color: var(--pk-accent); background: transparent; }

/* ── Pipeline ────────────────────────────────────────────────────────────── */
html body.bd-im #tab-pipeline { background: var(--pk-bg); }
html body.bd-im .pp-head { padding: 18px 20px 12px; }
html body.bd-im .pp-t { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
html body.bd-im .pp-s { font-size: 13px; color: var(--pk-mute); }
html body.bd-im .pp-val i { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-mute); font-style: normal; }
html body.bd-im .pp-val b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
html body.bd-im .pp-cols { gap: 12px; padding: 0 20px 20px; }
html body.bd-im .pp-ch { padding: 4px 4px 8px; }
html body.bd-im .pp-ch b { font-size: 13px; font-weight: 600; color: var(--pk-fg); }
html body.bd-im .pp-ch b span { color: var(--pk-mute); font-weight: 500; }
html body.bd-im .pp-ch i { font-size: 12px; color: var(--pk-mute); }
html body.bd-im .pp-card { background: var(--pk-pane); border: 1px solid var(--pk-line) !important; border-radius: var(--pk-r-m); padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .12s, box-shadow .15s; }
html body.bd-im .pp-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
html[data-theme=dark] body.bd-im .pp-card { background: var(--pk-raised); box-shadow: none; }
html body.bd-im .pp-card .pp-n { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
html body.bd-im .pp-card .pp-n small { font-size: 12px; font-weight: 500; color: var(--pk-mute); }
html body.bd-im .pp-card .pp-j { font-size: 13px; color: var(--pk-mute); }
html body.bd-im .pp-card .pp-row { margin-top: 8px; gap: 10px; }
html body.bd-im .pp-chip { padding: 0; background: transparent !important; color: var(--pk-fg2) !important; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
html body.bd-im .pp-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-mute); margin: 0; display: inline-block; vertical-align: 0; }
html body.bd-im .pp-chip.ai { color: var(--pk-accent) !important; font-weight: 600; }
html body.bd-im .pp-chip.ai::before { background: var(--pk-accent); }
html body.bd-im .pp-chip.q::before { background: var(--pk-fg2); }
html body.bd-im .pp-chip.ok::before { background: var(--pk-green); }
html body.bd-im .pp-chip.w::before { background: var(--pk-red); }
html body.bd-im .pp-chip.a, html body.bd-im .pp-chip.money { font-weight: 600; color: var(--pk-fg) !important; }

/* ── Phone ───────────────────────────────────────────────────────────────── */
html body.bd-im #ib-sim-row { background: var(--pk-pane); border-bottom: 1px solid var(--pk-line); padding: 8px 14px; font-size: 13px; color: var(--pk-mute); }
html body.bd-im #ib-sim-row span { opacity: 1; }
html body.bd-im #ib-sim-row button { background: transparent; color: var(--pk-accent); border: 1px solid var(--pk-line2); border-radius: var(--pk-r-s); padding: 7px 12px; font-size: 13px; font-weight: 600; }
html body.bd-im #ib-sim-row button:hover { background: var(--pk-accent-tint); }
html body.bd-im .bd-ph-top { background: var(--pk-pane); padding: 10px 16px 6px; }
html body.bd-im .bd-ph-title { font-size: 28px; font-weight: 700; letter-spacing: -.025em; margin: 8px 0 4px; }
html body.bd-im .bd-ph-seg { background: var(--pk-sunk); border-radius: 9px; }
html body.bd-im .bd-ph-seg button { font-size: 13px; font-weight: 500; border-radius: 7px; }
html body.bd-im .bd-ph-seg button.on { background: var(--pk-pane); color: var(--pk-fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--pk-line); }
html[data-theme=dark] body.bd-im .bd-ph-seg button.on { background: var(--pk-raised); }
html body.bd-im .bd-ph-day { font-size: 12px; font-weight: 600; color: var(--pk-mute); text-transform: none; letter-spacing: 0; padding: 12px 16px 4px; }
html body.bd-im .bd-ph-row { padding: 10px 14px 10px 16px; }
html body.bd-im .bd-ph-row:hover { background: var(--pk-sunk); }
html body.bd-im .bd-ph-main { font-size: 15px; font-weight: 500; }
html body.bd-im .bd-ph-missed .bd-ph-main { color: var(--pk-red); }
html body.bd-im .bd-ph-sub, html body.bd-im .bd-ph-when { font-size: 12.5px; color: var(--pk-mute); }
html body.bd-im .bd-ph-key { background: var(--pk-sunk); color: var(--pk-fg); }
html body.bd-im .bd-ph-key:active { background: var(--pk-in); }
html body.bd-im .bd-ph-key b { font-size: 28px; font-weight: 400; }
html body.bd-im .bd-ph-key small, html body.bd-im .bd-ph-key span { font-size: 9.5px; letter-spacing: .12em; color: var(--pk-mute); }
html body.bd-im .bd-ph-callbtn { background: var(--pk-green); box-shadow: none; }
html body.bd-im .bd-ph-callbtn:hover { filter: brightness(1.05); }
html body.bd-im .bd-ph-display, html body.bd-im .bd-ph-num { font-weight: 400; letter-spacing: .01em; }
@media (max-width: 760px) {
  html body.bd-im .bd-ph { display: flex; flex-direction: column; }
  html body.bd-im .bd-ph-nav {
    position: static; order: -1; display: inline-flex; grid-template-columns: none; align-self: center;
    margin: 10px auto 2px; padding: 2px; gap: 2px; border-radius: 9px; background: var(--pk-sunk); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    z-index: 1; box-shadow: none; width: auto; left: auto; right: auto; bottom: auto;
  }
  html body.bd-im .bd-ph-nav button { flex-direction: row; gap: 6px; height: 30px; padding: 0 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--pk-fg2); }
  html body.bd-im .bd-ph-nav button svg, html body.bd-im .bd-ph-nav button i { width: 15px; height: 15px; display: none; }
  html body.bd-im .bd-ph-nav button.on { background: var(--pk-pane); color: var(--pk-fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--pk-line); }
  html[data-theme=dark] body.bd-im .bd-ph-nav button.on { background: var(--pk-raised); }
  html body.bd-im .bd-ph-list { padding-bottom: 12px; }
  html body.bd-im .bd-ph-pad { padding-bottom: 20px; }
  html body.bd-im .bd-ph-segrow { display: none; }
}

/* ── Call sheet ──────────────────────────────────────────────────────────── */
html body.bd-im .bd-call-bg { background: #0e0e11; }
html body.bd-im .bd-call-name { letter-spacing: -.02em; font-weight: 600; }
html body.bd-im .bd-call-go { background: var(--pk-green); }

/* ── Toasts, welcome, misc ───────────────────────────────────────────────── */
html body.bd-im .toast, html body.bd-im #pp-toast { background: var(--pk-fg); color: var(--pk-pane); border-radius: 10px; font-size: 13.5px; font-weight: 500; box-shadow: var(--pk-shadow); border: 0; }
html body.bd-im #ib-welcome { background: rgba(17,17,19,.45); backdrop-filter: blur(6px); }
html body.bd-im #ib-welcome-card { background: var(--pk-pane); color: var(--pk-fg); border: 1px solid var(--pk-line); border-radius: var(--pk-r-l); box-shadow: var(--pk-shadow); font-size: 14px; }
html body.bd-im #ib-welcome-x { background: var(--pk-sunk); color: var(--pk-fg2); }
html body.bd-im .ib-welcome-tag { color: var(--pk-mute); }
html body.bd-im #ib-welcome-card p, html body.bd-im .ib-welcome-try { color: var(--pk-fg2); }
html body.bd-im .ib-welcome-try-h { color: var(--pk-fg) !important; }
html body.bd-im .ib-welcome-go { background: var(--pk-accent); color: var(--pk-on-accent); border-radius: 10px; font-weight: 600; }
html body.bd-im .ib-welcome-call { border: 1px solid var(--pk-line2); color: var(--pk-fg); border-radius: 10px; font-weight: 600; }
html body.bd-im .group { margin-bottom: 0; }
html body.bd-im ::selection { background: var(--pk-accent-tint2); }

/* ── Round 2: beat the older skins' heavier selectors ───────────────────── */
html body.bd-im, html[data-theme=dark] body.bd-im, html[data-theme=light] body.bd-im {
  --warn-bg: var(--pk-accent-tint); --warn-fg: var(--pk-fg); --warn-edge: transparent;
  --ok-bg: var(--pk-green-tint); --ok-fg: var(--pk-green); --ok-edge: transparent;
  --bad-bg: var(--pk-red-tint); --bad-fg: var(--pk-red); --bad-edge: transparent;
  --info-bg: var(--pk-sunk); --info-fg: var(--pk-fg2); --sunk: var(--pk-sunk);
  --bd-mute2: var(--pk-mute); --bd-sep2: var(--pk-line2); --moon-ease: var(--pk-ease);
}
/* list rows: one hairline, not two */
html body.bd-im .bd-row::after { border-bottom: 0; left: 62px; }
html body.bd-im .bd-row { padding: 10px 14px 10px 12px; }
/* Open / Closed = a real segmented control */
html body.bd-im .bd-octabs { position: relative; isolation: isolate; gap: 2px; padding: 8px 12px 0; background: var(--pk-pane); border-radius: 0; }
html body.bd-im .bd-octabs::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 8px; height: 30px; border-radius: 9px;
  background: var(--pk-sunk); z-index: -1;
}
html body.bd-im .bd-oc, html[data-theme=dark] body.bd-im .bd-oc {
  margin: 2px 0 0; padding: 0; height: 26px; border-radius: 7px; background: transparent; color: var(--pk-fg2);
  font-size: 13px; font-weight: 500;
}
html body.bd-im .bd-octabs > .bd-oc:first-child { margin-left: 2px; }
html body.bd-im .bd-octabs > .bd-oc:last-child { margin-right: 2px; }
html body.bd-im .bd-oc.bd-on, html[data-theme=dark] body.bd-im .bd-oc.bd-on {
  background: var(--pk-pane); color: var(--pk-fg); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--pk-line);
}
html[data-theme=dark] body.bd-im .bd-oc.bd-on { background: var(--pk-raised); }
/* filter chips */
html body.bd-im .bd-tabs { padding: 8px 12px; background: var(--pk-pane); border-bottom: 1px solid var(--pk-line); backdrop-filter: none; -webkit-backdrop-filter: none; gap: 6px; }
html body.bd-im .bd-tab, html[data-theme=dark] body.bd-im .bd-tab {
  height: 28px; padding: 0 11px; border-radius: 14px; background: var(--pk-sunk); color: var(--pk-fg2);
  font-size: 13px; font-weight: 500; box-shadow: none; border: 0;
}
html body.bd-im .bd-tab .bd-n, html[data-theme=dark] body.bd-im .bd-tab .bd-n { color: var(--pk-mute); font-weight: 600; font-size: 12px; }
html body.bd-im .bd-tab.bd-on, html[data-theme=dark] body.bd-im .bd-tab.bd-on { background: var(--pk-fg); color: var(--pk-pane); font-weight: 600; }
html body.bd-im .bd-tab.bd-on .bd-n, html[data-theme=dark] body.bd-im .bd-tab.bd-on .bd-n { color: var(--pk-pane); opacity: .7; }
html body.bd-im .bd-tab.bd-hot, html[data-theme=dark] body.bd-im .bd-tab.bd-hot { background: var(--pk-red-tint); color: var(--pk-red); }
html body.bd-im .bd-tab.bd-hot .bd-n { color: var(--pk-red); }
html body.bd-im .bd-tab.bd-hot.bd-on, html[data-theme=dark] body.bd-im .bd-tab.bd-hot.bd-on { background: var(--pk-red); color: #fff; }
html body.bd-im .bd-tab.bd-hot.bd-on .bd-n { color: #fff; }
/* sort / filter popovers and search */
html body.bd-im .bd-sortmenu, html body.bd-im .bd-filtmenu { background: var(--pk-raised); border: 1px solid var(--pk-line); border-radius: var(--pk-r-m); box-shadow: var(--pk-shadow); }
html body.bd-im .bd-foot { background: var(--pk-pane); border-top: 1px solid var(--pk-line); }
html body.bd-im .bd-search, html body.bd-im .search, html body.bd-im .bd-srch input { border-radius: 10px !important; border: 0 !important; }

/* thread */
html body.bd-im .ib-main .bd-sys { background: transparent; border: 0; margin: 8px 16px 0; padding: 6px 12px; text-align: center; font-size: 12px; color: var(--pk-mute); }
html body.bd-im .ib-main .card.ib-open .customer-msg { display: flex; flex-direction: column; justify-content: flex-end; }
html body.bd-im .ib-main .bd-flag, html body.bd-im .ib-main .card.ib-open .bd-flag {
  margin: 12px 16px 0; padding: 10px 12px; border-radius: var(--pk-r-m); border: 0;
  background: var(--pk-accent-tint); color: var(--pk-fg); font-size: 13.5px; font-weight: 500; line-height: 1.4;
  box-shadow: inset 3px 0 0 var(--pk-accent); display: flex; gap: 10px; align-items: flex-start;
}
html body.bd-im .ib-main .card.ib-open .bdx-ttags { order: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
html body.bd-im .ib-main .card.ib-open .bdx-ttags .bdx-tlabel { font-size: 12px; color: var(--pk-mute); text-transform: none; letter-spacing: 0; font-weight: 500; margin-right: 2px; }
html body.bd-im .ib-main .card.ib-open .bdx-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
html body.bd-im .bd-triage, html body.bd-im .ib-main .card.ib-open .bd-triage { padding: 10px 16px; border-bottom: 1px solid var(--pk-line); background: var(--pk-pane); gap: 8px; }
html body.bd-im .bd-triage .btn, html body.bd-im .bd-actions .btn, html body.bd-im .bd-info .btn {
  border-radius: var(--pk-r-s); padding: 0 12px; height: 34px; font-size: 13.5px; font-weight: 600;
  background: var(--pk-pane); color: var(--pk-fg); border: 1px solid var(--pk-line2); box-shadow: none;
}
html body.bd-im .bd-triage .btn:hover, html body.bd-im .bd-info .btn:hover { background: var(--pk-sunk); }
html body.bd-im .ib-main .bd-triage .ask-row input { border-radius: var(--pk-r-s); border: 1px solid var(--pk-line2); background: var(--pk-pane); height: 34px; font-size: 14px; }
/* composer: docked, flat, one hairline */
html body.bd-im .ib-main .card.ib-open .reply-block {
  margin: 0; padding: 10px 16px calc(12px + var(--bd-safe-b, 0px)); border-radius: 0; border: 0;
  border-top: 1px solid var(--pk-line); background: var(--pk-pane);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -12px 24px -16px rgba(0,0,0,.18);
}
html[data-theme=dark] body.bd-im .ib-main .card.ib-open .reply-block { box-shadow: 0 -12px 24px -16px rgba(0,0,0,.6); }
html body.bd-im .ib-main .reply-block > .label { margin: 0 0 2px; opacity: 1; letter-spacing: 0; font-size: 12px; }
html body.bd-im .ib-main .reply-edit { padding: 4px 0 6px; font-size: 15px; line-height: 1.5; min-height: 72px; max-height: 40vh; }
html body.bd-im .ib-main .reply-actions { margin: 4px 0 0; gap: 4px; }
html body.bd-im .ib-main .reply-actions .btn { flex: 0 0 auto; }
html body.bd-im .ib-main .btn.attach {
  width: 34px; height: 34px; padding: 0; border-radius: var(--pk-r-s); border: 0; background: transparent; color: var(--pk-fg2);
}
html body.bd-im .ib-main .btn.attach:hover { background: var(--pk-sunk); }
html body.bd-im .ib-main .btn.send {
  height: 34px; padding: 0 18px; border-radius: var(--pk-r-s); font-size: 13.5px; letter-spacing: 0;
  background: var(--pk-accent); color: var(--pk-on-accent); box-shadow: none; transition: background .15s, transform .12s;
}
html body.bd-im .ib-main .btn.send:hover { background: var(--pk-accent-hi); }
html body.bd-im .ib-main .btn.send:active { transform: scale(.98); }
html body.bd-im .ib-main .btn.send.sent { background: var(--pk-mute); }
html body.bd-im .ib-main .hist-bubble { border-radius: 18px; }
html body.bd-im .ib-main .hist-bubble.out { box-shadow: none; }
html body.bd-im .ib-main .att-chip { border-radius: 6px; background: var(--pk-sunk); color: var(--pk-fg2); font-size: 12px; }
html body.bd-im .ib-main .reply-block.awaiting { background: var(--pk-pane); border-top: 1px solid var(--pk-line); color: var(--pk-mute); }
/* saved-replies popover is body-level and fixed now */
html body.bd-im .pk-pop { position: fixed; bottom: auto; left: auto; z-index: 400; width: 280px; max-width: calc(100vw - 24px); }
/* info panel */
html body.bd-im .bd-info { background: var(--pk-pane); border-left: 1px solid var(--pk-line); }
html body.bd-im .bd-info h3, html body.bd-im .bd-info .bd-info-h { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--pk-mute); text-transform: uppercase; }
html body.bd-im .bd-info .bd-info-row, html body.bd-im .bd-info dl { font-size: 14px; }

/* rail / top-bar leftovers */
html body.bd-im #me-txt, html body.bd-im #progress-txt, html body.bd-im #fault-btn, html body.bd-im #regen-btn { display: none !important; }
html body.bd-im #dial-btn { display: none !important; }
html body.bd-im .ib-top .bdx-nav a span { display: none; }
@media (max-width: 859px) {
  html body.bd-im .ib-top .pk-rail-foot { display: contents; }
  html body.bd-im .ib-top .pk-rail-links { display: none !important; }
  html body.bd-im .bd-bar .bdx-nav a { width: 32px; height: 32px; padding: 0; justify-content: center; }
  html body.bd-im .bd-bar .bdx-nav a span { display: none; }
  html body.bd-im:has(.ib-host.bd-open) #pk-tabbar { display: grid; }
  html body.bd-im.pk-thread #pk-tabbar { display: none; }
}

/* phone */
html body.bd-im .bd-ph-line { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--pk-mute); }
html body.bd-im .bd-ph-demo { background: var(--pk-accent-tint); color: var(--pk-accent); border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; padding: 1px 6px; }
html body.bd-im .bd-ph-av { filter: saturate(.7); font-weight: 600; letter-spacing: 0; background-image: none; }
html body.bd-im #ib-sim-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body.bd-im #ib-sim-row button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; }
html body.bd-im #ib-sim-row button svg { width: 15px; height: 15px; }
html body.bd-im .bd-ph-callbtn, html body.bd-im .bd-ph-call { box-shadow: none; }
html body.bd-im .bd-ph-key { box-shadow: none; border: 0; }

/* pipeline */
html body.bd-im .pp-cols { overflow-x: auto; align-items: flex-start; }
html body.bd-im .pp-col { background: transparent; padding: 0; border-radius: 0; }
@media (max-width: 760px) { html body.bd-im .pp-col { flex: 0 0 78%; max-width: 300px; } html body.bd-im .pp-cols { padding: 0 16px 20px; scroll-snap-type: x mandatory; } html body.bd-im .pp-col { scroll-snap-align: start; } html body.bd-im .pp-head { padding: 14px 16px 10px; } }
@media (min-width: 761px) { html body.bd-im .pp-col { flex: 1 1 0; min-width: 236px; max-width: none; } }
html body.bd-im .pp-ch { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 2px 10px; }
html body.bd-im .pp-card { width: 100%; text-align: left; margin-bottom: 8px; }
html body.bd-im .pp-card .pp-n { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html body.bd-im .pp-card .pp-n small { white-space: nowrap; flex: 0 0 auto; }
html body.bd-im .pp-chip.ai { font-weight: 500; }
html body.bd-im .pp-val { text-align: right; }
html body.bd-im .pp-val i { display: block; white-space: nowrap; }
html body.bd-im .pp-head { align-items: flex-start; gap: 16px; }
html body.bd-im .pp-s { max-width: 60%; }

/* ── Home & Settings pages (not body.bd-im) ──────────────────────────────── */
html body.pk-page {
  --accent: var(--pk-accent); --bg: var(--pk-bg); --fg: var(--pk-fg); --fg2: var(--pk-fg2); --fg3: var(--pk-mute);
  --card: var(--pk-pane); --edge: var(--pk-line); --sunk: var(--pk-sunk); --chip: var(--pk-sunk); --chip-fg: var(--pk-fg2);
  --ok-fg: var(--pk-green); --ok-bg: var(--pk-green-tint); --ok-edge: transparent;
  --bad-fg: var(--pk-red); --bad-bg: var(--pk-red-tint); --bad-edge: transparent;
  --warn-fg: var(--pk-accent); --warn-bg: var(--pk-accent-tint);
  --divider: var(--pk-line); --tr-ty: var(--pk-accent); --tr-ly: var(--pk-mute);
  --group: var(--pk-pane); --bar: var(--pk-pane); --side: var(--pk-pane); --sep: var(--pk-line); --fill: var(--pk-sunk); --fill2: var(--pk-in);
  --blue: var(--pk-accent); --green: var(--pk-green); --red: var(--pk-red); --orange: var(--pk-accent); --field: var(--pk-sunk); --shadow: none;
  font-family: var(--pk-font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  background: var(--pk-bg); color: var(--pk-fg);
}
html[data-theme=dark] body.pk-page { --card: var(--pk-pane); --group: var(--pk-pane); --edge: var(--pk-line); }
html body.pk-page header, html body.pk-page header.bar {
  background: var(--pk-pane); color: var(--pk-fg); border-bottom: 1px solid var(--pk-line);
  -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 52px;
}
html body.pk-page header a, html body.pk-page header a.back, html body.pk-page header .nav a, html body.pk-page header.bar .bk, html body.pk-page header.bar .hm {
  color: var(--pk-accent); opacity: 1; font-size: 15px; font-weight: 500;
}
html body.pk-page header h1 { color: var(--pk-fg); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-align: center; }
html body.pk-home header h1 { text-align: left; }
html body.pk-page .tile, html body.pk-page section, html body.pk-page .group { background: var(--pk-pane); border: 1px solid var(--pk-line); border-radius: var(--pk-r-m); box-shadow: none; }
html body.pk-page .tile i { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--pk-mute); font-weight: 500; }
html body.pk-page .tile b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
html body.pk-page .tile small { font-size: 12.5px; }
html body.pk-page section h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html body.pk-page th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--pk-mute); }
html body.pk-page td { font-size: 13.5px; }
html body.pk-page .bar { background: var(--pk-sunk); }
html body.pk-page .bar > span { background: var(--pk-accent); }
html body.pk-page .pill { border-radius: 6px; font-weight: 600; border: 0; }
html body.pk-page .notconn, html body.pk-page .empty { border: 1px solid var(--pk-line); background: var(--pk-sunk); color: var(--pk-fg2); border-radius: var(--pk-r-m); }
html body.pk-page .notconn .pill.bad { background: var(--pk-red-tint); color: var(--pk-red); }
html body.pk-page .gh, html body.pk-page nav.snav .ngh { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--pk-fg2); }
html body.pk-page .lt { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
html body.pk-page nav.snav a.on { background: var(--pk-sunk); color: var(--pk-fg); font-weight: 600; }
html body.pk-page nav.snav a { border-radius: var(--pk-r-s); }
html body.pk-page .ic { background: var(--pk-sunk) !important; color: var(--pk-fg2) !important; border-radius: 6px; }
html body.pk-page .ic svg { width: 14px; height: 14px; }
html body.pk-page .row + .row::before { border-top: 1px solid var(--pk-line); }
html body.pk-page .rt { font-size: 15px; }
html body.pk-page .rs { color: var(--pk-mute); }
html body.pk-page .rc, html body.pk-page .val, html body.pk-page .rc input, html body.pk-page .rc select { color: var(--pk-fg2); }
html body.pk-page textarea, html body.pk-page .rc textarea, html body.pk-page input[type=text].box { background: var(--pk-sunk); border: 0; border-radius: var(--pk-r-s); color: var(--pk-fg); padding: 10px 12px; font-size: 15px; }
html body.pk-page button.primary, html body.pk-page .btn.primary, html body.pk-page .save, html body.pk-page button.save, html body.pk-page .pbtn {
  background: var(--pk-accent); color: var(--pk-on-accent); border: 0; border-radius: var(--pk-r-s); height: 36px; padding: 0 16px; font-size: 14px; font-weight: 600; box-shadow: none;
}
html body.pk-page .sw, html body.pk-page .switch input:checked + span, html body.pk-page input[type=checkbox].tog:checked { background: var(--pk-accent); }
html body.pk-page a { color: var(--pk-accent); }
html body.pk-page .btn { border-radius: var(--pk-r-s); font-weight: 600; box-shadow: none; }
html body.pk-page .btn.sm { border-radius: 7px; }
html body.pk-page .btn.sec { background: var(--pk-sunk); color: var(--pk-fg); }
html body.pk-page .sw input:checked + span { background: var(--pk-accent); }
html body.pk-page .sw input:focus-visible + span { box-shadow: 0 0 0 3px var(--pk-accent-tint2); }

/* ── Round 3 ─────────────────────────────────────────────────────────────── */
html body.bd-im .bd-dial-fab { display: none !important; }
html body.bd-im .bd-headbtn .pk-s { display: none; }
html body.bd-im .bd-headbtn.bd-headbtn-close svg { display: none; width: 18px; height: 18px; }
@media (max-width: 560px) {
  html body.bd-im .bd-thread .bd-bar { padding: 6px 8px 8px 4px; row-gap: 0; }
  html body.bd-im .bd-thread .bd-bar-r { display: flex; grid-column: 3; grid-row: 1; justify-self: end; align-items: center; gap: 0; min-width: 0; }
  html body.bd-im .bd-thread .bd-bar .bd-headacts { grid-column: auto; grid-row: auto; gap: 0; }
  html body.bd-im .bd-thread .bd-bar [data-bd="info"] { grid-column: auto; grid-row: auto; }
  html body.bd-im .bd-headbtn { padding: 0 8px; }
  html body.bd-im .bd-headbtn .pk-l { display: none; }
  html body.bd-im .bd-headbtn .pk-s { display: inline; }
  html body.bd-im .bd-headbtn.bd-headbtn-close { width: 32px; padding: 0; justify-content: center; }
  html body.bd-im .bd-headbtn.bd-headbtn-close span { display: none; }
  html body.bd-im .bd-headbtn.bd-headbtn-close svg { display: block; }
  html body.bd-im .bd-thread .bd-bar [data-bd="whosub"] { margin-top: -2px; }
  html body.bd-im #ib-sim-row span { display: none; }
  html body.bd-im #ib-sim-row button { flex: 1; justify-content: center; height: 34px; }
  html body.bd-im .pp-s { max-width: none; }
}
@media (min-width: 761px) { html body.bd-im .pp-col { min-width: 212px; } }
html:has(body.pk-page) { background: var(--pk-bg); }
html body.pk-page { min-height: 100vh; }