* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Nunito",sans-serif; background:#1a1a2e; color:#fff; min-height:100vh; overflow-x:hidden; }
.bg-image { position:fixed; top:0; left:0; width:100%; height:100%; background:url("../hintergrund.webp") center/cover no-repeat; opacity:0.15; z-index:0; pointer-events:none; }
.app-container { position:relative; z-index:1; max-width:480px; margin:0 auto; padding:1rem; padding-bottom:2rem; }
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); }
.login-container { position:relative; z-index:1; width:100%; max-width:400px; padding:1rem; }
.login-card { background:rgba(255,255,255,0.05); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); border-radius:24px; padding:2.5rem 2rem; }
.login-header { text-align:center; margin-bottom:2rem; }
.logo-circle { width:70px; height:70px; border-radius:50%; background:linear-gradient(135deg,#A8D8EA,#AA96DA); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1rem; box-shadow:0 8px 32px rgba(168,216,234,0.3); }
.login-header h1 { font-size:1.8rem; font-weight:800; margin-bottom:0.3rem; }
.login-header p { color:rgba(255,255,255,0.6); font-size:0.9rem; }
.login-form { display:flex; flex-direction:column; gap:1.2rem; }
.input-group { display:flex; flex-direction:column; gap:0.4rem; }
.input-group label { font-size:0.85rem; font-weight:600; color:rgba(255,255,255,0.7); }
.input-group input, .input-group select { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:12px; padding:0.85rem 1rem; color:#fff; font-size:1rem; font-family:"Nunito",sans-serif; transition:all 0.3s ease; }
.input-group input:focus, .input-group select:focus { outline:none; border-color:#A8D8EA; background:rgba(255,255,255,0.12); box-shadow:0 0 0 3px rgba(168,216,234,0.2); }
.input-group select option { background:#1a1a2e; color:#fff; }
.btn-login, .btn-submit { background:linear-gradient(135deg,#A8D8EA,#AA96DA); border:none; border-radius:12px; padding:1rem; color:#1a1a2e; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.3s ease; margin-top:0.5rem; }
.btn-login:hover, .btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(168,216,234,0.4); }
.login-footer { text-align:center; margin-top:1.5rem; font-size:0.85rem; color:rgba(255,255,255,0.5); }
.login-footer a { color:#A8D8EA; text-decoration:none; font-weight:600; }
.login-footer .hint { margin-top:0.5rem; font-size:0.8rem; opacity:0.6; }
.color-picker { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.3rem; }
.color-option { cursor:pointer; }
.color-option input { display:none; }
.color-circle { display:block; width:36px; height:36px; border-radius:50%; border:3px solid transparent; transition:all 0.3s ease; }
.color-option input:checked + .color-circle { border-color:#fff; transform:scale(1.15); box-shadow:0 4px 15px rgba(255,255,255,0.3); }
.message { padding:0.8rem 1rem; border-radius:12px; margin-bottom:1rem; font-size:0.9rem; text-align:center; }
.message.error { background:rgba(255,107,107,0.15); border:1px solid rgba(255,107,107,0.3); color:#ff6b6b; }
.message.success { background:rgba(81,207,102,0.15); border:1px solid rgba(81,207,102,0.3); color:#51cf66; }
.app-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; margin-bottom:1rem; }
.user-info { display:flex; align-items:center; gap:0.8rem; }
.avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; color:#1a1a2e; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
.avatar.small { width:36px; height:36px; font-size:1rem; }
.user-text h2 { font-size:1.2rem; font-weight:700; }
.user-text p { font-size:0.8rem; color:rgba(255,255,255,0.5); }
.header-actions { display:flex; gap:0.5rem; }
.btn-icon { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:all 0.3s ease; }
.btn-icon:hover { background:rgba(255,255,255,0.15); transform:scale(1.05); }
.overview-card { background:rgba(255,255,255,0.05); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:1.5rem; margin-bottom:1.5rem; }
.overview-row { display:flex; justify-content:space-between; margin-bottom:1.2rem; }
.overview-item { display:flex; flex-direction:column; gap:0.2rem; }
.overview-label { font-size:0.75rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.5px; }
.overview-amount { font-size:1.1rem; font-weight:700; }
.overview-item.income .overview-amount { color:#51cf66; }
.overview-item.expenses .overview-amount { color:#ff6b6b; }
.overview-remaining { text-align:center; padding:1rem; border-radius:14px; margin-bottom:1rem; }
.overview-remaining.positive { background:rgba(81,207,102,0.1); border:1px solid rgba(81,207,102,0.2); }
.overview-remaining.negative { background:rgba(255,107,107,0.1); border:1px solid rgba(255,107,107,0.2); }
.overview-amount-big { display:block; font-size:2rem; font-weight:800; margin-top:0.3rem; }
.positive .overview-amount-big { color:#51cf66; }
.negative .overview-amount-big { color:#ff6b6b; }
.progress-bar-container { display:flex; align-items:center; gap:0.8rem; }
.progress-bar { flex:1; height:8px; background:rgba(255,255,255,0.1); border-radius:10px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#51cf66,#A8D8EA); border-radius:10px; transition:width 0.5s ease; }
.progress-fill.warning { background:linear-gradient(90deg,#ffd43b,#ff922b); }
.progress-fill.danger { background:linear-gradient(90deg,#ff922b,#ff6b6b); }
.progress-text { font-size:0.75rem; color:rgba(255,255,255,0.5); white-space:nowrap; }
.quick-actions { display:flex; gap:0.6rem; margin-bottom:1.5rem; }
.btn-action { flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:0.8rem 0.5rem; color:#fff; font-size:0.75rem; font-weight:600; font-family:"Nunito",sans-serif; cursor:pointer; transition:all 0.3s ease; display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.btn-action i { font-size:1.2rem; }
.btn-action:hover { background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.btn-action.primary { background:linear-gradient(135deg,rgba(168,216,234,0.2),rgba(170,150,218,0.2)); border-color:rgba(168,216,234,0.3); }
.section { margin-bottom:1.5rem; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; }
.section-header h3 { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; }
.section-header h3 i { color:#A8D8EA; font-size:0.9rem; }
.section-total { font-size:0.9rem; font-weight:700; color:#ff6b6b; }
.expense-list { display:flex; flex-direction:column; gap:0.5rem; }
.expense-item { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:0.9rem 1rem; display:flex; align-items:center; justify-content:space-between; transition:all 0.3s ease; }
.expense-item:hover { background:rgba(255,255,255,0.08); }
.expense-info { display:flex; align-items:center; gap:0.6rem; flex:1; min-width:0; }
.expense-category-badge { font-size:0.65rem; background:rgba(168,216,234,0.15); color:#A8D8EA; padding:0.2rem 0.5rem; border-radius:6px; white-space:nowrap; }
.expense-label { font-size:0.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.expense-date { font-size:0.7rem; color:rgba(255,255,255,0.4); }
.expense-right { display:flex; align-items:center; gap:0.6rem; }
.expense-amount { font-size:0.9rem; font-weight:700; color:#ff6b6b; white-space:nowrap; }
.btn-delete { background:none; border:none; color:rgba(255,255,255,0.3); cursor:pointer; padding:0.3rem; border-radius:6px; transition:all 0.3s ease; }
.btn-delete:hover { color:#ff6b6b; background:rgba(255,107,107,0.1); }
.empty-state { text-align:center; padding:2rem 1rem; color:rgba(255,255,255,0.4); font-size:0.9rem; }
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter:blur(5px); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.active { display:flex; }
.modal { background:#1e2a3a; border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:1.5rem; width:100%; max-width:380px; max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal-header h3 { font-size:1.1rem; font-weight:700; }
.modal-close { background:none; border:none; color:rgba(255,255,255,0.5); font-size:1.2rem; cursor:pointer; }
.modal form { display:flex; flex-direction:column; gap:1rem; }
.admin-user-item { flex-wrap:wrap; }
.admin-user-item .expense-info { gap:0.8rem; }
.admin-user-item .expense-info > div { display:flex; flex-direction:column; }
.admin-actions { display:flex; gap:0.4rem; }
.btn-mini { width:32px; height:32px; border-radius:8px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.8rem; transition:all 0.3s ease; }
.btn-mini.view { background:rgba(168,216,234,0.15); color:#A8D8EA; }
.btn-mini.reset { background:rgba(255,212,59,0.15); color:#ffd43b; }
.btn-mini.delete { background:rgba(255,107,107,0.15); color:#ff6b6b; }
.btn-mini:hover { transform:scale(1.1); }
.admin-view-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:1rem; margin-bottom:0.8rem; }
.admin-view-card h4 { font-size:0.85rem; color:rgba(255,255,255,0.6); margin-bottom:0.8rem; text-transform:uppercase; letter-spacing:0.5px; }
.mini-row { display:flex; justify-content:space-between; padding:0.4rem 0; font-size:0.85rem; border-bottom:1px solid rgba(255,255,255,0.05); }
.mini-row:last-child { border-bottom:none; }
.mini-row.total { margin-top:0.5rem; padding-top:0.8rem; border-top:1px solid rgba(255,255,255,0.15); border-bottom:none; }
.mini-row small { color:rgba(255,255,255,0.4); }
.green { color:#51cf66; }
.red { color:#ff6b6b; }
.muted { color:rgba(255,255,255,0.4); font-size:0.85rem; }
@media (max-width:400px) { .overview-amount-big { font-size:1.6rem; } .quick-actions { gap:0.4rem; } .btn-action { padding:0.7rem 0.3rem; font-size:0.7rem; } }
@media (display-mode:standalone) { body { padding-top:env(safe-area-inset-top); } }