:root{
  --bg:#17110d; --panel:rgba(34,25,18,.94); --panel2:rgba(48,36,25,.94);
  --text:#fff8ee; --muted:#c8b8a6; --brown:#6d4b2f; --brown2:#9b6a3f;
  --green:#1f8a4c; --green2:#31b765; --red:#b94646; --line:rgba(255,255,255,.10);
  --gold:#d9b36a;
}
*{box-sizing:border-box}
html{background:#0f0c09}
body{position:relative;isolation:isolate}
body{
  margin:0;
  background:radial-gradient(circle at top,#3a291d 0,#17110d 55%,#0f0c09 100%);
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url("/static/totenkopf_user.jpg") center 54% / min(72vw,900px) auto no-repeat;
  opacity:.085;
  filter:grayscale(1) contrast(1.2);
  mix-blend-mode:screen;
}
.money-bg{
  position:fixed; inset:0; pointer-events:none; opacity:.11;
  background:
    url("/static/money_theme.svg") right 40px top 90px / 520px auto no-repeat,
    radial-gradient(circle at 15% 20%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 85% 15%,#fff 0 2px,transparent 3px),
    repeating-linear-gradient(135deg,transparent 0 32px,rgba(255,255,255,.045) 32px 34px)
}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:12px 22px; background:rgba(20,14,10,.93); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)
}
.brand-wrap{display:flex; align-items:center; gap:14px; min-width:0}
.brand-wappen{
  width:74px; height:74px; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))
}
.brand-copy{min-width:0}
.brand{font-weight:900; letter-spacing:.14em; font-size:22px}
.brand span{color:var(--gold)}
.subtitle{font-size:12px; color:var(--muted); margin-top:2px}
.top-right{display:flex; align-items:center; gap:14px}
.version-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.container{max-width:1500px; margin:0 auto; padding:24px}
.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.28);
  padding:22px; margin-bottom:20px
}
.hero{
  display:grid; grid-template-columns:minmax(280px,1.1fr) minmax(260px,.9fr) minmax(280px,.9fr);
  gap:20px; align-items:center
}
.hero-themed{position:relative; overflow:hidden}
.hero-themed::before{
  content:""; position:absolute; inset:auto -50px -50px auto; width:280px; height:280px;
  background:radial-gradient(circle,rgba(217,179,106,.16),transparent 66%); pointer-events:none
}
.hero-layer.money-layer{
  position:absolute; inset:0; pointer-events:none; opacity:.24;
  background:url("/static/money_theme.svg") left -30px bottom -90px / 440px auto no-repeat
}
.hero-copy, .hero-art, .balance{position:relative; z-index:1}
.hero h1{font-size:clamp(32px,6vw,70px); margin:0}
.kicker{text-transform:uppercase; letter-spacing:.18em; color:var(--gold); font-weight:800; font-size:12px}
.hero-art{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px 0
}
.hero-wappen{
  width:min(100%, 220px); max-height:260px; object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))
}
.hero-skull{
  width:min(100%, 170px); max-height:170px; object-fit:contain;
  border-radius:16px; background:#f5f5f5; padding:8px;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.28))
}
.balance{
  min-width:310px; background:rgba(0,0,0,.22); border:1px solid var(--line); padding:18px; border-radius:16px
}
.balance span,.balance small{display:block; color:var(--muted)}
.balance strong{font-size:34px; color:#dff7e9}
.pay-info h2,.card h2{margin-top:6px}
.pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pay-grid>div{padding:16px; border-radius:14px; background:rgba(0,0,0,.18); border:1px solid var(--line)}
.pay-grid span,.pay-grid small{display:block; color:var(--muted)}
.pay-grid strong{word-break:break-word}
.important{padding:12px 14px; border-left:4px solid var(--gold); background:rgba(217,179,106,.08); border-radius:10px}
.admin-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.admin-grid .card{margin-bottom:0}
.form-grid{display:grid; grid-template-columns:1fr 1fr auto; gap:10px}
input,select{
  width:100%; padding:12px 13px; border-radius:11px; border:1px solid var(--line);
  background:#120d09; color:var(--text); font:inherit
}
button,.button-link{
  font:inherit; border:0; border-radius:11px; padding:11px 14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center
}
.primary,.button-link{background:linear-gradient(180deg,var(--brown2),var(--brown)); color:white; font-weight:800}
.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.danger{background:rgba(185,70,70,.15); color:#ffb7b7; border:1px solid rgba(185,70,70,.35)}
.small{padding:8px 10px; font-size:12px}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:15px}
.section-head h2{margin-bottom:0}
.legend{color:var(--muted); font-size:13px}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 5px 0 12px}
.paid-dot{background:var(--green2)}
.open-dot{background:#6b625b}
.overdue-dot{background:#c94f4f}
.table-scroll{overflow:auto; max-width:100%; border:1px solid var(--line); border-radius:15px; margin-top:16px}
table{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%}
th,td{padding:10px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:center; background:#1b140f}
th{position:sticky; top:0; z-index:5; background:#251a13; color:#f9ead8}
th small,td small{display:block; color:var(--muted); font-weight:500}
.name-col{left:0; z-index:7!important; text-align:left; min-width:175px; max-width:210px}
.sticky{position:sticky}
.payments tbody .name-col{background:#21170f}
.pay-btn{min-width:88px; padding:9px 10px; font-weight:900; border:1px solid transparent}
.pay-btn.open{background:#2b2520; color:#d9cec2; border-color:#494038}
.pay-btn.overdue{background:linear-gradient(180deg,#c94f4f,#8d2424);color:#fff;border-color:#e97575;box-shadow:0 0 0 2px rgba(255,90,90,.08) inset}
.pay-btn.paid{background:linear-gradient(180deg,var(--green2),var(--green)); color:white; box-shadow:0 0 0 2px rgba(49,183,101,.08) inset}
.readonly{display:inline-flex; align-items:center; justify-content:center; border-radius:11px}
.check{font-size:17px; margin-right:5px}
.ledger-form{display:grid; grid-template-columns:150px 1fr 180px 170px auto; gap:10px; margin:16px 0}
.ledger-list{display:grid; gap:8px}
.ledger-row{
  display:grid; grid-template-columns:120px 1fr 160px auto; gap:12px; align-items:center;
  padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.14)
}
.ledger-date{color:var(--muted)}
.ledger-amount{font-weight:900; text-align:right}
.ledger-amount.income{color:#9be0b6}
.ledger-amount.expense{color:#ffaaaa}
.empty{padding:20px; color:var(--muted); text-align:center}
.flash-wrap{display:grid; gap:8px; margin-bottom:15px}
.flash{padding:12px 14px; border-radius:10px}
.flash.success{background:rgba(31,138,76,.20); border:1px solid rgba(31,138,76,.45)}
.flash.error{background:rgba(185,70,70,.20); border:1px solid rgba(185,70,70,.45)}
.login-card{max-width:620px; margin:7vh auto}
.login-themed{position:relative; overflow:hidden}
.login-themed::before{
  content:""; position:absolute; right:-60px; top:-40px; width:260px; height:260px;
  background:url("/static/money_theme.svg") center/contain no-repeat; opacity:.18; pointer-events:none
}
.login-media{
  display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:16px
}
.login-wappen{width:150px; max-width:45%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.3))}
.login-skull{width:132px; max-width:38%; object-fit:contain; background:#f5f5f5; border-radius:16px; padding:8px}
.login-card h1{font-size:48px; margin:4px 0 8px}
.stack{display:grid; gap:14px; margin-top:20px}
.stack label{display:grid; gap:6px; color:var(--muted)}
.muted{color:var(--muted)}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr; align-items:start}
  .hero-art{justify-content:flex-start}
  .balance{min-width:0}
}
@media(max-width:900px){
  .container{padding:14px}
  .pay-grid,.admin-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .ledger-form{grid-template-columns:1fr 1fr}
  .ledger-form button{grid-column:1/-1}
  .ledger-row{grid-template-columns:95px 1fr}
  .ledger-amount{text-align:left}
  .ledger-row form{justify-self:end}
}
@media(max-width:700px){
  .topbar{padding:12px 14px}
  .brand-wappen{width:56px; height:56px}
    .brand{font-size:19px}
  .subtitle{max-width:200px}
  .top-right{gap:10px; flex-wrap:wrap; justify-content:flex-end}
}
@media(max-width:560px){
  .card{padding:16px; border-radius:16px}
  .hero h1{font-size:42px}
  .login-card h1{font-size:40px}
  .login-media{gap:10px}
  .login-wappen{width:120px}
  .login-skull{width:98px}
  .hero-art{justify-content:center; flex-wrap:wrap}
  .hero-wappen{max-height:210px}
  .hero-skull{max-height:140px}
  .ledger-form{grid-template-columns:1fr}
  .ledger-row{grid-template-columns:1fr}
  .ledger-row form{justify-self:start}
  .section-head{display:grid}
  .name-col{min-width:145px}
  .money-bg{background:
    url("/static/money_theme.svg") right -40px top 100px / 320px auto no-repeat,
    radial-gradient(circle at 15% 20%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 85% 15%,#fff 0 2px,transparent 3px),
    repeating-linear-gradient(135deg,transparent 0 32px,rgba(255,255,255,.045) 32px 34px)}
}