html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: #1e6091;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* Money */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-neg { color: var(--mud-palette-success); }

/* Month grid: sticky first column + header */
.grid-wrap { overflow: auto; max-height: calc(100vh - 220px); }
.grid-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.grid-table th, .grid-table td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--mud-palette-lines-default); }
.grid-table thead th { position: sticky; top: 0; background: var(--mud-palette-surface); z-index: 2; }
.grid-table th:first-child, .grid-table td:first-child { position: sticky; left: 0; background: var(--mud-palette-surface); text-align: left; z-index: 1; min-width: 130px; }
.grid-table thead th:first-child { z-index: 3; }
.grid-table tr.group-row td { background: var(--mud-palette-background-gray); font-weight: 600; text-align: left; }
.grid-table tr.total-row td { font-weight: 700; border-top: 2px solid var(--mud-palette-lines-default); }
.grid-cell { cursor: pointer; }
.grid-cell:hover { background: var(--mud-palette-action-default-hover); }
.cell-warn { box-shadow: inset 0 -2px 0 var(--mud-palette-warning); }
.cell-current { background: var(--mud-palette-background-gray); }

/* Keep the add button clear of page content */
.page-pad { padding-bottom: 88px; }

/* Card preview: drawn with CSS so it needs no images; everything scales with the font size (Small shrinks it) */
.card-preview { position: relative; box-sizing: border-box; width: 22em; max-width: 100%; aspect-ratio: 1.586; padding: 1.1em 1.3em; border-radius: 1em; color: #fff; font-size: 14px;
    display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); font-family: Roboto, Helvetica, Arial, sans-serif; }
.card-preview-small { font-size: 10px; }
.card-preview::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 5px); }
.cp-title { font-size: 1.45em; letter-spacing: .02em; }
.cp-chip-row { display: flex; align-items: center; gap: .6em; }
.cp-chip { width: 2.6em; height: 2em; border-radius: .35em; background: linear-gradient(135deg, #d8d8d8, #a8a8a8); border: 1px solid rgba(0, 0, 0, .25); }
.cp-contactless { font-weight: 700; letter-spacing: -.1em; transform: rotate(0deg); opacity: .9; }
.cp-number { font-family: "Courier New", monospace; font-size: 1.45em; letter-spacing: .08em; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); white-space: nowrap; }
.cp-valid { display: flex; align-items: center; gap: .5em; font-size: .9em; padding-left: 5.2em; }
.cp-valid span:first-child { font-size: .5em; line-height: 1; letter-spacing: .04em; }
.cp-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.cp-holder { font-family: "Courier New", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: .95em; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-visa, .cp-mc { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.cp-visa-logo { font-size: 2.1em; font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.cp-tier { font-size: .7em; margin-top: .15em; }
.cp-mc-circles { display: inline-flex; }
.cp-mc-circles i { width: 1.9em; height: 1.9em; border-radius: 50%; display: block; background: #eb001b; }
.cp-mc-circles i + i { background: #f79e1b; margin-left: -.8em; mix-blend-mode: screen; opacity: .95; }

.cp-classic { background: linear-gradient(135deg, #1a6bd1, #0b3d91); }
.cp-gold { background: linear-gradient(135deg, #8a6a1c, #3a2a08); }
.cp-platinum { background: linear-gradient(135deg, #6c7482, #2e333c); }
.cp-world { background: linear-gradient(135deg, #20232b, #050608); }
.cp-elite { background: linear-gradient(135deg, #2a2417, #050505); }
.cp-other { background: linear-gradient(135deg, #546e7a, #263238); }
.cp-chip-gold { background: linear-gradient(135deg, #ffd35a, #d99a0c); }