:root{--bg:#080b10;--panel:#12171fdb;--field:#0d1219;--border:#ffffff1a;--text-strong:#f4f7fb;--text-soft:#b8c0cc;--muted:#788393;--accent:#2fc8a6;--danger:#ff7a6e;--shadow:0 24px 80px #00000057;color:var(--text-soft);background:linear-gradient(135deg, #2fc8a61f, transparent 32%), linear-gradient(315deg, #ff7a6e14, transparent 28%), var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{min-width:320px;min-height:100svh;margin:0}body,button,input,select{font-size:16px}#root{min-height:100svh}::selection{color:#06120f;background:var(--accent)}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:32px 0}.hero-panel{border:1px solid var(--border);min-height:280px;box-shadow:var(--shadow);background:radial-gradient(circle at 100% 0,#2fc8a62e,#0000 34%),linear-gradient(135deg,#ffffff0f,#ffffff05);border-radius:8px;grid-template-columns:minmax(0,1fr) minmax(260px,360px);align-items:end;gap:24px;padding:36px;animation:.56s both panel-rise;display:grid;overflow:hidden}.eyebrow,.section-heading span,.stat-card span,label,legend,.balance-row span,.expense-row span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;font-weight:700}h1{max-width:720px;color:var(--text-strong);letter-spacing:0;margin:12px 0 16px;font-size:clamp(2.6rem,7vw,5.8rem);line-height:.94}.hero-copy{max-width:560px;color:var(--text-soft);font-size:1.05rem}.stat-grid{gap:12px;display:grid}.stat-card,.panel{border:1px solid var(--border);background:var(--panel);border-radius:8px}.stat-card{padding:18px;animation:.7s both float-in}.stat-card:nth-child(2){animation-delay:.1s}.stat-card strong{color:var(--text-strong);margin-top:8px;font-size:1.6rem;display:block}.workspace{grid-template-columns:minmax(320px,1.1fr) minmax(300px,.9fr);gap:18px;margin-top:18px;display:grid}.panel{padding:22px;animation:.52s both panel-rise}.input-panel,.expense-panel{grid-row:span 2}.section-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}h2{color:var(--text-strong);letter-spacing:0;margin:0;font-size:1.1rem}.expense-form,.roommate-form{gap:14px;display:grid}.expense-form{grid-template-columns:1fr 1fr}.wide{grid-column:1/-1}label{gap:8px;display:grid}input,select{box-sizing:border-box;border:1px solid var(--border);width:100%;min-height:44px;color:var(--text-strong);background:var(--field);font:inherit;border-radius:6px;outline:none;transition:border-color .18s,box-shadow .18s,transform .18s}input{padding:10px 12px}select{padding:10px}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px #2fc8a61f}input:disabled,select:disabled{cursor:not-allowed;opacity:.56}.money-input{border:1px solid var(--border);background:var(--field);border-radius:6px;align-items:center;display:flex;overflow:hidden}.money-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px #2fc8a61f}.money-input span{color:var(--accent);padding:0 12px;font-size:.78rem;font-weight:800}.money-input input{border:0;border-left:1px solid var(--border);border-radius:0}.money-input input:focus{box-shadow:none}.split-field{border:0;min-width:0;margin:0;padding:0}.split-field legend{margin-bottom:8px;padding:0}.participant-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}.check-card{border:1px solid var(--border);min-height:44px;color:var(--text-soft);cursor:pointer;background:#ffffff09;border-radius:6px;align-items:center;gap:10px;padding:10px 12px;transition:border-color .18s,background .18s,transform .18s;display:flex;position:relative}.check-card:hover{border-color:#2fc8a66b;transform:translateY(-1px)}.check-card:has(input:checked){color:var(--text-strong);background:#2fc8a61c;border-color:#2fc8a6b8}.check-card input{width:18px;min-height:18px;accent-color:var(--accent)}button{color:#031412;background:var(--accent);min-height:44px;font:inherit;cursor:pointer;border:0;border-radius:6px;font-weight:800;transition:transform .16s,box-shadow .16s,background .16s}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 28px #2fc8a638}button:active:not(:disabled){transform:translateY(0)}button:disabled{cursor:not-allowed;opacity:.35}.roommate-form{border-top:1px solid var(--border);grid-template-columns:1fr auto;align-items:end;margin-top:18px;padding-top:18px}.roommate-form button{width:84px}.roommate-list{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.person-chip{border:1px solid var(--border);color:var(--text-strong);background:#ffffff0a;border-radius:999px;align-items:center;gap:8px;padding:7px 8px 7px 12px;animation:.26s both float-in;display:inline-flex}.person-chip button,.expense-row button{width:24px;min-height:24px;color:var(--text-soft);background:#ffffff14;border-radius:50%;place-items:center;font-size:.82rem;line-height:1;display:inline-grid}.balance-list,.settlement-list,.expense-list{gap:10px;display:grid}.balance-row,.settlement-row,.expense-row{background:#ffffff09;border:1px solid #ffffff12;border-radius:8px;align-items:center;gap:12px;padding:14px;animation:.32s both float-in;display:grid}.balance-row{grid-template-columns:1fr auto}.balance-row strong,.expense-row strong{color:var(--text-strong);display:block}.balance-row p,.expense-row p,.settlement-row p{color:var(--text-strong);margin:0;font-weight:800}.positive{color:var(--accent)!important}.negative{color:var(--danger)!important}.settlement-row{grid-template-columns:auto 1fr auto}.settlement-row p{color:var(--accent);grid-column:1/-1}.flow-line{background:linear-gradient(90deg, var(--danger), var(--accent));transform-origin:0;min-width:52px;height:2px;animation:.52s both flow-grow}.empty-state{border:1px dashed var(--border);color:var(--text-soft);text-align:center;border-radius:8px;margin:0;padding:24px}.empty-state.compact{width:100%;padding:14px;font-size:.92rem}.expense-row{grid-template-columns:1fr auto auto}@keyframes panel-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes float-in{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes flow-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (width<=820px){.app-shell{width:min(100% - 20px,1180px);padding:10px 0}.hero-panel,.workspace,.expense-form{grid-template-columns:1fr}.hero-panel,.panel{padding:18px}.roommate-form{grid-template-columns:1fr}.roommate-form button{width:100%}.input-panel,.expense-panel{grid-row:auto}}