/* Support demo — on top of the shared kit. rem only. */
:root {
  --accent: #3b5bdb; --accent-soft: #e9edff;
  --blue: #2f6bff; --blue-soft: #e8efff;
  --amber: #b45309; --amber-soft: #fdf1dc;
  --violet: #7c3aed; --violet-soft: #f1eafe;
  --green: #15803d; --green-soft: #e3f5e9;
  --coral: #d93025; --coral-soft: #fde8e6;
  --gray: #6b7280; --gray-soft: #eef0f3;
  --faint: #9aa1ad;
}
:root[data-theme="dark"] {
  --accent: #7c93ff; --accent-soft: #222a4d; --accent-text: #0d1022;
  --blue: #7aa2ff; --blue-soft: #1c2948;
  --amber: #f2b45a; --amber-soft: #3a2b12;
  --violet: #b49cff; --violet-soft: #2a2145;
  --green: #5bd08a; --green-soft: #133022;
  --coral: #ff8278; --coral-soft: #3d1a17;
  --gray: #a0a7b3; --gray-soft: #232831;
  --faint: #6f7683;
}
body { background: var(--bg); }
button { font: inherit; }

/* ---------- top bar ---------- */
.k-brand { text-decoration: none; color: var(--text); }
.k-nav button { display: inline-flex; align-items: center; gap: 0.4rem; }
.k-nav button .ms { font-size: 1.125rem; }
.k-nav .nav-new { color: var(--accent); }
.k-nav .nav-new.active, .k-nav .nav-new:hover { background: var(--accent-soft); color: var(--accent); }
.k-nav [hidden] { display: none; }
.seg { display: inline-flex; padding: 0.1875rem; gap: 0.125rem; background: var(--surface-2); border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); }
.seg button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; height: 1.875rem; padding: 0 0.625rem; border-radius: 0.375rem; color: var(--muted); font-weight: 600; font-size: 0.8125rem; white-space: nowrap; }
.seg button .ms { font-size: 1.0625rem; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg button:focus-visible { outline: 0.125rem solid var(--accent); }
.pop-wrap { position: relative; }
.bell-n { position: absolute; top: 0.125rem; right: 0.0625rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 1rem; background: var(--coral); color: #fff; font-size: 0.625rem; font-weight: 700; display: grid; place-items: center; }
.bell-n[hidden] { display: none; }
.popover { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 60; width: min(24rem, 90vw); background: var(--surface); border: 0.0625rem solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.popover[hidden] { display: none; }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.875rem; border-bottom: 0.0625rem solid var(--line); }
.bell-list { max-height: 22rem; overflow: auto; padding: 0.25rem; }
.bell-item { display: flex; gap: 0.625rem; padding: 0.55rem 0.625rem; border-radius: var(--radius-sm); cursor: pointer; }
.bell-item:hover { background: var(--surface-2); }
.bell-item .ms { color: var(--muted); font-size: 1.125rem; margin-top: 0.0625rem; }
.bell-item.unread .ms { color: var(--accent); }
.bell-item.unread .txt { font-weight: 500; }
.bell-item time { display: block; font-size: 0.75rem; color: var(--muted); }
.bell-empty { padding: 1.5rem; text-align: center; color: var(--muted); }
.me-slot { display: inline-flex; }
.me-slot .k-avatar { width: 2rem; height: 2rem; }
@media (max-width: 52rem) {
  .k-topbar { height: auto; flex-wrap: wrap; row-gap: 0.25rem; padding-block: 0.5rem; }
  .k-nav { order: 3; width: 100%; }
  .seg .lbl { display: none; }
}
@media (max-width: 30rem) {
  .k-topbar { gap: 0.5rem; }
  .k-toolbar { gap: 0.25rem; }
  .seg button { padding: 0 0.45rem; }
  .me-slot .k-avatar { width: 1.75rem; height: 1.75rem; }
  .k-brand > span:last-child { display: none; }
}

/* ---------- generic bits ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin-top: 0.25rem; }
.tid { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.75rem; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: var(--gray-soft); color: var(--gray); }
.badge .ms { font-size: 0.9375rem; }
.tone-blue { background: var(--blue-soft); color: var(--blue); }
.tone-amber { background: var(--amber-soft); color: var(--amber); }
.tone-violet { background: var(--violet-soft); color: var(--violet); }
.tone-green { background: var(--green-soft); color: var(--green); }
.tone-coral { background: var(--coral-soft); color: var(--coral); }
.tone-gray { background: var(--gray-soft); color: var(--gray); }
.badge.urgent { background: var(--coral); color: #fff; }
.sla-ok { background: var(--green-soft); color: var(--green); }
.sla-warn { background: var(--amber-soft); color: var(--amber); }
.sla-bad { background: var(--coral-soft); color: var(--coral); }
.sla-paused, .sla-done { background: var(--gray-soft); color: var(--gray); }
.card-sub { color: var(--muted); font-size: 0.8125rem; margin: -0.375rem 0 0.75rem; }
.k-card h3 { display: flex; align-items: center; gap: 0.5rem; }
.k-card h3 .ms { color: var(--accent); font-size: 1.25rem; }
.k-card h3 .cnt { margin-left: auto; }
.empty-line { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); padding: 1rem 0.25rem; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 52rem) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.who { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.who .k-avatar { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.muted-i { color: var(--muted); font-style: italic; }
.row-click { cursor: pointer; }
.k-table td .sub { color: var(--muted); font-size: 0.75rem; }
.nowrap { white-space: nowrap; }

/* ---------- overview ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr)); gap: 0.625rem; }
.stat { background: var(--surface); border: 0.0625rem solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.125rem; position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0.1875rem; background: var(--line-strong); }
.stat.blue::before { background: var(--blue); } .stat.ok::before { background: var(--green); } .stat.warn::before { background: var(--amber); } .stat.bad::before { background: var(--coral); }
.stat .lbl { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.stat b { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat small { color: var(--muted); font-size: 0.75rem; }
.stat.click { cursor: pointer; transition: border-color .15s, transform .15s; }
.stat.click:hover { border-color: var(--line-strong); transform: translateY(-0.0625rem); }
.action-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 23rem; overflow: auto; margin: 0 -0.375rem; }
.action-item { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.55rem 0.625rem; border-radius: var(--radius-sm); cursor: pointer; border-left: 0.1875rem solid transparent; }
.action-item:hover { background: var(--surface-2); }
.action-item > .ms { color: var(--accent); font-size: 1.125rem; margin-top: 0.0625rem; }
.action-item.soon { border-left-color: var(--amber); }
.action-item.overdue { border-left-color: var(--coral); }
.action-item .meta { font-size: 0.75rem; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem; }
.tile { border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; cursor: pointer; background: var(--surface-2); display: flex; flex-direction: column; gap: 0.125rem; }
.tile:hover { border-color: var(--line-strong); }
.tile .lbl { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.tile b { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.tile small { font-size: 0.6875rem; color: var(--muted); }
.tile.warn { background: var(--amber-soft); border-color: transparent; } .tile.warn b { color: var(--amber); }
.tile.bad { background: var(--coral-soft); border-color: transparent; } .tile.bad b { color: var(--coral); }
.tile.blue { background: var(--blue-soft); border-color: transparent; } .tile.blue b { color: var(--blue); }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-family: var(--font); }
.donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.donut-wrap svg { width: 9.5rem; flex: none; }
.legend { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8125rem; min-width: 0; }
.legend span.sw { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; margin-right: 0.4rem; vertical-align: 0; }
.legend b { margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.hbars { display: flex; flex-direction: column; gap: 0.5rem; }
.hbar { display: grid; grid-template-columns: 5.5rem 1fr 1.75rem; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.hbar .track { height: 0.625rem; border-radius: 1rem; background: var(--surface-2); overflow: hidden; }
.hbar .track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s; }
.hbar b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- toolbar & board ---------- */
.toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.toolbar .k-search { width: min(100%, 16rem); }
.toolbar .k-select { min-width: 11rem; }
.chip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; height: 2rem; padding: 0 0.75rem; border: 0.0625rem solid var(--line-strong); border-radius: 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); background: var(--surface); white-space: nowrap; }
.chip .ms { font-size: 1rem; }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip .n { background: var(--coral); color: #fff; border-radius: 1rem; padding: 0 0.35rem; font-size: 0.6875rem; }
.board-wrap { overflow-x: auto; padding-bottom: 0.5rem; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 1fr); gap: 0.75rem; align-items: start; min-width: min-content; }
.col { background: var(--surface-2); border: 0.0625rem solid var(--line); border-radius: var(--radius); min-height: 10rem; display: flex; flex-direction: column; transition: border-color .15s, background .15s; }
.col.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 0.0625rem solid var(--line); }
.col-head > span:first-child { display: inline-flex; align-items: center; gap: 0.35rem; }
.col-head .ms { font-size: 1rem; }
.col-head.t-blue .ms { color: var(--blue); } .col-head.t-amber .ms { color: var(--amber); } .col-head.t-violet .ms { color: var(--violet); }
.col-head.t-green .ms { color: var(--green); } .col-head.t-coral .ms { color: var(--coral); } .col-head.t-gray .ms { color: var(--gray); }
.col-head .n { background: var(--surface); border: 0.0625rem solid var(--line); border-radius: 1rem; padding: 0 0.4rem; font-variant-numeric: tabular-nums; }
.col-head .n.bad { color: var(--coral); border-color: var(--coral); }
.col-body { padding: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.col-empty { color: var(--faint); font-size: 0.8125rem; text-align: center; padding: 1rem 0; }
.tcard { background: var(--surface); border: 0.0625rem solid var(--line); border-left: 0.1875rem solid var(--green); border-radius: var(--radius-sm); padding: 0.625rem 0.75rem; cursor: pointer; box-shadow: var(--shadow); font-size: 0.8125rem; transition: transform .12s, box-shadow .12s; }
.tcard:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.25rem 1rem rgb(16 24 40 / 12%); }
.tcard.sla-warn { border-left-color: var(--amber); } .tcard.sla-bad { border-left-color: var(--coral); }
.tcard.sla-done, .tcard.sla-paused { border-left-color: var(--line-strong); }
.tcard.unassigned { border-left-style: dashed; border-left-color: var(--amber); }
.tcard.dragging { opacity: .45; }
.tcard.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { 0% { box-shadow: 0 0 0 0.25rem var(--accent-soft); } 100% { box-shadow: var(--shadow); } }
.tcard .row { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; }
.tcard .row .badge { height: 1.25rem; font-size: 0.6875rem; padding: 0 0.4rem; }
.tcard .ttl { font-weight: 600; margin: 0.25rem 0 0.375rem; line-height: 1.3; display: flex; align-items: center; gap: 0.35rem; }
.turn-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--coral); flex: none; box-shadow: 0 0 0 0.1875rem var(--coral-soft); }
.meta-line { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; color: var(--muted); font-size: 0.75rem; }
.meta-line span { display: inline-flex; align-items: center; gap: 0.2rem; }
.meta-line .ms { font-size: 0.875rem; }
.meta-line .warn { color: var(--amber); font-weight: 600; } .meta-line .bad { color: var(--coral); font-weight: 600; }
.last-line { margin-top: 0.375rem; font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.4rem; border-top: 0.0625rem solid var(--line); color: var(--faint); font-size: 0.6875rem; }
.who-line { display: inline-flex; align-items: center; gap: 0.2rem; min-width: 0; color: var(--muted); }
.who-line .ms { font-size: 0.8125rem; flex: none; }
.who-line .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 6.5rem; }
.who-line .none { color: var(--amber); font-weight: 600; }
.bulkbar { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); flex-wrap: wrap; }
.bulkbar[hidden] { display: none; }
.k-table input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); margin: 0; }
.k-table tr.on td { background: var(--accent-soft); }

/* ---------- queues ---------- */
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .q-layout { grid-template-columns: minmax(0, 1fr); } }
.sla-meter { display: flex; flex-direction: column; gap: 0.2rem; min-width: 7rem; }
.sla-meter .track { height: 0.375rem; border-radius: 1rem; background: var(--surface-2); overflow: hidden; }
.sla-meter .track span { display: block; height: 100%; border-radius: inherit; }
.sla-meter.ok .track span { background: var(--green); } .sla-meter.warn .track span { background: var(--amber); } .sla-meter.bad .track span { background: var(--coral); }
.sla-meter.paused .track span, .sla-meter.done .track span { background: var(--line-strong); }
.sla-meter small { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.sla-meter.bad small { color: var(--coral); font-weight: 600; } .sla-meter.warn small { color: var(--amber); font-weight: 600; }
.team-list { display: flex; flex-direction: column; gap: 0.75rem; }
.team-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; }
.team-row .bar { height: 0.375rem; border-radius: 1rem; background: var(--surface-2); overflow: hidden; margin-top: 0.25rem; }
.team-row .bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s; }
.team-row b { font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 0.875rem; font-size: 0.8125rem; }
.kv .k { color: var(--muted); }
.kv .v { min-width: 0; overflow-wrap: anywhere; }
.k-tabs .n { margin-left: 0.35rem; background: var(--surface-2); border-radius: 1rem; padding: 0 0.4rem; font-size: 0.75rem; color: var(--muted); }
.k-tabs button.active .n { background: var(--accent-soft); color: var(--accent); }

/* ---------- new request wizard ---------- */
.wizard { max-width: 56rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.wiz-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; }
.wiz-steps li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); min-width: 0; }
.wiz-steps li.bar { flex: 1; height: 0.125rem; background: var(--line); min-width: 1rem; }
.wiz-steps .num { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; background: var(--surface); border: 0.0625rem solid var(--line-strong); flex: none; }
.wiz-steps li.cur .num { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.wiz-steps li.done { cursor: pointer; color: var(--text); }
.wiz-steps li.done .num { background: var(--green-soft); color: var(--green); border-color: transparent; }
.wiz-steps .num .ms { font-size: 1rem; }
.wiz-steps .lbl b { display: block; font-size: 0.8125rem; }
.wiz-steps .lbl small { display: block; font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 40rem) { .wiz-steps .lbl { display: none; } .wiz-steps li.cur .lbl { display: block; } }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.625rem; }
.choice { all: unset; box-sizing: border-box; cursor: pointer; border: 0.0625rem solid var(--line); border-radius: var(--radius); padding: 0.875rem 1rem; background: var(--surface); display: flex; flex-direction: column; gap: 0.25rem; transition: border-color .15s, background .15s, transform .12s; }
.choice:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-0.0625rem); }
.choice:focus-visible { outline: 0.125rem solid var(--accent); }
.choice .ms { font-size: 1.5rem; color: var(--accent); }
.choice b { font-size: 0.9375rem; }
.choice small { color: var(--muted); font-size: 0.75rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.req { color: var(--coral); }
.help { font-size: 0.75rem; color: var(--muted); }
.err-msg { color: var(--coral); font-size: 0.8125rem; font-weight: 500; }
.err-msg[hidden] { display: none; }
.invalid, .invalid .k-select-btn { border-color: var(--coral) !important; }
.prod { border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr) 6rem 7rem auto; gap: 0.5rem; align-items: end; background: var(--surface-2); }
@media (max-width: 40rem) { .prod { grid-template-columns: 1fr 1fr; } .prod .pn { grid-column: 1 / -1; } }
.sugg { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.sugg .chip { height: 1.75rem; font-weight: 500; }
.drop { border: 0.125rem dashed var(--line-strong); border-radius: var(--radius); padding: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--muted); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.file-list { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.file-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 0.0625rem solid var(--line); font-size: 0.75rem; }
.file-pill .ms { font-size: 1rem; color: var(--muted); }
.file-pill button { all: unset; cursor: pointer; display: inline-grid; color: var(--muted); }

/* ---------- drawer ---------- */
.drawer-bd { position: fixed; inset: 0; z-index: 40; background: rgb(16 24 40 / 35%); display: flex; justify-content: flex-end; opacity: 0; transition: opacity .2s; }
.drawer-bd[hidden] { display: none; }
.drawer-bd.open { opacity: 1; }
.drawer { width: min(58rem, 100vw); height: 100%; background: var(--bg); box-shadow: var(--shadow-lg); overflow-y: auto; padding: 1.25rem var(--gutter) 2rem; display: flex; flex-direction: column; gap: 1rem; transform: translateX(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.drawer-bd.open .drawer { transform: none; }
.d-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.d-head .idline { font-size: 0.75rem; color: var(--muted); }
.d-head h2 { font-size: 1.375rem; margin: 0.25rem 0 0.5rem; }
.d-head .badges { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sla-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 40rem) { .sla-bar { grid-template-columns: minmax(0, 1fr); } }
.sla-bar .s { border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; font-size: 0.8125rem; background: var(--surface); border: 0.0625rem solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.sla-bar .s .k { display: block; font-size: 0.6875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.sla-bar .s small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.sla-bar .s.bad { background: var(--coral-soft); color: var(--coral); border-color: transparent; }
.sla-bar .s.warn { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.sla-bar .s.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
.sla-bar .s.bad .k, .sla-bar .s.warn .k, .sla-bar .s.ok .k { color: inherit; opacity: .8; }
.sla-note { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted); margin-top: -0.375rem; }
.sla-note .ms { font-size: 1rem; }
.d-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
@media (max-width: 52rem) { .d-grid { grid-template-columns: minmax(0, 1fr); } }
.d-main, .d-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.callout { border-color: transparent; background: var(--amber-soft); }
.callout h3 .ms, .callout .card-sub { color: var(--amber); }
.callout.info { background: var(--accent-soft); }
.callout.info h3 .ms, .callout.info .card-sub { color: var(--accent); }
.chat { display: flex; flex-direction: column; gap: 0.75rem; max-height: 26rem; overflow-y: auto; padding: 0.25rem; }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .bubble { background: var(--surface-2); border: 0.0625rem solid var(--line); border-radius: 0.875rem 0.875rem 0.875rem 0.25rem; padding: 0.5rem 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--accent); color: var(--accent-text); border-color: transparent; border-radius: 0.875rem 0.875rem 0.25rem 0.875rem; }
.msg .bubble .badge { margin-bottom: 0.25rem; }
.msg.mine .bubble .badge { background: rgb(255 255 255 / 22%); color: inherit; }
.msg .mmeta { font-size: 0.6875rem; color: var(--muted); margin-top: 0.2rem; padding: 0 0.25rem; }
.msg.new { animation: k-pop .25s ease-out; }
.typing { display: inline-flex; gap: 0.2rem; padding: 0.625rem 0.75rem; background: var(--surface-2); border: 0.0625rem solid var(--line); border-radius: 0.875rem; }
.typing i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.composer .send { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.stages { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.stages .k-btn { height: 2rem; font-size: 0.8125rem; }
.stages .k-btn.cur { background: var(--accent-soft); color: var(--accent); border-color: transparent; opacity: 1; }
.stages .k-btn .ms { font-size: 1rem; }
.stages .t-blue .ms { color: var(--blue); } .stages .t-amber .ms { color: var(--amber); } .stages .t-violet .ms { color: var(--violet); }
.stages .t-green .ms { color: var(--green); } .stages .t-coral .ms { color: var(--coral); } .stages .t-gray .ms { color: var(--gray); }
.assign-row { display: flex; align-items: center; gap: 0.625rem; }
.assign-row .who-n { flex: 1; min-width: 0; }
.assign-row .who-n small { display: block; color: var(--muted); font-size: 0.75rem; }
.timeline { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.75rem; }
.ev { display: flex; gap: 0.625rem; font-size: 0.8125rem; }
.ev .ms { font-size: 1rem; color: var(--muted); margin-top: 0.125rem; }
.ev time { color: var(--muted); font-size: 0.75rem; margin-left: 0.25rem; }
details.k-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
details.k-card > summary::-webkit-details-marker { display: none; }
details.k-card > summary .ms { color: var(--accent); }
details.k-card > summary .chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
details.k-card[open] > summary .chev { transform: rotate(180deg); }
.prod-view { border-top: 0.0625rem solid var(--line); padding: 0.625rem 0; display: flex; flex-direction: column; gap: 0.125rem; }
.prod-view:first-of-type { border-top: 0; padding-top: 0; }
.prod-view small { color: var(--muted); }
.att { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.8125rem; border-top: 0.0625rem solid var(--line); }
.att:first-child { border-top: 0; }
.att .ms { color: var(--muted); font-size: 1.125rem; }
.att small { color: var(--muted); margin-left: auto; white-space: nowrap; }
.stars { display: inline-flex; gap: 0.125rem; }
.stars button { all: unset; cursor: pointer; color: var(--line-strong); }
.stars .ms { font-size: 1.75rem; }
.stars .on { color: #f5a524; }
.stars .on .ms { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ctx-pick { display: flex; flex-direction: column; gap: 0.375rem; max-height: 10rem; overflow: auto; }
.ctx-item { all: unset; cursor: pointer; border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); padding: 0.4rem 0.625rem; font-size: 0.8125rem; }
.ctx-item small { display: block; color: var(--muted); font-size: 0.6875rem; }
.ctx-item.on { border-color: var(--accent); background: var(--accent-soft); }
.list-table { max-height: 60vh; overflow: auto; }
dialog.k-dialog { overflow: visible; }
dialog.k-dialog.wide { width: min(44rem, 94vw); }