:root {
    --tracer-radius: 14px;
    --tracer-radius-sm: 10px;
    --tracer-surface: #ffffff;
    --tracer-canvas: #f4f6fb;
    --tracer-line: rgba(15, 23, 42, .08);
    --tracer-line-strong: rgba(15, 23, 42, .14);
    --tracer-ink: #16233a;
    --tracer-muted: #6b7a90;
    --tracer-brand: #0054a6;
    --tracer-brand-soft: rgba(0, 84, 166, .09);
    --tracer-accent: #12b5cb;
    --tracer-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 28px -18px rgba(15, 23, 42, .35);
    --tracer-shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 26px 50px -24px rgba(15, 23, 42, .45);
    --tracer-pos: #1f9d55;
    --tracer-neg: #cf3b3b;
}

body[data-bs-theme="dark"] {
    --tracer-surface: #182233;
    --tracer-canvas: #0f1626;
    --tracer-line: rgba(148, 176, 214, .14);
    --tracer-line-strong: rgba(148, 176, 214, .24);
    --tracer-ink: #e6edf7;
    --tracer-muted: #93a3bb;
    --tracer-brand: #4c9aff;
    --tracer-brand-soft: rgba(76, 154, 255, .14);
    --tracer-accent: #35d0e2;
    --tracer-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 30px -20px rgba(0, 0, 0, .8);
    --tracer-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 56px -26px rgba(0, 0, 0, .9);
    --tracer-pos: #4ade80;
    --tracer-neg: #ff7b7b;
}

body {
    background: var(--tracer-canvas);
    color: var(--tracer-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv03", "cv04", "cv11", "tnum" 0;
}

.page-wrapper {
    background: var(--tracer-canvas);
}

.sticky-top>.navbar,
.sticky-top>.navbar-expand-md {
    background: color-mix(in srgb, var(--tracer-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--tracer-line);
}

.sticky-top.shadow-sm {
    box-shadow: 0 1px 0 var(--tracer-line), 0 10px 30px -24px rgba(15, 23, 42, .6) !important;
}

.navbar-brand-image {
    filter: drop-shadow(0 2px 6px rgba(0, 84, 166, .25));
}

.navbar-expand-md .navbar-nav {
    flex-wrap: wrap;
    row-gap: .15rem;
}

.navbar-nav .nav-link {
    border-radius: var(--tracer-radius-sm);
    font-weight: 500;
    transition: background-color .16s ease, color .16s ease;
}

.navbar-nav .nav-item.active>.nav-link,
.navbar-nav .nav-link.active {
    background: var(--tracer-brand-soft);
    color: var(--tracer-brand);
}

.navbar-nav .nav-link:hover {
    background: color-mix(in srgb, var(--tracer-brand) 7%, transparent);
}

.dropdown-menu {
    border: 1px solid var(--tracer-line);
    border-radius: var(--tracer-radius);
    box-shadow: var(--tracer-shadow-lg);
    padding: .4rem;
}

.dropdown-item {
    border-radius: var(--tracer-radius-sm);
    padding: .5rem .7rem;
}

.page-header {
    padding-top: 1.6rem;
    padding-bottom: .4rem;
}

.page-pretitle {
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--tracer-muted);
}

.page-title {
    font-weight: 650;
    letter-spacing: -.02em;
}

.card {
    background: var(--tracer-surface);
    border: 1px solid var(--tracer-line);
    border-radius: var(--tracer-radius);
    box-shadow: var(--tracer-shadow);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card.card-hover:hover {
    box-shadow: var(--tracer-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--tracer-line-strong);
}

.card-header {
    border-bottom: 1px solid var(--tracer-line);
    padding: .95rem 1.15rem;
    min-height: auto;
    flex-wrap: wrap;
    row-gap: .5rem;
}

.card-title {
    font-weight: 620;
    letter-spacing: -.01em;
    margin: 0;
}

.card-footer {
    border-top: 1px solid var(--tracer-line);
    background: transparent;
}

.btn {
    border-radius: var(--tracer-radius-sm);
    font-weight: 550;
    transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    box-shadow: 0 8px 18px -12px rgba(0, 84, 166, .9);
}

.form-control,
.form-select {
    border-radius: var(--tracer-radius-sm);
    border-color: var(--tracer-line-strong);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tracer-brand);
    box-shadow: 0 0 0 3px var(--tracer-brand-soft);
}

.modal-content {
    border: 1px solid var(--tracer-line);
    border-radius: var(--tracer-radius);
    box-shadow: var(--tracer-shadow-lg);
}

.table thead th {
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 620;
    color: var(--tracer-muted);
    border-bottom: 1px solid var(--tracer-line-strong);
    background: transparent;
}

.table tbody tr {
    transition: background-color .12s ease;
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--tracer-brand) 4%, transparent);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

.tracer-stat {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.05rem 1.15rem;
}

.tracer-stat__label {
    font-size: .74rem;
    font-weight: 640;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tracer-muted);
}

.tracer-stat__value {
    font-size: 1.85rem;
    line-height: 1.05;
    font-weight: 680;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.tracer-stat__hint {
    font-size: .82rem;
    color: var(--tracer-muted);
}

.tracer-stat__bar {
    height: 4px;
    border-radius: 999px;
    background: var(--tracer-brand);
    opacity: .85;
}

.tracer-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--tracer-brand-soft);
    color: var(--tracer-brand);
    border: 1px solid transparent;
}

.tracer-empty {
    padding: 2.6rem 1rem;
    text-align: center;
    color: var(--tracer-muted);
}

.tracer-grid-wrap {
    position: relative;
    overflow: auto;
    max-height: 74vh;
    border-radius: var(--tracer-radius);
    border: 1px solid var(--tracer-line);
    background: var(--tracer-surface);
}

table.tracer-grid {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: max-content;
    min-width: 100%;
    font-variant-numeric: tabular-nums;
    font-size: .86rem;
}

table.tracer-grid th,
table.tracer-grid td {
    border-right: 1px solid var(--tracer-line);
    border-bottom: 1px solid var(--tracer-line);
    padding: .34rem .55rem;
    white-space: nowrap;
    background: var(--tracer-surface);
}

table.tracer-grid thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    vertical-align: bottom;
    color: var(--tracer-ink);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 var(--tracer-line-strong);
}

table.tracer-grid th.tracer-col-type,
table.tracer-grid td.tracer-col-type {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 168px;
    text-align: left;
    font-weight: 600;
    box-shadow: 1px 0 0 var(--tracer-line-strong);
}

table.tracer-grid thead th.tracer-col-type {
    z-index: 5;
}

table.tracer-grid th.tracer-col-open,
table.tracer-grid td.tracer-col-open {
    position: sticky;
    left: 168px;
    z-index: 2;
    min-width: 74px;
    text-align: center;
    color: var(--tracer-muted);
    box-shadow: 1px 0 0 var(--tracer-line-strong);
}

table.tracer-grid thead th.tracer-col-open {
    z-index: 5;
}

table.tracer-grid td.tracer-move,
table.tracer-grid th.tracer-move {
    text-align: center;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    padding-left: .15rem;
    padding-right: .15rem;
}

.tracer-move__inner {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 148px;
    max-height: 148px;
    overflow: hidden;
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem 0;
    line-height: 1.1;
    margin: 0 auto;
}

.tracer-move__date {
    display: block;
    font-weight: 500;
    color: var(--tracer-muted);
    font-size: .7rem;
}

table.tracer-grid td.tracer-close,
table.tracer-grid th.tracer-close {
    position: sticky;
    right: 88px;
    z-index: 2;
    min-width: 78px;
    text-align: center;
    font-weight: 700;
    background: color-mix(in srgb, var(--tracer-brand) 7%, var(--tracer-surface));
    box-shadow: -1px 0 0 var(--tracer-line-strong);
}

table.tracer-grid td.tracer-m3,
table.tracer-grid th.tracer-m3 {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 88px;
    text-align: center;
    color: var(--tracer-muted);
    background: color-mix(in srgb, var(--tracer-brand) 4%, var(--tracer-surface));
    box-shadow: -1px 0 0 var(--tracer-line-strong);
}

table.tracer-grid thead th.tracer-close,
table.tracer-grid thead th.tracer-m3 {
    z-index: 5;
}

table.tracer-grid tbody tr:hover td {
    background: color-mix(in srgb, var(--tracer-brand) 5%, var(--tracer-surface));
}

table.tracer-grid tbody tr:hover td.tracer-close {
    background: color-mix(in srgb, var(--tracer-brand) 12%, var(--tracer-surface));
}

table.tracer-grid tr.tracer-sum td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    font-weight: 700;
    background: color-mix(in srgb, var(--tracer-ink) 5%, var(--tracer-surface));
    border-top: 1px solid var(--tracer-line-strong);
}

table.tracer-grid tr.tracer-sum td.tracer-col-type,
table.tracer-grid tr.tracer-sum td.tracer-col-open,
table.tracer-grid tr.tracer-sum td.tracer-close,
table.tracer-grid tr.tracer-sum td.tracer-m3 {
    z-index: 4;
}

.tracer-cell {
    display: block;
    width: 46px;
    max-width: 100%;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    color: inherit;
    border-radius: 6px;
    padding: .08rem .1rem;
    outline: none;
    margin: 0 auto;
    -moz-appearance: textfield;
    appearance: textfield;
}

.tracer-cell::-webkit-outer-spin-button,
.tracer-cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

td.tracer-col-open .tracer-cell {
    width: 58px;
}

.tracer-cell:hover:not(:disabled) {
    background: var(--tracer-brand-soft);
}

.tracer-cell:focus {
    background: var(--tracer-surface);
    box-shadow: 0 0 0 2px var(--tracer-brand);
}

.tracer-cell.is-pos {
    color: var(--tracer-pos);
    font-weight: 640;
}

.tracer-cell.is-neg {
    color: var(--tracer-neg);
    font-weight: 640;
}

.tracer-cell.is-saving {
    box-shadow: 0 0 0 2px var(--tracer-accent);
}

.tracer-cell:disabled {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}

.tracer-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .82rem;
    color: var(--tracer-muted);
    align-items: center;
}

.tracer-legend b {
    color: var(--tracer-ink);
}

.tracer-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.tracer-section-nav .btn {
    font-size: .84rem;
    padding: .34rem .8rem;
}

.tracer-scroll-hint {
    font-size: .78rem;
    color: var(--tracer-muted);
}

@media print {

    .navbar,
    .page-header .btn-list,
    .tracer-section-nav,
    .d-print-none {
        display: none !important;
    }

    .tracer-grid-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    table.tracer-grid {
        font-size: .62rem;
    }

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

@media (max-width: 575.98px) {

    .card-header>.ms-auto,
    .card-header>.col-auto {
        margin-left: 0 !important;
        width: 100%;
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .page-header .btn-list {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .page-header .btn-list>form,
    .page-header .btn-list>form>.form-select {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .tracer-stat__value {
        font-size: 1.5rem;
    }

    table.tracer-grid th.tracer-col-open,
    table.tracer-grid td.tracer-col-open {
        position: static;
        box-shadow: none;
    }

    table.tracer-grid td.tracer-close,
    table.tracer-grid th.tracer-close,
    table.tracer-grid td.tracer-m3,
    table.tracer-grid th.tracer-m3 {
        position: static;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}