/* Direction: Gen-Z money playground — lavender canvas, electric violet, coral / mint / sunny-yellow pops, a bubbly rounded display */
/* 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: #f6f3ff;
  --surface: #ffffff;
  --surface-2: #eae7f4;
  --border: #e1dbfa;
  --border-strong: #b0adbd;
  --ink: #1d1646;
  --muted: #5d5788;
  --accent: #5b3df0;
  --accent-hover: #4d34cc;
  --accent-ink: #ffffff;
  --accent-text: #4a2bd8;
  --accent-strong: #5b3df0;
  --accent-soft: #ece7ff;
  --accent-border: #b0a1f8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe5e8;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eee0e1;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efd9e4;
  --danger-strong: #b91c1c;
  --chart-1: #5b3df0;
  --chart-2: #db1dae;
  --chart-3: #89320a;
  --chart-4: #8c7e11;
  --chart-5: #0a5e3e;
  --chart-6: #078ead;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 600;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 12px 32px -14px rgba(74, 43, 216, 0.35);
  --x-blue: #2f6bff;
  --x-purple: #8a4dff;
  --x-coral: #ff6b6b;
  --x-mint: #19c79a;
  --x-yellow: #ffc933;
  --x-on-photo: #ffffff;
  --x-on-sun: #2a1c00;
  --x-deep: #3b22b0;
  --gradient-night: linear-gradient(170deg, #2a1b7a, #4b2bc4 55%, #6d2fd0);
  --gradient-blue: linear-gradient(135deg, #2358e8, #6a3ff0);
  --gradient-purple: linear-gradient(135deg, #7a35e0, #a82fc0);
  --gradient-mint: linear-gradient(135deg, #087f63, #0a8f8a);
  --gradient-coral: linear-gradient(135deg, #d6333f, #c0245f);
  --gradient-sun: linear-gradient(135deg, #ffd447, #ffab2e);
  --gradient-pop: linear-gradient(120deg, #2358e8, #7a35e0 55%, #c22a86);
  --gradient-barin: linear-gradient(180deg, #3ee0b4, #12a883);
  --gradient-barout: linear-gradient(180deg, #ff8a8a, #ee4f6b);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #080615;
  --surface: #211f2c;
  --surface-2: #141221;
  --border: #2b2936;
  --border-strong: #52515b;
  --ink: #f6f3ff;
  --muted: #9794a1;
  --accent: #5b3df0;
  --accent-hover: #745af2;
  --accent-ink: #ffffff;
  --accent-text: #8974f4;
  --accent-strong: #8974f4;
  --accent-soft: #1a1245;
  --accent-border: #2d1f78;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0b211e;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2e1712;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2f0b17;
  --danger-strong: #d16969;
  --chart-1: #654cfe;
  --chart-2: #e932ba;
  --chart-3: #d3500f;
  --chart-4: #998a0d;
  --chart-5: #179767;
  --chart-6: #249ab9;
}

[hidden] { display: none !important; }

.g-blue { background: var(--gradient-blue); }
.g-purple { background: var(--gradient-purple); }
.g-mint { background: var(--gradient-mint); }
.g-coral { background: var(--gradient-coral); }
.g-sun { background: var(--gradient-sun); color: var(--x-on-sun); }
.g-pop { background: var(--gradient-pop); }

.metric { color: var(--x-on-photo); border-radius: var(--radius-card); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-card); transition: transform .2s ease; }
.metric.g-sun { color: var(--x-on-sun); }
.metric:hover { transform: translateY(-3px) rotate(-.4deg); }
.metric-val { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: .35rem; overflow-wrap: anywhere; }

.hero { color: var(--x-on-photo); border-radius: 28px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.hero .floaty { position: absolute; font-size: 2.4rem; animation: floaty 4.5s ease-in-out infinite; user-select: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }

.side { background: var(--gradient-night); color: var(--x-on-photo); }
.side .nav { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-radius: 16px; font-weight: 600; color: inherit; transition: background .15s, transform .15s; }
.side .nav:hover { background: color-mix(in srgb, var(--x-on-photo) 16%, transparent); transform: translateX(3px); }
.side .nav[aria-current="page"] { background: var(--x-on-photo); color: var(--x-deep); }
.side .nav:focus-visible, .mnav:focus-visible { outline: 3px solid var(--x-yellow); outline-offset: 2px; }
.mnav { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: 16px; font-weight: 600; color: var(--ink); }
.mnav:hover { background: var(--accent-soft); }
.mnav[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }

.toast { position: fixed; top: 1rem; right: 1rem; z-index: 90; max-width: min(92vw, 24rem); padding: .9rem 1.15rem; border-radius: 18px; color: var(--x-on-photo); font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); cursor: pointer; transition: opacity .4s, transform .4s; }
.toast-ok { background: var(--gradient-night); }
.toast-err { background: var(--gradient-coral); }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes pop { from { transform: translateY(-16px) scale(.94); } to { transform: none; } }

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

.txn { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .9rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left-width: 6px; border-radius: 18px; }
.txn { min-width: 0; max-width: 100%; box-sizing: border-box; }
.txn > * { min-width: 0; }
.txn > .text-right { flex: 0 1 auto; max-width: 100%; }
ul:has(> .txn) { grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; overflow-x: clip; }
.txn.in { border-left-color: var(--x-mint); }
.txn.out { border-left-color: var(--x-coral); }
.txn.late { border-left-color: var(--x-coral); background: color-mix(in srgb, var(--x-coral) 10%, var(--surface)); }
.txn-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; font-size: 1.35rem; flex: none; }
.txn-ico.in { background: color-mix(in srgb, var(--x-mint) 28%, transparent); }
.txn-ico.out { background: color-mix(in srgb, var(--x-coral) 26%, transparent); }
.txn-ico.pay { background: color-mix(in srgb, var(--x-yellow) 38%, transparent); }

.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tag-income, .tag-paid, .tag-ok { background: color-mix(in srgb, var(--x-mint) 30%, transparent); }
.tag-expense { background: color-mix(in srgb, var(--x-coral) 28%, transparent); }
.tag-pending, .tag-warn { background: color-mix(in srgb, var(--x-yellow) 45%, transparent); }
.tag-overdue, .tag-over { background: var(--gradient-coral); color: var(--x-on-photo); }

.bar { height: .95rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 11%, transparent); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.bar-ok > i { background: var(--gradient-mint); }
.bar-warn > i { background: var(--gradient-sun); }
.bar-over > i { background: var(--gradient-coral); }

.donut { width: 11rem; height: 11rem; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-card); }
.donut-hole { width: 7.2rem; height: 7.2rem; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; line-height: 1.1; }

.flow { display: flex; align-items: flex-end; gap: .5rem; min-height: 14rem; }
.flow-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.flow-bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 10.5rem; width: 100%; }
.fb { width: 36%; max-width: 1.8rem; min-height: 4px; border-radius: 10px 10px 4px 4px; transition: height .7s cubic-bezier(.2, .8, .2, 1); }
.fb-in { background: var(--gradient-barin); }
.fb-out { background: var(--gradient-barout); }
.flow-lbl { font-weight: 700; font-size: .85rem; }
.flow-net { font-size: .7rem; color: var(--muted); font-weight: 600; }
.dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.dot-in { background: var(--x-mint); }
.dot-out { background: var(--x-coral); }

.qa { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1.1rem; border-radius: var(--radius-card); color: var(--x-on-photo); text-align: left; box-shadow: var(--shadow-card); transition: transform .18s ease; cursor: pointer; font-family: var(--font-display); }
.qa:hover { transform: translateY(-4px) rotate(-1deg); }
.qa:active { transform: scale(.97); }
.qa:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.qa.g-sun { color: var(--x-on-sun); }
.qa small { font-family: var(--font-body); font-weight: 500; }

.auth-bg { background: var(--gradient-pop); color: var(--x-on-photo); }
.catdot { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 14px; font-size: 1.2rem; background: var(--accent-soft); }

table.simple { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.simple th { text-align: left; font-weight: 700; color: var(--muted); padding: .5rem .6rem; border-bottom: 2px solid var(--border); white-space: nowrap; }
table.simple td { padding: .6rem; border-bottom: 1px solid var(--border); }
table.simple td.num, table.simple th.num { text-align: right; font-variant-numeric: tabular-nums; }

html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; }