/* Direction: Gen-Z money app — electric blue, purple, coral, mint, sunny yellow on soft white */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f5f3ff;
  --surface: #ffffff;
  --surface-2: #e9e7f4;
  --border: #d4d3e0;
  --border-strong: #aeadbd;
  --ink: #1a1440;
  --muted: #696481;
  --accent: #3d4bff;
  --accent-hover: #3440d9;
  --accent-ink: #ffffff;
  --accent-text: #2f3bd6;
  --accent-strong: #3845eb;
  --accent-soft: #dbdbff;
  --accent-border: #a2a7ff;
  --success: #0d9467;
  --success-ink: #1a1440;
  --success-soft: #d9e8ed;
  --success-strong: #0a7350;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ede0e1;
  --warning-strong: #994607;
  --danger: #dc3a27;
  --danger-ink: #ffffff;
  --danger-soft: #f2dde5;
  --danger-strong: #ba3121;
  --chart-1: #3d4bff;
  --chart-2: #d629ce;
  --chart-3: #9f1709;
  --chart-4: #9d7d01;
  --chart-5: #10642f;
  --chart-6: #0d94a7;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius-card: 22px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --shadow-card: 0 12px 30px -14px rgba(61, 75, 255, 0.35);
  --x-blue: #3d4bff;
  --x-purple: #9b4dff;
  --x-coral: #ff6b57;
  --x-mint: #1fd3a0;
  --x-yellow: #ffc933;
  --x-on-grad: #ffffff;
  --x-on-yellow: #2a1f00;
  --gradient-blue: linear-gradient(135deg, #2433f0, #6a4dff);
  --gradient-purple: linear-gradient(135deg, #7a28ef, #c04dff);
  --gradient-coral: linear-gradient(135deg, #d6321f, #ff7a59);
  --gradient-mint: linear-gradient(135deg, #04775a, #12b484);
  --gradient-yellow: linear-gradient(135deg, #ffc22e, #ffe36e);
  --gradient-hero: linear-gradient(135deg, #2433f0 0%, #8a3dff 55%, #ff6b57 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #050613;
  --surface: #1e1f2b;
  --surface-2: #12121f;
  --border: #282934;
  --border-strong: #50515a;
  --ink: #f5f3ff;
  --muted: #9594a1;
  --accent: #3d4bff;
  --accent-hover: #5a66ff;
  --accent-ink: #ffffff;
  --accent-text: #747dff;
  --accent-strong: #747dff;
  --accent-soft: #111547;
  --accent-border: #1e257d;
  --success: #0d9467;
  --success-ink: #ffffff;
  --success-soft: #072525;
  --success-strong: #209d73;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2c1711;
  --warning-strong: #c57a40;
  --danger: #dc3a27;
  --danger-ink: #ffffff;
  --danger-soft: #341117;
  --danger-strong: #e25848;
  --chart-1: #4359fb;
  --chart-2: #d841d0;
  --chart-3: #ed1600;
  --chart-4: #a48312;
  --chart-5: #16994a;
  --chart-6: #1d9bad;
}

.g-blue { background: var(--gradient-blue); color: var(--x-on-grad); }
.g-purple { background: var(--gradient-purple); color: var(--x-on-grad); }
.g-coral { background: var(--gradient-coral); color: var(--x-on-grad); }
.g-mint { background: var(--gradient-mint); color: var(--x-on-grad); }
.g-yellow { background: var(--gradient-yellow); color: var(--x-on-yellow); }
.panel.g-yellow { background: var(--gradient-yellow); color: var(--x-on-yellow); }
.g-hero { background: var(--gradient-hero); color: var(--x-on-grad); }

.stat { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-card); transition: transform .2s ease; }
.stat:hover { transform: translateY(-3px) rotate(-.4deg); }
.stat::after { content: ""; position: absolute; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, white 18%, transparent); pointer-events: none; }
.stat .big { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.02em; word-break: break-word; }
.stat .sub { font-size: .8rem; font-weight: 600; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.25rem; }

.navlink { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 14px; font-weight: 600; white-space: nowrap; color: var(--ink); transition: background .15s, transform .15s; }
.navlink:hover { background: color-mix(in srgb, var(--x-blue) 10%, transparent); }
.navlink:focus-visible { outline: 3px solid var(--x-blue); outline-offset: 2px; }
.navlink[aria-current="page"] { background: var(--gradient-blue); color: var(--x-on-grad); box-shadow: var(--shadow-card); }

.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tag-in { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.tag-out { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.tag-pend { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.tag-over { background: var(--danger); color: var(--x-on-grad); }
.amt-in { color: var(--success); font-weight: 800; }
.amt-out { color: var(--danger); font-weight: 800; }

.cat { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cat0 { background: color-mix(in srgb, var(--x-blue) 16%, transparent); }
.cat1 { background: color-mix(in srgb, var(--x-purple) 16%, transparent); }
.cat2 { background: color-mix(in srgb, var(--x-coral) 20%, transparent); }
.cat3 { background: color-mix(in srgb, var(--x-mint) 24%, transparent); }
.cat4 { background: color-mix(in srgb, var(--x-yellow) 32%, transparent); }

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .55rem .7rem; white-space: nowrap; }
.tbl td { padding: .7rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tr:hover td { background: color-mix(in srgb, var(--x-blue) 4%, transparent); }
.tbl .num { text-align: right; white-space: nowrap; }
.row-overdue td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.row-overdue td:first-child { box-shadow: inset 4px 0 0 var(--danger); }

.track { height: .8rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.fill-ok { background: linear-gradient(90deg, var(--x-mint), var(--x-blue)); }
.fill-warn { background: linear-gradient(90deg, var(--x-yellow), var(--x-coral)); }
.fill-over { background: linear-gradient(90deg, var(--x-coral), var(--x-purple)); }

.donut { width: 11rem; height: 11rem; border-radius: 50%; position: relative; flex: none; }
.donut::after { content: ""; position: absolute; inset: 2.1rem; border-radius: 50%; background: var(--surface); }
.donut-mid { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem; }

.cf { display: flex; align-items: flex-end; gap: .9rem; height: 13.5rem; overflow-x: auto; padding-top: .5rem; }
.cf-col { flex: 1 0 3.4rem; display: flex; flex-direction: column; align-items: center; height: 100%; }
.cf-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.cf-bar { width: 38%; max-width: 1.6rem; min-height: 3px; border-radius: 8px 8px 3px 3px; transition: height .8s cubic-bezier(.2, .8, .2, 1); }

.hbar { height: 2.2rem; border-radius: 12px; min-width: 6px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }

.quick { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--radius-card); font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; box-shadow: var(--shadow-card); transition: transform .18s ease; }
.quick:hover { transform: translateY(-4px) scale(1.02); }
.quick:active { transform: scale(.98); }
.quick:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.quick .em { font-size: 1.8rem; }

.flash { border-radius: 16px; padding: .85rem 1.1rem; font-weight: 700; display: flex; gap: .6rem; align-items: center; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.flash-ok { background: color-mix(in srgb, var(--x-mint) 26%, var(--surface)); color: var(--ink); border: 2px solid var(--x-mint); }
.flash-err { background: color-mix(in srgb, var(--x-coral) 22%, var(--surface)); color: var(--ink); border: 2px solid var(--x-coral); }

.chipf { display: inline-flex; align-items: center; padding: .4rem .9rem; border-radius: 999px; font-weight: 700; font-size: .85rem; border: 2px solid var(--border); color: var(--ink); background: var(--surface); }
.chipf:hover { border-color: var(--x-blue); }
.chipf[aria-current="true"] { background: var(--x-blue); border-color: var(--x-blue); color: var(--x-on-grad); }

.auth-bg { background: var(--gradient-hero); position: relative; overflow: hidden; }
.float { position: absolute; font-size: 3rem; animation: bob 5s ease-in-out infinite; }
.float:nth-child(2) { animation-delay: -1.5s; }
.float:nth-child(3) { animation-delay: -3s; }
.float:nth-child(4) { animation-delay: -4s; }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
@keyframes pop { from { transform: translateY(-10px) scale(.96); } to { transform: none; } }
html.reduced-motion .float, html.reduced-motion .flash { animation: none; }
html.reduced-motion .fill, html.reduced-motion .cf-bar, html.reduced-motion .hbar, html.reduced-motion .stat, html.reduced-motion .quick { transition: none; }