/* CRM demo — dark chrome (nav + top bar) around one large rounded content panel, like the real tool.
   rem only. Colours as tokens; the chrome stays dark in both themes. */
:root {
  --accent: #2563eb; --accent-soft: #eaf1fe;
  --bg: #f3f4f7; --surface-2: #f6f7f9;
  --nav-bg: #1d2530; --nav-ink: #e8edf3; --nav-muted: #9ba7b6; --nav-hover: #2a3442; --nav-active: #3a4656; --nav-line: #35404f; --nav-field: #2a3442;
  --tag-1: #0f8a5f; --tag-2: #2563eb; --tag-3: #7c3aed; --tag-4: #b45309; --tag-5: #be185d; --tag-6: #475569;
  --nav-w: 14rem; --top-h: 3.5rem;
  --col-bg: #e9ebf0;
}
:root[data-theme="dark"] {
  --accent: #3b82f6; --accent-soft: rgb(59 130 246 / 20%); --accent-text: #fff;
  --bg: #0f1218; --surface: #171b22; --surface-2: #1c2129;
  --nav-bg: #07090d; --nav-ink: #dde1e8; --nav-muted: #7f8a9a; --nav-hover: #131820; --nav-active: #212936; --nav-line: #1b222c; --nav-field: #131820;
  --tag-1: #12936a; --tag-2: #2f6fe0; --tag-3: #7a45e0; --tag-4: #c2660f; --tag-5: #c4357f; --tag-6: #5b6b82;
  --col-bg: #141820;
}
body { overflow: hidden; }
button { font: inherit; }

/* ---------- frame ---------- */
.app {
  display: grid; height: 100vh; height: 100dvh; overflow: hidden;
  grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr);
  grid-template-areas: "nav top" "nav main"; background: var(--nav-bg); transition: grid-template-columns .18s ease;
}
.app.collapsed { --nav-w: 4.25rem; }
.main { grid-area: main; min-width: 0; min-height: 0; overflow: auto; outline: none; background: var(--bg); border-top-left-radius: 1rem; padding: 1.5rem 1.75rem 4rem; display: flex; flex-direction: column; gap: 1rem; }

/* nav */
.nav { grid-area: nav; display: flex; flex-direction: column; min-height: 0; overflow: hidden auto; padding: 0 0.75rem 1rem; color: var(--nav-ink); z-index: 60; background: var(--nav-bg); }
.brand { display: flex; align-items: center; gap: 0.75rem; height: var(--top-h); padding: 0 0.5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--accent); color: #fff; }
.nav-list { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.25rem; }
.nav-item { all: unset; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; padding: 0 0.75rem; border-radius: 2rem; color: var(--nav-ink); font-weight: 550; white-space: nowrap; }
.nav-item .ms { font-size: 1.35rem; color: var(--nav-muted); }
.nav-item:hover { background: var(--nav-hover); }
.nav-item.active { background: var(--nav-active); }
.nav-item.active .ms { color: var(--nav-ink); }
.nav-item .cnt { margin-left: auto; font-size: 0.6875rem; color: var(--nav-muted); font-weight: 600; }
.nav-foot { margin-top: auto; padding-top: 1rem; }
.nav-foot .nav-item { color: var(--nav-muted); font-weight: 500; }
@media (min-width: 48rem) {
  .app.collapsed .nav { padding: 0 0.5rem 1rem; }
  .app.collapsed .nav-label, .app.collapsed .brand-text, .app.collapsed .nav-item .cnt { display: none; }
  .app.collapsed .nav-item, .app.collapsed .brand { justify-content: center; padding: 0; }
}
.nav-scrim { display: none; }

/* top bar */
.top { grid-area: top; display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0 1.25rem 0 1rem; color: var(--nav-ink); position: relative; z-index: 50; }
.top .k-demo-badge { background: rgb(217 119 6 / 18%); color: #f5b041; }
.hamburger { all: unset; cursor: pointer; display: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 2rem; flex: none; }
.hamburger:hover { background: var(--nav-hover); }
.search { position: relative; flex: 0 1 30rem; min-width: 0; }
.search > .ms { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--nav-muted); font-size: 1.25rem; pointer-events: none; }
.search input { width: 100%; height: 2.5rem; padding: 0 2.5rem 0 2.5rem; border-radius: 2rem; background: var(--nav-field); border: 0.0625rem solid var(--nav-line); color: var(--nav-ink); font: inherit; outline: none; }
.search input::placeholder { color: var(--nav-muted); }
.search input:focus { background: var(--surface); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.search kbd { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); min-width: 1.4rem; text-align: center; border: 0.0625rem solid var(--nav-line); border-radius: 0.375rem; color: var(--nav-muted); font: 600 0.6875rem var(--font); line-height: 1.4rem; pointer-events: none; }
.search:focus-within kbd { display: none; }
.search-pop { position: absolute; left: 0; right: 0; top: calc(100% + 0.375rem); max-height: 70vh; overflow: auto; padding: 0.375rem; background: var(--surface); color: var(--text); border: 0.0625rem solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; min-width: 18rem; }
.search.open .search-pop { display: block; }
.sp-head { padding: 0.5rem 0.625rem 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sp-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.sp-item.hl, .sp-item:hover { background: var(--accent-soft); }
.sp-item > .ms { color: var(--muted); font-size: 1.125rem; }
.sp-item .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.sp-item .s { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.sp-item mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 0.2rem; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex: none; }
.sync { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.75rem; border-radius: 2rem; border: 0.0625rem solid var(--nav-line); color: var(--nav-muted); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.sync:hover { color: var(--nav-ink); background: var(--nav-hover); }
.sync .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0.1875rem rgb(34 197 94 / 20%); }
.sync.busy .dot { background: #f59e0b; box-shadow: 0 0 0 0.1875rem rgb(245 158 11 / 22%); animation: pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .35; } }
.create { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; height: 2.25rem; padding: 0 0.625rem 0 0.75rem; border-radius: 2rem; background: var(--accent); color: #fff; font-weight: 600; white-space: nowrap; }
.create:hover { filter: brightness(1.1); }
.chrome-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 2rem; color: var(--nav-muted); }
.chrome-btn:hover { background: var(--nav-hover); color: var(--nav-ink); }
.user { all: unset; cursor: pointer; border-radius: 50%; }
.user .k-avatar { width: 2rem; height: 2rem; box-shadow: 0 0 0 0.125rem var(--nav-bg), 0 0 0 0.25rem var(--nav-line); }

.foot-badge { display: none; justify-content: center; padding-top: 0.5rem; }
@media (max-width: 48rem) {
  .foot-badge { display: flex; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(17rem, 85vw); transform: translateX(-105%); transition: transform .2s ease; z-index: 90; }
  .app.drawer-open .nav { transform: none; box-shadow: var(--shadow-lg); }
  .app.drawer-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 85; background: rgb(0 0 0 / 50%); }
  .hamburger { display: grid; }
  .top { padding: 0 5vw 0 0.5rem; gap: 0.5rem; }
  .main { padding: 1.25rem 5vw 4rem; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
  .create-text, .sync-text, .top .k-demo-badge, .theme-btn { display: none; }
  .sync { padding: 0 0.625rem; }
}

/* popover menu */
.menu { position: fixed; z-index: 120; min-width: 12rem; background: var(--surface); color: var(--text); border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 0.25rem; animation: k-pop .14s ease-out; }
.menu button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 0.625rem; width: 100%; box-sizing: border-box; padding: 0.5rem 0.625rem; border-radius: 0.375rem; }
.menu button:hover { background: var(--surface-2); }
.menu .ms { color: var(--muted); font-size: 1.125rem; }
.menu .head { padding: 0.625rem; display: flex; gap: 0.625rem; align-items: center; border-bottom: 0.0625rem solid var(--line); margin-bottom: 0.25rem; }
.menu .head small { display: block; color: var(--muted); }
.menu .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.625rem; }

/* ---------- page ---------- */
.page-head { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; letter-spacing: -0.01em; }
.page-head .meta { color: var(--muted); font-size: 0.8125rem; }
.page-head .k-toolbar { flex-wrap: wrap; }
.page-head .pipe { min-width: 13rem; }
.seg { display: inline-flex; border: 0.0625rem solid var(--line-strong); border-radius: 2rem; overflow: hidden; background: var(--surface); }
.seg button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.375rem 0.875rem; font-weight: 600; font-size: 0.8125rem; color: var(--muted); }
.seg button + button { border-left: 0.0625rem solid var(--line-strong); }
.seg button.on { background: var(--accent); color: #fff; }
.seg .ms { font-size: 1.0625rem; }

.views { display: flex; align-items: flex-end; gap: 0.5rem; border-bottom: 0.0625rem solid var(--line); }
.views .k-tabs { border-bottom: 0; flex: 1; min-width: 0; }
.views .k-tabs button { display: inline-flex; align-items: center; gap: 0.3rem; }
.views .k-tabs .x { font-size: 0.9375rem; color: var(--muted); border-radius: 50%; }
.views .k-tabs .x:hover { color: var(--bad); }
.views .save { margin-bottom: 0.375rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters .k-search { width: 15rem; max-width: 100%; }
.filters .k-select { width: 12.5rem; min-width: 0; }
.filters .summary { margin-left: auto; color: var(--muted); font-size: 0.8125rem; }
.filters .summary b { color: var(--text); }
.linkbtn { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.8125rem; }

/* tags */
.tag { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 700; color: #fff; white-space: nowrap; background: var(--tag-6); }
.tag.c1 { background: var(--tag-1); } .tag.c2 { background: var(--tag-2); } .tag.c3 { background: var(--tag-3); } .tag.c4 { background: var(--tag-4); } .tag.c5 { background: var(--tag-5); }
.stage { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; background: var(--surface-2); border: 0.0625rem solid var(--line); white-space: nowrap; }
.stage.won { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.stage.lost { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.co-av { width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; font-size: 0.625rem; }
.co-av.xs { width: 1.25rem; height: 1.25rem; border-radius: 0.3rem; font-size: 0.5rem; }
.k-avatar.sm { width: 1.5rem; height: 1.5rem; font-size: 0.5625rem; }
.k-avatar.xs { width: 1.25rem; height: 1.25rem; font-size: 0.5rem; }

/* ---------- board ---------- */
.board { display: flex; gap: 0.75rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.75rem; margin: 0 -0.25rem; padding-left: 0.25rem; padding-right: 0.25rem; min-height: 24rem; scroll-behavior: auto; }
.col { flex: 0 0 16.5rem; background: var(--col-bg); border-radius: var(--radius); display: flex; flex-direction: column; max-height: none; border: 0.125rem solid transparent; transition: border-color .12s, background .12s; }
.col.over { border-color: var(--accent); background: var(--accent-soft); border-style: dashed; }
.col header { padding: 0.75rem 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.125rem; position: relative; }
.col header::before { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; top: 0; height: 0.1875rem; border-radius: 0 0 0.25rem 0.25rem; background: var(--line-strong); }
.col.st-won header::before { background: var(--ok); }
.col.st-lost header::before { background: var(--bad); }
.col-t { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; }
.col-t b { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.col-t .cnt { font-size: 0.6875rem; font-weight: 700; color: var(--muted); background: var(--surface); border-radius: 1rem; padding: 0.05rem 0.45rem; }
.col-s { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.col-s b { color: var(--text); }
.col-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0.5rem 0.625rem; min-height: 5rem; }
.col-empty { border: 0.0625rem dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.75rem; text-align: center; padding: 1.25rem 0.5rem; }
.col-add { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.25rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; padding: 0.375rem; border-radius: var(--radius-sm); }
.col-add:hover { background: var(--surface); color: var(--accent); }
.deal { background: var(--surface); border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); padding: 0.625rem 0.6875rem; display: flex; flex-direction: column; gap: 0.4rem; cursor: grab; box-shadow: 0 0.0625rem 0.125rem rgb(16 24 40 / 5%); user-select: none; outline: none; }
.deal:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.deal:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.deal.dragging { opacity: .35; }
.deal.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 0.25rem var(--accent-soft); border-color: var(--accent); } 100% { box-shadow: none; } }
.deal-top { display: flex; align-items: flex-start; gap: 0.25rem; }
.deal-name { flex: 1; font-weight: 600; line-height: 1.3; }
.handle { color: var(--muted); opacity: .45; cursor: grab; touch-action: none; margin: -0.125rem -0.25rem 0 0; }
.handle .ms { font-size: 1.125rem; }
.deal:hover .handle { opacity: 1; }
.deal-co { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.75rem; min-width: 0; }
.deal-co span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-foot { display: flex; align-items: center; gap: 0.4rem; }
.deal-foot b { font-variant-numeric: tabular-nums; }
.deal-foot .k-pill { height: 1.25rem; font-size: 0.6875rem; padding: 0 0.4rem; }
.deal-foot .k-pill .ms { font-size: 0.8125rem; }
.deal-foot .k-avatar { margin-left: auto; }
.ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; box-shadow: var(--shadow-lg); cursor: grabbing; opacity: .96; }
body.dragging-active, body.dragging-active * { cursor: grabbing !important; }

/* ---------- list ---------- */
.k-table th.sortable { cursor: pointer; user-select: none; }
.k-table th.sortable:hover { color: var(--text); }
.k-table th .ms { font-size: 0.875rem; vertical-align: -0.125rem; }
.k-table tbody tr { cursor: pointer; }
.k-table tbody tr.sel td { background: var(--accent-soft); }
.k-table td .nm { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; white-space: nowrap; }
.k-table td .sub { color: var(--muted); font-size: 0.75rem; font-weight: 400; }
.k-table .cb { width: 2.25rem; }
input[type="checkbox"] { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; margin: 0; vertical-align: middle; }
.tbl-foot { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0.875rem; font-size: 0.75rem; color: var(--muted); border-top: 0.0625rem solid var(--line); background: var(--surface-2); }
.bulkbar { position: sticky; bottom: 0.5rem; z-index: 10; align-self: center; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 2rem; background: var(--nav-bg); color: var(--nav-ink); box-shadow: var(--shadow-lg); animation: k-pop .18s ease-out; }
.bulkbar .k-btn { background: var(--nav-hover); border-color: var(--nav-line); color: var(--nav-ink); height: 2rem; border-radius: 2rem; }
.bulkbar .k-btn:hover { background: var(--nav-active); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 75; background: rgb(10 12 16 / 35%); opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(35rem, 100vw); background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.dr-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem 0.75rem 1.25rem; border-bottom: 0.0625rem solid var(--line); }
.dr-head .kind { color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.25rem; }
.dr-head .kind .ms { font-size: 1rem; }
.dr-head .saved { margin-left: auto; color: var(--muted); font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.dr-head .saved .ms { font-size: 0.9375rem; }
.dr-body { flex: 1; overflow: auto; padding: 1rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.dr-title { width: 100%; font: inherit; font-size: 1.375rem; font-weight: 700; color: var(--text); background: transparent; border: 0.0625rem solid transparent; border-radius: var(--radius-sm); padding: 0.125rem 0.375rem; margin-left: -0.4375rem; outline: none; }
.dr-title:hover { border-color: var(--line); }
.dr-title:focus { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.dr-sub { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--muted); font-size: 0.8125rem; }
.dr-amount { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stagebar { display: flex; gap: 0.25rem; }
.stagebar button { all: unset; cursor: pointer; flex: 1; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.625rem; font-weight: 600; color: var(--muted); min-width: 0; }
.stagebar button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stagebar button::before { content: ''; height: 0.375rem; border-radius: 1rem; background: var(--line); transition: background .2s; }
.stagebar button:hover::before { background: var(--line-strong); }
.stagebar button.on { color: var(--text); }
.stagebar button.on::before { background: var(--accent); }
.stagebar.won button.on::before { background: var(--ok); }
.stagebar.lost button.on::before { background: var(--bad); }
.props { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem 1rem; }
.props .k-select { min-width: 0; }
.props .val { min-height: 2.25rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.chipbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.625rem 0.2rem 0.2rem; border-radius: 2rem; border: 0.0625rem solid var(--line); font-weight: 600; font-size: 0.8125rem; max-width: 100%; }
.chipbtn:hover { border-color: var(--accent); color: var(--accent); }
.chipbtn span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-t { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.reclist { display: flex; flex-direction: column; border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); }
.reclist button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-top: 0.0625rem solid var(--line); }
.reclist button:first-child { border-top: 0; }
.reclist button:hover { background: var(--surface-2); }
.reclist .t { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reclist .r { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }

/* activity */
.composer { border: 0.0625rem solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.composer .kinds { display: flex; gap: 0.125rem; padding: 0.375rem; border-bottom: 0.0625rem solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.composer .kinds button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.composer .kinds button.on { background: var(--surface); color: var(--accent); box-shadow: 0 0 0 0.0625rem var(--line); }
.composer .kinds .ms { font-size: 1rem; }
.composer textarea { width: 100%; border: 0; outline: none; resize: vertical; min-height: 4.5rem; padding: 0.625rem 0.75rem; font: inherit; color: var(--text); background: transparent; display: block; }
.composer .foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.375rem 0.5rem; }
.act-filters { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.fchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; height: 1.625rem; padding: 0 0.625rem; border-radius: 1rem; border: 0.0625rem solid var(--line-strong); font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.fchip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.month { font-size: 0.75rem; font-weight: 700; color: var(--muted); margin: 0.5rem 0 0.25rem; }
.acts { display: flex; flex-direction: column; gap: 0.5rem; }
.act { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.625rem; padding: 0.625rem 0.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); background: var(--surface); animation: k-pop .2s ease-out both; }
.act.fresh { border-color: var(--accent); box-shadow: 0 0 0 0.1875rem var(--accent-soft); }
.act .ic { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }
.act .ic .ms { font-size: 1.0625rem; }
.act .t { font-weight: 600; display: flex; justify-content: space-between; gap: 0.5rem; }
.act .t small { color: var(--muted); font-weight: 500; white-space: nowrap; }
.act .b { color: var(--text); margin-top: 0.125rem; white-space: pre-wrap; }
.act .m { color: var(--muted); font-size: 0.75rem; margin-top: 0.25rem; }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; font-size: 0.8125rem; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }

/* create dialog: let the searchable dropdowns hang out of the dialog when there is room */
dialog.k-dialog.wide { width: min(36rem, 94vw); }
@media (min-height: 40rem) { dialog.k-dialog.form { overflow: visible; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 30rem) { .form-grid { grid-template-columns: 1fr; } }
.money { position: relative; }
.money span { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.money .k-input { padding-left: 1.75rem; }
.warnbox { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: 0.8125rem; }
.errtxt { color: var(--bad); font-size: 0.75rem; font-weight: 600; }

/* transfer */
.transfer { max-width: 44rem; display: flex; flex-direction: column; gap: 1rem; }
.transfer .row2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: end; }
.transfer .row2 > .ms { margin-bottom: 0.5rem; color: var(--muted); }
@media (max-width: 36rem) { .transfer .row2 { grid-template-columns: 1fr; } .transfer .row2 > .ms { display: none; } }
.checks { display: grid; gap: 0.5rem; }
.checks label { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.checks label b { margin-left: auto; font-variant-numeric: tabular-nums; }
.log { font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; background: var(--surface-2); border: 0.0625rem solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; max-height: 12rem; overflow: auto; }