:root {
    --ui-canvas: #f5f7f6;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8faf9;
    --ui-surface-muted: #eef3f0;
    --ui-ink: #10251d;
    --ui-ink-soft: #40554b;
    --ui-muted: #718079;
    --ui-line: #d8e1dc;
    --ui-line-strong: #bdcbc4;
    --ui-green: #075844;
    --ui-green-deep: #043d30;
    --ui-green-soft: #e2f4ec;
    --ui-gold: #b98520;
    --ui-gold-deep: #805b17;
    --ui-gold-soft: #fbf3df;
    --ui-danger: #c7283e;
    --ui-danger-soft: #fde9ec;
    --ui-radius: 12px;
    --ui-shadow: 0 1px 2px rgba(15, 38, 28, .04), 0 8px 26px rgba(15, 38, 28, .055);
}

html, body {
    background: var(--ui-canvas);
    color: var(--ui-ink);
}

body {
    font-size: 16px;
    font-weight: 500;
}

body .content-shell {
    padding: clamp(1.25rem, 2vw, 2rem);
}

body .module-heading {
    align-items: center;
    min-height: 92px;
    margin: 0 0 1.15rem;
    padding: .35rem .15rem;
}

body .module-heading h1 {
    margin: .15rem 0 .25rem;
    color: var(--ui-ink);
    font-size: clamp(2rem, 2.5vw, 2.65rem);
    font-weight: 900;
    line-height: 1.22;
}

body .module-heading p {
    max-width: 760px;
    color: var(--ui-muted);
    font-size: .92rem;
    line-height: 1.75;
}

body .section-kicker {
    color: var(--ui-gold-deep);
    font-size: .75rem;
    font-weight: 900;
}

body .work-card,
body .inventory-panel,
body .account-card,
body .metric-card,
body .report-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

body .work-card {
    margin-bottom: 1rem;
    padding: clamp(1.1rem, 1.5vw, 1.5rem);
}

body .work-card h2,
body .card-title h2,
body .inventory-panel h2,
body .report-panel h2 {
    color: var(--ui-ink);
    font-weight: 900;
    letter-spacing: -.025em;
}

body .card-title {
    min-height: 48px;
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--ui-line);
}

body .form-grid-4,
body .form-grid-2 {
    gap: 1rem;
}

body label,
body .work-card label,
body .form-grid-4 label,
body .form-grid-2 label {
    color: var(--ui-ink-soft);
    font-size: .84rem;
    font-weight: 850;
}

body .form-control,
body .form-select {
    min-height: 46px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 9px;
    background-color: var(--ui-surface);
    color: var(--ui-ink);
    font-size: .92rem;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(17, 39, 29, .025);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

body .form-control:hover,
body .form-select:hover {
    border-color: #91a79c;
}

body .form-control:focus,
body .form-select:focus {
    border-color: var(--ui-green);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(7, 88, 68, .13);
}

body .form-control:disabled,
body .form-select:disabled,
body .form-control[readonly] {
    border-color: #d3dcd7;
    background-color: #e8eeeb;
    color: #74837c;
    opacity: 1;
    cursor: not-allowed;
}

body .btn-gold,
body .btn-outline,
body .btn-quiet,
body .btn-primary,
body .btn-secondary {
    min-height: 44px;
    border-radius: 9px;
    padding: .62rem 1rem;
    font-size: .88rem;
    font-weight: 850;
    box-shadow: none;
}

body .btn-gold {
    border-color: #9c701a;
    background: var(--ui-gold);
}

body .btn-gold:hover {
    background: #9d701a;
    box-shadow: 0 6px 16px rgba(128, 91, 23, .16);
}

body .btn-outline {
    border-color: var(--ui-line-strong);
    background: #fff;
    color: var(--ui-green-deep);
}

body .btn-outline:hover {
    border-color: var(--ui-green);
    background: var(--ui-green-soft);
}

body .btn-primary {
    border-color: var(--ui-green);
    background: var(--ui-green);
}

body .table-wrap {
    overflow: auto;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
}

body .data-table {
    background: var(--ui-surface);
}

body .data-table th,
body .data-table td {
    height: 48px;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--ui-line);
    font-size: .86rem;
}

body .data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-surface-muted);
    color: var(--ui-ink-soft);
    font-weight: 900;
}

body .data-table tbody tr:nth-child(even) {
    background: #fafcfb;
}

body .data-table tbody tr:hover {
    background: #eef7f3;
}

body .status-pill {
    min-height: 30px;
    border-color: #c6dfd2;
    background: var(--ui-green-soft);
    color: var(--ui-green-deep);
    font-weight: 850;
}

body .notice,
body .formula-note {
    border-color: #e7d29d;
    border-radius: 10px;
    background: var(--ui-gold-soft);
}

body .empty-inline,
body .module-empty {
    border-color: var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-soft);
}

body .stack-item,
body .quick-grid a {
    border-color: var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-soft);
}

body .balance-credit,
body .positive {
    color: #087052;
}

body .balance-due,
body .negative,
body .text-danger {
    color: var(--ui-danger) !important;
}

body .alert {
    border-radius: 10px;
    font-weight: 700;
}

body .alert-success {
    border-color: #b8ddcb;
    background: var(--ui-green-soft);
    color: #075a42;
}

body .alert-danger {
    border-color: #f1c4ca;
    background: var(--ui-danger-soft);
    color: #a81e31;
}

body .inline-actions {
    gap: .75rem;
}

body .topbar {
    min-height: 64px;
    border-color: var(--ui-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 rgba(17, 39, 29, .02);
}

body .account-page .account-card {
    border-radius: 16px;
}

@media (max-width: 900px) {
    body .content-shell { padding: 1rem; }
    body .module-heading { min-height: auto; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    body :not(.app-shell):not(.sidebar):not(.sidebar *) {
        scroll-behavior: auto !important;
    }
}

/* Animate only the floating navigation; the workspace keeps its collapsed-rail offset.
   Keep this deliberate interaction even when incidental motion is reduced. */
@media (min-width: 901px) {
    .sidebar {
        will-change: width;
        transition-property: width !important;
        transition-duration: .56s !important;
        transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
    }

    .sidebar .brand-copy,
    .sidebar .nav-text,
    .sidebar .nav-label,
    .sidebar .sidebar-note {
        transition-duration: .44s, .24s, .38s, .38s !important;
    }

    .sidebar::after {
        transition-duration: .34s, .2s !important;
    }
}