:root{--bg-primary:#050506;--bg-secondary:#121218cc;--bg-tertiary:#1c1c24e6;--border-color:#cba8751f;--border-focus:#cba87566;--accent-gold:#cba875;--accent-gold-hover:#b89663;--accent-gold-bg:#cba87526;--accent-green:#10b981;--accent-green-bg:#10b98126;--accent-red:#f43f5e;--accent-red-bg:#f43f5e26;--accent-orange:#ff5a36;--accent-orange-bg:#ff5a3626;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--glass-blur:blur(25px);--shadow-lg:0 10px 40px #000000a6;--shadow-sm:0 4px 16px #0006;--transition-fast:.2s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--safe-area-top:env(safe-area-inset-top,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;flex-direction:column;min-height:-webkit-fill-available;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;display:flex;overflow-x:hidden}html{height:-webkit-fill-available}h1,h2,h3,h4,.font-display{font-family:Outfit,sans-serif;font-weight:600}.loader-container{background-color:var(--bg-primary);z-index:9999;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:flex;position:fixed;inset:0}.loader-spinner{border:4px solid var(--border-color);border-top-color:var(--accent-gold);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}.loader-text{letter-spacing:.05em;background:linear-gradient(135deg, #fff 0%, var(--accent-gold) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:700}@keyframes spin{to{transform:rotate(360deg)}}.auth-container{background:radial-gradient(circle at 100% 0,#f59e0b14,#0000 40%),radial-gradient(circle at 0 100%,#10b9810d,#0000 45%);justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.auth-card{background:var(--bg-secondary);border:1px solid var(--border-color);width:100%;max-width:400px;-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-lg);border-radius:24px;padding:2.25rem 2rem;animation:.4s ease-out fadeIn}.auth-logo{text-align:center;margin-bottom:2rem}.auth-logo svg{color:var(--accent-gold);margin-bottom:.5rem}.auth-logo h1{background:linear-gradient(135deg, #fff 30%, var(--accent-gold) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2rem;font-weight:800}.auth-logo p{color:var(--text-secondary);margin-top:.25rem;font-size:.875rem}.form-group{margin-bottom:1.25rem}.form-label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.85rem;font-weight:500;display:block}.input-container{position:relative}.input-field{border:1px solid var(--border-color);width:100%;color:var(--text-primary);transition:var(--transition-fast);background-color:#ffffff0a;border-radius:12px;padding:.8rem 1rem .8rem 2.8rem;font-family:inherit;font-size:1rem}.input-field:focus{border-color:var(--accent-gold);box-shadow:0 0 0 1px var(--accent-gold), 0 4px 12px #cba87526;background-color:#ffffff14;outline:none}.input-icon{color:var(--text-muted);pointer-events:none;width:1.2rem;height:1.2rem;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.btn{cursor:pointer;width:100%;transition:var(--transition-fast);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.875rem;font-size:1rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-hover) 100%);color:#000}.btn-primary:hover,.btn-primary:active{transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b59}.btn-secondary{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary)}.btn-secondary:hover{background-color:#ffffff14}.auth-toggle{text-align:center;color:var(--text-secondary);margin-top:1.5rem;font-size:.875rem}.auth-toggle span{color:var(--accent-gold);cursor:pointer;font-weight:500}.app-container{padding-bottom:calc(72px + var(--safe-area-bottom));padding-top:var(--safe-area-top);flex-direction:column;flex:1;animation:.3s ease-out fadeIn;display:flex}.app-header{-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-color);z-index:100;background-color:#0d0e12b3;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex;position:sticky;top:0}.app-title-logo{align-items:center;gap:.5rem;display:flex}.app-title-logo svg{color:var(--accent-gold)}.app-title-logo h2{font-size:1.25rem;font-weight:700}.demo-badge{background-color:var(--accent-orange-bg);color:var(--accent-orange);text-transform:uppercase;letter-spacing:.05em;border:1px solid #f9731633;border-radius:6px;padding:.25rem .5rem;font-size:.7rem;font-weight:600}.view{flex:1;width:100%;max-width:600px;margin:0 auto;padding:1.25rem;display:none}.view.active{flex-direction:column;animation:.3s cubic-bezier(.16,1,.3,1) slideIn;display:flex}.bottom-nav{bottom:calc(16px + var(--safe-area-bottom));border:1px solid var(--border-color);z-index:999;max-width:568px;height:64px;box-shadow:var(--shadow-lg);transition:var(--transition-normal);background-color:#000;border-radius:20px;justify-content:space-around;align-items:center;margin:0 auto;padding-bottom:0;display:flex;position:fixed;left:1rem;right:1rem}.nav-item{height:100%;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;text-decoration:none;display:flex;position:relative}.nav-item svg{width:1.4rem;height:1.4rem;transition:var(--transition-fast)}.nav-item.active{color:var(--accent-gold)}.nav-item.active svg{color:var(--accent-gold);transform:translateY(-4px)}.nav-item.active:after{content:"";background-color:var(--accent-gold);width:4px;height:4px;box-shadow:0 0 8px var(--accent-gold);border-radius:50%;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.summary-grid{grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem;display:grid}.metric-card{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:20px;flex-direction:column;padding:1.25rem;display:flex;position:relative;overflow:hidden}.metric-card.horizontal{flex-direction:row;justify-content:space-between;align-items:center;min-height:72px;padding:.85rem 1.15rem}.metric-card.horizontal .metric-info-col{text-align:left;flex-direction:column;gap:.15rem;display:flex}.metric-card.horizontal .metric-value-col{text-align:right;align-items:center;gap:.5rem;display:flex}.metric-card.horizontal .metric-label{margin-bottom:0;font-size:.78rem}.metric-card.horizontal .metric-value{font-size:1.5rem;line-height:1}.metric-card.horizontal .metric-details{color:var(--text-muted);margin-top:0;font-size:.72rem}.metric-card.primary{background:linear-gradient(145deg,#161821cc,#f59e0b08);border-color:#f59e0b40}.metric-card.success{background:linear-gradient(145deg,#161821cc,#10b98108);border-color:#10b98140}.metric-card.warning{background:linear-gradient(145deg,#161821cc,#f9731608);border-color:#f9731640}.metric-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem;font-weight:600}.metric-value-row{justify-content:space-between;align-items:baseline;display:flex}.metric-value{font-family:Outfit,sans-serif;font-size:2rem;font-weight:700}.metric-card.primary .metric-value{color:var(--accent-gold)}.metric-card.success .metric-value{color:var(--accent-green)}.metric-card.warning .metric-value{color:var(--accent-orange)}.metric-action-btn{color:var(--accent-gold);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin:-.5rem;padding:.5rem;display:flex}.metric-action-btn:hover{background-color:#f59e0b1a}.metric-details{color:var(--text-muted);justify-content:space-between;margin-top:.5rem;font-size:.8rem;display:flex}.section-header{justify-content:space-between;align-items:center;margin-top:.5rem;margin-bottom:1rem;display:flex}.section-header h3{color:var(--text-primary);font-size:1.15rem;font-weight:700}.add-btn{border:1px solid var(--border-color);color:var(--accent-gold);cursor:pointer;transition:var(--transition-fast);background-color:#ffffff0d;border-radius:20px;align-items:center;gap:.25rem;padding:.4rem .8rem;font-size:.85rem;font-weight:600;display:flex}.add-btn:hover{background-color:#f59e0b1a;border-color:#f59e0b4d}.card-list{flex-direction:column;gap:.75rem;margin-bottom:1.5rem;display:flex}.item-card{background:var(--bg-secondary);border:1px solid var(--border-color);transition:var(--transition-fast);border-radius:16px;justify-content:space-between;align-items:center;padding:1rem;display:flex}.item-card:hover{border-color:#ffffff26;transform:translateY(-1px)}.item-info{flex-direction:column;gap:.15rem;display:flex}.item-title{color:var(--text-primary);font-size:.95rem;font-weight:600}.item-subtitle{color:var(--text-secondary);font-size:.8rem}.item-badge{border-radius:6px;margin-left:.5rem;padding:.15rem .4rem;font-size:.7rem;font-weight:600;display:inline-block}.item-badge.unpaid{background-color:var(--accent-red-bg);color:var(--accent-red)}.item-badge.paid{background-color:var(--accent-green-bg);color:var(--accent-green)}.item-right{align-items:center;gap:.75rem;display:flex}.item-amount{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:700}.action-icon{color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:.4rem;display:flex}.action-icon:hover{color:var(--text-primary);background-color:#ffffff14}.action-icon.confirm-btn{color:var(--accent-red);background-color:var(--accent-red-bg);border:1px solid #ef444433}.action-icon.confirm-btn.confirmed{color:var(--accent-green);background-color:var(--accent-green-bg);border:1px solid #10b98133}.action-icon.delete-btn:hover{background-color:var(--accent-red-bg);color:var(--accent-red)}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:1000;background-color:#0009;justify-content:center;align-items:flex-end;display:none;position:fixed;inset:0}@media (width>=500px){.modal-overlay{align-items:center}}.modal-overlay.active{display:flex}.modal-content{border:1px solid var(--border-color);width:100%;padding:2rem 1.5rem calc(2rem + var(--safe-area-bottom)) 1.5rem;background-color:#161821;border-top-left-radius:24px;border-top-right-radius:24px;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 -10px 40px #00000080}@media (width>=500px){.modal-content{max-width:440px;box-shadow:var(--shadow-lg);border-radius:24px;padding:2.25rem 2rem;animation:.3s cubic-bezier(.16,1,.3,1) fadeInScale}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-header h3{font-size:1.3rem;font-weight:700}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.25rem}.modal-footer{gap:1rem;margin-top:1.5rem;display:flex}.settings-list{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;margin-bottom:1.5rem;overflow:hidden}.settings-item{border-bottom:1px solid var(--border-color);transition:var(--transition-fast);justify-content:space-between;align-items:center;padding:1.15rem 1.25rem;display:flex}.settings-item:last-child{border-bottom:none}.settings-item-left{color:var(--text-primary);align-items:center;gap:.75rem;display:flex}.settings-item-left svg{color:var(--accent-gold)}.settings-item-title{font-size:.95rem;font-weight:500}.settings-action{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.25rem;font-size:.95rem;font-weight:600;display:flex}.settings-action input{border:1px solid var(--border-color);color:var(--text-primary);text-align:center;width:60px;font-weight:inherit;background-color:#ffffff0d;border-radius:8px;padding:.25rem .5rem;font-family:inherit;font-size:1rem}.settings-action input:focus{border-color:var(--accent-gold);outline:none}.empty-state{text-align:center;color:var(--text-muted);padding:2rem 1rem}.empty-state svg{opacity:.6;width:2.5rem;height:2.5rem;margin-bottom:.75rem}.empty-state p{font-size:.9rem}.info-banner{color:var(--text-secondary);background:#f59e0b0f;border:1px solid #f59e0b26;border-radius:16px;gap:.75rem;margin-bottom:1.5rem;padding:1rem;font-size:.85rem;display:flex}.info-banner svg{color:var(--accent-gold);flex-shrink:0}.info-banner-content{flex-direction:column;gap:.25rem;display:flex}.info-banner-title{color:var(--text-primary);font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.chart-section-card{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);border-radius:20px;flex-direction:column;gap:1rem;margin-bottom:1.5rem;padding:1.25rem;display:flex}.chart-header{justify-content:space-between;align-items:center;display:flex}.chart-header h4{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1rem;font-weight:600}.chart-toggle-control{border:1px solid var(--border-color);background-color:#ffffff0a;border-radius:10px;padding:2px;display:inline-flex}.chart-toggle-control .toggle-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:8px;padding:.35rem .75rem;font-size:.75rem;font-weight:600}.chart-toggle-control .toggle-btn:hover{color:var(--text-primary)}.chart-toggle-control .toggle-btn.active{background-color:var(--accent-gold);color:#000;box-shadow:var(--shadow-sm)}.chart-empty-state{text-align:center;border:1px dashed var(--border-color);border-radius:12px;padding:1.5rem 0}.bar-chart-wrapper{flex-direction:column;gap:.85rem;display:flex}.bar-chart-track{background-color:#ffffff0d;border:1px solid #ffffff05;border-radius:6px;height:12px;display:flex;overflow:hidden}.bar-segment{height:100%;transition:width .6s cubic-bezier(.16,1,.3,1)}.bar-segment.fixed{background:linear-gradient(90deg, var(--accent-orange), #ff7e62)}.bar-segment.variable{background:linear-gradient(90deg, var(--accent-gold), #fbbf24)}.bar-segment.free{background:linear-gradient(90deg, var(--accent-green), #34d399)}.bar-chart-legend{flex-wrap:wrap;justify-content:space-between;gap:.5rem;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:.4rem;font-size:.75rem;display:flex}.legend-item .dot{border-radius:50%;width:8px;height:8px;display:inline-block}.legend-item .dot.fixed{background-color:var(--accent-orange)}.legend-item .dot.variable{background-color:var(--accent-gold)}.legend-item .dot.free{background-color:var(--accent-green)}.donut-chart-wrapper{justify-content:center;align-items:center;gap:1.5rem;padding:.5rem 0;display:flex}.donut-chart-svg-container{justify-content:center;align-items:center;width:130px;height:130px;display:flex;position:relative}.donut-chart-svg{filter:drop-shadow(0 0 8px #0003)}.donut-track{stroke:#ffffff08}.donut-indicator{transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}.donut-text-val{fill:var(--text-primary);font-family:Outfit,sans-serif}.donut-text-lbl{fill:var(--text-muted);font-family:Inter,sans-serif}.donut-chart-legend{flex-direction:column;flex:1;justify-content:center;display:flex}.donut-chart-legend .legend-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem;font-size:.8rem;font-weight:600}.donut-chart-legend .legend-value{margin-bottom:.35rem;font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:700}.donut-chart-legend .legend-desc{color:var(--text-secondary);font-size:.75rem;line-height:1.4}@media (width<=360px){.donut-chart-wrapper{text-align:center;flex-direction:column;gap:1rem}}.logo-badge-luxury{width:56px;height:56px;color:var(--accent-gold);background:linear-gradient(135deg,#cba87526 0%,#cba87508 100%);border:1px solid #cba87559;border-radius:16px;justify-content:center;align-items:center;margin-bottom:1rem;display:inline-flex;box-shadow:0 8px 20px #0006}.logo-title-luxury{letter-spacing:.15em;background:linear-gradient(135deg, #fff 30%, var(--accent-gold) 100%);-webkit-text-fill-color:transparent;text-shadow:0 4px 12px #0000004d;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:2.25rem;font-weight:800}.logo-subtitle-luxury{color:var(--text-secondary);letter-spacing:.25em;text-transform:uppercase;opacity:.85;margin-top:.25rem;font-family:Inter,sans-serif;font-size:.72rem;font-weight:600}.settings-actions-group{flex-direction:column;gap:.75rem;margin-top:1.5rem;display:flex}.btn-danger-outline{color:var(--accent-red)!important;background-color:#0000!important;border:1px solid #f43f5e4d!important}.btn-danger-outline:hover{background-color:var(--accent-red-bg)!important;border-color:var(--accent-red)!important}.item-card.status-confirmed{border-left:4px solid var(--accent-green);background:linear-gradient(90deg, #10b9810d 0%, var(--bg-secondary) 100%)}.item-card.status-due{border-left:4px solid var(--accent-red);background:linear-gradient(90deg, #f43f5e0d 0%, var(--bg-secondary) 100%);animation:2s infinite alternate pulse-border-red}.item-card.remaining-highlight{border-left:4px solid var(--accent-gold);background:linear-gradient(90deg, #cba8750d 0%, var(--bg-secondary) 100%)}@keyframes pulse-border-red{0%{border-left-color:#f43f5e66}to{border-left-color:var(--accent-red)}}