/* Mein Finance Planer V12 · premium finance design, responsive, theme-aware. */
:root{
 --aqua:#20ddbc; --teal:#0ebf9d; --violet:#5c7dfb; --fin-panel:#101e33;
 --fin-grad-a:#061526;--fin-grad-b:#0b283a;--fin-title:#f3f8ff;
 --fin-shadow:rgba(0,8,24,.38);--fin-glass:rgba(13,30,51,.80);
 --fin-glow:rgba(10,210,172,.17);--fin-grid:rgba(51,222,209,.065);
 --fin-text:#f1f7ff;--fin-outline:rgba(91,159,197,.24);
 --fin-inner:rgba(17,40,66,.81);
 --fin-bg:radial-gradient(ellipse 64% 40% at 76% 11%,rgba(0,171,177,.18),transparent 85%),linear-gradient(135deg,#071323,#071c2f 64%,#082a35);
}
:root[data-theme="light"]{
 --aqua:#047c76;--teal:#059c81;--fin-panel:#fff;--fin-grad-a:#edf8fc;--fin-grad-b:#ddf4f5;
 --fin-title:#152b42;--fin-shadow:rgba(32,73,110,.12);--fin-glass:rgba(255,255,255,.9);
 --fin-glow:rgba(28,169,163,.13);--fin-grid:rgba(24,120,144,.095);
 --fin-text:#193049;--fin-outline:rgba(120,178,200,.25);--fin-inner:rgba(242,251,255,.94);
 --fin-bg:radial-gradient(ellipse 65% 42% at 90% 7%,rgba(71,191,210,.16),transparent 83%),linear-gradient(125deg,#f9fcff,#edf7fb 70%,#e7f8f5);
}
html{scroll-behavior:smooth}
body{font-family:Inter,'Segoe UI',ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;min-width:320px}
.authscreen,#application{position:relative;isolation:isolate;min-height:100dvh;background:var(--fin-bg);overflow-x:clip}
.authscreen{display:flex;align-items:center;justify-content:center;padding:38px clamp(17px,3vw,55px)}
.finance-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:var(--aqua);z-index:-1}
.finance-ambient:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--fin-grid) 1px,transparent 1px),linear-gradient(90deg,var(--fin-grid) 1px,transparent 1px);background-size:86px 86px;mask-image:linear-gradient(to bottom,#0008,transparent 80%)}
.finance-ambient .ambient-graph{position:absolute;width:min(1280px,115vw);height:80vh;min-height:560px;right:-17vw;top:0;opacity:.3;filter:drop-shadow(0 0 9px rgba(10,198,170,.2));transform:translate3d(0,0,0);animation:ambientFloat 22s ease-in-out infinite alternate}
.finance-ambient .ambient-coin{position:absolute;border:2px solid rgba(32,221,188,.25);border-radius:50%;width:115px;height:115px;display:grid;place-items:center;font-weight:850;font-size:40px;color:rgba(43,236,204,.46);box-shadow:inset -15px -8px 32px rgba(0,154,143,.15),0 0 55px rgba(11,207,168,.1);background:radial-gradient(circle at 25% 25%,rgba(39,224,193,.2),rgba(8,67,91,.03));transform:rotate(-20deg);animation:coinDrift 18s ease-in-out infinite alternate}
.finance-ambient .coin-one{bottom:6%;left:4%}.finance-ambient .coin-two{right:5%;top:18%;width:85px;height:85px;font-size:27px;animation-delay:-7s}
.finance-ambient .ambient-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:var(--fin-glow);filter:blur(95px);bottom:-230px;right:11%;animation:glowPulse 12s ease-in-out infinite alternate}
:root[data-theme="light"] .finance-ambient .ambient-graph{opacity:.17;filter:none}
:root[data-theme="light"] .finance-ambient .ambient-coin{border-color:rgba(12,155,154,.17);color:rgba(16,147,142,.25);background:radial-gradient(circle at 25% 25%,#ffffffc9,#c5edf240)}
@keyframes ambientFloat{from{transform:translate3d(0,-8px,0)}to{transform:translate3d(-32px,28px,0)}}
@keyframes coinDrift{from{transform:translateY(0) rotate(-20deg)}to{transform:translateY(-27px) rotate(2deg)}}
@keyframes glowPulse{to{transform:scale(1.35);opacity:.65}}

/* Sign in and registration */
.auth-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(365px,495px);gap:clamp(22px,5vw,88px);width:min(1120px,100%);align-items:center;position:relative;z-index:1}
.auth-intro{padding:25px 0 45px;max-width:570px;color:var(--fin-text)}
.auth-brand{font-size:clamp(22px,2.7vw,32px);font-weight:850;letter-spacing:-1.4px;line-height:1.25;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.brand-accent{color:var(--aqua)}
.brand-icon{font-size:19px;color:#052b31;background:linear-gradient(135deg,#53f8d9,#14b89a);border-radius:12px;display:inline-grid;place-items:center;width:39px;height:39px;margin-right:5px;box-shadow:0 9px 30px #00bd9d30}
.intro-kicker,.welcome-kicker,.page-overline,.auth-eyebrow{color:var(--aqua);font-size:10px;letter-spacing:2.6px;font-weight:850}
.intro-kicker{display:block;margin-top:54px}
.auth-intro h1{font-size:clamp(34px,4.2vw,58px);letter-spacing:-2.1px;line-height:1.09;margin:15px 0 20px;color:var(--fin-text)}
.auth-intro h1 span{background:linear-gradient(120deg,#42f5d4,#60cbff);color:transparent;background-clip:text;-webkit-background-clip:text}
:root[data-theme="light"] .auth-intro h1 span{background:linear-gradient(110deg,#0d887e,#328cc3);color:transparent;background-clip:text;-webkit-background-clip:text}
.auth-intro>p{max-width:480px;line-height:1.85;font-size:14px;color:var(--sub-ink)}
.feature-pills{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0 35px}
.feature-pills>span{border:1px solid var(--fin-outline);border-radius:40px;font-size:11px;padding:9px 12px;background:rgba(64,161,178,.07);color:var(--sub-ink)}
.intro-finance{display:flex;align-items:center;gap:17px;padding:19px;border:1px solid var(--fin-outline);border-radius:20px;background:var(--fin-glass);backdrop-filter:blur(14px);box-shadow:0 22px 50px var(--fin-shadow);max-width:430px;overflow:hidden}
.intro-finance b{display:block;font-size:12px;color:var(--fin-text)}.intro-finance small{display:block;margin-top:7px;color:var(--quiet);font-size:11px}
.mini-chart-bars{display:flex;align-items:end;gap:5px;height:36px;flex-shrink:0}.mini-chart-bars i{width:7px;border-radius:5px 5px 1px 1px;background:linear-gradient(#4bf3d5,#0b957f);height:40%}.mini-chart-bars i:nth-child(2){height:65%}.mini-chart-bars i:nth-child(3){height:50%}.mini-chart-bars i:nth-child(4){height:86%}.mini-chart-bars i:nth-child(5){height:70%}.mini-chart-bars i:nth-child(6){height:100%}.intro-sparkle{margin-left:auto;color:var(--aqua);font-size:24px}
.auth-wrap{width:100%;min-width:0}
.authcard.card{width:100%;padding:clamp(25px,3vw,36px);border-radius:25px;border:1px solid color-mix(in srgb,var(--aqua) 26%,var(--divider));background:var(--fin-glass);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 28px 70px var(--fin-shadow),0 0 60px rgba(10,205,170,.07)}
.auth-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.auth-card-top h2{font-size:clamp(19px,2vw,24px);color:var(--fin-text);margin:9px 0}.auth-card-top p{color:var(--quiet);font-size:12px;margin:0;line-height:1.6}
.auth-theme{font-size:11px;flex:0 0 auto;padding:9px 10px}.auth-theme .theme-label{display:none}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;gap:5px;background:var(--surface-soft);border:1px solid var(--fin-outline);border-radius:13px;margin:26px 0 23px}
.auth-tab{padding:11px 12px;border:0;border-radius:9px;background:transparent;color:var(--quiet);font-size:13px;font-weight:750;transition:background .15s ease,transform .15s ease,color .15s ease}.auth-tab.active{background:linear-gradient(130deg,#12b99b,#10a98e);color:white;box-shadow:0 5px 17px rgba(6,167,138,.21)}.auth-tab:hover:not(.active){color:var(--fin-text);background:var(--hover)}
.authcard .fg{margin-bottom:17px}.authcard label{margin-bottom:8px;font-weight:650;color:var(--sub-ink)}.authcard .field{min-height:48px;border-radius:11px;background:var(--field-bg);border:1px solid var(--fin-outline);padding:12px 14px}
.authcard .field::placeholder{color:var(--quiet);opacity:.65}.authcard .field:focus{border-color:var(--aqua)}
.password-wrap{position:relative}.password-wrap .field{padding-right:47px}.password-reveal{position:absolute;right:7px;top:6px;width:38px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--quiet);font-size:21px}.password-reveal:hover{background:var(--hover);color:var(--fin-text)}
.form-hint{font-size:10px;color:var(--quiet);font-weight:500}.auth-submit.btn.primary{display:flex;align-items:center;justify-content:center;gap:15px;width:100%;padding:15px;font-size:14px;margin-top:14px;border-radius:12px;background:linear-gradient(120deg,#0eb795,#14d2b2);color:#062c31;border:0;font-weight:800;box-shadow:0 9px 25px rgba(15,192,158,.15)}.auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 27px rgba(15,192,158,.23)}.auth-submit.hidden{display:none!important}
.auth-help{border-top:1px solid var(--divider);padding-top:17px;margin-top:22px;margin-bottom:0;color:var(--quiet);font-size:11px;line-height:1.75}.signature{text-align:center;color:var(--quiet);font-size:11px;letter-spacing:.25px}.signature b{color:var(--sub-ink);font-weight:750}.signature-login{margin:20px 0 0}.signature-sidebar{margin-top:auto;padding:22px 8px 7px;border-top:1px solid var(--divider)}

/* App structure */
#application>.app{position:relative;z-index:1;min-height:100dvh;align-items:stretch;max-width:1900px;margin:0 auto}
#application>.finance-ambient .ambient-graph{top:15%;right:-28vw;opacity:.14}
.side{width:238px;min-width:238px;background:var(--fin-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1px solid var(--fin-outline);padding:23px 14px 14px;display:flex;flex-direction:column;gap:1px}
.side .brand{display:flex;align-items:center;flex-wrap:wrap;gap:4px;color:var(--fin-text);font-size:18px;font-weight:850;letter-spacing:-.6px;padding:6px 8px;line-height:1.25}
.side .brand-icon{width:31px;height:31px;font-size:16px;margin-right:4px;border-radius:9px}
.side .brand-last{color:var(--aqua)}.side .sub{font-size:8px;letter-spacing:1.4px;margin:5px 10px 20px;color:var(--quiet)}.side .cap{font-size:10px;margin:19px 10px 9px;letter-spacing:1.8px;color:var(--quiet)}
.side .nav{font-size:12px;color:var(--sub-ink);padding:12px 11px;border-radius:11px;transition:background .16s ease,color .16s ease,transform .16s ease}.side .nav.active{color:var(--fin-text);background:linear-gradient(98deg,color-mix(in srgb,var(--teal) 32%,var(--card-bg)),color-mix(in srgb,var(--teal) 7%,var(--card-bg)));border:1px solid color-mix(in srgb,var(--teal) 25%,var(--divider));font-weight:780}.side .nav:not(.active):hover{background:var(--hover);transform:translateX(2px)}.side .nav span{width:27px;color:var(--aqua);font-size:17px;vertical-align:-1px}.side .lock{margin:25px 10px 17px;line-height:1.5;opacity:.85}
.main{max-width:1660px;padding:clamp(17px,2.5vw,35px);background:transparent}
.top{align-items:flex-start;margin-bottom:16px;gap:20px}
.top h1{font-size:clamp(22px,2.3vw,31px);margin:5px 0 5px;letter-spacing:-.9px;color:var(--fin-text)}.page-overline{font-size:9px;letter-spacing:2px}.top #subheading{line-height:1.6}
.actions.header-actions{gap:8px;align-items:center;justify-content:flex-end;flex:1}
.month-control{border:1px solid var(--divider);border-radius:12px;padding:5px 8px 5px;background:var(--fin-inner);min-width:158px}
.month-control label{font-size:9px;letter-spacing:.8px;font-weight:700;color:var(--quiet);margin:0 0 2px 2px}
.month-control-row{display:flex;align-items:center;gap:2px}.month-arrow{background:transparent;border:0;color:var(--sub-ink);border-radius:7px;width:21px;height:25px;font-size:22px;line-height:20px;padding:0}.month-arrow:hover{background:var(--hover)}.month-picker.field{min-height:25px;width:128px;border:0;background:transparent;padding:2px 0;color:var(--fin-text);font-size:12px;font-weight:730;box-shadow:none;outline:0}.month-picker.field::-webkit-calendar-picker-indicator{cursor:pointer;filter:var(--calendar-filter,none);opacity:.7}
:root[data-theme="dark"]{--calendar-filter:invert(1)}
.header-actions .btn,.header-actions select{min-height:40px;border-radius:11px;font-size:11px}.header-actions .field{padding:9px;border-color:var(--fin-outline)}.header-actions .language-select{min-width:58px;width:68px}.header-actions .currency-select{width:100px}.header-actions .quick-action{white-space:nowrap;background:linear-gradient(130deg,#0ab692,#12d5b0);border-color:transparent;color:#082e30}.header-actions .logout-btn{background:transparent;border-color:var(--fin-outline);color:var(--sub-ink);font-weight:750;white-space:nowrap}.header-actions .logout-btn:hover{color:#e4536f;border-color:#e4536f}.current-month-btn{white-space:nowrap}.header-actions .theme-toggle .theme-label{display:none}
.fx-strip{margin-bottom:13px;background:var(--fin-glass);border-color:var(--fin-outline);backdrop-filter:blur(9px);padding:10px 15px;border-radius:13px}.fx-dot{color:var(--aqua)}
.dashboard-welcome{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(110deg,color-mix(in srgb,var(--teal) 14%,var(--card-bg)),var(--fin-glass) 82%);border:1px solid color-mix(in srgb,var(--teal) 25%,var(--divider));border-radius:20px;padding:23px 26px;margin-bottom:16px;box-shadow:0 13px 32px var(--fin-shadow);overflow:hidden;position:relative}
.dashboard-welcome h2{font-size:clamp(19px,2vw,25px);letter-spacing:-.6px;margin:9px 0 10px;color:var(--fin-text)}.dashboard-welcome p{font-size:12px;line-height:1.65;color:var(--sub-ink);margin:0}.dashboard-welcome .welcome-deco{width:35%;max-width:360px;min-width:150px;opacity:.65}.welcome-deco svg{width:100%;height:120px;overflow:visible}
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:13px}.card{border:1px solid var(--fin-outline);background:var(--fin-glass);box-shadow:0 9px 27px var(--fin-shadow);backdrop-filter:blur(12px);border-radius:17px}.card.stat{padding:18px;min-height:135px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.card.stat:hover{transform:translateY(-3px);box-shadow:0 17px 35px var(--fin-shadow);border-color:color-mix(in srgb,var(--teal) 45%,var(--divider))}.stat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.stat-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--teal) 15%,var(--card-bg));font-size:19px;color:var(--aqua)}.stat-icon.red{background:#fe5e7820;color:var(--red)}.stat-icon.green{background:#17c59922;color:var(--teal)}.stat-pill{color:var(--teal);opacity:.3;font-size:8px}.eyebrow{font-size:10px;font-weight:720;color:var(--sub-ink);letter-spacing:.65px;text-transform:none}.value{font-size:clamp(16px,1.6vw,22px);margin-top:9px;letter-spacing:-.45px}
.grid1{grid-template-columns:2fr 1fr;gap:13px}.grid2{grid-template-columns:1fr 2fr;gap:13px;margin-top:13px}.grid1>.card,.grid2>.card{min-height:250px}.ctitle{font-size:13px;color:var(--fin-text);margin-bottom:13px}.chart{height:188px}.chart svg{overflow:visible}.legend{text-align:left;margin:3px 0 12px}.progress{background:var(--chip);height:8px}.progress>div{background:linear-gradient(90deg,var(--teal),#43edc9)}
.recent-panel{margin-top:14px}.recent-panel>.between .ctitle{margin:0 0 4px}.recent-entry{display:flex;align-items:center;gap:12px;padding:13px 1px;border-bottom:1px solid var(--divider);font-size:12px}.recent-entry:last-child{border-bottom:0}.recent-icon{height:34px;width:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(10,185,153,.14);color:var(--teal);font-size:16px}.recent-icon.expense{background:rgba(243,81,113,.11);color:var(--red)}.recent-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.recent-info b{color:var(--fin-text);overflow-wrap:anywhere}.recent-info small{color:var(--quiet)}.recent-entry strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}
.main-footer{color:var(--quiet);text-align:right;margin:22px 4px 0;font-size:11px}.main-footer b{color:var(--sub-ink)}
#application .btn,#application .nav,.authcard button{transition:border-color .16s ease,background .16s ease,transform .16s ease,filter .16s ease}
#application .btn:focus-visible,.authcard button:focus-visible,.month-arrow:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
:root[data-theme="light"] .app .stat .value.green{color:#008875}
:root[data-theme="light"] .side{background:rgba(255,255,255,.87)}
:root[data-theme="light"] .dashboard-welcome{background:linear-gradient(115deg,#f3fffd,#f5fbff)}
:root[data-theme="light"] .auth-submit.btn.primary,:root[data-theme="light"] .header-actions .quick-action{color:#083b3b}

@media(max-width:1250px){.header-heading{width:100%}.top{align-items:start}.actions.header-actions{width:100%;justify-content:flex-start}.grid1,.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1010px){.auth-layout{grid-template-columns:1fr 1fr;gap:20px}.auth-intro h1{font-size:35px}.feature-pills{gap:6px}.side{min-width:205px;width:205px}.side .brand{font-size:16px}}
@media(max-width:800px){.auth-layout{max-width:590px;grid-template-columns:1fr;gap:18px}.auth-intro{padding:4px 0 0}.intro-kicker,.intro-finance{display:none}.auth-intro h1{font-size:33px;margin:12px 0}.auth-intro>p{font-size:12px;margin:0}.feature-pills{margin:14px 0 0}.authcard.card{padding:26px}.mobile{position:relative;z-index:20;display:flex;align-items:center;background:var(--fin-glass);backdrop-filter:blur(16px);padding:11px 15px}.side{display:none;position:fixed;z-index:21;top:0;bottom:0;height:100dvh;background:var(--sidebar-bg);box-shadow:20px 0 60px var(--fin-shadow);width:min(265px,84vw);min-width:0}.side.open{display:flex}.main{padding:15px 13px 27px}.top{gap:11px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.grid1,.grid2{grid-template-columns:1fr}.header-actions{justify-content:flex-start;gap:7px}.month-control{order:0}.header-actions .quick-action{order:2}.dashboard-welcome{padding:18px}.dashboard-welcome .welcome-deco{min-width:88px;opacity:.45}.recent-entry{gap:8px}}
@media(max-width:540px){.authscreen{padding:15px}.auth-intro h1{font-size:27px;letter-spacing:-1px}.auth-intro h1 br{display:none}.auth-intro>p{font-size:11px;line-height:1.6}.feature-pills{display:none}.authcard.card{padding:21px;border-radius:20px}.auth-card-top h2{font-size:20px}.dashboard-welcome .welcome-deco{display:none}.dashboard-welcome h2{font-size:19px}.cards{gap:9px}.card.stat{padding:13px;min-height:125px}.value{font-size:15px}.stat-icon{width:30px;height:30px;font-size:16px}.month-control{width:100%;max-width:210px}.month-picker.field{width:141px}.header-actions .quick-action,.header-actions .logout-btn,.header-actions .current-month-btn{min-height:36px;padding:8px 10px}.header-actions .theme-toggle{min-height:36px}.recent-entry strong{font-size:11px}.main-footer{text-align:center}}
@media(prefers-reduced-motion:reduce){.ambient-graph,.ambient-coin,.ambient-glow{animation:none!important}.card.stat:hover,.auth-submit:hover{transform:none}html{scroll-behavior:auto}}

/* Mobile cards size to content instead of leaving empty full-height panels. */
@media(max-width:800px){.grid1>.card,.grid2>.card{min-height:0}.grid1 .chart,.grid2 .chart{min-height:184px}}