:root {
    --accent: #2a78d6;
    --accent-ink: #ffffff;
    --accent-soft: rgba(42, 120, 214, .10);
    --bg: #f4f4f1;
    --surface: #ffffff;
    --surface-2: #f9f9f7;
    --surface-3: #efeee9;
    --ink: #0b0b0b;
    --ink-2: #52514e;
    --ink-3: #898781;
    --line: #e1e0d9;
    --line-2: #c3c2b7;
    --side-bg: #16181d;
    --side-ink: #c9cbd1;
    --side-ink-2: #8a8e98;
    --side-hover: #22252c;
    --side-active: #2b2f38;
    --good: #0ca30c;
    --good-ink: #006300;
    --good-bg: #e6f4e6;
    --warn: #fab219;
    --warn-ink: #8a5a00;
    --warn-bg: #fdf3dc;
    --serious: #ec835a;
    --serious-ink: #a3431d;
    --serious-bg: #fbe9e1;
    --bad: #d03b3b;
    --bad-ink: #a32020;
    --bad-bg: #f9e3e3;
    --info-bg: #e5effb;
    --info-ink: #1c5cab;
    --s1: #2a78d6;
    --s2: #eb6834;
    --s3: #1baf7a;
    --s4: #eda100;
    --s5: #e87ba4;
    --s6: #008300;
    --s7: #6250d6;
    --s8: #e34948;
    --grid: #e1e0d9;
    --axis: #c3c2b7;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
    --radius: 6px;
    --row-h: 32px;
    --fs: 13px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --accent-soft: rgba(57, 135, 229, .18);
    --bg: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #202020;
    --surface-3: #2a2a28;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --ink-3: #898781;
    --line: #2c2c2a;
    --line-2: #383835;
    --side-bg: #111214;
    --side-hover: #1c1e22;
    --side-active: #262931;
    --good-ink: #5fd35f;
    --good-bg: #16301a;
    --warn-ink: #f5c35a;
    --warn-bg: #352a10;
    --serious-ink: #f1a283;
    --serious-bg: #3a2218;
    --bad-ink: #f08080;
    --bad-bg: #3a1a1a;
    --info-bg: #162638;
    --info-ink: #86b6ef;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --s6: #008300;
    --s7: #9085e9;
    --s8: #e66767;
    --grid: #2c2c2a;
    --axis: #383835;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    height: 100%
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--fs);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.4
}

a {
    color: var(--accent);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 600
}

.num,
td.num,
th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.muted {
    color: var(--ink-3)
}

.ink2 {
    color: var(--ink-2)
}

.small {
    font-size: 12px
}

.tiny {
    font-size: 11px
}

.bold {
    font-weight: 600
}

.nowrap {
    white-space: nowrap
}

.right {
    text-align: right
}

.center {
    text-align: center
}

.hidden {
    display: none !important
}

.mt {
    margin-top: 12px
}

.mt2 {
    margin-top: 20px
}

.mb {
    margin-bottom: 12px
}

.gap {
    gap: 8px
}

.row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.spacer {
    flex: 1
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px
}

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px
}

/* App shell */
#app {
    display: grid;
    grid-template-columns: 248px 1fr;
    grid-template-rows: 52px 1fr;
    height: 100vh
}

#app.collapsed {
    grid-template-columns: 56px 1fr
}

#side {
    grid-row: 1/3;
    background: var(--side-bg);
    color: var(--side-ink);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column
}

#side .brand {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid #262931;
    flex-shrink: 0
}

#side .brand .logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0
}

#side .brand b {
    color: #fff;
    font-size: 14px;
    display: block;
    white-space: nowrap
}

#side .brand span {
    font-size: 11px;
    color: var(--side-ink-2);
    white-space: nowrap
}

#nav {
    padding: 6px 0 30px
}

.ng {
    border-bottom: 1px solid rgba(255, 255, 255, .03)
}

.ng-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--side-ink);
    user-select: none;
    white-space: nowrap;
    border: 0;
    background: none;
    width: 100%;
    text-align: left
}

.ng-h:hover {
    background: var(--side-hover)
}

.ng-h .ic {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    opacity: .85
}

.ng-h .lbl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.ng-h .chev {
    font-size: 10px;
    color: var(--side-ink-2);
    transition: transform .15s
}

.ng.open .chev {
    transform: rotate(90deg)
}

.ng-items {
    display: none;
    padding-bottom: 4px
}

.ng.open .ng-items {
    display: block
}

.ng-items a {
    display: block;
    padding: 5px 14px 5px 42px;
    color: var(--side-ink-2);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ng-items a:hover {
    background: var(--side-hover);
    color: #fff;
    text-decoration: none
}

.ng-items a.active {
    background: var(--side-active);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent)
}

.ng-h.active {
    color: #fff
}

#app.collapsed .ng-h .lbl,
#app.collapsed .ng-h .chev,
#app.collapsed .ng-items,
#app.collapsed .brand div {
    display: none
}

#top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    min-width: 0
}

#top .search {
    position: relative;
    flex: 1;
    max-width: 420px
}

#top .search input {
    width: 100%;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 10px 0 30px;
    background: var(--surface-2)
}

#top .search .sic {
    position: absolute;
    left: 9px;
    top: 7px;
    color: var(--ink-3)
}

#gsr {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow);
    max-height: 420px;
    overflow: auto;
    z-index: 60
}

#gsr a {
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    color: var(--ink);
    border-bottom: 1px solid var(--line)
}

#gsr a:hover,
#gsr a.sel {
    background: var(--accent-soft);
    text-decoration: none
}

#gsr .t {
    font-size: 11px;
    color: var(--ink-3);
    width: 90px;
    flex-shrink: 0
}

.ctx select {
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    padding: 0 6px;
    max-width: 190px
}

.iconbtn {
    position: relative;
    height: 32px;
    min-width: 32px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0 8px
}

.iconbtn:hover {
    border-color: var(--line-2)
}

.iconbtn .dot {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--bad);
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    padding: 0 5px;
    line-height: 16px
}

.user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 8px 2px 2px;
    height: 32px;
    background: var(--surface-2)
}

.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600
}

.user .nm {
    font-size: 12px;
    line-height: 1.1
}

.user .nm small {
    display: block;
    color: var(--ink-3);
    font-size: 10.5px
}

.dropdown {
    position: absolute;
    right: 0;
    top: 38px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    z-index: 70;
    min-width: 300px;
    max-height: 70vh;
    overflow: auto
}

.dropdown .dh {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    display: flex;
    align-items: center
}

.dropdown .di {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    display: block;
    color: var(--ink)
}

.dropdown .di:hover {
    background: var(--accent-soft);
    text-decoration: none
}

#main {
    overflow: auto;
    min-width: 0;
    position: relative
}

#page {
    padding: 14px 20px 40px;
    max-width: 1600px
}

.crumbs {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 4px
}

.crumbs a {
    color: var(--ink-3)
}

.ph {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.ph h1 {
    font-size: 20px
}

.ph .sub {
    color: var(--ink-2);
    font-size: 12.5px;
    margin-top: 2px;
    max-width: 900px
}

.ph .acts {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.demo-banner {
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-size: 11.5px;
    padding: 3px 20px;
    border-bottom: 1px solid var(--line)
}

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 0
}

.card>.ch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line)
}

.card>.ch h3 {
    font-size: 13.5px
}

.card>.cb {
    padding: 12px 14px
}

.card>.cb.p0 {
    padding: 0
}

.card+.card {
    margin-top: 14px
}

.grid2>.card+.card,
.grid3>.card+.card,
.grid4>.card+.card {
    margin-top: 0
}

.grid2>.card,
.grid3>.card {
    align-self: start
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
    cursor: default;
    min-width: 0
}

.kpi.link {
    cursor: pointer
}

.kpi.link:hover {
    border-color: var(--accent)
}

.kpi .k {
    font-size: 11.5px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kpi .v {
    font-size: 20px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kpi .d {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kpi.bad .v {
    color: var(--bad-ink)
}

.kpi.good .v {
    color: var(--good-ink)
}

.kpi.warn .v {
    color: var(--warn-ink)
}

/* Buttons */
.btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 12.5px
}

.btn:hover {
    border-color: var(--ink-3);
    text-decoration: none
}

.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink)
}

.btn.primary:hover {
    filter: brightness(1.08)
}

.btn.danger {
    color: var(--bad-ink);
    border-color: var(--bad)
}

.btn.danger.solid {
    background: var(--bad);
    color: #fff
}

.btn.good {
    color: var(--good-ink);
    border-color: var(--good)
}

.btn.sm {
    height: 24px;
    padding: 0 8px;
    font-size: 11.5px
}

.btn.ghost {
    border-color: transparent;
    background: transparent
}

.btn.ghost:hover {
    background: var(--surface-3)
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

.btn-group {
    display: inline-flex
}

.btn-group .btn {
    border-radius: 0
}

.btn-group .btn:first-child {
    border-radius: 6px 0 0 6px
}

.btn-group .btn:last-child {
    border-radius: 0 6px 6px 0
}

.btn-group .btn.on {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent)
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-3);
    color: var(--ink-2);
    line-height: 17px
}

.badge.good {
    background: var(--good-bg);
    color: var(--good-ink)
}

.badge.warn {
    background: var(--warn-bg);
    color: var(--warn-ink)
}

.badge.serious {
    background: var(--serious-bg);
    color: var(--serious-ink)
}

.badge.bad {
    background: var(--bad-bg);
    color: var(--bad-ink)
}

.badge.info {
    background: var(--info-bg);
    color: var(--info-ink)
}

.badge.demo {
    background: var(--warn-bg);
    color: var(--warn-ink);
    font-weight: 500
}

/* Tables */
.tbar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap
}

.tbar input,
.tbar select {
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0 8px;
    background: var(--surface)
}

.tbar input[type=search] {
    width: 220px
}

.tbl-wrap {
    overflow: auto;
    max-width: 100%
}

table.t {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px
}

table.t th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-size: 11.5px;
    z-index: 1
}

table.t th.sortable {
    cursor: pointer;
    user-select: none
}

table.t th.sortable:hover {
    color: var(--ink)
}

table.t th .si {
    font-size: 9px;
    color: var(--ink-3);
    margin-left: 3px
}

table.t tr.filters th {
    padding: 3px 4px;
    background: var(--surface)
}

table.t tr.filters input {
    width: 100%;
    min-width: 60px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 5px;
    font-size: 11.5px;
    background: var(--surface-2)
}

table.t td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    height: var(--row-h)
}

table.t tbody tr:hover {
    background: var(--accent-soft)
}

table.t tbody tr.click {
    cursor: pointer
}

table.t tfoot td {
    font-weight: 600;
    background: var(--surface-2);
    border-top: 1px solid var(--line-2)
}

table.t td.acts {
    white-space: nowrap;
    text-align: right
}

table.t.compact td {
    height: auto;
    padding: 4px 8px
}

.pager {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--ink-2);
    flex-wrap: wrap
}

.pager select {
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface)
}

.empty {
    padding: 30px;
    text-align: center;
    color: var(--ink-3)
}

.empty b {
    display: block;
    color: var(--ink-2);
    margin-bottom: 4px;
    font-size: 13px
}

/* Forms */
.form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px 14px
}

.form .full {
    grid-column: 1/-1
}

.form .sec {
    grid-column: 1/-1;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    padding: 8px 0 4px;
    margin-top: 4px
}

.fld label {
    display: block;
    font-size: 11.5px;
    color: var(--ink-2);
    margin-bottom: 3px;
    font-weight: 500
}

.fld label .req {
    color: var(--bad)
}

.fld input,
.fld select,
.fld textarea {
    width: 100%;
    height: 30px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 0 8px;
    background: var(--surface)
}

.fld textarea {
    height: 64px;
    padding: 6px 8px;
    resize: vertical
}

.fld select[multiple] {
    height: 90px;
    padding: 4px
}

.fld input[readonly],
.fld .ro {
    background: var(--surface-3);
    border-color: var(--line)
}

.fld .ro {
    min-height: 30px;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 5px 8px
}

.fld input[type=checkbox] {
    width: auto;
    height: auto
}

.fld .hint {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px
}

.fld.err input,
.fld.err select,
.fld.err textarea {
    border-color: var(--bad)
}

.fld .em {
    font-size: 11px;
    color: var(--bad-ink);
    margin-top: 2px
}

.combo {
    position: relative
}

.combo .cf {
    position: absolute;
    right: 28px;
    top: 4px;
    width: 44%;
    height: 22px !important;
    font-size: 11px;
    border-radius: 4px !important;
    border: 1px dashed var(--line-2) !important;
    background: var(--surface-2) !important
}

.chk {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px
}

.errbox {
    background: var(--bad-bg);
    color: var(--bad-ink);
    border: 1px solid var(--bad);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 12.5px
}

.errbox ul {
    margin: 4px 0 0;
    padding-left: 18px
}

.okbox {
    background: var(--good-bg);
    color: var(--good-ink);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12.5px
}

.infobox {
    background: var(--info-bg);
    color: var(--info-ink);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12.5px
}

.warnbox {
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12.5px
}

.lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px
}

.lines th {
    background: var(--surface-2);
    font-size: 11.5px;
    text-align: left;
    padding: 5px 6px;
    border: 1px solid var(--line);
    color: var(--ink-2);
    white-space: nowrap
}

.lines td {
    border: 1px solid var(--line);
    padding: 2px
}

.lines td input,
.lines td select {
    width: 100%;
    height: 28px;
    border: 0;
    background: transparent;
    padding: 0 6px;
    min-width: 70px
}

.lines td input:focus,
.lines td select:focus {
    background: var(--accent-soft);
    outline: none
}

.lines tfoot td {
    background: var(--surface-2);
    font-weight: 600;
    padding: 5px 6px
}

.dl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 18px
}

.dl div {
    min-width: 0
}

.dl dt {
    font-size: 11px;
    color: var(--ink-3)
}

.dl dd {
    margin: 1px 0 0;
    font-weight: 500;
    word-break: break-word
}

/* Tabs */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
    overflow-x: auto
}

.tabs a,
.tabs button {
    padding: 7px 12px;
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 12.5px
}

.tabs a:hover,
.tabs button:hover {
    color: var(--ink);
    text-decoration: none
}

.tabs .on {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600
}

/* Modal */
#modal-root .mbg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 16px;
    overflow: auto
}

.modal {
    background: var(--surface);
    border-radius: 10px;
    width: min(760px, 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    max-height: 92vh
}

.modal.wide {
    width: min(1150px, 100%)
}

.modal.narrow {
    width: min(460px, 100%)
}

.modal .mh {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line)
}

.modal .mh h3 {
    font-size: 15px
}

.modal .mb {
    padding: 14px 16px;
    overflow: auto
}

.modal .mf {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 0 0 10px 10px;
    flex-wrap: wrap
}

#toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.toast {
    background: var(--ink);
    color: var(--surface);
    padding: 9px 14px;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    max-width: 420px;
    font-size: 12.5px;
    display: flex;
    gap: 8px
}

.toast.ok {
    background: #0d4d0d;
    color: #fff
}

.toast.err {
    background: #8a1f1f;
    color: #fff
}

.toast.warn {
    background: #7a5200;
    color: #fff
}

/* Timeline / history */
.tl {
    list-style: none;
    margin: 0;
    padding: 0
}

.tl li {
    position: relative;
    padding: 0 0 10px 18px;
    border-left: 2px solid var(--line);
    margin-left: 6px;
    font-size: 12px
}

.tl li:before {
    content: "";
    position: absolute;
    left: -6px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent)
}

.tl li .w {
    color: var(--ink-3);
    font-size: 11px
}

/* Unit grid */
.ugrid {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ufloor {
    display: flex;
    gap: 4px;
    align-items: stretch
}

.ufloor .fl {
    width: 56px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--ink-3);
    display: flex;
    align-items: center
}

.ucell {
    width: 104px;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface);
    line-height: 1.25
}

.ucell:hover {
    outline: 2px solid var(--accent)
}

.ucell b {
    display: block;
    font-size: 12px
}

.ucell.Available {
    background: var(--good-bg);
    border-color: #9fd89f
}

.ucell.Reserved {
    background: var(--warn-bg);
    border-color: #efcf86
}

.ucell.Booked {
    background: var(--info-bg);
    border-color: #9ec5f4
}

.ucell.Sold {
    background: #ece7fb;
    border-color: #b8aef0
}

.ucell.Handed {
    background: var(--surface-3);
    border-color: var(--line-2)
}

.ucell.Blocked {
    background: var(--bad-bg);
    border-color: #efa3a3
}

:root[data-theme="dark"] .ucell.Sold {
    background: #262041;
    border-color: #4a3f8a
}

.legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--ink-2)
}

.legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px
}

/* Charts */
.chart {
    position: relative;
    width: 100%
}

.chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible
}

.chart .tip {
    position: absolute;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 11.5px;
    box-shadow: var(--shadow);
    white-space: nowrap;
    z-index: 5;
    display: none
}

.chart text {
    fill: var(--ink-3);
    font-size: 10.5px;
    font-family: inherit
}

.chart .gl {
    stroke: var(--grid);
    stroke-width: 1
}

.chart .ax {
    stroke: var(--axis);
    stroke-width: 1
}

.chart .hit {
    fill: transparent;
    cursor: pointer
}

.hbar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin: 4px 0
}

.hbar .l {
    width: 150px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2)
}

.hbar .b {
    flex: 1;
    height: 12px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
    display: flex
}

.hbar .b span {
    height: 100%;
    display: block
}

.hbar .v {
    width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0
}

.progress {
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px
}

.progress span {
    display: block;
    height: 100%;
    background: var(--accent)
}

/* Kanban */
.kanban {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: 10px;
    overflow-x: auto
}

.kcol {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    min-height: 200px
}

.kcol h4 {
    font-size: 12px;
    color: var(--ink-2);
    margin-bottom: 6px
}

.kcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 9px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 12px
}

.kcard:hover {
    border-color: var(--accent)
}

.insight {
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start
}

.insight .ic {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
    font-weight: 700
}

.insight.bad .ic {
    background: var(--bad-bg);
    color: var(--bad-ink)
}

.insight.warn .ic {
    background: var(--warn-bg);
    color: var(--warn-ink)
}

.insight.good .ic {
    background: var(--good-bg);
    color: var(--good-ink)
}

.insight.info .ic {
    background: var(--info-bg);
    color: var(--info-ink)
}

.steps {
    counter-reset: s;
    list-style: none;
    padding: 0;
    margin: 0
}

.steps li {
    counter-increment: s;
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start
}

.steps li:before {
    content: counter(s);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0
}

.steps li.done:before {
    content: "✓";
    background: var(--good-bg);
    color: var(--good-ink)
}

.matrix td,
.matrix th {
    text-align: center
}

.matrix td:first-child,
.matrix th:first-child {
    text-align: left
}

.cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px
}

.cal .cd {
    min-height: 84px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 4px;
    font-size: 11px;
    overflow: hidden
}

.cal .cd.other {
    opacity: .45
}

.cal .cd.today {
    border-color: var(--accent)
}

.cal .cd .ev {
    display: block;
    background: var(--accent-soft);
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: var(--ink)
}

.cal .cd .ev.od {
    background: var(--bad-bg);
    color: var(--bad-ink)
}

.tree ul {
    list-style: none;
    padding-left: 18px;
    margin: 0;
    border-left: 1px dashed var(--line-2)
}

.tree>ul {
    border: 0;
    padding-left: 0
}

.tree li {
    padding: 3px 0
}

.tree .node {
    display: inline-flex;
    gap: 6px;
    align-items: center
}

.tree .lvl {
    font-size: 10px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .04em
}

pre.code {
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 10px;
    border-radius: 6px;
    overflow: auto;
    font-size: 11.5px
}

/* Print */
.print-only {
    display: none
}

@media print {

    #side,
    #top,
    .no-print,
    .tbar,
    .pager,
    .ph .acts,
    .demo-banner,
    #toasts,
    .tabs,
    td.acts,
    th.acts,
    tr.filters {
        display: none !important
    }

    #app {
        display: block;
        height: auto
    }

    #main {
        overflow: visible
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11px
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid
    }

    .print-only {
        display: block
    }

    #page {
        padding: 0;
        max-width: none
    }

    table.t th {
        position: static
    }

    #modal-root .mbg {
        position: static;
        background: none;
        padding: 0
    }

    .modal {
        box-shadow: none;
        max-height: none;
        width: 100%
    }

    .modal .mf,
    .modal .mh button {
        display: none
    }

    body.printing-modal #app {
        display: none
    }
}

/* Responsive */
@media (max-width:1100px) {
    .grid4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:860px) {

    #app,
    #app.collapsed {
        grid-template-columns: 1fr
    }

    #side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform .2s
    }

    #app.mnav #side {
        transform: none
    }

    #app.collapsed .ng-h .lbl,
    #app.collapsed .ng-items,
    #app.collapsed .brand div {
        display: revert
    }

    #top {
        grid-column: 1
    }

    .grid2,
    .grid3,
    .grid4 {
        grid-template-columns: 1fr
    }

    .ctx,
    .user .nm {
        display: none
    }

    #page {
        padding: 12px
    }

    .tbar input[type=search] {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}