* {
box-sizing:border-box
}
body {
margin:0;
    background:var(--bg);
    color:var(--ink);
    font:1rem/1.5 var(--app-font-family);
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    transition:background-color .2s,color .2s
}
a {
color:inherit;
    text-decoration:none
}
button,input,select,textarea {
font:inherit
}
button,a,input,select,textarea {
-webkit-tap-highlight-color:transparent
}
button {
cursor:pointer
}
button:disabled {
opacity:.45;
    cursor:default
}
button:focus-visible,a:focus-visible {
outline:3px solid var(--brand);
    outline-offset:4px
}
button {
color:inherit
}
h1,h2,h3,p {
margin:0
}
h1 {
font-size:clamp(1.45rem,3vw,2rem);
    line-height:1.2;
    letter-spacing:normal;
    font-weight:800;
    color:var(--app-heading)
}
h2 {
line-height:1.2;
    font-size:1.1rem;
    font-weight:800;
    color:var(--app-heading)
}
h3 {
line-height:1.2;
    font-size:.9rem;
    color:var(--app-heading)
}
p {
color:var(--muted)
}
small {
font-size:.76rem
}
:is(svg,.app-icon) {
flex-shrink:0;
    vertical-align:middle
}
input:not([type=checkbox]),select,textarea {
width:100%; min-height:2.75rem; padding:.65rem .75rem; color:var(--ink); background:var(--input-background); border:1px solid var(--line); border-radius:.65rem; outline:none; font-size:.8rem; font-weight:400; transition:border-color .2s,box-shadow .2s;
}
input:focus,select:focus,textarea:focus {
border-color:#818cf8; box-shadow:0 0 0 .2rem rgba(99,102,241,.13);
}
input[type=checkbox] {
width:18px;
    height:18px;
    accent-color:var(--brand);
    cursor:pointer;
    vertical-align:middle
}
label {
font-size:.76rem;
    font-weight:700
}
label small {
display:block;
    color:var(--muted);
    font-weight:400;
    margin-top:6px
}
.muted {
color:var(--muted)
}
.eyebrow {
display:block; font-size:.76rem; color:var(--eyebrow-text); font-weight:700; margin-bottom:.4rem;
}
.app-shell {
display:flex;
    min-height:100dvh
}
.status-dot {
display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    flex-shrink:0
}
.icon-button {
display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--muted);
    font-size:1.4rem;
    line-height:1
}
.icon-button :is(svg,.app-icon) {
width:17px;
    height:17px
}
.icon-button:hover {
background:var(--brand-soft);
    color:var(--brand)
}
.content {
padding:1.5rem;
    max-width:1600px;
    width:100%;
    margin:0 auto;
    flex:1
}
.page-heading {
display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem;
}
.page-heading p {
margin-top:.5rem; font-size:.86rem;
}
.date-chip {
display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--line);
    padding:7px 12px;
    border-radius:8px;
    font-size:.72rem;
    color:var(--muted);
    white-space:nowrap
}
.date-chip .status-dot {
color:var(--brand)
}
.button {
display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.5rem; padding:.6rem 1rem; border:1px solid transparent; border-radius:.65rem; font-size:.78rem; font-weight:700; line-height:1.5; white-space:nowrap; transition:background-color .2s,box-shadow .2s,transform .2s;
}
.button.primary {
background:var(--button-primary-bg);
    color:#fff;
    box-shadow:0 .55rem 1.15rem rgba(79,70,229,.22)
}
.button.primary:hover {
background:var(--button-primary-hover-bg)
}
.button.ghost {
background:var(--surface);
    border-color:var(--line);
    color:var(--ink)
}
.button.ghost:hover {
background:var(--surface-soft)
}
.button.white {
background:#fff;
    color:#3730a3
}
.button.small {
min-height:32px;
    font-size:.78rem;
    padding:5px 10px
}
.button.full {
width:100%
}
.welcome-card {
min-height:265px;
    position:relative;
    overflow:hidden;
    display:flex;
    justify-content:space-between;
    background:var(--accent-gradient);
    color:#fff;
    border-radius:1.1rem;
    padding:30px 34px;
    box-shadow:var(--shadow)
}
.welcome-card h2 {
line-height:1.2;
    font-size:1.8rem;
    line-height:1.2;
    letter-spacing:-.5px;
    margin:8px 0 10px;
    font-weight:750
}
.welcome-card p {
color:#e0e7ff;
    font-size:.86rem;
    max-width:370px;
    margin-bottom:21px
}
.welcome-tag {
font-size:.72rem;
    color:#e0e7ff;
    border:1px solid #ffffff33;
    border-radius:5px;
    padding:3px 9px
}
.orbit-two {
width:330px;
    height:330px;
    left:-19px;
    top:-60px;
    transform:rotate(15deg)
}
.stat-grid {
display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
    margin:23px 0
}
.stat-card {
background:var(--surface);
    border:1px solid var(--line);
    border-radius:1.1rem;
    padding:20px;
    position:relative;
    box-shadow:var(--shadow)
}
.stat-card small {
display:block;
    color:var(--muted);
    margin-bottom:10px;
    font-size:.76rem
}
.stat-card strong {
display:block;
    font-size:1.8rem;
    line-height:1.3;
    font-weight:750;
    letter-spacing:-1px
}
.stat-card>span:last-child {
font-size:.68rem;
    color:var(--muted);
    display:block;
    margin-top:9px
}
.stat-icon {
display:grid;
    place-items:center;
    background:var(--brand-soft);
    color:var(--brand);
    width:37px;
    height:37px;
    border-radius:10px
}
.stat-card>.stat-icon {
position:absolute;
    left:17px;
    top:17px
}
.stat-icon.blue {
background:color-mix(in srgb,var(--blue) 12%,transparent);
    color:var(--blue)
}
.stat-icon.amber {
background:color-mix(in srgb,var(--amber) 12%,transparent);
    color:var(--amber)
}
.stat-icon.purple {
background:color-mix(in srgb,var(--purple) 12%,transparent);
    color:var(--purple)
}
.dashboard-bottom {
display:grid;
    grid-template-columns:1.25fr 1fr;
    gap:20px
}
.panel {
background:var(--surface);
    border:1px solid var(--line);
    border-radius:1.1rem;
    box-shadow:var(--shadow);
    overflow:hidden
}
.panel-heading,.table-toolbar {
display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:1rem 1.15rem;
    border-bottom:1px solid var(--line)
}
.panel-heading p,.table-toolbar p {
font-size:.76rem;
    margin-top:3px
}
.panel-heading>:is(svg,.app-icon) {
color:var(--muted)
}
.shortcut-grid {
padding:20px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
}
.shortcut {
padding:17px 12px 12px;
    border:1px solid var(--line);
    border-radius:9px;
    position:relative;
    transition:border-color .15s,transform .15s
}
.shortcut:hover {
border-color:var(--brand);
    transform:translateY(-2px)
}
.shortcut strong {
display:block;
    font-size:.9rem;
    margin:16px 0 5px
}
.shortcut small {
display:block;
    font-size:.76rem;
    color:var(--muted);
    min-height:32px
}
.shortcut-arrow {
display:block;
    text-align:left;
    color:var(--brand);
    margin-top:12px
}
.setup-step {
display:flex;
    gap:12px;
    margin:20px;
    align-items:flex-start
}
.setup-step>span {
display:grid;
    place-items:center;
    flex-shrink:0;
    width:25px;
    height:25px;
    border:1px solid var(--line);
    background:var(--surface-soft);
    color:var(--muted);
    border-radius:50%;
    font-size:.72rem
}
.setup-step:first-of-type>span {
background:var(--brand-soft);
    color:var(--brand)
}
.setup-step strong {
font-size:.76rem
}
.setup-step p {
font-size:.72rem;
    line-height:1.9;
    margin-top:3px
}
.setup-step>:is(svg,.app-icon) {
margin-right:auto;
    color:var(--brand);
    width:16px
}
.badge {
display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; white-space:nowrap; font-size:.68rem; font-weight:700;
}
.badge.success {
color:var(--success); background:var(--success-bg);
}
.badge.neutral {
color:var(--muted); background:var(--surface-soft);
}
.search-box {
display:flex; align-items:center; gap:.5rem; width:min(100%,360px); min-height:2.65rem; padding:0 .85rem 0 .3rem; background:var(--input-background); border:1px solid var(--line); border-radius:.7rem;
}
.search-box>:is(svg,.app-icon) {
width:16px;
    color:var(--muted)
}
.search-box input {
flex:1; min-width:0; width:100%; min-height:2.55rem; padding:.4rem 0; background:transparent; border:0; border-radius:0; font-size:.8rem;
}
.search-box input:focus {
box-shadow:none
}
.table-scroll {
overflow-x:auto
}
.quickgrid.data-grid[theme] {
width:100%; border-collapse:separate; border-spacing:0; white-space:nowrap; text-align:right; font-size:.82rem; --col-gap:0;
}
.quickgrid.data-grid[theme] thead {
background:var(--app-table-header);
    color:var(--muted)
}
.quickgrid.data-grid[theme] th {
font-weight:800;
    text-align:right;
    font-size:.76rem
}
.quickgrid.data-grid[theme] th,.quickgrid.data-grid[theme] td {
padding:.95rem 1rem;
    border-bottom:1px solid var(--line);
    vertical-align:middle
}
.quickgrid.data-grid[theme] th .col-title {
justify-content:flex-start;
    gap:6px;
    color:var(--muted);
    font:inherit
}
.quickgrid.data-grid[theme] th button {
color:inherit;
    font:inherit
}
.quickgrid.data-grid[theme] tbody tr:has(td:not(:empty)):hover {
background:var(--brand-soft)
}
.quickgrid.data-grid[theme] tbody tr:not(:has(td:not(:empty))) td {
padding:0;
    height:0;
    border:0
}
.quickgrid.data-grid[theme] .col-title-text {
white-space:nowrap
}
.row-actions {
display:inline-flex; align-items:center; gap:.35rem;
}
.row-actions button {
display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:2rem; border:0; border-radius:.55rem; padding:.35rem .6rem; color:var(--brand); background:var(--brand-soft); font-size:.78rem;
}
.row-actions button:hover {
box-shadow:0 .3rem .65rem var(--app-shadow); transform:translateY(-1px);
}
.row-actions button.category-delete { color:var(--danger); background:var(--danger-bg); }
.editor {
padding-bottom:22px;
    margin-bottom:22px
}
.editor>.panel-heading {
margin-bottom:18px
}
.editor>.form-grid,.editor>label,.editor>p,.editor>h2 {
margin:0 23px 15px
}
.editor>h2:first-child {
margin-top:20px
}
.editor>form {
padding:0 23px
}
.form-grid {
display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}
.form-grid label>input {
display:block;
    margin-top:7px
}
.form-actions {
display:flex;
    align-items:center;
    gap:9px;
    margin-top:20px
}
.editor>.form-actions {
padding:0 23px
}
.field {
display:block;
    max-width:400px
}
.field>input {
display:block;
    margin-top:7px
}
.notice {
padding:.8rem 1rem; background:var(--brand-soft); color:var(--notice-text); border:0; border-right:4px solid var(--brand); border-radius:.7rem; margin:0 0 1.15rem; font-size:.8rem; line-height:1.7;
}
.notice.error {
color:var(--danger);
    background:var(--danger-bg);
    border-color:color-mix(in srgb,var(--danger) 20%,var(--line))
}
.notice.success {
background:var(--success-bg); color:var(--success); border-right-color:var(--success);
}
.validation-summary-valid {
display:none
}
.validation-message,.validation-errors {
color:var(--danger);
    font-size:.76rem
}
.info-strip {
display:flex;
    gap:11px;
    align-items:center;
    color:var(--brand);
    margin:20px 0;
    padding:15px 19px;
    background:var(--brand-soft);
    border-radius:9px
}
.info-strip p {
font-size:.76rem;
    color:var(--brand)
}
.empty-state {
text-align:center;
    padding:70px 35px
}
.empty-icon {
display:grid;
    place-items:center;
    width:65px;
    height:65px;
    background:var(--brand-soft);
    color:var(--brand);
    border-radius:20px;
    margin:0 auto 22px
}
.empty-icon :is(svg,.app-icon) {
width:28px;
    height:28px
}
.empty-state p {
max-width:520px;
    margin:12px auto 25px;
    font-size:.8rem
}
.empty-state .info-strip {
max-width:600px;
    margin:30px auto 0;
    text-align:right
}
.empty-state .info-strip p {
margin:0
}
.empty-state .button {
margin:5px
}
.access-state h1 {
font-size:1.5rem
}
#blazor-error-ui {
background:var(--danger-bg);
    color:var(--danger);
    bottom:0;
    display:none;
    left:0;
    padding:15px 25px;
    position:fixed;
    width:100%;
    z-index:1000
}
#blazor-error-ui .dismiss {
cursor:pointer;
    position:absolute;
    left:15px
}
#blazor-error-ui a {
text-decoration:underline;
    margin:0 10px
}
h1:focus {
outline:none
}
@media(min-width:1600px) {
.content {
padding-top:40px
}
.welcome-card {
min-height:290px
}
.welcome-card h2 {
line-height:1.2;
    font-size:2rem
}
.stat-card {
padding:25px
}
.shortcut {
padding:22px 16px
}
.shortcut strong {
font-size:.8rem
}
.setup-step {
margin:25px
}


}
@media(max-width:1200px) {
.content {
padding:25px
}
.dashboard-bottom {
grid-template-columns:1fr
}
.welcome-card {
padding:26px
}
.stat-card {
padding:18px 14px
}
.stat-card>.stat-icon {
left:12px;
        width:30px;
        height:30px
}
.stat-card small {
font-size:.72rem
}


}
@media(max-width:991.98px) {
.content {
padding:24px
}


}
@media(max-width:600px) {
h1 {
font-size:1.45rem
}
.content {
padding:22px 16px
}
.page-heading {
align-items:flex-start;
        flex-wrap:wrap;
        gap:12px
}
.page-heading p {
font-size:.76rem
}
.date-chip {
font-size:.68rem;
        padding:5px 9px
}
.welcome-card {
padding:25px;
        min-height:250px
}
.welcome-card h2 {
line-height:1.2;
    font-size:1.6rem
}
.welcome-card p {
max-width:240px
}
.stat-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin:16px 0
}
.stat-card {
padding:19px 14px
}
.stat-card strong {
font-size:1.6rem
}
.stat-card>.stat-icon {
top:14px;
        left:12px;
        width:26px;
        height:26px
}
.stat-icon :is(svg,.app-icon) {
width:17px;
        height:17px
}
.shortcut-grid {
grid-template-columns:1fr;
        padding:15px
}
.shortcut {
display:grid;
        grid-template-columns:40px 1fr 20px;
        gap:0 10px;
        padding:13px
}
.shortcut .stat-icon {
grid-row:span 2
}
.shortcut strong {
margin:0
}
.shortcut small {
min-height:0
}
.shortcut-arrow {
grid-column:3;
        grid-row:1 / 3;
        align-self:center;
        margin:0
}
.panel-heading,.table-toolbar {
padding:17px
}
.table-toolbar {
flex-wrap:wrap
}
.search-box {
width:100%
}
.search-box input {
width:100%
}
.quickgrid.data-grid[theme] td,.quickgrid.data-grid[theme] th {
padding:13px 17px
}
.form-grid {
grid-template-columns:1fr;
        gap:15px
}
.editor>form {
padding:0 17px
}
.empty-state {
padding:45px 22px
}
.empty-state h1 {
font-size:1.25rem
}
.empty-state p {
font-size:.76rem
}


}
@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important
}


}


.page-heading>.button.primary { padding:.75rem 1.1rem; border-radius:.75rem; font-size:1rem; }
.button.outline { color:var(--button-outline-text); border-color:var(--button-outline-text); background:transparent; }
.button.outline:hover { color:#fff; background:var(--button-outline-hover-bg); }
.button.danger { color:#fff; background:#dc3545; }
.button.danger:hover { background:#bb2d3b; }
.button :is(svg,.app-icon) { width:1rem; height:1rem; }
.search-box:focus-within { border-color:#818cf8; box-shadow:0 0 0 .2rem rgba(99,102,241,.13); }
.quickgrid.data-grid[theme] th:first-child { border-start-start-radius:.75rem; }
.quickgrid.data-grid[theme] th:last-child { border-start-end-radius:.75rem; }
.quickgrid.data-grid[theme] tbody tr:last-child td { border-bottom:0; }
input[readonly],input:disabled,select:disabled,textarea:disabled { background:var(--surface-soft); color:var(--muted); cursor:default; }
@media(max-width:700px) {
 .page-heading,.table-toolbar { align-items:stretch; flex-direction:column; }
 .page-heading>.button,.search-box { width:100%; }
 .page-heading>.button.primary { font-size:.86rem; }
}

.app-icon { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; font-size:1.05rem; line-height:1; vertical-align:middle; }
.button .app-icon,.user-action .app-icon { font-size:1rem; }

/* Keep dialog actions together on the left, with cancel leftmost. */
dialog .form-actions { direction:rtl; justify-content:flex-end; }
.form-actions .dialog-cancel { margin-inline-start:0; }
.finance-filters { display:flex; flex-wrap:wrap; gap:1rem; padding:0 1.25rem 1rem; }
.finance-filters label { display:grid; gap:.4rem; min-width:10rem; }
.finance-description { display:grid; gap:.5rem; margin-block:1rem; }
.form-grid .finance-active { display:flex; align-items:center; align-self:end; gap:.5rem; min-height:2.75rem; }
.form-grid .finance-active > input { margin:0; }