/* Illustrative demo shell. Fluent 2 inspired, dependency-free. See README.md. */
:root {
  --brand: #0f6cbd;
  --brand-hover: color-mix(in srgb, var(--brand) 85%, #000);
  --brand-pressed: color-mix(in srgb, var(--brand) 70%, #000);
  --brand-dark: color-mix(in srgb, var(--brand) 75%, #000);
  --brand-tint: color-mix(in srgb, var(--brand) 9%, #fff);
  --brand-tint2: color-mix(in srgb, var(--brand) 18%, #fff);
  --bg: #f5f5f5;
  --card: #fff;
  --line: #e0e0e0;
  --line2: #ebebeb;
  --text: #242424;
  --sub: #616161;
  --field: #d1d1d1;
  --hdr-h: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden;
  font: 14px/20px "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--brand-hover); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 4px; }
.ic { display: inline-flex; flex: none; vertical-align: middle; }
.ic svg { display: block; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .hdr .ib, .cmd-btn, .nav a, .tbl tbody tr, .tab, .btn, .stage, .lnk, .chip, .rc { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
  .nav { transition: transform .2s ease; }
}
.shot *, .shot *::before, .shot *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* ---------- ribbon ---------- */
.ribbon {
  position: fixed; right: 12px; bottom: 12px; z-index: 200; pointer-events: none;
  padding: 4px 12px; border-radius: 12px; font-size: 11px; line-height: 16px; letter-spacing: .01em;
  background: rgba(36, 36, 36, .78); color: #fff; backdrop-filter: blur(4px);
}
.shot .ribbon { display: none; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60; height: var(--hdr-h); display: flex; align-items: center; gap: 4px;
  padding: 0 8px; background: var(--brand); color: #fff;
}
.hdr :focus-visible { outline-color: #fff; }
.hdr .ib { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: #fff; }
.hdr .ib:hover { background: rgba(255, 255, 255, .16); }
.hdr .ib:active { background: rgba(255, 255, 255, .26); }
.hdr .menu-btn { display: none; }
.hdr .appname { font-size: 16px; font-weight: 600; margin: 0 16px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hdr .search { flex: 1 1 auto; max-width: 480px; margin: 0 auto; position: relative; display: flex; align-items: center; min-width: 0; }
.hdr .search .ic { position: absolute; left: 8px; color: #616161; pointer-events: none; }
.hdr .search input { width: 100%; height: 32px; padding: 0 8px 0 32px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .94); color: #242424; }
.hdr .search input::placeholder { color: #707070; }
.hdr .right { display: flex; align-items: center; gap: 0; margin-left: auto; }
.hdr .search + .right { margin-left: 0; }
.hdr .spacer { flex: 1; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; flex: none;
  font-weight: 600; letter-spacing: .02em; user-select: none;
}
.hdr .avatar { margin: 0 4px 0 8px; border: 2px solid rgba(255, 255, 255, .5); }

/* ---------- layout ---------- */
.row { display: flex; align-items: flex-start; }
.nav {
  position: sticky; top: var(--hdr-h); flex: none; width: 220px; height: calc(100vh - var(--hdr-h)); overflow-y: auto;
  background: #fafafa; border-right: 1px solid var(--line); padding: 8px 0 16px;
}
.nav .grp { padding: 16px 20px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sub); }
.nav .grp:first-child { padding-top: 8px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 12px; height: 36px; margin: 0 8px; padding: 0 12px;
  border-radius: 4px; color: var(--text); text-decoration: none;
}
.nav a:hover { background: #ebebeb; }
.nav a .ic { color: var(--sub); }
.nav a.on { background: var(--brand-tint2); font-weight: 600; color: var(--brand-dark); }
.nav a.on .ic { color: var(--brand); }
.nav a.on::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--brand); }
.nav a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { flex: 1 1 auto; min-width: 0; }
.page { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }

/* ---------- command bar ---------- */
.cmd {
  display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; background: #fff;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.cmd::-webkit-scrollbar { display: none; }
.cmd-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 4px;
  white-space: nowrap; flex: none; color: var(--text); text-decoration: none; font-size: 13px;
}
.cmd-btn .ic { color: var(--brand); }
.cmd-btn:hover { background: #f0f0f0; text-decoration: none; color: var(--text); }
.cmd-btn:active { background: #e6e6e6; }
.cmd-btn[disabled] { opacity: .45; pointer-events: none; }
.cmd-btn.primary { background: var(--brand); color: #fff; padding: 0 12px; font-weight: 600; }
.cmd-btn.primary .ic { color: #fff; }
.cmd-btn.primary:hover { background: var(--brand-hover); color: #fff; }
.cmd-btn.primary:active { background: var(--brand-pressed); }
.cmd-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }

/* ---------- pills, avatars, person ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 10px;
  font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; max-width: 100%;
  background: #ebebeb; color: #424242;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.success { background: #dff6dd; color: #0e700e; }
.pill.warning { background: #fff4ce; color: #8a5a00; }
.pill.danger { background: #fde7e9; color: #a4262c; }
.pill.info { background: #e1effa; color: #0f548c; }
.pill.neutral { background: #ebebeb; color: #424242; }
.pill.brand { background: var(--brand-tint2); color: var(--brand-dark); }
.pill.outline { background: #fff; color: #424242; border: 1px solid var(--field); font-weight: 400; }
.person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lnk { color: var(--brand); font-weight: 600; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: 4px;
  border: 1px solid var(--field); background: #fff; font-weight: 600; white-space: nowrap; color: var(--text); text-decoration: none;
}
.btn:hover { background: #f5f5f5; text-decoration: none; color: var(--text); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn.primary:active { background: var(--brand-pressed); }

/* ---------- grid ---------- */
.viewbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.viewtitle { display: inline-flex; align-items: center; gap: 4px; font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.viewtitle button { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 600; border-radius: 4px; padding: 0 4px; margin-left: -4px; }
.viewtitle button:hover { background: #ebebeb; }
.vsearch { position: relative; display: flex; align-items: center; }
.vsearch .ic { position: absolute; left: 8px; color: var(--sub); pointer-events: none; }
.vsearch input { width: 240px; max-width: 100%; height: 32px; padding: 0 8px 0 32px; border: 1px solid var(--field); border-bottom-color: #8a8a8a; border-radius: 4px; background: #fff; }
.tablewrap { overflow-x: auto; border-radius: 8px 8px 0 0; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tbl th, .tbl td { padding: 0 12px; text-align: left; height: 44px; border-bottom: 1px solid var(--line2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl th { height: 40px; font-size: 12px; font-weight: 600; color: #424242; background: #fff; border-bottom-color: var(--line); }
.tbl th button { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; max-width: 100%; border-radius: 4px; }
.tbl th.sorted button { color: var(--brand-dark); }
.tbl th.sorted .ic { color: var(--brand); }
.tbl .chk { width: 40px; padding: 0 0 0 12px; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.num button { flex-direction: row-reverse; }
.tbl tbody tr:hover td { background: #f7f7f7; }
.tbl tbody tr.sel td { background: var(--brand-tint); }
.tbl tbody tr.sel:hover td { background: var(--brand-tint2); }
.tbl input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.gfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; height: 40px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.gfoot .pg { display: flex; align-items: center; gap: 4px; }
.gfoot .pg button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.gfoot .pg button:hover { background: #ebebeb; }

/* ---------- form ---------- */
.fhead { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.fhead .eicon { width: 40px; height: 40px; border-radius: 8px; background: var(--brand-tint2); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fhead .ttl { min-width: 0; flex: 1 1 240px; }
.fhead h1 { font-size: 20px; line-height: 28px; font-weight: 600; }
.fhead .ent { font-size: 12px; line-height: 16px; color: var(--sub); }
.hfields { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.hf { padding: 0 24px; border-left: 1px solid var(--line2); min-width: 0; }
.hf:first-child { border-left: 0; }
.hf:last-child { padding-right: 0; }
.hf .l { font-size: 12px; line-height: 16px; color: var(--sub); }
.hf .v { font-weight: 600; margin-top: 2px; display: flex; align-items: center; min-height: 20px; }
.bpfwrap { position: relative; padding: 8px 12px; display: flex; align-items: center; gap: 0; overflow-x: auto; }
.bpfwrap.has-open { overflow: visible; }
.stagebox { position: relative; flex: 1 1 0; min-width: 120px; }
.stage {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; padding: 0 20px; font-weight: 600; font-size: 13px;
  background: #ebebeb; color: #424242;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.stagebox:first-child .stage { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.stagebox + .stagebox { margin-left: -6px; }
.stage.done { background: var(--brand-tint2); color: var(--brand-dark); }
.stage.active { background: var(--brand); color: #fff; }
.stage .days { font-weight: 400; opacity: .85; font-size: 12px; }
.stage:focus-visible { outline-offset: -3px; }
.flyout {
  display: none; position: absolute; z-index: 30; top: 44px; left: 0; width: 320px; max-width: calc(100vw - 48px); padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.stagebox.open .flyout { display: block; }
.flyout h3 { font-size: 14px; line-height: 20px; margin-bottom: 12px; }
.flyout .field + .field { margin-top: 12px; }
.flyout .foot { margin-top: 16px; display: flex; justify-content: flex-end; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text); white-space: nowrap; text-decoration: none; font-weight: 400; }
.tab:hover { background: #ebebeb; text-decoration: none; color: var(--text); border-radius: 4px 4px 0 0; }
.tab.on { border-bottom-color: var(--brand); font-weight: 600; color: var(--brand-dark); }
.fbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fbody.side { grid-template-columns: minmax(0, 1fr) 360px; }
.sections { display: grid; gap: 16px; align-items: start; }
.sec { padding: 16px; }
.sec h2 { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 12px; }
.sec .fields { display: grid; gap: 12px 16px; }
.field { min-width: 0; }
.field .fl { font-size: 12px; line-height: 16px; color: var(--sub); margin-bottom: 4px; }
.field .fl .req { color: #b10e1c; margin-left: 2px; }
.fval {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--field); border-bottom-color: #8a8a8a;
  border-radius: 4px; background: #fff; min-width: 0;
}
.fval > .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fval .ic { color: var(--sub); }
.fval.lookup > .t { color: var(--brand); }
.fval.multi { align-items: flex-start; min-height: 80px; padding: 6px 8px; }
.fval.multi > .t { white-space: normal; }
.fval.mono { font-variant-numeric: tabular-nums; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.switch .trk { width: 40px; height: 20px; border-radius: 10px; background: #fff; border: 1px solid #616161; position: relative; flex: none; }
.switch .trk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #616161; }
.switch.on .trk { background: var(--brand); border-color: var(--brand); }
.switch.on .trk::after { left: 23px; background: #fff; }
.tl-card { padding: 0; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.cardhead h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.cardhead .tools { display: flex; gap: 4px; color: var(--sub); }
.cardhead .tools .ic { width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 4px; }
.compose { margin: 12px 16px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--field); border-bottom-color: #8a8a8a; border-radius: 4px; color: #707070; }
.compose .ic { color: var(--brand); margin-left: auto; }
.tl { list-style: none; margin: 0; padding: 4px 16px 16px; position: relative; }
.tl li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.tl li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 1px; background: var(--line); }
.tl .kic { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-tint2); color: var(--brand); }
.tl .kic.approval { background: #dff6dd; color: #0e700e; }
.tl .kic.email { background: #e1effa; color: #0f548c; }
.tl .kic.call { background: #fff4ce; color: #8a5a00; }
.tl .body { min-width: 0; flex: 1; }
.tl .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tl .tt { font-weight: 600; min-width: 0; }
.tl .when { font-size: 12px; color: var(--sub); white-space: nowrap; }
.tl .by { font-size: 12px; color: var(--sub); }
.tl .tx { margin-top: 4px; color: #424242; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl .pill { margin-top: 4px; }
.rel { list-style: none; margin: 0; padding: 4px 0; }
.rel li { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.rel li:hover { background: #f7f7f7; }
.rel .nm { flex: 1; min-width: 0; font-weight: 600; color: var(--brand); }
.rel .md { font-size: 12px; color: var(--sub); white-space: nowrap; }

/* ---------- dashboard ---------- */
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.dc { padding: 16px; display: flex; flex-direction: column; min-width: 0; }
.dc h2 { font-size: 14px; line-height: 20px; font-weight: 600; }
.dc .sub { font-size: 12px; color: var(--sub); }
.kpi .val { font-size: 32px; line-height: 40px; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .lab { color: var(--sub); font-size: 13px; }
.kpi .dl { margin-top: 4px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi .dl .d { display: inline-flex; gap: 4px; align-items: center; }
.kpi .dl .vs { color: var(--sub); font-weight: 400; }
.kpi .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-tint2); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tone-success { color: #0e700e; } .tone-danger { color: #a4262c; } .tone-warning { color: #8a5a00; } .tone-neutral { color: var(--sub); } .tone-info { color: #0f548c; }
.chart { margin-top: 8px; width: 100%; flex: 1; min-height: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: inherit; font-size: 11px; fill: #616161; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: #424242; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.donut { display: flex; align-items: center; gap: 24px; margin-top: 12px; flex: 1; flex-wrap: wrap; }
.donut svg { flex: none; }
.donut .lg { flex: 1 1 120px; min-width: 0; display: grid; gap: 8px; font-size: 12px; }
.donut .lg div { display: flex; align-items: center; gap: 8px; }
.donut .lg b { margin-left: auto; font-variant-numeric: tabular-nums; }
.donut .lg i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.dc .tablewrap { margin: 8px -16px -16px; }
.dc .tbl th:first-child, .dc .tbl td:first-child { padding-left: 16px; }
.dc .tbl td { height: 40px; }

/* ---------- library ---------- */
.libhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.libhead .site { width: 32px; height: 32px; border-radius: 4px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.libhead h1 { font-size: 20px; line-height: 28px; font-weight: 600; }
.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 16px; line-height: 24px; }
.crumbs a { color: var(--text); padding: 0 4px; border-radius: 4px; }
.crumbs a:hover { background: #ebebeb; text-decoration: none; color: var(--text); }
.crumbs .cur { font-weight: 600; padding: 0 4px; }
.crumbs .ic { color: var(--sub); }
.libwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.libwrap.side { grid-template-columns: minmax(0, 1fr) 320px; }
.fname { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fname a { color: var(--text); font-weight: 400; }
.fname a:hover { color: var(--brand); }
.details { padding: 0; overflow: hidden; }
.details .big { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px 16px; background: #fafafa; border-bottom: 1px solid var(--line2); text-align: center; }
.details .big .nm { font-weight: 600; word-break: break-word; }
.details dl { margin: 0; padding: 16px; display: grid; gap: 12px; }
.details dt { font-size: 12px; color: var(--sub); line-height: 16px; }
.details dd { margin: 2px 0 0; min-width: 0; }
.details h2 { font-size: 14px; font-weight: 600; padding: 12px 16px; border-top: 1px solid var(--line2); }
.ver { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 12px; }
.ver li { display: flex; gap: 12px; }
.ver .vn { width: 40px; height: 24px; border-radius: 4px; background: var(--brand-tint2); color: var(--brand-dark); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ver .vt { font-size: 12px; color: var(--sub); }

/* ---------- board ---------- */
.board { display: flex; gap: 16px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.bcol { flex: 1 0 248px; max-width: 360px; background: #ececec; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bcol .bh { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; font-weight: 600; }
.bcol .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: #424242; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.bcard { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.bcard .bt { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard .bf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); }
.bcard .bf .due { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.bcard .bf .avatar { margin-left: auto; }
.pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9a9a; }
.pdot.high { background: #c4314b; } .pdot.med { background: #f2a33a; } .pdot.low { background: #2e9e5b; }

/* ---------- calendar ---------- */
.calwrap { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 16px; align-items: start; }
.calwrap.panel { grid-template-columns: 224px minmax(0, 1fr) 280px; }
.mini { padding: 12px; }
.mini .mh { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 8px; padding: 0 4px; }
.mini .mg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; font-size: 12px; }
.mini .dw { color: var(--sub); height: 24px; line-height: 24px; }
.mini .d { height: 28px; line-height: 28px; position: relative; }
.mini .d.in { background: var(--brand-tint2); }
.mini .d.in.first { border-radius: 14px 0 0 14px; } .mini .d.in.last { border-radius: 0 14px 14px 0; }
.mini .d.today span { background: var(--brand); color: #fff; border-radius: 50%; display: inline-block; width: 24px; height: 24px; line-height: 24px; font-weight: 600; }
.week { overflow-x: auto; }
.wk { min-width: 560px; padding-bottom: 12px; }
.wk .hd { display: grid; border-bottom: 1px solid var(--line); }
.wk .hd .c { padding: 8px 4px; text-align: center; border-left: 1px solid var(--line2); }
.wk .hd .c:first-child { border-left: 0; }
.wk .hd .n { font-size: 12px; color: var(--sub); line-height: 16px; }
.wk .hd .dt { font-size: 18px; line-height: 24px; font-weight: 600; }
.wk .hd .c.today .dt { color: var(--brand); }
.wk .bd { display: grid; position: relative; }
.wk .tcol { position: relative; }
.wk .tcol .tl2 { position: absolute; right: 8px; font-size: 11px; line-height: 16px; color: var(--sub); transform: translateY(-8px); }
.wk .dcol { position: relative; border-left: 1px solid var(--line2); background-image: linear-gradient(to bottom, var(--line2) 1px, transparent 1px); background-size: 100% var(--hh); }
.wk .dcol.today { background-color: color-mix(in srgb, var(--brand) 4%, #fff); }
.ev { position: absolute; left: 4px; right: 4px; padding: 4px 8px; border-radius: 4px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 55%, #000); overflow: hidden; font-size: 12px; line-height: 16px; }
.ev b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.ev.blue { --c: var(--brand); } .ev.green { --c: #2e9e5b; } .ev.orange { --c: #d8801a; } .ev.purple { --c: #7a5fb8; } .ev.teal { --c: #1b8f95; } .ev.red { --c: #c4314b; }
.nowline { position: absolute; left: 0; right: 0; height: 2px; background: #c4314b; z-index: 2; }
.nowline::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #c4314b; }
.bpanel { padding: 0; }
.bpanel .pb { padding: 16px; display: grid; gap: 12px; }
.bpanel .pf { padding: 0 16px 16px; }

/* ---------- mobile ---------- */
.mobbg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(circle at 30% 20%, #eef2f7, #dfe5ec 70%); }
.phones { display: flex; gap: 40px; align-items: center; justify-content: center; }
.phones.col { flex-direction: column; gap: 24px; }
.pslot { position: relative; flex: none; }
.phone {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; border-radius: 52px; padding: 10px;
  background: #16181c; box-shadow: 0 24px 60px rgba(30, 40, 60, .28), 0 0 0 1px #3a3d44 inset;
}
.pscreen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #f5f5f5; display: flex; flex-direction: column; }
.pstatus { height: 44px; padding: 14px 28px 0; display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; background: var(--brand); color: #fff; flex: none; }
.pstatus .sg { display: flex; gap: 6px; align-items: center; }
.pstatus .bar { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pstatus .bar i { width: 3px; background: #fff; border-radius: 1px; }
.pstatus .batt { width: 24px; height: 12px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .8); position: relative; padding: 1px; }
.pstatus .batt::after { content: ""; display: block; width: 70%; height: 100%; background: #fff; border-radius: 1px; }
.phdr { flex: none; background: var(--brand); color: #fff; padding: 4px 16px 16px; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.phdr h1 { font-size: 20px; line-height: 28px; font-weight: 600; }
.phdr .ps { font-size: 13px; opacity: .85; }
.phdr .grow { flex: 1; min-width: 0; }
.pbody { flex: 1; min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ptabs { flex: none; display: flex; height: 72px; padding: 8px 8px 20px; background: #fff; border-top: 1px solid var(--line); position: relative; }
.ptabs::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 120px; height: 4px; margin-left: -60px; border-radius: 2px; background: #16181c; }
.ptab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--sub); }
.ptab.on { color: var(--brand); font-weight: 600; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pcard .pi { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-tint2); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pcard .pm { flex: 1; min-width: 0; }
.pcard .pt { font-size: 16px; line-height: 22px; font-weight: 600; }
.pcard .pu { font-size: 13px; line-height: 18px; color: var(--sub); }
.ph-h { font-size: 13px; font-weight: 600; color: var(--sub); text-transform: none; margin-top: 4px; }
.ptext { font-size: 15px; line-height: 22px; color: #424242; }
.pkpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pkpis div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.pkpis b { display: block; font-size: 24px; line-height: 32px; font-weight: 600; }
.pkpis span { font-size: 13px; color: var(--sub); }
.pfield .pl { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.pfield .pin { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--field); border-radius: 8px; background: #fff; font-size: 16px; }
.pfield .pin.area { align-items: flex-start; padding: 12px 16px; min-height: 96px; line-height: 22px; }
.pfield .pin .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfield .pin.area .t { white-space: normal; }
.pfield .pin .ic { color: var(--sub); }
.pbtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; font-size: 16px; margin-top: auto; }
.pchips { display: flex; gap: 8px; overflow: hidden; }
.pchip { padding: 0 16px; height: 32px; border-radius: 16px; background: #fff; border: 1px solid var(--field); display: inline-flex; align-items: center; font-size: 14px; white-space: nowrap; }
.pchip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.psearch { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: #707070; font-size: 15px; }

/* ---------- portal ---------- */
.ptl { background: #fff; color: var(--text); min-height: 100vh; }
.ptop { display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 max(24px, calc((100% - 1200px) / 2)); background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.pmark { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--brand-dark); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pmark:hover { text-decoration: none; color: var(--brand-dark); }
.pmark .ic { color: var(--brand); }
.plinks { display: flex; gap: 24px; flex: 1; min-width: 0; }
.plinks a { color: #424242; font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.plinks a:hover { text-decoration: none; color: var(--brand); }
.plinks a.on { color: var(--brand-dark); border-bottom-color: var(--brand); }
.phero { padding: 56px max(24px, calc((100% - 1200px) / 2)) 72px; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #000)); position: relative; overflow: hidden; }
.phero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 480px; height: 480px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.phero::before { content: ""; position: absolute; right: 200px; bottom: -200px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.phero > * { position: relative; z-index: 1; }
.phero h1 { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -.02em; max-width: 840px; text-wrap: balance; }
.phero p { margin-top: 12px; font-size: 18px; line-height: 28px; max-width: 640px; opacity: .92; }
.pform { margin-top: 32px; background: #fff; color: var(--text); border-radius: 12px; padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; box-shadow: 0 12px 32px rgba(0, 0, 0, .2); max-width: 1000px; }
.pform .pfd { flex: 1 1 160px; min-width: 0; }
.pform .pfd .fl { font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 4px; }
.pform .pfd .fv { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 8px; min-width: 0; }
.pform .pfd .fv .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pform .pfd .fv .ic { color: var(--sub); }
.pbtn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 24px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; white-space: nowrap; text-decoration: none; }
.pbtn2:hover { background: var(--brand-hover); color: #fff; text-decoration: none; }
.pbtn2:active { background: var(--brand-pressed); }
.pbtn2.sm { height: 36px; padding: 0 16px; }
.pbtn2.ghost { background: #fff; color: var(--brand-dark); border: 1px solid var(--brand); }
.pbtn2.ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }
.pcont { max-width: 1248px; margin: 0 auto; padding: 32px 24px 64px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.pside { display: grid; gap: 24px; }
.pside h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.pside label { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 14px; }
.pside label .n { margin-left: auto; color: var(--sub); font-size: 12px; }
.pside input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.prange { margin-top: 8px; }
.prange .trk { position: relative; height: 4px; border-radius: 2px; background: var(--line); margin: 12px 8px; }
.prange .fill { position: absolute; top: 0; bottom: 0; background: var(--brand); border-radius: 2px; }
.prange .th { position: absolute; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.pside .lb { display: flex; justify-content: space-between; font-size: 13px; color: #424242; font-weight: 600; }
.pres h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.presh { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.presh .sort { display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-size: 13px; }
.presh .sort b { color: var(--text); }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.rc { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.rc:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.rc .img { position: relative; height: 160px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .92); overflow: hidden; }
.rc .img::before { content: ""; position: absolute; left: -30px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.rc .img::after { content: ""; position: absolute; right: -20px; top: -40px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.rc .img .ic { position: relative; z-index: 1; }
.rc .img .badge { position: absolute; left: 12px; top: 12px; z-index: 1; height: 24px; padding: 0 8px; border-radius: 12px; background: #fff; color: #242424; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.rc .cb { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rc .ct { font-size: 16px; line-height: 22px; font-weight: 700; }
.rc .cs { color: var(--sub); font-size: 13px; line-height: 18px; display: flex; align-items: center; gap: 4px; }
.rc .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.rc .rate { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.rc .rate .ic { color: #f2a33a; }
.rc .cf { margin-top: auto; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.rc .pr { font-size: 20px; line-height: 24px; font-weight: 700; }
.rc .pr small { font-size: 12px; font-weight: 400; color: var(--sub); }
.pfoot { border-top: 1px solid var(--line); padding: 24px max(24px, calc((100% - 1200px) / 2)); color: var(--sub); font-size: 13px; background: #fafafa; }

/* ---------- portal: multi-step application variant (optional `apply`, optional `accent`) ---------- */
.ptl { --brand-hover: color-mix(in srgb, var(--brand) 85%, #000); --brand-pressed: color-mix(in srgb, var(--brand) 70%, #000); --brand-dark: color-mix(in srgb, var(--brand) 75%, #000); --brand-tint: color-mix(in srgb, var(--brand) 9%, #fff); --brand-tint2: color-mix(in srgb, var(--brand) 18%, #fff); }
.apply { background: #f7f8fa; padding: 28px max(24px, calc((100% - 1200px) / 2)) 56px; }
.ahead h1 { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; }
.ahead p { color: var(--sub); margin-top: 4px; font-size: 15px; }
.astep { list-style: none; margin: 24px 0; padding: 16px 20px; display: flex; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.astep li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--sub); font-weight: 600; font-size: 13px; }
.astep li:last-child { flex: 0 1 auto; }
.astep li:not(:last-child)::after { content: ""; flex: 1 1 16px; height: 2px; background: var(--line); border-radius: 1px; margin-right: 4px; }
.astep li.done:not(:last-child)::after { background: var(--brand); }
.astep .sn { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--field); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: #fff; }
.astep .sl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.astep li.done { color: var(--text); }
.astep li.done .sn { background: var(--brand); border-color: var(--brand); color: #fff; }
.astep li.cur { color: var(--brand-dark); }
.astep li.cur .sn { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); box-shadow: 0 0 0 4px var(--brand-tint2); }
.awrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.acol { display: grid; gap: 16px; min-width: 0; }
.asec { padding: 20px 24px; }
.asec h2, .asum h2 { font-size: 18px; line-height: 24px; font-weight: 700; }
.asec .asub { color: var(--sub); margin-top: 2px; }
.achoices, .aopts { display: grid; gap: 10px; margin-top: 14px; }
.ach, .aopt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--field); border-radius: 10px; background: #fff; min-width: 0; }
.ach.on, .aopt.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand) inset; }
.ach .radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--field); background: #fff; }
.ach.on .radio { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand) inset; }
.aopt .cbx { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--field); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.aopt.on .cbx { background: var(--brand); border-color: var(--brand); }
.aopt .oi { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--brand-tint2); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; }
.apply .am { flex: 1; min-width: 0; }
.apply .at { font-weight: 600; font-size: 15px; line-height: 20px; }
.apply .as { color: var(--sub); font-size: 13px; line-height: 18px; }
.apply .ap { flex: none; text-align: right; white-space: nowrap; }
.apply .ap b { font-size: 16px; }
.apply .ap small { color: var(--sub); font-size: 12px; }
.afields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 14px; }
.afd .fl { font-size: 12px; font-weight: 600; color: var(--sub); margin-bottom: 4px; }
.afd .fv { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 8px; min-width: 0; }
.afd .fv .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afd .fv .ic { color: var(--sub); }
.afd.wide { grid-column: span 2; }
.asum { padding: 20px; position: sticky; top: 80px; display: grid; gap: 14px; }
.acar { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.acar .th { flex: none; width: 64px; height: 48px; border-radius: 8px; color: rgba(255, 255, 255, .95); display: inline-flex; align-items: center; justify-content: center; }
.alines { margin: 0; display: grid; gap: 8px; }
.alines > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.alines dt { color: #424242; min-width: 0; }
.alines dd { margin: 0; font-weight: 600; white-space: nowrap; }
.alines .mut dd { color: var(--sub); font-weight: 400; }
.atotal { border-top: 1px solid var(--line); padding-top: 12px; }
.atotal .tl { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.atotal .tl b { font-size: 26px; line-height: 32px; color: var(--brand-dark); }
.atotal .tn { color: var(--sub); font-size: 12px; margin-top: 2px; }
.pbtn2.wide { width: 100%; }
.anote { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--sub); }
.anote .ic { color: #107c10; flex: none; margin-top: 2px; }
@media (max-width: 1000px) { .awrap { grid-template-columns: minmax(0, 1fr); } .asum { position: static; } }
@media (max-width: 700px) {
  .astep { padding: 12px; gap: 4px; }
  .astep li:not(.cur) .sl { display: none; }
  .astep li.cur { flex: 3 1 0; }
  .afields { grid-template-columns: minmax(0, 1fr); }
  .afd.wide { grid-column: span 1; }
  .asec { padding: 16px; }
}

/* ---------- chat ---------- */
.chatov { display: flex; align-items: stretch; }
.chatov > .behind { flex: 1 1 auto; min-width: 0; }
.chatpane { flex: none; width: 380px; position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h)); background: #fff; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0, 0, 0, .06); display: flex; flex-direction: column; }
.chatcentre { display: flex; justify-content: center; padding: 16px; }
.chatcentre .chatpane { position: static; width: 760px; max-width: 100%; height: calc(100vh - var(--hdr-h) - 32px); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; overflow: hidden; }
.chead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line2); font-weight: 600; flex: none; }
.chead .ic.b { color: var(--brand); }
.chead .grow { flex: 1; }
.cmsgs { flex: 1; min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 8px; max-width: 100%; }
.msg.user { justify-content: flex-end; }
.msg .bub { padding: 8px 12px; border-radius: 12px; max-width: 86%; line-height: 20px; }
.msg.user .bub { background: var(--brand); color: #fff; border-bottom-right-radius: 2px; }
.msg.bot .bub { background: #f5f5f5; border: 1px solid var(--line2); border-bottom-left-radius: 2px; }
.msg .bav { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--brand-tint2); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.msg ul { margin: 8px 0 0; padding-left: 20px; }
.msg li + li { margin-top: 4px; }
.msg .src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 12px; background: #fff; border: 1px solid var(--field); font-size: 12px; color: var(--brand-dark); max-width: 100%; text-decoration: none; }
.chip:hover { background: var(--brand-tint); text-decoration: none; color: var(--brand-dark); }
.chip .n { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.cfoot { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--line2); display: grid; gap: 12px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.sugg .chip { height: 28px; padding: 0 12px; font-size: 13px; color: var(--text); }
.sugg .lab { width: 100%; font-size: 12px; color: var(--sub); }
.cin { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 12px; border: 1px solid var(--field); border-bottom: 2px solid var(--brand); border-radius: 8px; }
.cin input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 40px; }
.cin button { width: 32px; height: 32px; border-radius: 4px; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.cin button:hover { background: var(--brand-tint); }

/* ---------- narrow ---------- */
@media (max-width: 1280px) {
  .fbody.side { grid-template-columns: minmax(0, 1fr) 320px; }
  .calwrap.panel { grid-template-columns: minmax(0, 1fr) 280px; }
  .calwrap.panel .mini { display: none; }
}
@media (max-width: 1100px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dgrid > .dc { grid-column: span 2 !important; }
  .dgrid > .dc.kpi { grid-column: span 1 !important; }
  .fbody.side, .libwrap.side { grid-template-columns: minmax(0, 1fr); }
  .calwrap, .calwrap.panel { grid-template-columns: minmax(0, 1fr); }
  .calwrap .mini { display: none; }
}
@media (max-width: 900px) {
  .hdr .menu-btn { display: inline-flex; }
  .nav { position: fixed; z-index: 55; top: var(--hdr-h); left: 0; bottom: 0; height: auto; width: 260px; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }
  .nav.open { transform: none; }
  .chatov .behind { display: none; }
  .chatpane { width: 100%; border-left: 0; }
  .pcont { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pside { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .plinks { display: none; }
  .ptop { justify-content: space-between; }
  .phero h1 { font-size: 32px; line-height: 40px; }
  .pform .pfd { flex-basis: 40%; }
  .pform .pbtn2 { flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .stagebox { position: static; flex: 1 1 0; min-width: 0; }
  .stagebox.cur { flex: 3 1 0; }
  .stage { padding: 0 14px 0 18px; }
  .stagebox:not(.cur) .stage .ell { display: none; }
  .stage .days { display: none; }
  .flyout { left: 12px; right: 12px; width: auto; max-width: none; }
  .hdr .search { display: none; }
  .hdr .right { margin-left: auto; }
  .page { padding: 12px; gap: 12px; }
  .hf { padding: 0 16px; }
  .hf:first-child { padding-left: 0; }
  .calwrap { gap: 12px; }
}
@media (max-width: 520px) {
  .hdr .ib.opt { display: none; }
  .hdr .appname { margin-right: 0; }
  .dgrid { grid-template-columns: minmax(0, 1fr); }
  .dgrid > .dc, .dgrid > .dc.kpi { grid-column: span 1 !important; }
  .fhead { gap: 12px; }
  .hfields { width: 100%; }
  .pform .pfd { flex-basis: 100%; }
  .phero { padding-top: 32px; padding-bottom: 40px; }
  .bcol { flex-basis: 260px; }
  .vsearch, .vsearch input { width: 100%; }
  .viewbar { align-items: stretch; }
}

/* ---------- late fixes ---------- */
.kpi .dl { flex-wrap: wrap; }
.kpi .dl .d { white-space: nowrap; }
.kpi .dl .vs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi .dl > span:last-child:not(.d):not(.vs) { flex: none; }
.pmark { white-space: nowrap; flex: none; }
.kpi .vrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi .vrow .spk { flex: none; padding-bottom: 8px; }