/*
   Money Record — Design System
   A small, dependency-light token layer plus component primitives.
   Loaded on every page; no build step required.
*/

:root {
    /* ---------------------------------------------------------------------
     * Money Record — design tokens
     *
     * Visual language adapted from the SMA reference build ("Bento Layout
     * with Liquid Glass"): an almost achromatic paper canvas where blue-600
     * is the only chromatic punctuation, depth comes from translucency
     * rather than drop shadows, and radii are deliberately asymmetric.
     *
     * The reference used ember orange #ff682c; here it is blue-600, matching
     * the product's existing brand identity.
     * ------------------------------------------------------------------- */

    /* Brand — blue-600 */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;
    --brand:     #2563eb;

    /* Achromatic ramp */
    --graphite: #0f172a;
    --ash:      #e2e8f0;
    --fog:      #f1f5f9;
    --mist:     #e2e8f0;
    --steel:    #475569;
    --slate:    #64748b;

    /* Semantic money colours */
    --income:     #059669;
    --income-bg:  #ecfdf5;
    --expense:    #dc2626;
    --expense-bg: #fef2f2;
    --warning:    #d97706;
    --warning-bg: #fffbeb;
    --info:       #2563eb;

    /* Surfaces */
    --bg:            #f8fafc;
    --surface:       #ffffff;
    --surface-elev:  #f8fafc;
    --border:        #e2e8f0;
    --border-strong: #cbd5e1;
    --text:          var(--graphite);
    --text-muted:    var(--steel);
    --text-subtle:   var(--slate);

    /* Accent wash */
    --wash: #eff6ff;

    /* Shape */
    --radius-sm:   10px;
    --radius:      16px;
    --radius-lg:   18px;
    --radius-xl:   22px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-xs:    0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm:    0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow:       0 4px 16px -2px rgba(15, 23, 42, .07);
    --shadow-md:    0 8px 24px -4px rgba(15, 23, 42, .10);
    --shadow-lg:    0 20px 48px -8px rgba(15, 23, 42, .14);
    --shadow-brand: 0 6px 20px rgba(37, 99, 235, .22);

    /* Layout */
    --sidebar-w: 264px;
    --chat-w:    400px;
    --header-h:  64px;
    --page-max:  1200px;

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ================================================================ surfaces */
.liquid-glass {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.liquid-glass-strong {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.liquid-glass-subtle {
    background: rgba(241, 245, 249, .75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ============================================================ base reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: 'Inter Tight', 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.022em;
}
p { margin: 0; }
a { color: var(--brand-600); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--brand-700); }
img { max-width: 100%; display: block; }

:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--brand-600); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ============================================================ scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: var(--radius-pill);
    border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ============================================================ app shell */
.app-shell { display: flex; min-height: 100vh; }

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-inline-start .28s var(--ease);
}
.app-main.is-shifted { margin-inline-start: var(--sidebar-w); }
.app-body { flex: 1 1 auto; padding: 28px 28px 36px; max-width: 1400px; width: 100%; margin-inline: auto; }

/* ============================================================ typography */
.page-title { font-size: 1.65rem; font-weight: 600; letter-spacing: -.028em; }
.page-subtitle { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

.section-title {
    font-size: .74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .09em; color: var(--text-subtle);
}

.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-xs { font-size: .78rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.375rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.amount { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; font-weight: 600; }
.amount-income  { color: var(--income); }
.amount-expense { color: var(--expense); }
.amount-neutral { color: var(--text); }

/* ============================================================ buttons */
.btn {
    --btn-bg: var(--graphite);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit; font-weight: 500; font-size: .88rem;
    cursor: pointer; white-space: nowrap;
    transition: background-color .16s var(--ease), opacity .16s var(--ease),
                color .16s var(--ease), border-color .16s var(--ease),
                transform .12s var(--ease), box-shadow .16s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--btn-fg); background: #1e293b; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary:hover { background: #1e293b; }
.btn-secondary {
    background: var(--surface); color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--fog); color: var(--text); border-color: var(--text-subtle); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--fog); color: var(--text); }
.btn-danger  { --btn-bg: #dc2626; --btn-fg: #ffffff; }
.btn-danger:hover { background: #b91c1c; color: #ffffff; }
.btn-success { --btn-bg: #059669; --btn-fg: #ffffff; }
.btn-success:hover { background: #047857; color: #ffffff; }

.btn-accent { --btn-bg: var(--brand-600); --btn-fg: #ffffff; }
.btn-accent:hover { background: var(--brand-700); color: #ffffff; }

.btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: 8px; }
.btn-lg { padding: 13px 26px; font-size: .96rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; width: 38px; height: 38px; }
.btn-icon.btn-sm { padding: 5px; width: 32px; height: 32px; }

/* ============================================================ forms */
.field { margin-bottom: 18px; }

.label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600; color: var(--text); }
.label .req { color: var(--expense); margin-inline-start: 2px; }

.input, .select, .textarea {
    display: block; width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit; font-size: .9rem;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
    -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--fog); opacity: .65; cursor: not-allowed; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--expense); }
.input.is-invalid:focus, .select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }

.select {
    padding-inline-end: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 18px 18px;
}

.input-compact, .select-compact {
    padding: 6px 10px;
    font-size: .82rem;
    border-radius: 8px;
}
.select-compact {
    padding-inline-end: 28px;
    background-position: right 7px center;
    background-size: 15px 15px;
}

.textarea { min-height: 96px; resize: vertical; }

.field-error { margin-top: 6px; font-size: .8rem; color: var(--expense); font-weight: 500; }
.field-hint  { margin-top: 6px; font-size: .8rem; color: var(--text-muted); line-height: 1.45; }

.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { flex: 1 1 auto; min-width: 0; }
.input-group .input:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group .input:not(:last-child)  { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group .input-affix {
    display: inline-flex; align-items: center; padding: 0 13px;
    border: 1px solid var(--border);
    background: var(--fog); color: var(--text-muted);
    font-size: .85rem; font-weight: 600; white-space: nowrap;
    transition: border-color .16s var(--ease), color .16s var(--ease);
}
.input-group .input-affix-start,
.input-group .input-affix:first-child {
    border-inline-end: none;
    border-start-start-radius: var(--radius-sm);
    border-end-start-radius: var(--radius-sm);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.input-group .input-affix-end,
.input-group .input-affix:last-child:not(:first-child) {
    border-inline-start: none;
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.input-group:focus-within .input { border-color: var(--brand-500); }
.input-group:focus-within .input-affix { border-color: var(--brand-500); }

.checkbox, .check-line { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-line { margin-bottom: 6px; font-size: .9rem; font-weight: 500; }
.checkbox input[type="checkbox"], .checkbox input[type="radio"],
.check-line input[type="checkbox"], .check-line input[type="radio"] {
    width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0;
    accent-color: var(--brand-600); cursor: pointer;
}

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
    position: relative; width: 44px; height: 26px; flex-shrink: 0;
    background: var(--border-strong); border-radius: var(--radius-pill);
    transition: background-color .2s var(--ease);
}
.switch-track::after {
    content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 20px; height: 20px; background: #fff; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
    transition: transform .2s var(--ease);
}
.switch input:checked + .switch-track { background: var(--brand-600); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }
.switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }

/* ============================================================ cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
}
.card-pad { padding: 22px 24px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.card-body { padding: 22px 24px; flex: 1 1 auto; }
.card-foot {
    padding: 14px 24px; border-top: 1px solid var(--border);
    background: var(--fog); border-radius: 0 0 var(--radius) var(--radius);
}
.card-hover { transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.card-hover:hover { background: var(--surface-elev); border-color: var(--border-strong); }

/* ============================================================ bento grid */
.bento {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bento > * { grid-column: span var(--span, 1); }
@media (max-width: 1100px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento > * { grid-column: span var(--span-sm, var(--span, 1)); }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento > * { grid-column: 1 / -1; }
}

/* ============================================================ stat tiles */
.stat-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat-grid.is-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid.is-bento > .stat { grid-column: span 1; }
.stat-grid.is-bento > .stat:first-child { grid-column: span 2; }

@media (max-width: 1100px) {
    .stat-grid.is-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .stat-grid.is-bento { grid-template-columns: minmax(0, 1fr); }
}
.stat-grid.stat-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .stat-grid.stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .stat-grid.stat-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.stat-sparkline {
    position: absolute;
    inset-inline-end: 14px;
    inset-block-end: 12px;
    width: 80px;
    height: 32px;
    pointer-events: none;
    opacity: .85;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.stat:hover .stat-sparkline,
.card:hover .stat-sparkline {
    opacity: 1;
    transform: scale(1.08);
}
.sparkline-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.stat-sparkline-brand .sparkline-line   { stroke: #f97316; }
.stat-sparkline-brand .sparkline-area   { fill: rgba(249, 115, 22, .18); }
.stat-sparkline-income .sparkline-line  { stroke: #10b981; }
.stat-sparkline-income .sparkline-area  { fill: rgba(16, 185, 129, .18); }
.stat-sparkline-expense .sparkline-line { stroke: #ef4444; }
.stat-sparkline-expense .sparkline-area { fill: rgba(239, 68, 68, .18); }
.stat-icon-sm {
    width: 28px;
    height: 28px;
    font-size: .8rem;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    padding: 20px 22px;
    transition: border-color .18s var(--ease), background-color .18s var(--ease);
    position: relative; overflow: hidden;
}
.stat:hover { border-color: var(--border-strong); }
.stat::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
    height: 3px; background: var(--stat-accent, var(--brand-600));
    opacity: .9;
}
.stat-label {
    display: flex; align-items: center; gap: 8px;
    font-size: .74rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .07em;
}
.stat-value {
    margin-top: 10px;
    font-size: 1.65rem; font-weight: 600; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.stat-meta { margin-top: 6px; font-size: .8rem; color: var(--text-muted); }
.stat-icon {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    display: grid; place-items: center; font-size: .88rem;
    background: var(--stat-icon-bg, var(--brand-50));
    color: var(--stat-accent, var(--brand-600));
}

/* ============================================================ tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.table thead th {
    position: sticky; top: 0; z-index: 1;
    padding: 12px 16px; text-align: start;
    background: var(--fog);
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color .14s var(--ease); }
.table tbody tr:hover { background: var(--fog); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions { text-align: end; white-space: nowrap; }
.table td.actions form { display: inline-block; margin: 0; vertical-align: middle; }

/* ============================================================ badges */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: .74rem; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap;
}
.badge-income, .badge-success { background: var(--income-bg);  color: var(--income); }
.badge-expense { background: var(--expense-bg); color: var(--expense); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--brand-50);   color: var(--brand-700); }
.badge-neutral { background: var(--fog);        color: var(--steel); }
.badge-brand   { background: var(--brand-50);   color: var(--brand-700); }
.badge-danger  { background: var(--expense-bg); color: var(--expense); }

/* ============================================================ alerts */
.alert {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: .875rem;
}
.alert-icon { flex-shrink: 0; margin-top: 2px; }
.alert-success { background: var(--income-bg);  border-color: rgba(5, 150, 105, .25); color: var(--income); }
.alert-error,
.alert-danger  { background: var(--expense-bg); border-color: rgba(220, 38, 38, .25); color: var(--expense); }
.alert-warning { background: var(--warning-bg); border-color: rgba(217, 119, 6, .25);  color: var(--warning); }
.alert-info    { background: var(--brand-50);   border-color: var(--brand-200);       color: var(--brand-700); }

/* ============================================================ progress */
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.progress-bar {
    height: 100%; border-radius: var(--radius-pill);
    transition: width .5s var(--ease);
    background: var(--brand-500);
}
.progress-bar.safe    { background: var(--income); }
.progress-bar.warning { background: var(--warning); }
.progress-bar.danger  { background: var(--expense); animation: pulse-danger 2s var(--ease) infinite; }

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* ============================================================ empty state */
.empty { display: grid; place-items: center; gap: 14px; padding: 64px 24px; text-align: center; }
.empty-icon {
    width: 64px; height: 64px; border-radius: var(--radius-pill);
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
    font-size: 1.5rem;
}
.empty-title { font-weight: 500; font-size: 1.05rem; }
.empty-text { color: var(--text-muted); font-size: .9rem; max-width: 380px; }

/* ============================================================ modal */
/* The `hidden` attribute must win over .modal-backdrop's own display.
   The UA stylesheet's `[hidden] { display: none }` is weaker than any author
   rule, so `display: grid` here used to override it — every modal rendered open
   on page load and could not be dismissed. */
[hidden] { display: none !important; }

.modal-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(17, 24, 39, .55);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    padding: 16px;
    animation: fade-in .18s var(--ease);
}
.modal {
    width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: modal-in .22s var(--ease);
    overflow: hidden;
}
.modal-lg { max-width: 780px; }
.modal form {
    display: flex; flex-direction: column;
    min-height: 0; flex: 1 1 auto;
    overflow: hidden;
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; border-bottom: 1px solid var(--mist);
    flex-shrink: 0;
}
.modal-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--mist);
    background: rgba(245, 245, 245, .6);
    flex-shrink: 0;
}

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================ toast */
.toast-stack {
    position: fixed; z-index: 120;
    inset-block-start: 18px; inset-inline-end: 18px;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: 12px;
    min-width: 280px; max-width: 400px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-inline-start: 3px solid var(--brand-600);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    pointer-events: auto;
    animation: toast-in .24s var(--ease);
}
.toast-success { border-inline-start-color: var(--income); }
.toast-error   { border-inline-start-color: var(--expense); }
.toast-warning { border-inline-start-color: var(--warning); }
.toast.is-leaving { animation: toast-out .2s var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ============================================================ utilities */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.d-block      { display: block; }
.inline       { display: inline; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-1-5 { gap: 6px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.flex-1  { flex: 1 1 auto; min-width: 0; }
.ml-auto { margin-inline-start: auto; }
.grid-2  { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mt-1  { margin-top: 4px; }  .-mt-1 { margin-top: -4px; }
.mt-2  { margin-top: 8px; }  .mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; } .mt-6  { margin-top: 24px; }
.mb-1  { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-6  { margin-bottom: 24px; }
.my-4  { margin-block: 16px; }
.py-4  { padding-block: 16px; }
.p-4   { padding: 16px; }
.text-center { text-align: center; }
.text-end    { text-align: end; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opacity-60 { opacity: .6; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------------------
 * Utilities replacing former inline style="" attributes.
 * ------------------------------------------------------------------------- */

/* Spacing */
.m-0  { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }

/* Flex/box */
.min-0          { min-width: 0; }
.nowrap         { white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.no-shadow      { box-shadow: none; }
.col-full       { grid-column: 1 / -1; }
.list-disc      { padding-inline-start: 18px; list-style: disc; }

/* Sizing */
.w-auto     { width: auto; }
.w-11       { width: 11%; }
.max-560    { max-width: 560px; }
.max-180    { max-width: 180px; }
.input-auto { width: auto; min-width: 220px; }

/* Typography */
.error-code {
    font-size: 4rem; line-height: 1; color: var(--brand-600);
    font-family: 'Inter Tight', 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -.04em;
}
.icon-centered { margin: 0 auto 16px; }
.amount-lg   { font-size: 1.5rem; }
.amount-hero { font-size: 2.4rem; line-height: 1.1; letter-spacing: -.03em; }

/* Colour */
.text-expense, .text-danger { color: var(--expense) !important; }
.text-income, .text-success { color: var(--income) !important; }
.text-warning { color: var(--warning) !important; }
.text-brand   { color: var(--brand-600) !important; }
.text-neutral { color: inherit; }

/* Gap used by two callout rows */
.gap-14 { gap: 14px; }

/* Chart canvas wrapper */
.chart-canvas { position: relative; min-height: 210px; display: flex; align-items: center; }

/* Server-rendered SVG charts (App\Support\SvgChart): shared by the user
   dashboard and the admin analytics page, so they live in app.css. */
.vis-columns { width: 100%; height: auto; max-height: 240px; color: var(--brand-500); }
.vis-axis-label { fill: var(--text-muted); font-size: 10px; }
.vis-svg-label { fill: var(--text-muted); font-size: 12px; }
.vis-svg-value { fill: var(--text); font-size: 12px; font-weight: 600; }
.vis-svg-bar { fill: currentColor; }

/* A card that sits inside another card: recessed, not raised. */
.card-subtle {
    background: var(--fog);
    border-color: var(--border);
    box-shadow: none;
}
.brand-tinted {
    background: var(--brand-50);
    border-color: var(--brand-200);
}

/* ------------------------------------------------------------ stat variants */
.stat-income     { --stat-accent: var(--income);    --stat-icon-bg: var(--income-bg); }
.stat-expense    { --stat-accent: var(--expense);   --stat-icon-bg: var(--expense-bg); }
.stat-warning    { --stat-accent: var(--warning);   --stat-icon-bg: var(--warning-bg); }
.stat-brand      { --stat-accent: var(--brand-600); --stat-icon-bg: var(--brand-50); }
.stat-brand-soft { --stat-accent: var(--brand-400); --stat-icon-bg: var(--brand-50); }
.stat-info       { --stat-accent: var(--info);      --stat-icon-bg: var(--brand-50); }
.stat-neutral    { --stat-accent: var(--steel);     --stat-icon-bg: var(--fog); }
.stat-violet     { --stat-accent: #8b5cf6;          --stat-icon-bg: #f5f3ff; }

/* ------------------------------------------------------- more utilities */
/* Surface fills */
.bg-fog         { background: var(--fog); }
.bg-white-brand { background: #fff; color: var(--brand-700); }

/* Type scale */
.fs-brand   { font-size: 1.2rem; color: var(--brand-600); }
.fs-135     { font-size: 1.35rem; }
.fs-100-400 { font-size: 1rem; font-weight: 400; }
.code-chip  { font-size: 13px; font-weight: 600; color: var(--brand-600); }

/* Layout */
.grid-2-equal  { grid-template-columns: 1fr 1fr; }
.progress-thin { height: 6px; }
.list-plain    { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-flush    { gap: 8px; list-style: none; padding: 0; margin: 0; }
.meta-row {
    padding-inline-start: 20px; gap: 16px;
    color: var(--text-muted); font-size: .9rem;
}
.ps-18-gap-8 { padding-inline-start: 18px; gap: 8px; }
.mt-3px      { margin-top: 3px; }
.pt-0        { padding-top: 0; }
.p-32        { padding: 32px; }
.p-32-16     { padding: 32px 16px; }
.badge-chip  { padding: 5px 28px 5px 10px; font-size: .78rem; width: auto; }
.avatar-56   { width: 56px !important; height: 56px !important; padding: 0 !important; font-size: 1.4rem !important; }

.max-150 { max-width: 150px; }
.max-200 { max-width: 200px; }
.max-220 { max-width: 220px; }
.max-640 { max-width: 640px; }
.max-860 { max-width: 860px; }
.min-220 { min-width: 220px; }

.w-10-end { width: 10%; text-align: end; }
.w-20 { width: 20%; }
.w-22 { width: 22%; }
.w-26 { width: 26%; }
.input-auto-sm { width: auto !important; max-width: 220px; display: inline-block; }

/* Impersonation bar & user ID copy (works in both light & dark themes) */
.impersonate-bar {
    position: sticky; top: 0; z-index: 61;
    background: var(--brand-600); color: #fff;
    box-shadow: var(--shadow-sm);
}
.impersonate-bar-inner {
    max-width: 1200px; margin: 0 auto; padding: 8px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.impersonate-bar-text {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; line-height: 1.35;
}
.impersonate-bar-btn {
    background: #0f172a; border-color: #0f172a; color: #fff; white-space: nowrap;
}
.impersonate-bar-btn:hover { background: #1e293b; color: #fff; }

.user-id-copy {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 8px;
    font-size: 12px; color: var(--text-muted); cursor: pointer;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.user-id-copy:hover { color: var(--brand-600); border-color: var(--brand-500); }
.user-id-copy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: inherit; }

/* A progress bar whose width depends on the record. Width used to come from JS
   via CSSOM (el.style.width), which the nonce-only style-src blocks: the bar
   rendered at 0px and the console logged a CSP violation. Views now round the
   server-side percentage to an integer and the attribute selector below sets
   the width — no inline style, no JS. */
.bar-track { height: 100%; width: 0; transition: width .5s var(--ease); }

[data-width="0"]   { width: 0%; }   [data-width="1"]   { width: 1%; }
[data-width="2"]   { width: 2%; }   [data-width="3"]   { width: 3%; }
[data-width="4"]   { width: 4%; }   [data-width="5"]   { width: 5%; }
[data-width="6"]   { width: 6%; }   [data-width="7"]   { width: 7%; }
[data-width="8"]   { width: 8%; }   [data-width="9"]   { width: 9%; }
[data-width="10"]  { width: 10%; }  [data-width="11"]  { width: 11%; }
[data-width="12"]  { width: 12%; }  [data-width="13"]  { width: 13%; }
[data-width="14"]  { width: 14%; }  [data-width="15"]  { width: 15%; }
[data-width="16"]  { width: 16%; }  [data-width="17"]  { width: 17%; }
[data-width="18"]  { width: 18%; }  [data-width="19"]  { width: 19%; }
[data-width="20"]  { width: 20%; }  [data-width="21"]  { width: 21%; }
[data-width="22"]  { width: 22%; }  [data-width="23"]  { width: 23%; }
[data-width="24"]  { width: 24%; }  [data-width="25"]  { width: 25%; }
[data-width="26"]  { width: 26%; }  [data-width="27"]  { width: 27%; }
[data-width="28"]  { width: 28%; }  [data-width="29"]  { width: 29%; }
[data-width="30"]  { width: 30%; }  [data-width="31"]  { width: 31%; }
[data-width="32"]  { width: 32%; }  [data-width="33"]  { width: 33%; }
[data-width="34"]  { width: 34%; }  [data-width="35"]  { width: 35%; }
[data-width="36"]  { width: 36%; }  [data-width="37"]  { width: 37%; }
[data-width="38"]  { width: 38%; }  [data-width="39"]  { width: 39%; }
[data-width="40"]  { width: 40%; }  [data-width="41"]  { width: 41%; }
[data-width="42"]  { width: 42%; }  [data-width="43"]  { width: 43%; }
[data-width="44"]  { width: 44%; }  [data-width="45"]  { width: 45%; }
[data-width="46"]  { width: 46%; }  [data-width="47"]  { width: 47%; }
[data-width="48"]  { width: 48%; }  [data-width="49"]  { width: 49%; }
[data-width="50"]  { width: 50%; }  [data-width="51"]  { width: 51%; }
[data-width="52"]  { width: 52%; }  [data-width="53"]  { width: 53%; }
[data-width="54"]  { width: 54%; }  [data-width="55"]  { width: 55%; }
[data-width="56"]  { width: 56%; }  [data-width="57"]  { width: 57%; }
[data-width="58"]  { width: 58%; }  [data-width="59"]  { width: 59%; }
[data-width="60"]  { width: 60%; }  [data-width="61"]  { width: 61%; }
[data-width="62"]  { width: 62%; }  [data-width="63"]  { width: 63%; }
[data-width="64"]  { width: 64%; }  [data-width="65"]  { width: 65%; }
[data-width="66"]  { width: 66%; }  [data-width="67"]  { width: 67%; }
[data-width="68"]  { width: 68%; }  [data-width="69"]  { width: 69%; }
[data-width="70"]  { width: 70%; }  [data-width="71"]  { width: 71%; }
[data-width="72"]  { width: 72%; }  [data-width="73"]  { width: 73%; }
[data-width="74"]  { width: 74%; }  [data-width="75"]  { width: 75%; }
[data-width="76"]  { width: 76%; }  [data-width="77"]  { width: 77%; }
[data-width="78"]  { width: 78%; }  [data-width="79"]  { width: 79%; }
[data-width="80"]  { width: 80%; }  [data-width="81"]  { width: 81%; }
[data-width="82"]  { width: 82%; }  [data-width="83"]  { width: 83%; }
[data-width="84"]  { width: 84%; }  [data-width="85"]  { width: 85%; }
[data-width="86"]  { width: 86%; }  [data-width="87"]  { width: 87%; }
[data-width="88"]  { width: 88%; }  [data-width="89"]  { width: 89%; }
[data-width="90"]  { width: 90%; }  [data-width="91"]  { width: 91%; }
[data-width="92"]  { width: 92%; }  [data-width="93"]  { width: 93%; }
[data-width="94"]  { width: 94%; }  [data-width="95"]  { width: 95%; }
[data-width="96"]  { width: 96%; }  [data-width="97"]  { width: 97%; }
[data-width="98"]  { width: 98%; }  [data-width="99"]  { width: 99%; }
[data-width="100"] { width: 100%; }

/* Modal scroll lock. The old JS wrote document.body.style.overflow, which the
   nonce-only style-src blocks; a class toggle is CSP-safe. */
body.modal-open { overflow: hidden; }

/* Category icon chips / swatches get their colour as a server-rendered class
   (cc-<hex>). Writing el.style.background in JS is blocked by style-src. */
.cat-chip.cc-10b981,
.cat-swatch.cc-10b981 { background-color: #10b981; }
.cat-chip.cc-f59e0b,
.cat-swatch.cc-f59e0b { background-color: #f59e0b; }
.cat-chip.cc-3b82f6,
.cat-swatch.cc-3b82f6 { background-color: #3b82f6; }
.cat-chip.cc-f97316,
.cat-swatch.cc-f97316 { background-color: #f97316; }
.cat-chip.cc-8b5cf6,
.cat-swatch.cc-8b5cf6 { background-color: #8b5cf6; }
.cat-chip.cc-ef4444,
.cat-swatch.cc-ef4444 { background-color: #ef4444; }
.cat-chip.cc-06b6d4,
.cat-swatch.cc-06b6d4 { background-color: #06b6d4; }
.cat-chip.cc-ec4899,
.cat-swatch.cc-ec4899 { background-color: #ec4899; }
.cat-chip.cc-10b981, .cat-chip.cc-3b82f6, .cat-chip.cc-f97316,
.cat-chip.cc-8b5cf6, .cat-chip.cc-ef4444, .cat-chip.cc-ec4899 { color: #fff; }
.cat-chip.cc-f59e0b, .cat-chip.cc-06b6d4 { color: #111; }

/* Article builder blocks are plain panels, not lifted cards. */
.section-block { box-shadow: none; background: var(--bg); }

@media (max-width: 900px) {
    .app-body { padding: 16px; }
    .app-main.is-shifted { margin-inline-start: 0; }
    .modal { max-height: 100%; max-width: none; border-radius: 0; height: 100%; }
    .modal-backdrop { padding: 0; align-items: flex-end; }
    .toast-stack { inset-inline: 12px; inset-block-start: 12px; }
    .toast { max-width: none; min-width: 0; }
}

@media print {
    .no-print, .app-sidebar, .app-header, .toast-stack { display: none !important; }
    .app-main { margin: 0 !important; }
    body { background: #fff; }
}

/* ============================================================ install bar */
.install-bar {
    position: fixed; z-index: 110;
    inset-block-end: 16px; inset-inline: 16px;
    max-width: 460px; margin-inline: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: modal-in .25s var(--ease);
}
.install-bar img { border-radius: 9px; }
.install-bar strong { font-size: .9rem; }

/* Modul 1 — donation widget in the user sidebar */
.donation-widget {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    margin-block-end: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, .5rem);
}
.donation-widget .donation-widget-icon {
    font-size: 1.1rem;
    color: var(--brand-500);
}
.donation-widget strong {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
}
.donation-widget p {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}
.donation-widget-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 4px;
}
.donation-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--brand-500);
    background: rgba(249, 115, 22, .12);
    border: 1px solid transparent;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none;
}
.donation-widget-link:hover {
    background: rgba(249, 115, 22, .2);
    border-color: var(--brand-500);
    color: var(--brand-500);
}
@media (max-width: 600px) {
    .donation-widget { padding: 12px 14px; }
}

@media (min-width: 640px) {
    .install-bar { inset-inline: auto 16px; inset-block-end: 88px; }
}

/* Modul 4 — announcement banner on the user dashboard */
.announcement-banner { padding: 14px 18px; border-inline-start-width: 4px; overflow: hidden; }
.announcement-banner-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.announcement-banner-body p { margin: 4px 0; }
.announcement-banner-body ul, .announcement-banner-body ol { margin-block: 4px; padding-inline-start: 20px; }
.announcement-banner-body a { text-decoration: underline; }

/* Modul 3 — category icon/colour pins */
.cat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
  background: var(--surface-elev, #3B3B3B); color: #fff; font-size: 13px;
}
.cat-icon-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.cat-icon-option {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 15px; cursor: pointer;
}
.cat-icon-option:hover { border-color: var(--brand-500); color: var(--text); }
.cat-icon-option.is-active { border-color: var(--brand-500); background: rgba(249, 115, 22, .12); color: var(--brand-400); }
.cat-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-swatch {
  width: 28px; height: 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.cat-swatch.is-active { outline: 2px solid var(--text); outline-offset: 2px; border-color: #fff; }

/* ============================================================== 2026-10-11
 * Owner feedback batch: prominent CTA, navbar user menu (+ theme switch),
 * chart type switcher, and the new SvgChart line/area/pie renderers.
 * app.css stays token-driven so the dark layer (shadcn.css) only has to map
 * variables — never re-colour a component here.
 * ====================================================================== */

/* --- big "tambah transaksi" CTA ----------------------------------------- */
.btn-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    font-weight: 600; font-size: .95rem;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, .5), 0 4px 16px rgba(249, 115, 22, .28);
}
.btn-cta i { font-size: 1rem; }

/* --- navbar user menu ---------------------------------------------------- */
.header-avatar { border: 1px solid transparent; cursor: pointer; }
.header-avatar-caret { font-size: .6rem; margin-inline-start: 2px; color: var(--text-muted); }

.user-menu { position: relative; }
.user-menu-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
    z-index: 60; min-width: 250px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.user-menu-panel[hidden] { display: none; }
.user-menu-head {
    margin: 0; padding: 12px 14px; display: grid; gap: 2px;
    border-bottom: 1px solid var(--border);
}
.user-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px;
    font: inherit; font-size: .88rem; color: var(--text-muted);
    background: transparent; border: 0; text-align: start; cursor: pointer;
}
.user-menu-item i { width: 18px; text-align: center; }
.user-menu-item:hover { background: var(--fog); color: var(--text); }
.user-menu-theme-btn { margin-inline-start: auto; border-radius: var(--radius-pill); gap: 6px; }
.user-menu-logout { color: var(--expense); }
.user-menu-theme-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
}
.theme-pill-group {
    display: inline-flex; align-items: center;
    background: var(--fog); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: 2px; gap: 2px;
    margin-inline-start: auto;
}
.theme-pill-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--radius-pill);
    border: 0; background: transparent;
    color: var(--text-muted); font-size: .76rem; font-weight: 500;
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.theme-pill-btn:hover { color: var(--text); }
.theme-pill-btn.is-active {
    background: var(--brand-500); color: #000;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.theme-toggle-btn { font-size: .95rem; }

/* --- chart type switcher (batang / garis / area / pie) ------------------- */
.chart-type-switch {
    display: inline-flex; gap: 2px; flex-wrap: wrap; padding: 3px;
    background: var(--fog); border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}
.chart-type-btn {
    padding: 4px 11px; border-radius: 999px; font-size: .76rem;
    color: var(--text-muted); white-space: nowrap;
}
.chart-type-btn:hover { color: var(--text); }
.chart-type-btn.is-active { background: var(--graphite); color: var(--bg); font-weight: 600; }

.chart-type-dropdown-wrap {
    display: inline-flex;
    align-items: center;
}
.chart-type-select {
    min-width: 132px;
    height: 32px;
    font-size: .8rem;
    font-weight: 500;
    padding-inline-start: 10px;
    padding-inline-end: 28px;
    border-radius: var(--radius-sm);
    background-color: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chart-type-select:hover {
    border-color: var(--brand-500);
}
.chart-type-select:focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, .25);
}

/* --- SvgChart line / area / pie ------------------------------------------ */
.vis-line-chart, .vis-area-chart { width: 100%; height: auto; max-height: 260px; }
.asset-hero-chart { max-width: 440px; width: 100%; }
.asset-hero-chart .vis-area-chart { max-height: 120px; }
.vis-line { stroke: var(--brand-500); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vis-line-dots circle { fill: var(--brand-500); }
.vis-area { opacity: .16; }
.vis-stop-top { stop-color: var(--brand-500); }
.vis-stop-bot { stop-color: var(--brand-500); stop-opacity: .03; }

.vis-pie {
    display: flex; gap: 28px; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 180px; padding: 12px 0;
}
.vis-pie svg { width: 170px; height: 170px; flex: 0 0 170px; }
.vis-pie-legend { display: flex; flex-direction: column; gap: 8px; flex: 0 1 240px; min-width: 150px; }
.vis-pie-row { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.vis-pie-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.vis-pie-name { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.vis-pie-value { margin-inline-start: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 580px) {
    .vis-pie { flex-direction: column; gap: 16px; }
    .vis-pie-legend { width: 100%; max-width: 280px; }
}

.vis-slice-0 { stroke: #10b981; } .vis-pie-dot.vis-slice-0-dot { background: #10b981; }
.vis-slice-1 { stroke: #f59e0b; } .vis-pie-dot.vis-slice-1-dot { background: #f59e0b; }
.vis-slice-2 { stroke: #3b82f6; } .vis-pie-dot.vis-slice-2-dot { background: #3b82f6; }
.vis-slice-3 { stroke: #f97316; } .vis-pie-dot.vis-slice-3-dot { background: #f97316; }
.vis-slice-4 { stroke: #8b5cf6; } .vis-pie-dot.vis-slice-4-dot { background: #8b5cf6; }
.vis-slice-5 { stroke: #ef4444; } .vis-pie-dot.vis-slice-5-dot { background: #ef4444; }
.vis-slice-6 { stroke: #06b6d4; } .vis-pie-dot.vis-slice-6-dot { background: #06b6d4; }
.vis-slice-7 { stroke: #ec4899; } .vis-pie-dot.vis-slice-7-dot { background: #ec4899; }

/* --- Pagination Tabs ---------------------------------------------------- */
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.pagination-info {
    font-size: .8rem;
    color: var(--text-muted);
}
.pagination-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.pagination-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all .15s var(--ease);
    cursor: pointer;
    user-select: none;
}
.pagination-tab:hover:not(.disabled):not(.active) {
    border-color: var(--brand-500);
    color: var(--brand-600);
    background-color: var(--accent);
}
.pagination-tab.active {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.pagination-tab.disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.pagination-tab-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 32px;
    color: var(--text-muted);
    font-size: .85rem;
}



/* --- Notification Bell & Menu Dropdown (Bezn Obsidian Design) --- */
.notif-menu { position: relative; }
.notif-trigger { position: relative; }

.notif-counter-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    border-radius: var(--radius-pill, 999px);
    font-size: 10px; font-weight: 700;
    background: #ef4444; color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--surface, #141418);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    animation: notifPulse 2.5s infinite;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.notif-menu-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
    z-index: 65; width: 360px; max-width: calc(100vw - 28px);
    background: var(--surface, #141418);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column;
}
.notif-menu-panel[hidden] { display: none; }

.notif-header {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    display: flex; align-items: center; justify-content: space-between;
}
.notif-header-title {
    font-size: 0.92rem; font-weight: 700; color: var(--text, #f1f5f9);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.notif-count-pill {
    font-size: 0.7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    background: var(--brand-500, #3b82f6); color: #fff;
}

.notif-scroll-area {
    max-height: 380px; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 12px;
}
.notif-scroll-area::-webkit-scrollbar { width: 5px; }
.notif-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12); border-radius: 999px;
}

.notif-section-title {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted, #94a3b8);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 4px;
}
.notif-section-badge {
    font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 4px;
}
.notif-section-badge.invitation {
    background: rgba(59, 130, 246, 0.15); color: #60a5fa;
}
.notif-section-badge.announcement {
    background: rgba(168, 85, 247, 0.15); color: #c084fc;
}

.notif-items-list {
    display: flex; flex-direction: column; gap: 8px;
}

.notif-item {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.02);
    display: flex; gap: 10px; align-items: flex-start;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.notif-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.notif-item-icon {
    width: 32px; height: 32px; border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.85rem; color: #3b82f6;
}
.notif-item-icon.announcement-icon {
    background: rgba(168, 85, 247, 0.12); color: #a855f7;
}

.notif-item-content {
    flex: 1; min-width: 0;
}
.notif-item-head {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    margin-bottom: 3px;
}
.notif-item-title {
    font-size: 0.82rem; font-weight: 700; color: var(--text, #f1f5f9);
}
.notif-item-time {
    font-size: 0.68rem; color: var(--text-muted, #94a3b8); flex-shrink: 0;
}
.notif-item-desc {
    font-size: 0.75rem; color: var(--text-muted, #94a3b8);
    margin: 0; line-height: 1.35;
}

.notif-actions {
    display: flex; align-items: center; gap: 6px; margin-top: 8px;
}

.notif-empty-state {
    padding: 32px 16px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.notif-empty-icon-wrap {
    width: 44px; height: 44px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #94a3b8); font-size: 1.1rem;
    margin-bottom: 10px;
}
.notif-empty-title {
    font-size: 0.88rem; font-weight: 700; color: var(--text, #f1f5f9); margin: 0 0 4px 0;
}
.notif-empty-desc {
    font-size: 0.74rem; color: var(--text-muted, #94a3b8); margin: 0; max-width: 240px;
}

.notif-footer {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    text-align: center;
}
.notif-footer-link {
    font-size: 0.76rem; font-weight: 600; color: var(--brand-500, #3b82f6);
    text-decoration: none; display: inline-flex; align-items: center;
}
.notif-footer-link:hover { text-decoration: underline; }