/* Quiet visual layer for the dashboard and authentication surfaces. */
main {
  position: relative;
  min-height: 100vh;
  overflow: visible;
  isolation: isolate;
  background: linear-gradient(180deg, #f0f4ff 0, #f5f7fb 220px);
}
.brand small { font-size: 12px; line-height: 1.5; }
.account-chip { align-items: center; }
.account-details { display: grid; justify-items: end; gap: 2px; min-width: 0; }
.account-logout { padding: 0; border: 0; background: none; color: #5268f5; font-size: 11px; line-height: 1.3; cursor: pointer; }
.account-logout:hover { color: #3549c7; text-decoration: underline; }
.theme-toggle { width: 34px; height: 34px; padding: 0; border: 1px solid #dbe2f0; border-radius: 50%; background: #ffffffb8; color: #5268f5; font-size: 19px; line-height: 1; cursor: pointer; transition: background .35s ease, border-color .35s ease, color .35s ease, transform .2s ease; }
.theme-toggle:hover { background: #eef1ff; transform: translateY(-1px); }
.theme-toggle.is-switching { animation: theme-toggle-switch .46s cubic-bezier(.22,.61,.36,1); }
@keyframes theme-toggle-switch { 0% { opacity: .45; transform: rotate(-90deg) scale(.72); } 55% { opacity: 1; transform: rotate(18deg) scale(1.14); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
body.dark-mode { --bg: #0f172a; --card: #182337; --ink: #e8eefc; --muted: #9eacc4; --line: #2b3952; --blue: #8494ff; background: #0f172a; color: var(--ink); }
body, main, .card, input, select, textarea, .theme-toggle { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
body.dark-mode main { background: linear-gradient(180deg, #17233a 0, #0f172a 260px); }
body.dark-mode main::before { opacity: .28; background: linear-gradient(135deg, #263654, #111b2f 70%); border-color: #2b3952; }
body.dark-mode main::after { opacity: .12; }
body.dark-mode main header { background: #111b32cc; border-color: #2b3952; }
body.dark-mode .card { background: var(--card); border-color: var(--line); }
body.dark-mode .chart-controls, body.dark-mode .color-controls, body.dark-mode .analysis-filters { background: #1b2940cc; border-color: var(--line); }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #111b2f; border-color: #35445f; color: var(--ink); }
body.dark-mode .chat { background: #111b2f; border: 1px solid #2b3952; color: var(--ink); }
body.dark-mode .bubble { background: #253450; border-color: #3b4b68; color: #e8eefc; }
body.dark-mode .bubble.me { background: #3549a8; border-color: #5268f5; color: #fff; }
body.dark-mode .btn { background: #253450; color: #b9c4ff; }
body.dark-mode .btn:hover { background: #304264; }
body.dark-mode .empty-state { background: linear-gradient(135deg, #1b2940, transparent), repeating-linear-gradient(135deg, transparent 0 14px, #2b395255 15px 16px); }
body.dark-mode .empty-state strong, body.dark-mode h1, body.dark-mode h2 { color: var(--ink); }
body.dark-mode .theme-toggle { border-color: #46587a; background: #253450; color: #ffd166; }
body.dark-mode aside { background: #fff; color: #172033; box-shadow: 12px 0 35px #0b142814; transition: background-color .35s ease, color .35s ease; }
body.dark-mode aside .brand, body.dark-mode aside .side-note { color: #172033; }
body.dark-mode aside .brand small, body.dark-mode aside .side-note { color: #667085; }
body.dark-mode aside .nav { color: #4b5567; transition: background-color .3s ease, color .3s ease, transform .2s ease; }
body.dark-mode aside .nav.active, body.dark-mode aside .nav:hover { background: #e8edf7; color: #172033; }
body.dark-mode aside .logout { color: #667085; }
body.dark-mode aside .logout:hover { color: #172033; }
main::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(115deg, transparent 0 76px, #cbd7f033 77px 78px),
    repeating-linear-gradient(25deg, transparent 0 112px, #ffffff66 113px 114px);
  animation: quiet-pattern-drift 34s linear infinite;
}
main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 190px;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(118deg, transparent 0 38%, #ffffff80 38.2% 38.8%, transparent 39% 100%),
    linear-gradient(152deg, transparent 0 62%, #d9e2ff70 62.2% 62.8%, transparent 63% 100%),
    repeating-linear-gradient(90deg, transparent 0 46px, #ffffff3d 47px 48px),
    linear-gradient(135deg, #e5ebff, #f5f7fb 70%);
  border-bottom: 1px solid #dfe6f4;
  animation: quiet-grid-drift 22s linear infinite;
}
main > * { position: relative; }
#content.page-enter { animation: content-enter .42s cubic-bezier(.22,.61,.36,1) both; }
#content.page-enter > * { animation: card-enter .42s cubic-bezier(.22,.61,.36,1) both; }
#content.page-enter > *:nth-child(2) { animation-delay: .06s; }
#content.page-enter > *:nth-child(3) { animation-delay: .12s; }
#content.page-enter > *:nth-child(4) { animation-delay: .18s; }
#content.page-leave { opacity: .35; transform: translateY(5px); transition: opacity .12s ease, transform .12s ease; }
@keyframes content-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
main header {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -10px -20px 26px;
  padding: 18px 20px 20px;
  border-bottom: 1px solid #dfe6f4;
  background: #ffffff38;
  backdrop-filter: blur(12px);
}
@keyframes quiet-grid-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 28px 10px, -18px 8px, 46px 0, 0 0; }
}
@keyframes quiet-pattern-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 80px 36px, -64px 24px; }
}
main header .eyebrow { color: #5268f5; }
main header h1 { text-shadow: 0 1px 0 #fff; }
.chart-controls,
.color-controls {
  min-height: 42px;
  border: 1px solid #e1e7f2;
  border-radius: 12px;
  background: #ffffffb8;
  padding: 8px 10px;
}
.trend-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  flex: 0 0 auto;
  padding-top: 10px;
}
.trend-controls label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.trend-controls output { color: var(--ink); white-space: nowrap; }
.trend-controls input { grid-column: 1 / -1; width: 100%; accent-color: #5268f5; }
.layout > .card:has(#trend), .layout > .card:has(#pie) { min-width: 0; height: 460px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.layout > .card:has(#trend) > .chart, .layout > .card:has(#pie) > .chart { flex: 1 1 auto; min-height: 0; height: auto; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.layout > .card:has(#trend) > .chart > canvas, .layout > .card:has(#pie) > .chart > canvas { flex: 1 1 auto; min-height: 0; height: 100% !important; width: 100% !important; }
#expenseDateControls { flex: 0 0 62px; overflow: hidden; }
.color-controls-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 58px;
  overflow: auto;
}
.analysis-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
  background: #ffffffb8;
}
.analysis-date-field { display: grid; gap: 6px; min-width: 0; }
.analysis-date-field label { color: var(--muted); font-size: 12px; }
.analysis-date-field input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); background: white; }
.date-range-arrow { color: var(--muted); padding-bottom: 9px; }
.analysis-period { color: var(--muted); font-size: 12px; padding-bottom: 9px; white-space: nowrap; }
.ai-badge { color: #5268f5; background: #eef1ff; border: 1px solid #dbe2ff; border-radius: 999px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }
.plan-result { white-space: pre-wrap; max-height: 560px; overflow: auto; line-height: 1.8; }
.plan-result.is-typing { border-left: 2px solid #5268f5; padding-left: 12px; animation: typing-caret .8s steps(1) infinite; }
.is-loading-text { color: #6d7a92; }
.loading-dots span { display: inline-block; animation: loading-dot 1.1s infinite; }
.loading-dots span:nth-child(2) { animation-delay: .18s; }
.loading-dots span:nth-child(3) { animation-delay: .36s; }
.primary:disabled { cursor: wait; opacity: .78; transform: none; }
@keyframes loading-dot { 0%, 55%, 100% { opacity: .25; transform: translateY(0); } 28% { opacity: 1; transform: translateY(-2px); } }
@keyframes typing-caret { 50% { border-color: transparent; } }
.empty-state {
  border-radius: 12px;
  background:
    linear-gradient(135deg, #ffffffb8, transparent),
    repeating-linear-gradient(135deg, transparent 0 14px, #e9eefb80 15px 16px);
}
.auth-body {
  background:
    linear-gradient(135deg, #eef2ff 0%, #f8fafc 48%, #e7f5ef 100%),
    repeating-linear-gradient(45deg, transparent 0 34px, #ffffff55 35px 36px);
  background-blend-mode: multiply;
}
.auth-card { overflow: hidden; transition: height .38s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.auth-form-enter { animation: auth-form-enter .32s cubic-bezier(.22,.61,.36,1) both; }
.auth-form-exit { animation: auth-form-exit .16s ease both; }
@keyframes auth-form-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-form-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-5px); } }
@media (max-width: 900px) {
  aside { position: sticky; top: 0; z-index: 10; }
  main header { margin: -4px -10px 20px; padding: 16px 10px 18px; }
}
@media (max-width: 520px) {
  main { background: linear-gradient(180deg, #f0f4ff 0, #f5f7fb 150px); }
  main::before { height: 150px; }
  main header { margin: -4px 0 18px; padding: 14px 0 16px; }
  #expenseDateControls { grid-template-columns: 1fr !important; }
  .trend-controls { grid-template-columns: 1fr; }
  .analysis-filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .date-range-arrow { display: none; }
  .analysis-period { grid-column: 1 / -1; padding-bottom: 0; }
  .layout > .card:has(#trend), .layout > .card:has(#pie) { height: 430px; }
  .layout > .card:has(#trend) > .chart, .layout > .card:has(#pie) > .chart { min-height: 0; height: auto; }
  #expenseDateControls { flex-basis: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  main::before, main::after { animation: none; }
  #content.page-enter, #content.page-enter > *, #content.page-leave, .auth-card, .auth-form-enter, .auth-form-exit { animation: none; transition: none; }
}