:root{--brand:#4d8ef0;--brand-dim:#1e3a6e;--brand-dark:#3a74d4;--bg:transparent;--surface:#161b27;--surface2:#1e2535;--surface3:#252d40;--border:#2a3347;--border2:#334060;--text-primary:#e8eaf0;--text-secondary:#8b95ad;--text-muted:#8796b3;--positive:#34d399;--positive-bg:#0d2e22;--negative:#f87171;--negative-bg:#2d1313;--warning:#fbbf24;--warning-bg:#2a1f08;--shadow-sm:0 1px 4px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);--glow-brand:0 0 20px rgba(77,142,240,.18);--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--nav-height:68px;--topbar-height:56px;--font:'Inter','SF Pro Text','Segoe UI',system-ui,-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;font-family:inherit;color:inherit;}
html,body{height:100%;overflow:hidden;background:#070d1c;color:var(--text-primary);font-family:'Inter','SF Pro Text','Segoe UI',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
#app{position:relative;width:100%;max-width:430px;height:100dvh;margin:0 auto;overflow:hidden;background:transparent}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:rgba(8,13,26,0.65);opacity:0;pointer-events:none;transform:translateX(28px);transition:opacity .22s ease,transform .22s ease}
.screen.active{opacity:1;pointer-events:all;transform:translateX(0)}
#screen-home{background:rgba(8,13,26,0.3)}
.screen-content{flex:1;overflow-y:auto;padding:16px 16px calc(var(--nav-height) + 16px);-webkit-overflow-scrolling:touch}
.screen-content.center-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.topbar{height:var(--topbar-height);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex-shrink:0;z-index:10}
.topbar-title{font-weight:600;font-size:17px;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.app-logo{color:var(--brand);font-size:20px}
.icon-btn{width:36px;height:36px;border:none;background:var(--surface2);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:background .15s;font-size:16px}
.icon-btn:active{background:var(--surface3)}
.bottomnav{position:absolute;bottom:0;left:0;right:0;height:var(--nav-height);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:8px;z-index:20;box-shadow:0 -1px 0 var(--border),0 -8px 24px rgba(0,0,0,.3)}
.nav-item{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-muted);cursor:pointer;padding:4px 0;transition:color .15s}
.nav-item span{font-size:11px;font-weight:500}
.nav-item.active{color:var(--brand)}
.balance-card{background:linear-gradient(135deg,#1a3868,#112150);border:1px solid #2a4a8a;border-radius:var(--radius-xl);padding:24px 20px;color:#e8eaf0;margin-bottom:16px;box-shadow:var(--glow-brand)}
.balance-label{font-size:13px;opacity:.7;margin-bottom:6px}
.balance-amount{font-size:36px;font-weight:700;letter-spacing:-1px}
.balance-sub{font-size:13px;opacity:.55;margin-top:4px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.chip{border:1px solid var(--border);background:var(--surface2);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s;white-space:nowrap}
.chip.active{background:var(--brand-dim);border-color:var(--brand);color:var(--brand)}
.section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted);margin:8px 0 8px}
.event-list{display:flex;flex-direction:column;gap:10px}
.event-card{background:var(--surface);border-radius:var(--radius-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);cursor:pointer;border:1px solid var(--border);transition:transform .15s,border-color .15s;margin-bottom:8px}
.event-card:active{transform:scale(.98);border-color:var(--border2)}
.event-icon{font-size:26px;flex-shrink:0;width:48px;height:48px;background:var(--surface2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}
.event-info{flex:1;min-width:0}
.event-name{font-weight:600;font-size:15px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tag{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:6px}
.tag-fund{background:var(--warning-bg);color:var(--warning)}.tag-split{background:var(--brand-dim);color:var(--brand)}.tag-bill{background:#261836;color:#c084fc}.tag-settled{background:var(--positive-bg);color:var(--positive)}
.event-balance{font-weight:700;font-size:15px;flex-shrink:0}
.event-balance.positive{color:var(--positive)}.event-balance.negative{color:var(--negative)}.event-balance.zero{color:var(--text-muted)}
.quick-split-banner{margin-top:16px;background:linear-gradient(135deg,#1a1f2e,#222c42);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:16px 20px;color:var(--text-primary);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:transform .15s}
.quick-split-banner:active{transform:scale(.98)}
.event-header-block{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:12px;border:1px solid var(--border);position:relative;overflow:hidden}
.event-note-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border2);background:var(--surface2);color:rgb(240,207,77);font-size:22px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:background .15s,border-color .15s}
.event-note-btn:hover{background:var(--brand-dim);border-color:var(--brand)}
.event-note-btn.has-note{border-color:rgb(240,207,77)}
.event-header-icon{font-size:32px}.event-header-name{font-weight:600;font-size:16px;color:var(--text-primary)}.event-header-meta{font-size:13px;color:var(--text-muted);margin-top:2px}
.event-balances-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mini-stat{background:var(--surface);border-radius:var(--radius-md);padding:12px;text-align:center;border:1px solid var(--border)}
.mini-stat-btn{cursor:pointer;font-family:var(--font);transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.mini-stat-btn:hover{background:var(--surface2);border-color:var(--border2)}
.mini-stat-btn:active{background:var(--surface3)}
.mini-stat-val{font-weight:700;font-size:16px;color:var(--text-primary)}.mini-stat-val.green{color:var(--positive)}.mini-stat-val.highlight{color:var(--brand)}.mini-stat-label{font-size:11px;color:var(--text-muted);margin-top:2px}
.tab-bar{display:flex;background:var(--surface2);border-radius:var(--radius-md);padding:4px;margin-bottom:16px;border:1px solid var(--border)}
.tab-btn{flex:1;border:none;background:none;border-radius:8px;padding:7px 4px;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s}
.tab-btn.active{background:var(--surface3);color:var(--brand);box-shadow:var(--shadow-sm)}
.tab-content{display:none}.tab-content.active{display:block}
.expense-group{margin-bottom:16px}
.expense-group-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;padding:0 4px}
.expense-group-total{color:var(--text-muted);font-weight:600;font-size:14px}
.expense-item{background:var(--surface);border-radius:var(--radius-md);padding:12px 14px;display:flex;align-items:center;gap:10px;border:1px solid var(--border);margin-bottom:6px;cursor:pointer;transition:border-color .15s,transform .15s}
.expense-item:active{transform:scale(.98);border-color:var(--border2)}
.expense-icon{font-size:20px;width:38px;height:38px;background:var(--surface2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.expense-info{flex:1;min-width:0}.expense-name{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expense-meta{font-size:11px;color:var(--text-muted);margin-top:2px}.expense-amount{font-weight:700;font-size:17px;color:var(--text-primary);flex-shrink:0}
.fund-total-card{background:linear-gradient(135deg,#0a2318,#0f2e1e);border:1px solid #1a4d31;color:#e0f5eb;border-radius:var(--radius-xl);padding:24px 20px;margin-bottom:16px}
.fund-total-label{font-size:13px;opacity:.7;margin-bottom:6px}.fund-total-amount{font-size:36px;font-weight:700;letter-spacing:-1px}.fund-total-sub{font-size:13px;opacity:.55;margin-top:4px;margin-bottom:12px}
.fund-progress-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}.fund-progress-fill{height:100%;background:var(--positive);border-radius:3px;transition:width .5s ease}
.fund-treasurer-bar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:16px}
.fund-treasurer-bar select{margin-left:auto;font-size:13px;padding:4px 8px;width:auto}
.fund-payment-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.fund-payment-item{background:var(--surface);border-radius:var(--radius-md);padding:12px 14px;display:flex;align-items:center;gap:10px;border:1px solid var(--border)}
.fund-payment-info{flex:1}.fund-payment-name{font-weight:500;font-size:14px}.fund-payment-date{font-size:11px;color:var(--text-muted)}.fund-payment-amount{font-weight:700;font-size:16px;color:var(--positive)}
.fund-participant-card{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border);overflow:hidden}
.fund-participant-header{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer}
.fund-participant-info{flex:1;min-width:0}
.fund-participant-chevron{flex-shrink:0;margin-top:4px;color:var(--text-muted);transition:transform .2s ease}
.fund-participant-card.open .fund-participant-chevron{transform:rotate(180deg)}
.fund-participant-bar{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden;margin:6px 0 4px}
.fund-participant-bar-fill{height:100%;background:var(--positive);border-radius:3px;transition:width .5s ease}
.fund-participant-details{max-height:0;overflow:hidden;transition:max-height .25s ease;border-top:0 solid var(--border)}
.fund-participant-card.open .fund-participant-details{max-height:600px;border-top-width:1px}
.fund-participant-payment-row{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12px;border-top:1px solid var(--border)}
.fund-participant-payment-row:first-child{border-top:none}
.fund-participant-payment-info{flex:1;min-width:0}
.fund-participant-payment-amount{font-weight:700;font-size:15px;color:var(--positive);white-space:nowrap}
.settle-list{display:flex;flex-direction:column;gap:10px}
.settle-item{background:var(--surface);border-radius:var(--radius-md);padding:14px 16px;display:flex;align-items:center;gap:10px;border:1px solid var(--border)}
.settle-persons{flex:1;display:flex;align-items:center;gap:6px;font-size:13px}.settle-from{color:var(--negative);font-weight:500}.settle-to{color:var(--positive);font-weight:500}.settle-amount{font-weight:700;font-size:18px}
.settle-item--pending{flex-direction:column;align-items:stretch;gap:10px}
.settle-row-top{display:flex;align-items:center;gap:10px}
.settle-actions{display:flex;justify-content:flex-end;gap:8px}
.btn-settle{border:1px solid var(--border2);background:var(--surface2);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text-secondary);white-space:nowrap;transition:background .15s}
.btn-settle-fund{border-color:var(--brand);color:var(--brand)}
.people-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.person-row{background:var(--surface);border-radius:var(--radius-md);padding:12px 14px;display:flex;align-items:center;gap:10px;border:1px solid var(--border)}
.person-info{flex:1}.person-name{font-weight:500;font-size:14px;color:var(--text-primary)}.person-role{font-size:11px;color:var(--text-muted)}.person-balance{font-weight:700;font-size:14px}.person-balance.positive{color:var(--positive)}.person-balance.negative{color:var(--negative)}
.person-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;line-height:1}.person-avatar.sm{width:28px;height:28px;font-size:13px;font-weight:800}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.6px}
.form-input,.form-select{width:100%;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-size:15px;font-family:var(--font);background:var(--surface2);color:var(--text-primary);outline:none;transition:border-color .15s,box-shadow .15s;appearance:none}
.form-input:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(77,142,240,.15)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234e5a72' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form-select option{background:var(--surface2);color:var(--text-primary)}
.amount-input-wrap{position:relative}
.amount-input{width:100%;border:2px solid var(--border);border-radius:var(--radius-md);padding:14px 52px 14px 16px;font-size:28px;font-weight:700;font-family:var(--font);background:var(--surface2);color:var(--text-primary);outline:none;transition:border-color .15s,box-shadow .15s}
.amount-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(77,142,240,.15)}
.amount-currency{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:600;color:var(--text-muted);pointer-events:none}
.stepper-row{display:flex;align-items:center;gap:16px}
.stepper-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:var(--surface2);font-size:24px;font-weight:300;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.stepper-btn:active{background:var(--brand-dim);border-color:var(--brand);color:var(--brand)}
.stepper-val{font-size:28px;font-weight:700;min-width:44px;text-align:center}
.qs-result-card{background:var(--surface);border-radius:var(--radius-xl);padding:28px 20px;text-align:center;border:1px dashed var(--border2);margin-bottom:20px}
.qs-result-label{font-size:13px;color:var(--text-muted);margin-bottom:8px}.qs-result-amount{font-size:44px;font-weight:800;color:var(--brand);letter-spacing:-2px}.qs-result-sub{font-size:13px;color:var(--text-muted);margin-top:6px}
.profile-header{display:flex;flex-direction:column;align-items:center;padding:28px 16px 20px}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--brand-dim);color:var(--brand);font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:12px;border:2px solid var(--border2)}
.profile-name{font-weight:700;font-size:20px;margin-bottom:4px}.profile-email{font-size:14px;color:var(--text-muted)}
.settings-list{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}
.settings-item{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;font-size:15px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.settings-item:last-child{border-bottom:none}.settings-item:active{background:var(--surface2)}.settings-val{color:var(--text-muted);font-size:14px}
.placeholder-icon{font-size:56px;filter:grayscale(.3)}.placeholder-text{font-size:14px;color:var(--text-muted);text-align:center;max-width:260px;line-height:1.6}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;gap:12px}
.empty-icon{font-size:48px;filter:grayscale(.2)}.empty-text{font-size:14px;color:var(--text-muted);text-align:center;line-height:1.6}
.btn-primary{width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--radius-md);padding:14px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s,transform .1s}
.btn-primary:active{background:var(--brand-dark);transform:scale(.98)}
.btn-secondary{width:100%;background:var(--surface2);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px;font-size:15px;font-weight:500;font-family:var(--font);cursor:pointer;transition:background .15s,transform .1s}
.btn-secondary:active{background:var(--surface3);transform:scale(.98)}
.btn-danger-sm{background:var(--negative-bg);color:var(--negative);border:1px solid #5a2020;border-radius:var(--radius-sm);padding:10px 16px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .22s ease}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-sheet{width:100%;max-width:430px;margin:0 auto;background:var(--surface);border-top:1px solid var(--border2);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:12px 20px 44px;transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);max-height:90dvh;overflow-y:auto}
.modal-overlay.open .modal-sheet{transform:translateY(0)}
.modal-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 18px}
.modal-title{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--text-primary)}
.modal-actions{display:flex;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.modal-actions .btn-primary{flex:2}.modal-actions .btn-secondary{flex:1}.modal-actions .btn-danger-sm{flex:1}
.emoji-picker-row{display:flex;flex-wrap:wrap;gap:8px}
.emoji-opt{width:44px;height:44px;border-radius:12px;border:2px solid var(--border);background:var(--surface2);font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.emoji-opt.selected{border-color:var(--brand);background:var(--brand-dim)}
.type-cards{display:flex;flex-direction:column;gap:8px}
.type-card{border:2px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;background:var(--surface2)}
.type-card.selected{border-color:var(--brand);background:var(--brand-dim)}
.type-card-icon{font-size:24px;flex-shrink:0}.type-card-name{font-weight:600;font-size:14px}.type-card-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.split-toggle{display:flex;background:var(--surface2);border-radius:10px;padding:3px;border:1px solid var(--border)}
.split-opt{flex:1;border:none;background:none;border-radius:8px;padding:8px 4px;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s}
.split-opt.active{background:var(--surface3);color:var(--brand);box-shadow:var(--shadow-sm)}
.view-toggle{display:flex;background:var(--surface2);border-radius:10px;padding:3px;border:1px solid var(--border);margin-bottom:12px}
.view-toggle-btn{flex:1;border:none;background:none;border-radius:8px;padding:8px 4px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s}
.view-toggle-btn.active{background:var(--surface3);color:var(--brand);box-shadow:var(--shadow-sm)}
.expense-detail-meta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-secondary);margin-bottom:4px;flex-wrap:wrap}
.expense-detail-amount{font-size:19px;font-weight:700;color:var(--text-primary)}
.split-detail-list{display:flex;flex-direction:column;gap:8px}.split-detail-row{display:flex;align-items:center;gap:10px;font-size:13px}.split-detail-row span:nth-child(2){flex:1}
.split-detail-row .positive,.split-detail-row .negative{font-size:15px}
.positive{color:var(--positive);font-weight:600}.negative{color:var(--negative);font-weight:600}
::-webkit-scrollbar{width:0;background:transparent}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px var(--surface2) inset!important;-webkit-text-fill-color:var(--text-primary)!important;caret-color:var(--text-primary)}

/* ===== FORMULARZ WYDATKU — PODZIAŁ ===== */
.participant-check-list,
.participant-amount-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.participant-check-row,
.participant-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  border: 1px solid var(--border);
  transition: border-color .15s;
}

.participant-check-row.selected {
  border-color: var(--brand);
  background: var(--brand-dim);
}

.participant-check-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--brand);
  flex-shrink: 0;
  cursor: pointer;
}

.participant-amount-row input[type="number"] {
  width: 90px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text-primary);
  text-align: right;
  outline: none;
  transition: border-color .15s;
  margin-left: auto;
  flex-shrink: 0;
}

.participant-amount-row input[type="number"]:focus {
  border-color: var(--brand);
}

.participant-row-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-row-share {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.split-summary {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Chip kategoria — onclick fix */
#exp-category-chips .chip { cursor: pointer; }

/* ===== DATE INPUT Z MASKĄ ===== */
.date-input {
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.date-input::placeholder {
  letter-spacing: 0;
  color: var(--text-muted);
}
/* Separator datowania */
.date-input:not(:placeholder-shown) {
  color: var(--text-primary);
}

/* ===== CALENDAR POPUP ===== */
.date-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.date-field-wrap .date-input {
  flex: 1;
  cursor: pointer;
  padding-right: 44px;
}
.date-cal-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  color: var(--text-secondary);
  transition: transform .15s;
}
.date-cal-btn:active { transform: scale(.9); }

/* Overlay */
#calendar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Popup box */
.cal-popup {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: calPop .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes calPop {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}

/* Header z nawigacją */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 12px;
  border-bottom: 1px solid var(--border);
}
.cal-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
  min-width: 140px;
  text-align: center;
}
.cal-nav {
  width: 36px; height: 36px;
  border: none;
  background: var(--surface2);
  border-radius: 50%;
  font-size: 22px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  line-height: 1;
}
.cal-nav:active { background: var(--surface3); }

/* Dni tygodnia */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 8px 4px;
  gap: 2px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 4px 0;
}

/* Kratka dni */
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px 12px;
  gap: 2px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  background: none;
  transition: background .1s, color .1s;
  min-width: 36px;
  min-height: 36px;
}
.cal-day:hover:not(:disabled) { background: var(--surface2); }
.cal-day:active:not(:disabled) { background: var(--surface3); }
.cal-day.today {
  border: 1.5px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.cal-day.selected {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700;
}
.cal-day.other-month { color: var(--text-muted); opacity: .4; }
.cal-day.weekend { color: var(--negative); }
.cal-day.selected.weekend { color: #fff; }
.cal-day:disabled { opacity: .2; cursor: default; }
.cal-day.empty { cursor: default; }

/* Footer */
.cal-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
}
.cal-today-btn {
  flex: 1;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .15s;
}
.cal-today-btn:active { background: var(--brand-dark); }
.cal-clear-btn {
  background: var(--surface2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
}
.cal-clear-btn:active { background: var(--surface3); }

/* ===== IKONA SYNC — większa, SVG ===== */
.icon-btn--sync {
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  transition: color .2s, transform .3s;
}
.icon-btn--sync:active { color: var(--brand); }
.icon-btn--sync.syncing svg {
  animation: spin-sync 0.9s linear infinite;
}
@keyframes spin-sync {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== FORMULARZ UCZESTNIKÓW W NOWYM EVENCIE ===== */
.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.participant-name-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.participant-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.participant-name-row .form-input {
  flex: 1;
  margin-bottom: 0;
  padding: 11px 14px;
}

.participant-name-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: var(--surface2);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.participant-name-remove:active { background: #2d1313; color: var(--negative); }

.btn-add-participant {
  width: 100%;
  background: none;
  border: 1.5px dashed var(--border2);
  border-radius: var(--radius-md);
  padding: 10px;
  color: var(--text-muted);
  font-size: 14px;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  margin-top: 2px;
}
.btn-add-participant:active { border-color: var(--brand); color: var(--brand); }

/* ===== JOIN — WYBÓR UCZESTNIKA Z LISTY ===== */
.join-person-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.join-person-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.join-person-card:active,
.join-person-card.selected {
  border-color: var(--brand);
  background: var(--brand-dim);
}
.join-person-card .person-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.join-person-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}
.join-person-taken {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.join-or-new {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 14px 0 8px;
  position: relative;
}
.join-or-new::before, .join-or-new::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: var(--border);
}
.join-or-new::before { left: 0; }
.join-or-new::after  { right: 0; }

/* ===== DODAWANIE OSOBY — INLINE W LIŚCIE ===== */
.add-person-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.add-person-input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font);
  outline: none;
  min-width: 0;
  padding: 4px 0;
}
.add-person-input::placeholder { color: var(--text-muted); }

/* Pill button — styl jak zakładki nawigacji */
.tab-pill-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.tab-pill-btn:active { background: #3a74d4; }

.add-person-cancel {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.add-person-cancel:active { background: #2d1313; color: var(--negative); }

/* Przycisk usunięcia osoby (placeholder) */
.person-delete-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(248,113,113,0.08);
  color: var(--negative);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  margin-left: 4px;
  line-height: 1;
}
.person-delete-btn:active {
  background: rgba(248,113,113,0.22);
  transform: scale(.9);
}
.person-delete-btn:active { background: #2d1313; color: var(--negative); }

/* Znacznik "oczekuje" przy placeholder osobie */
.person-pending {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ===== PLACEHOLDER OSOBA — OCZEKUJE NA ZAPROSZENIE ===== */
.pending-avatar {
  background: #252d40 !important;
  color: var(--text-muted) !important;
  border: 1.5px dashed var(--border2);
}

.invite-btn {
  font-size: 12px;
  padding: 6px 12px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Person row z przyciskiem zaproś — mniejsza kolumna salda */
/* .person-row — zdefiniowane wyżej z padding: 12px 14px */

/* ===== KWOTY — część dziesiętna 70% rozmiaru ===== */
.amount-dec {
  font-size: .7em;
  vertical-align: baseline;
  opacity: .85;
}

/* ===== OSOBA OCZEKUJĄCA — wyszarzone imię ===== */
.person-name-pending {
  color: var(--text-muted);
  font-style: italic;
}

/* ===== QUICK SPLIT — WŁASNY DISPLAY KWOTY ===== */
.qs-amount-wrap {
  position: relative;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 20px 20px;
  cursor: text;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .15s;
  min-height: 72px;
}
.qs-amount-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(77,142,240,.12);
}
.qs-amount-display {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.5px;
}
.qs-amount-display .amount-dec {
  font-size: .65em;
  opacity: .8;
}

/* ===== ROZLICZENIA — STANY ===== */
.settle-item--done {
  opacity: .7;
}
.settle-done-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--positive);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== LISTA EVENTÓW — KOLOROWE OBWÓDKI + KWOTA TOTAL ===== */

/* Domyślna karta eventu — bez obwódki (rozliczony / saldo = 0) */
.event-card {
  border: 1.5px solid var(--border);
  transition: border-color .2s;
}

/* Czerwona — masz dług (jesteś winien) */
.event-card--debt {
  border-color: var(--negative) !important;
  box-shadow: 0 0 0 1px rgba(248,113,113,.15);
}

/* Zielona — jesteś na plusie (ktoś jest ci winien) */
.event-card--credit {
  border-color: var(--positive) !important;
  box-shadow: 0 0 0 1px rgba(52,211,153,.15);
}

/* Kwota łączna eventu */
.event-total {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  flex-shrink: 0;
  text-align: right;
}

/* ===== EKRAN AUTORYZACJI (telefon) ===== */
.auth-screen {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  background: rgba(8,13,26,0.65);
  padding: 24px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
/* Auth screen aktywny = flex */
.auth-screen.active {
  display: flex !important;
}

.auth-container {
  width: 100%;
  max-width: 380px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 8px;
  margin: auto;
}

.auth-logo {
  text-align: center;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.auth-app-name {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 12px;
  letter-spacing: -0.5px;
}

.auth-tagline {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.auth-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.auth-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Pole telefonu */
.phone-input-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

.phone-prefix-wrap {
  flex-shrink: 0;
}

.phone-prefix-input {
  width: 72px;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font);
  padding: 14px 10px;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.phone-prefix-input:focus { border-color: var(--brand); }

.phone-number-input {
  flex: 1;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 600;
  font-family: var(--font);
  padding: 14px 12px;
  outline: none;
  letter-spacing: 1px;
  min-width: 0;
  width: 100%;
  transition: border-color .15s;
}
.phone-number-input:focus { border-color: var(--brand); }
.phone-number-input::placeholder { color: var(--text-muted); letter-spacing:0; font-weight:400; font-size:16px; }

.auth-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  margin-top: 8px;
}

.auth-error {
  font-size: 13px;
  color: var(--negative);
  padding: 8px 0;
}

.auth-back {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  font-family: var(--font);
}
.auth-back:hover { color: var(--text-secondary); }

/* ===== STATYSTYKI ===== */
.stats-section { padding: 4px 0; }

/* Donut */
.stat-donut-wrap { margin-bottom: 16px; }
.stat-legend { display: flex; flex-direction: column; gap: 8px; }
.stat-legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.stat-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.stat-legend-name { flex: 1; color: var(--text-secondary); }
.stat-legend-val  { font-weight: 600; color: var(--text-primary); }
.stat-legend-pct  { color: var(--text-muted); width: 34px; text-align: right; }

/* Bars */
.stat-bars { display: flex; flex-direction: column; gap: 10px; }
.stat-bar-row { display: flex; align-items: center; gap: 8px; }
.stat-bar-name  { width: 70px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-bar-track { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.stat-bar-fill  { height: 100%; border-radius: 4px; transition: width .4s ease; }
.stat-bar-val   { width: 80px; font-size: 12px; font-weight: 600; text-align: right; }

/* Summary grid */
.stat-summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.stat-summary-card {
  background: var(--surface2); border-radius: var(--radius-md);
  padding: 14px 12px; text-align: center;
}
.stat-summary-val   { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.stat-summary-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ===== HINT PRZY SALDZIE GŁÓWNYM ===== */
.balance-hint {
  margin-top: 8px;
  min-height: 20px;
}
.balance-hint-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.balance-hint-owe {
  color: var(--negative);
}
.balance-hint-collect {
  color: var(--positive);
}

/* ===== IKONA TELEFONU W OSOBACH ===== */
.person-phone-btn {
  color: var(--positive);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(52,211,153,.1);
  text-decoration: none;
  transition: background .15s;
}
.person-phone-btn:hover {
  background: rgba(52,211,153,.2);
}

/* ===== BELKA FUNDUSZU NA KARCIE EVENTU ===== */
.event-card {
  position: relative;
  overflow: hidden;
}
.event-fund-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 12px 12px;
  transition: background .4s ease;
}

/* ═══════════ OBSERVER LINKS — LINKI OBSERWATORA ═══════════ */
.observer-warning {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px;
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.observer-warning-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.observer-warning strong { color: var(--warning); }

.observer-reminder {
  background: rgba(248,113,113,.07); border: 1px solid rgba(248,113,113,.2);
  border-radius: var(--radius-md); padding: 10px 14px; margin: 12px 0;
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.observer-reminder strong { color: var(--negative); }

.obs-link-box {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12px; color: var(--brand); word-break: break-all;
  cursor: pointer; font-family: monospace; line-height: 1.4;
  transition: background .15s;
}
.obs-link-box:hover { background: var(--surface3); }

.observer-link-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
}
.observer-link-row.obs-expired { opacity: .5; }
.obs-link-info { flex: 1; min-width: 0; }
.obs-link-label { font-weight: 600; font-size: 14px; }
.obs-link-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.observer-share-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px;
}

/* ═══════════ OSOBY — przyciski akcji ═══════════ */
.people-actions-divider {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  color: var(--text-muted); text-transform: uppercase;
  margin: 18px 0 8px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

.people-action-btn {
  width: 100%; margin-bottom: 8px;
  display: flex !important; align-items: center;
  gap: 12px; padding: 12px 14px !important;
  text-align: left;
}
.pab-icon { font-size: 20px; flex-shrink: 0; }
.pab-text { display: flex; flex-direction: column; gap: 2px; }
.pab-text strong { font-size: 14px; font-weight: 600;
  color: var(--text-primary); }
.pab-text small { font-size: 12px; color: var(--text-secondary);
  font-weight: 400; }

/* ═══════════ WALUTA — formularz wydatku ═══════════ */
#exp-fx-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}
#exp-fx-preview {
  font-size: 20px;
  font-weight: 700;
  color: var(--positive);
}

/* ═══════════ PROFIL ═══════════ */
.profile-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px 16px; text-align: center;
}
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  font-size: 28px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid; cursor: pointer;
  transition: transform .15s; margin-bottom: 10px;
}
.profile-avatar:hover { transform: scale(1.05); }
.profile-name { font-size: 20px; font-weight: 700; }

.avatar-color-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.avatar-swatch {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; transition: transform .15s, border-color .15s;
}
.avatar-swatch:hover  { transform: scale(1.15); }
.avatar-swatch.active { border-color: var(--text-primary); }

.profile-stats-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px; margin: 0 16px 16px;
}
.profile-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 8px; text-align: center;
}
.profile-stat-val   { font-size: 18px; font-weight: 700; color: var(--brand); }
.profile-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ═══════════ AWATAR ═══════════ */
.person-avatar, .profile-avatar, .obs-avatar {
  display: flex; align-items: center; justify-content: center;
  line-height: 1; font-weight: 800;
}
.av-big { font-size: 1em; font-weight: 800; line-height: 1; }
.av-sm  { font-size: .58em; font-weight: 600; line-height: 1; text-transform: uppercase; vertical-align: baseline; margin-top: .4em; }

/* ═══════════ EDYCJA EVENTU ═══════════ */
.edit-event-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin-bottom: 16px;
}
.edit-event-note svg { flex-shrink: 0; margin-top: 1px; color: var(--brand); }

/* ═══ Kwota na karcie eventu ═══ */
.amount-fund-pos { color: var(--positive); }   /* Fundusz ma środki = zielony */
.amount-fund-neg { color: var(--negative); }   /* Fundusz przekroczony = czerwony */

/* ═══════════ SALDO — etykiety kontekstowe ═══════════ */
.bal-label {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  margin-left: 5px; vertical-align: middle;
}
.bal-owe  { background: var(--negative-dim, #f8717120); color: var(--negative); }
.bal-get  { background: var(--positive-dim, #34d39920); color: var(--positive); }
.bal-zero { background: var(--surface2); color: var(--text-muted); }

/* Kwoty z kolorem */
.amount-owe { color: var(--negative); }
.amount-get { color: var(--positive); }

/* ═══════════ RAMKA EVENTU — status rozliczenia ═══════════ */
/* Stara: debt = czerwona, credit = zielona (usuwamy) */
/* Nowa: debt = nierozliczony (czerwona), settled = rozliczony (zielona) */
.event-card--settled {
  border-color: var(--positive) !important;
  box-shadow: 0 0 0 1px var(--positive);
}
/* event-card--debt zostaje dla nierozliczonego (czerwony) */


/* ═══════════ ZABEZPIECZENIE LAYOUTU ═══════════ */
/* Upewnij się że żaden element nie wyskakuje poza #app */
#app { isolation: isolate; }
#app .screen { position: absolute !important; inset: 0 !important; width: 100% !important; }
#app .topbar { position: relative !important; width: 100% !important; }
#app .bottomnav { position: absolute !important; width: 100% !important; left: 0 !important; right: 0 !important; }

/* Ukryj dolną nawigację na ekranie logowania */
#screen-auth.active ~ .bottomnav,
body:has(#screen-auth.active) .bottomnav {
  display: none !important;
}

/* Auth screen nad nawigacją */
#screen-auth.active {
  z-index: 100 !important;
}

/* ═══════════ NOWY LAYOUT KAFELKA EVENTU ═══════════ */
.event-meta-cat {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-meta-date {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
  margin-top: 1px;
}
.event-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.event-chevron {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1;
  opacity: 0.6;
}

/* ═══════════ FUNDUSZ — dostępna kwota per uczestnik ═══════════ */
.fund-avail {
  font-size: 11px;
  font-weight: 600;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
.fund-avail--pos  { color: var(--positive); background: rgba(52,211,153,.12); }
.fund-avail--neg  { color: var(--negative); background: rgba(248,113,113,.12); }
.fund-avail--zero { color: var(--text-muted); background: var(--surface2); }

.event-fund-bar-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--border);border-radius:0 0 12px 12px;overflow:hidden}
.event-fund-bar-fill{height:100%;transition:width .6s ease,background .6s ease}
/* ═══════════ OSOBY — bilans dwuwierszowy ═══════════ */
.person-balance-col {
  text-align: right;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 80px;
}
.person-bal-amount {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}
.person-bal-amount.amount-get { color: var(--positive); }
.person-bal-amount.amount-owe { color: var(--negative); }
.person-bal-label {
  font-size: 10px;
  font-weight: 500;
  margin-top: 2px;
  text-transform: lowercase;
  letter-spacing: .2px;
}
.person-bal-label.bal-get  { color: var(--positive); opacity: .8; }
.person-bal-label.bal-owe  { color: var(--negative); opacity: .8; }
.person-bal-label.bal-zero { color: var(--text-muted); }


/* ═══════════════════════════════ RACHUNKI ═══════════════════════════════ */
.receipt-preview-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  max-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.receipt-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: opacity .2s;
}
.receipt-preview-wrap:hover .receipt-img { opacity: .85; }

.receipt-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  border-radius: 10px;
}
.receipt-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pełnoekranowy lightbox */
.receipt-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease;
  cursor: zoom-out;
}

/* ═══ Miniatura rachunku w liście wydatków ═══ */
.expense-receipt-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--border);
  transition: opacity .2s, transform .15s;
}
.expense-receipt-thumb:hover {
  opacity: .85;
  transform: scale(1.05);
}

/* ═══ Spinacz rachunku — prawy górny róg kafelka wydatku ═══ */
.expense-badges-tr {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 1;
}
.expense-clip-badge {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #38bdf8;
  text-shadow: 0 0 4px rgba(56,189,248,.4);
}

/* ═══ Pinesza GPS na kafelku wydatku ═══ */
.expense-pin-badge {
  font-size: 13px;
  line-height: 1;
}

/* ═══ Obserwator — przyciski kontaktowe ═══ */
.obs-contact-btn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-2, #1e2535);
  color: var(--brand);
  text-decoration: none;
  border: 1px solid var(--brand);
  white-space: nowrap;
  transition: opacity .15s;
}
.obs-contact-btn:hover { opacity: .8; }

/* ═══════════ PRZEWODNIK ═══════════ */
.guide-modal{background:var(--surface);border-radius:24px;width:calc(100% - 32px);max-width:380px;padding:28px 24px 24px;position:relative;display:flex;flex-direction:column;align-items:center;gap:0;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#modal-guide{align-items:center;justify-content:center}
.guide-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;background:var(--surface2);color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.guide-close:hover{background:var(--surface3);color:var(--text-primary)}
.guide-slides{width:100%}
.guide-slide{display:flex;flex-direction:column;align-items:center;text-align:center}
.guide-img{width:100%;height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.guide-title{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:12px;line-height:1.3}
.guide-text{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}
.guide-dots{display:flex;gap:8px;margin:4px 0 16px}
.guide-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);cursor:pointer;transition:background .2s,transform .2s}
.guide-dot.active{background:var(--brand);transform:scale(1.3)}
.guide-nav{display:flex;gap:12px}
.guide-btn-prev,.guide-btn-next{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface2);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.guide-btn-prev:hover,.guide-btn-next:hover{background:var(--surface3);border-color:var(--border2)}
.guide-btn-next.last{background:var(--brand);border-color:var(--brand);color:#fff;font-size:13px;font-weight:600;width:auto;padding:0 18px;border-radius:22px}
.guide-btn-next.last svg{display:none}

/* ═══════════ INSTALACJA PWA ═══════════ */
.install-intro{display:flex;flex-direction:column;align-items:center;gap:12px;margin:4px 0 16px}
.install-app-icon{display:flex;align-items:center;gap:10px}
.install-app-arrow{font-size:22px;color:var(--brand);font-weight:700;animation:install-bounce .8s infinite alternate}
.install-app-homescreen{font-size:36px}
@keyframes install-bounce{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.install-intro-text{font-size:13px;color:var(--text-secondary);line-height:1.6;text-align:center}
.install-step{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.install-step-num{min-width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.install-share-icon{display:inline-block;padding:1px 5px;border:1px solid var(--border);border-radius:5px;font-size:12px;margin:0 2px}

/* ═══════════ TŁO EVENTU — PODRÓŻ/WYPRAWA ═══════════ */
#screen-event.bg-travel {
  background-image: url('/images/event-travel-bg.jpg');
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
}
#screen-event.bg-travel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 26, 0.72);
  pointer-events: none;
  z-index: 0;
}
#screen-event.bg-travel .topbar,
#screen-event.bg-travel .screen-content,
#screen-event.bg-travel .bottomnav {
  position: relative;
  z-index: 1;
}
#screen-event.bg-travel .event-header-block {
  background: rgba(22, 27, 39, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.08);
}

/* ── FAB: Dodaj wydatek ─────────────────────────────────────── */
#fab-add-expense,
#fab-add-payment {
  position: fixed;
  bottom: calc(var(--nav-h, 60px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4),
              0 0 0 4px rgba(0,0,0,0.25),
              0 0 20px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
#fab-add-expense:active,
#fab-add-payment:active {
  transform: translateX(-50%) scale(0.93);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4),
              0 0 0 4px rgba(0,0,0,0.2),
              0 0 12px 2px rgba(0,0,0,0.4);
}

/* ── Home greeting ───────────────────────────────────────────────────── */
.home-greeting {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 4px 16px;
}

/* ── Home accordion ──────────────────────────────────────────────────── */
.home-acc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 6px;
}
.home-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 10px;
}
.home-acc summary::-webkit-details-marker { display: none; }
.home-acc-sum-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-acc-icon {
  font-size: 18px;
  line-height: 1;
}
.home-acc-sum-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.home-acc-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--chip-bg, rgba(255,255,255,0.08));
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: auto;
}
.home-acc-body {
  border-top: 1px solid var(--border);
}
.home-acc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.home-acc-row:last-child { border-bottom: none; }
.home-acc-row:active { background: var(--hover-bg, rgba(255,255,255,0.05)); }
.home-acc-emoji {
  font-size: 20px;
  flex-shrink: 0;
}
.home-acc-info {
  flex: 1;
  min-width: 0;
}
.home-acc-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-acc-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.home-acc-bal {
  flex-shrink: 0;
  text-align: right;
}
.home-acc-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.home-acc-badge--ok {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}

/* ═══════════════════════════════════════════════════════
   JASNY MOTYW — [data-theme="light"]
═══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --brand:          #2563eb;
  --brand-dim:      #dbeafe;
  --brand-dark:     #1d4ed8;
  --bg:             #f1f5f9;
  --surface:        #ffffff;
  --surface2:       #f1f5f9;
  --surface3:       #e2e8f0;
  --border:         #cbd5e1;
  --border2:        #94a3b8;
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --positive:       #16a34a;
  --positive-bg:    #dcfce7;
  --negative:       #dc2626;
  --negative-bg:    #fee2e2;
  --warning:        #d97706;
  --warning-bg:     #fef3c7;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,.12);
  --glow-brand:     0 0 20px rgba(37,99,235,.12);
  --info:           #2563eb;
  --info-bg:        #dbeafe;
}

[data-theme="light"] html,
[data-theme="light"] body,
html[data-theme="light"],
html[data-theme="light"] body {
  background: #f1f5f9;
  color: var(--text-primary);
}

[data-theme="light"] .chip.active {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--brand);
}

[data-theme="light"] .participant-check-row.selected {
  background: var(--brand-dim);
  border-color: var(--brand);
  color: var(--text-primary);
}

[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #f1f5f9 inset !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Nakładki na ekranach są na sztywno ciemne (rgba(8,13,26,...)) — w jasnym
   motywie potrzebują jasnego odpowiednika, inaczej tło aplikacji i eventu
   (ze zdjęciem) nadal wygląda ciemno mimo przełączenia motywu. */
[data-theme="light"] .screen {
  background: rgba(241, 245, 249, 0.65);
}
[data-theme="light"] #screen-home {
  background: rgba(241, 245, 249, 0.8);
}
[data-theme="light"] #screen-event.bg-travel::before {
  background: rgba(241, 245, 249, 0.72);
}
[data-theme="light"] #screen-event.bg-travel .event-header-block {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════
   HOVER — interaktywne elementy (oba motywy)
═══════════════════════════════════════════════════════ */

/* Chipy kategorii, trybów podziału, filtrów */
.chip:hover:not(.active) {
  background: var(--surface3);
  border-color: var(--border2);
  color: var(--text-primary);
}
.chip.active:hover {
  filter: brightness(1.1);
}

/* Przyciski trybu podziału (Wszyscy / Wybrani / Kwoty) */
.split-opt:hover:not(.active) {
  background: var(--surface3);
  color: var(--text-secondary);
}

/* Wiersze uczestników z checkboxem */
.participant-check-row:hover {
  border-color: var(--border2);
  background: var(--surface3);
  cursor: pointer;
}
.participant-check-row.selected:hover {
  filter: brightness(1.05);
}

/* Wiersze uczestników z kwotą */
.participant-amount-row:hover {
  border-color: var(--border2);
}

/* Inputy i selecty — hover */
.form-input:hover,
.form-select:hover {
  border-color: var(--border2);
}
.amount-input:hover {
  border-color: var(--border2);
}

/* Przyciski ogólne */
.btn-primary:hover   { filter: brightness(1.1); }
.btn-secondary:hover { background: var(--surface3); border-color: var(--border2); }

/* Karty eventów */
.event-card:hover { border-color: var(--border2); background: var(--surface2); }

/* Przyciski ikon */
.icon-btn:hover { background: var(--surface3); }

/* Elementy listy rozliczeń */
.settle-item:hover { border-color: var(--border2); }
.btn-settle:hover  { background: var(--surface3); color: var(--text-primary); }

/* Wydatki */
.expense-item:hover { border-color: var(--border2); }

/* Osoby */
.person-row:hover { border-color: var(--border2); }

/* Fund payments */
.fund-payment-item:hover { border-color: var(--border2); }