/* KD Client Hub – UI system (0.4, Oct 2026). One small set of components for the Desk, Review and the hub's wp-admin.
   Rules and the status map: docs/ui-system.md. Every page is built from these classes only (ui-*).
   Loaded after hub.css + hub-next.css. Never style .kdh-pin or .kdh-canvas here (comment pins stay where they are). */

/* ---------- tokens ---------- */
html.kdh-next, body.kdh-next-admin, .ui-root {
	/* neutrals */
	--u-page: #dddddb; --u-shell: #f3f3f1; --u-card: #fbfbfa; --u-sunken: #f0f0ee; --u-raised: #ffffff;
	--u-line: #e6e6e3; --u-line2: #eeeeec;
	--u-ink: #18181a; --u-ink2: #55575c; --u-mut: #8a8c91; --u-faint: #c3c4c7;
	/* one accent: ink. Blue only for focus, link hover and AI */
	--u-primary: #1c1c1e; --u-on-primary: #ffffff;
	--u-blue: #2f5fe8; --u-blue-soft: #e8eefd; --u-blue-ink: #2347b5;
	/* status: dot + text or a soft chip, never a card background */
	--u-green: #1e9a52; --u-green-soft: #e5f3ea; --u-green-ink: #17703d;
	--u-orange: #e5862a; --u-orange-soft: #fcefe0; --u-orange-ink: #a85a10;
	--u-red: #d93a3a; --u-red-soft: #fbe7e6; --u-red-ink: #a82626;
	--u-grey: #9a9ca1; --u-grey-soft: #ededeb; --u-grey-ink: #5e6066;
	/* shape and type */
	--u-r-card: 18px; --u-r: 10px; --u-r-sm: 8px;
	--u-font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--u-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
	--u-ease: cubic-bezier(.2, .7, .2, 1);
	--u-row: 52px;
	--u-shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .06);
}
html.kdh-next[data-theme="dark"], .ui-root[data-theme="dark"] {
	--u-page: #0c0d0e; --u-shell: #141517; --u-card: #1b1c1f; --u-sunken: #222326; --u-raised: #26272b;
	--u-line: #2b2d31; --u-line2: #25272a;
	--u-ink: #f1f1f1; --u-ink2: #b4b6bb; --u-mut: #83868c; --u-faint: #4b4e54;
	--u-primary: #f1f1f1; --u-on-primary: #141414;
	--u-blue: #6189f5; --u-blue-soft: #1c2640; --u-blue-ink: #a4bbff;
	--u-green: #3fbf6b; --u-green-soft: #16301f; --u-green-ink: #7fd8a0;
	--u-orange: #f09a45; --u-orange-soft: #33261a; --u-orange-ink: #f3b77a;
	--u-red: #f05f5f; --u-red-soft: #3a1c1c; --u-red-ink: #f59a9a;
	--u-grey: #83868c; --u-grey-soft: #2a2c30; --u-grey-ink: #b4b6bb;
	--u-shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, .7);
}

/* ---------- type ---------- */
.ui-page { color: var(--u-ink); font: 14px/1.45 var(--u-font); font-feature-settings: "cv11", "ss01", "tnum"; }
.ui-h1 { margin: 0; font-size: 40px; line-height: 1.08; font-weight: 400; letter-spacing: -.025em; color: var(--u-ink); }
.ui-h2 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 500; letter-spacing: -.005em; color: var(--u-ink); }
.ui-num { font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.ui-num-sm { font-size: 28px; line-height: 1.05; font-weight: 300; letter-spacing: -.02em; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.ui-num small, .ui-num-sm small { font-size: .42em; font-weight: 400; letter-spacing: 0; color: var(--u-mut); margin-left: 3px; }
.ui-body { font-size: 14px; color: var(--u-ink); }
.ui-meta { font-size: 12.5px; line-height: 1.4; color: var(--u-mut); }
.ui-mono { font-family: var(--u-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--u-mut); }
.ui-label { font-family: var(--u-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--u-mut); }
.ui-link { color: var(--u-ink2); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ui-link:hover { color: var(--u-blue); }
.ui-link .kdh-ic { width: 14px; height: 14px; }

/* ---------- page header ---------- */
.ui-phead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
.ui-phead-t { flex: 1; min-width: 240px; }
.ui-phead-t .ui-meta { margin-top: 8px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-phead-a { display: flex; gap: 8px; align-items: center; }

/* ---------- grid: 12 columns, fixed spans, same height per row ---------- */
.ui-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ui-grid + .ui-grid { margin-top: 16px; }
.ui-span-3 { grid-column: span 3; } .ui-span-4 { grid-column: span 4; } .ui-span-6 { grid-column: span 6; } .ui-span-8 { grid-column: span 8; } .ui-span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .ui-span-3 { grid-column: span 6; } .ui-span-4, .ui-span-8 { grid-column: span 12; } }
@media (max-width: 720px) { .ui-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ui-grid > * { grid-column: 1 / -1; } }

/* ---------- card: one component ---------- */
.ui-card { display: flex; flex-direction: column; min-width: 0; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-r-card); overflow: hidden; }
.ui-card-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--u-line2); min-height: 60px; box-sizing: border-box; }
.ui-card-h .ui-h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-icbox { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--u-raised); border: 1px solid var(--u-line); color: var(--u-ink2); box-sizing: border-box; }
.ui-icbox .kdh-ic { width: 16px; height: 16px; }
.ui-icbox.ui-ai { background: var(--u-blue); border-color: transparent; color: #fff; }
.ui-card-b { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ui-card-b.ui-flush { padding: 0; gap: 0; }
.ui-card-b > p, .ui-card-b > div > p, .ui-tile p { margin: 0; }
.ui-card-f { padding: 12px 20px; border-top: 1px solid var(--u-line2); display: flex; align-items: center; gap: 8px; }
a.ui-card, button.ui-card { text-align: left; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s var(--u-ease); }
a.ui-card:hover, button.ui-card:hover { border-color: color-mix(in srgb, var(--u-ink) 22%, var(--u-line)); }

/* ---------- stat tile: one component everywhere ---------- */
.ui-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 18px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-r-card); color: inherit; text-decoration: none; min-width: 0; box-sizing: border-box; }
.ui-tile-l { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--u-ink2); margin-bottom: 14px; }
.ui-tile-l .kdh-ic { width: 16px; height: 16px; color: var(--u-mut); }
.ui-tile-l .ui-dot { margin-left: auto; }
.ui-tile .ui-meta { margin-top: 2px; }
a.ui-tile:hover { border-color: color-mix(in srgb, var(--u-ink) 22%, var(--u-line)); }

/* ---------- status: dot + text, soft chip ---------- */
.ui-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--u-grey); }
.ui-dot.ui-green { background: var(--u-green); } .ui-dot.ui-orange { background: var(--u-orange); } .ui-dot.ui-red { background: var(--u-red); } .ui-dot.ui-grey { background: var(--u-grey); } .ui-dot.ui-blue { background: var(--u-blue); }
.ui-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--u-ink2); white-space: nowrap; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--u-grey-soft); color: var(--u-grey-ink); box-sizing: border-box; }
.ui-chip .ui-dot { width: 6px; height: 6px; }
.ui-chip.ui-green { background: var(--u-green-soft); color: var(--u-green-ink); } .ui-chip.ui-green .ui-dot { background: var(--u-green); }
.ui-chip.ui-orange { background: var(--u-orange-soft); color: var(--u-orange-ink); } .ui-chip.ui-orange .ui-dot { background: var(--u-orange); }
.ui-chip.ui-red { background: var(--u-red-soft); color: var(--u-red-ink); } .ui-chip.ui-red .ui-dot { background: var(--u-red); }
.ui-chip.ui-blue { background: var(--u-blue-soft); color: var(--u-blue-ink); } .ui-chip.ui-blue .ui-dot { background: var(--u-blue); }
.ui-chip.ui-plain { background: var(--u-raised); border: 1px solid var(--u-line); color: var(--u-ink2); font-weight: 400; }
.ui-chip .kdh-ic { width: 13px; height: 13px; }
.ui-tag { font-family: var(--u-mono); font-size: 11px; letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; background: var(--u-sunken); color: var(--u-ink2); white-space: nowrap; }

/* ---------- counts and badges (sidebar, bell, tabs) ---------- */
.ui-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--u-primary); color: var(--u-on-primary); box-sizing: border-box; font-variant-numeric: tabular-nums; }
.ui-count.ui-quiet { background: var(--u-sunken); color: var(--u-ink2); }
.ui-unread { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--u-red); box-shadow: 0 0 0 2px var(--u-card); }

/* ---------- buttons ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--u-r); border: 1px solid var(--u-line); background: var(--u-raised); color: var(--u-ink); font: 500 13.5px var(--u-font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, transform .1s; box-sizing: border-box; }
.ui-btn:hover { border-color: color-mix(in srgb, var(--u-ink) 25%, var(--u-line)); }
.ui-btn:active { transform: scale(.97); }
.ui-btn .kdh-ic { width: 16px; height: 16px; }
.ui-btn-primary { background: var(--u-primary); border-color: transparent; color: var(--u-on-primary); }
.ui-btn-primary:hover { border-color: transparent; filter: brightness(1.15); }
.ui-btn-ghost { background: transparent; border-color: transparent; color: var(--u-ink2); }
.ui-btn-ghost:hover { background: var(--u-sunken); border-color: transparent; }
.ui-btn-ai { background: var(--u-blue-soft); border-color: color-mix(in srgb, var(--u-blue) 25%, transparent); color: var(--u-blue-ink); }
.ui-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--u-r-sm); }
.ui-btn-icon { width: 36px; padding: 0; } .ui-btn-sm.ui-btn-icon { width: 30px; }
.ui-btn[disabled] { opacity: .45; pointer-events: none; }
.ui-btn-brand { background: var(--kd-accent, var(--u-primary)); border-color: transparent; color: #fff; } /* Review: the reviewer's main call-to-action only */

/* ---------- avatar ---------- */
.ui-ava { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--u-grey-soft); color: var(--u-ink2); font-size: 11px; font-weight: 600; letter-spacing: .02em; overflow: hidden; }
.ui-ava img { width: 100%; height: 100%; object-fit: cover; }
.ui-ava-lg { width: 36px; height: 36px; font-size: 13px; }
.ui-avas { display: inline-flex; } .ui-avas .ui-ava { box-shadow: 0 0 0 2px var(--u-card); } .ui-avas .ui-ava + .ui-ava { margin-left: -7px; }

/* ---------- lists and tables: one row style ---------- */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-row { display: flex; align-items: center; gap: 12px; min-height: var(--u-row); padding: 8px 20px; border-top: 1px solid var(--u-line2); box-sizing: border-box; color: inherit; text-decoration: none; }
.ui-list > .ui-row:first-child, .ui-list > li:first-child > .ui-row { border-top: 0; }
a.ui-row, button.ui-row { cursor: pointer; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; }
a.ui-row:hover, button.ui-row:hover { background: var(--u-sunken); }
.ui-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-row-t { font-size: 14px; font-weight: 500; color: var(--u-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-m .ui-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-r { display: flex; align-items: center; gap: 10px; flex: none; color: var(--u-ink2); font-size: 13px; }
.ui-row-more { padding: 12px 20px; border-top: 1px solid var(--u-line2); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ui-table th { height: 36px; padding: 0 20px; text-align: left; font: 500 11px var(--u-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--u-mut); border-bottom: 1px solid var(--u-line2); white-space: nowrap; }
.ui-table td { height: var(--u-row); padding: 6px 20px; border-top: 1px solid var(--u-line2); color: var(--u-ink); vertical-align: middle; }
.ui-table tr:first-child td { border-top: 0; }
.ui-table td.ui-num-c, .ui-table th.ui-num-c { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table tbody tr.ui-click { cursor: pointer; } .ui-table tbody tr.ui-click:hover td { background: var(--u-sunken); }

/* ---------- empty state: icon, one sentence, one action, centred ---------- */
.ui-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 28px 20px; color: var(--u-ink2); }
.ui-empty-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--u-sunken); color: var(--u-mut); }
.ui-empty-ic .kdh-ic { width: 18px; height: 18px; }
.ui-empty p { margin: 0; font-size: 13.5px; max-width: 280px; }

/* ---------- bars (hours, outreach, progress) ---------- */
.ui-bar { position: relative; height: 8px; border-radius: 99px; background: var(--u-sunken); overflow: hidden; }
.ui-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--u-ink); }
.ui-bar > i.ui-hatch { background: repeating-linear-gradient(135deg, var(--u-mut) 0 1.5px, transparent 1.5px 5px); }
.ui-bar > i.ui-red { background: var(--u-red); } .ui-bar > i.ui-orange { background: var(--u-orange); } .ui-bar > i.ui-green { background: var(--u-green); }

/* ---------- segmented control and page tabs ---------- */
.ui-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--u-sunken); border: 1px solid var(--u-line2); }
.ui-seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--u-ink2); font: 500 12.5px var(--u-font); cursor: pointer; }
.ui-seg button[aria-pressed="true"] { background: var(--u-raised); color: var(--u-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ui-seg .kdh-ic { width: 14px; height: 14px; }
.ui-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--u-line); margin: 0 0 20px; overflow-x: auto; }
.ui-tabs a, .ui-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 0 0 11px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--u-mut); font: 500 13.5px var(--u-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ui-tabs [aria-current="page"], .ui-tabs [aria-selected="true"] { color: var(--u-ink); border-bottom-color: var(--u-ink); }

/* ---------- inputs ---------- */
.ui-input { height: 36px; padding: 0 12px; border-radius: var(--u-r); border: 1px solid var(--u-line); background: var(--u-raised); color: var(--u-ink); font: 13.5px var(--u-font); box-sizing: border-box; }
.ui-input:focus { outline: 3px solid color-mix(in srgb, var(--u-blue) 22%, transparent); border-color: var(--u-blue); }
.ui-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: var(--u-r); border: 1px solid var(--u-line); background: var(--u-raised); color: var(--u-mut); font-size: 13.5px; box-sizing: border-box; }
.ui-search kbd { margin-left: auto; font: 11px var(--u-mono); padding: 2px 6px; border-radius: 5px; background: var(--u-sunken); color: var(--u-mut); }

/* ---------- popover (user menu, weather) ---------- */
.ui-pop { font: 14px/1.45 var(--u-font); color: var(--u-ink); min-width: 240px; padding: 6px; border-radius: 14px; background: var(--u-raised); border: 1px solid var(--u-line); box-shadow: var(--u-shadow-pop); }
.ui-pop-h { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--u-line2); margin-bottom: 6px; }
.ui-pop-sec { padding: 6px 10px 10px; }
.ui-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--u-ink); font: 13.5px var(--u-font); text-decoration: none; cursor: pointer; box-sizing: border-box; }
.ui-pop-item:hover { background: var(--u-sunken); }
.ui-pop-item .kdh-ic { width: 16px; height: 16px; color: var(--u-mut); }
.ui-pop-item kbd { margin-left: auto; font: 11px var(--u-mono); color: var(--u-mut); }
.ui-usermenu { position: fixed; z-index: 95; width: 260px; animation: ui-fade .14s var(--u-ease); }
.ui-seg-fill { display: flex; } .ui-seg-fill button { flex: 1; justify-content: center; }
.ui-pop hr { border: 0; border-top: 1px solid var(--u-line2); margin: 6px 0; }

/* ---------- drawer: one shared drawer for details ---------- */
.ui-drawer-bg { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 12, .28); animation: ui-fade .18s var(--u-ease); }
.ui-drawer { font: 14px/1.45 var(--u-font); color: var(--u-ink); position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 91; width: min(460px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 20px; box-shadow: var(--u-shadow-pop); animation: ui-in .24s var(--u-ease); overflow: hidden; }
.ui-drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--u-line2); }
.ui-drawer-h .ui-h2 { flex: 1; }
.ui-drawer-b { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.ui-drawer-f { padding: 14px 18px; border-top: 1px solid var(--u-line2); display: flex; gap: 8px; justify-content: flex-end; }
.ui-kv { display: grid; grid-template-columns: 120px 1fr; gap: 0; margin: 0; font-size: 13.5px; }
.ui-kv dt, .ui-kv dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--u-line2); }
.ui-kv dt { color: var(--u-mut); } .ui-kv dd { color: var(--u-ink); }
.ui-kv dt:first-of-type, .ui-kv dt:first-of-type + dd { border-top: 0; }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-in { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .ui-drawer, .ui-drawer-bg { animation: none; } }
.ui-dot.ui-ink { background: var(--u-ink); }

/* ---------- the style page only (#styleguide) ---------- */
.ui-sg { max-width: 1200px; }
.ui-sg-sec { margin: 0 0 40px; }
.ui-sg-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--u-line); }
.ui-sg-head p { margin: 0; }
.ui-sg-sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ui-sg-sw { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ui-sg-sw i { height: 44px; border-radius: 12px; border: 1px solid var(--u-line); margin-bottom: 6px; }
.ui-sg-map td { height: auto; padding: 12px 20px; }
.ui-sg-k { width: 150px; color: var(--u-mut) !important; font-size: 13px; }
.ui-sg-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ui-sg-type { gap: 18px; }
.ui-sg-type p { margin: 4px 0 0; }
.ui-sg-pair { display: flex; gap: 60px; }
.ui-sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ui-sg-bell { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--u-line); background: var(--u-raised); color: var(--u-ink2); }
.ui-sg-bell .ui-unread { position: absolute; top: 7px; right: 8px; }
.ui-drawer.ui-sg-static { position: static; width: 400px; animation: none; box-shadow: none; }
.ui-sg-shot { height: 150px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--u-sunken) 0 8px, var(--u-card) 8px 16px); border: 1px solid var(--u-line); display: grid; place-items: center; }

/* ---------- bridge: shared pieces on pages not rebuilt yet follow the system (docs/ui-system.md) ----------
   Avatars neutral, counts ink, priority / request status / website chips from the status map, no blue link text. */
html.kdh-next .kdh-ava, html.kdh-next .kdh-ava-agency, html.kdh-next .kdh-ava-empty { background: var(--u-grey-soft); color: var(--u-ink2); }
html.kdh-next .kdh-avas .kdh-ava + .kdh-ava { box-shadow: 0 0 0 2px var(--u-card); }
html.kdh-next .kdh-count, html.kdh-next .kdh-nx-ct.kdh-nx-hot, html.kdh-next .kdh-bell .kdh-count { background: var(--u-primary); color: var(--u-on-primary); }
html.kdh-next .kdh-count-soft { background: transparent; color: var(--u-mut); }
html.kdh-next .kdh-pg-n { background: var(--u-sunken); color: var(--u-ink2); }
html.kdh-next .kdh-pg-n.kdh-zero { background: transparent; color: var(--u-faint); }
html.kdh-next.kdh-nx-railed .kdh-nx-ct { background: var(--u-ink); }
html.kdh-next.kdh-nx-railed .kdh-nx-ct.kdh-nx-hot, html.kdh-next.kdh-nx-railed .kdh-bell .kdh-count { background: var(--u-red); }
html.kdh-next .kdh-prio, html.kdh-next .kdh-sitecard-bar .kdh-prio { background: var(--u-grey-soft); color: var(--u-grey-ink); }
html.kdh-next .kdh-prio-1, html.kdh-next .kdh-sitecard-bar .kdh-prio-1 { background: var(--u-red-soft); color: var(--u-red-ink); }
html.kdh-next .kdh-prio-2, html.kdh-next .kdh-sitecard-bar .kdh-prio-2 { background: var(--u-orange-soft); color: var(--u-orange-ink); }
html.kdh-next .kdh-tst-new, html.kdh-next .kdh-tst-waiting { background: var(--u-orange-soft); color: var(--u-orange-ink); }
html.kdh-next .kdh-tst-ack, html.kdh-next .kdh-tst-closed { background: var(--u-grey-soft); color: var(--u-grey-ink); }
html.kdh-next .kdh-tst-progress { background: var(--u-raised); color: var(--u-ink); box-shadow: inset 0 0 0 1px var(--u-line); }
html.kdh-next .kdh-tst-resolved { background: var(--u-green-soft); color: var(--u-green-ink); }
html.kdh-next .kdh-site, html.kdh-next[data-theme="dark"] .kdh-site { background: var(--u-sunken); color: var(--u-ink2); border-color: transparent; }
html.kdh-next .kdh-site i { background: var(--u-faint); }
html.kdh-next .kdh-body a:not([class]) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
html.kdh-next .kdh-body a:not([class]):hover { color: var(--u-blue); }

/* ---------- Start (0.5) ---------- */
.ui-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ui-nums > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-wxpop { position: absolute; z-index: 95; width: 300px; animation: ui-fade .14s var(--u-ease); }
.ui-wx { list-style: none; margin: 0; padding: 4px 6px 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; font-size: 12.5px; }
.ui-wx li { padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ui-wx b { font-weight: 500; } .ui-wx em { font-style: normal; color: var(--u-mut); }
.ui-shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--u-line); background: var(--u-sunken); aspect-ratio: 16 / 10; }
.ui-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ui-when { width: 84px; text-align: right; }
.kst2 .ui-phead-a .kst-search { width: 300px; }
.kst2 .ui-phead-a .kst-pick select { min-height: 36px; }
.kst2 .ui-phead-t .ui-meta { min-height: 24px; }
@media (max-width: 720px) { .ui-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kst2 .ui-phead-a { flex-wrap: wrap; width: 100%; } .kst2 .ui-phead-a .kst-search { width: 100%; } .ui-when { width: auto; } }

/* ---------- shell (0.4) ---------- */
.ui-pop-item { text-align: left; white-space: nowrap; }
html.kdh-next .kdh-nx-ct { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; box-sizing: border-box; font-size: 11.5px; font-weight: 600; background: var(--u-sunken); color: var(--u-ink2); opacity: 1; }
html.kdh-next .kdh-nx-nav[aria-current="page"] .kdh-nx-ct { background: color-mix(in srgb, var(--u-on-primary) 18%, transparent); color: var(--u-on-primary); opacity: 1; }
html.kdh-next .kdh-nx-ct.kdh-nx-hot { background: var(--u-primary); color: var(--u-on-primary); }
html.kdh-next .kdh-nx-n { border-radius: 10px; background: var(--u-sunken); color: var(--u-ink2); }
html.kdh-next .kdh-nx-n-open { background: var(--u-primary); color: var(--u-on-primary); }
@media (max-width: 900px) { html.kdh-next .kdh-nx-ct { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; background: var(--u-ink); } html.kdh-next .kdh-nx-ct.kdh-nx-hot { background: var(--u-red); } }
html.kdh-next .kdh-nx-ct[hidden] { display: none; }
/* the old base rules (hub.css / hub-next.css) style every a and button inside .kdh-body; the system wins here */
html.kdh-next .kdh-body .ui-link, body.kdh-next-admin .ui-link { color: var(--u-ink2); text-decoration: none; }
html.kdh-next .kdh-body .ui-link:hover, body.kdh-next-admin .ui-link:hover { color: var(--u-blue); }
html.kdh-next .kdh-body a.ui-row, html.kdh-next .kdh-body a.ui-tile, html.kdh-next .kdh-body a.ui-card, html.kdh-next .kdh-body a.ui-shot { color: inherit; text-decoration: none; }
html.kdh-next .kdh-body .ui-btn { color: var(--u-ink); text-decoration: none; }
html.kdh-next .kdh-body .ui-btn-primary { color: var(--u-on-primary); }
html.kdh-next .kdh-body .ui-btn-ghost { color: var(--u-ink2); }
html.kdh-next .kdh-body .ui-btn-ai { color: var(--u-blue-ink); }
button.ui-link { background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-size: 13px; cursor: pointer; }
.ui-phead-t { min-width: 360px; }
html.kdh-next .kst2 .kst-search { margin-top: 0; }
html.kdh-next .kst2 .kst-search input[type="search"] { padding-left: 36px; min-height: 36px; height: 36px; border-radius: var(--u-r) !important; }