/* Approved Afterglow palette shared by every screen, form and dialog. */
:root{color-scheme:dark;--bg:#101716;--paper:#192321;--ink:#F3FAF6;--sub:#BACCC4;--brand:#57DFBD;--onbrand:#082D25;--soft:#243D34;--line:#34443E;--warn:#3D3020;--amber:#FFBF61;--good:#69E6A7;--red:#FF9DA8;--coast:#69462F;--spring:#344D57}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px}header{padding:18px 22px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.logo{font-size:23px;font-weight:800;letter-spacing:-1px;color:var(--ink);text-decoration:none}.logo span{color:var(--brand)}.demo{font-size:12px;color:var(--sub)}main{padding:22px 22px 48px;max-width:660px;margin:auto}h1{font-size:30px;line-height:1.2;letter-spacing:-.8px;margin:6px 0 8px}h2{font-size:18px;line-height:1.35;margin:10px 0 7px;font-weight:600}h3{font-size:16px;margin:0 0 8px}p{margin:7px 0}.sub{font-size:13px;color:var(--sub);line-height:20px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.tile{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;text-align:left;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:5px}.tile:hover{border-color:var(--brand)}.cover{height:100px;border-radius:12px;display:grid;place-items:center;font-size:42px;background:var(--coast);margin-bottom:8px}.cover.spring{background:var(--spring)}.cover.neutral{background:var(--soft)}.badge{align-self:flex-start;font-size:12px;color:var(--brand);background:var(--soft);padding:5px 8px;border-radius:6px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.tile .foot{margin-top:auto;padding-top:10px}.weather-icons{font-size:22px;letter-spacing:5px}.add{background:var(--soft);border-style:dashed;min-height:185px;align-items:center;justify-content:center}.plus{font-size:38px;color:var(--brand)}.grid>.add:last-child:nth-child(odd){grid-column:1/-1}.back,.link{color:var(--brand);background:none;border:0;padding:10px 0;text-decoration:none;display:inline-block;min-height:44px;font-weight:600;font-size:14px}.avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--soft);color:var(--brand);font-weight:700}.member{position:relative}.member-open{border:0;background:transparent;text-align:left;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;width:100%}.member-open h2{overflow-wrap:anywhere}.balance{font-size:22px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.state{font-size:12px;color:var(--sub)}.dispute{align-self:flex-start;border:1px solid var(--line);background:var(--warn);border-radius:8px;padding:8px;min-height:44px;font-size:12px;margin-top:8px;display:flex;align-items:center;gap:6px}.dispute svg{width:20px;height:20px;flex-shrink:0}.dispute path{fill:var(--coast);stroke:var(--ink);stroke-width:1.5}.dispute text{fill:var(--ink);font-size:13px;font-weight:700}.note{background:var(--soft);padding:13px;border-radius:12px;font-size:13px;margin:16px 0}.warning{background:var(--warn)}.panel{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper);margin:14px 0}.primary,.secondary{width:100%;border-radius:12px;padding:14px;min-height:49px;font-weight:600;margin-top:10px}.primary{background:var(--brand);color:var(--onbrand);border:1px solid var(--brand)}.secondary{background:var(--paper);border:1px solid var(--line)}button:disabled{opacity:.6;cursor:default}label{display:block;font-size:13px;font-weight:600;margin:16px 0}input,select{display:block;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px;min-height:50px;margin-top:7px}dialog{width:calc(100% - 28px);max-width:570px;max-height:90dvh;border:1px solid var(--line);border-radius:24px;padding:22px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#0007}.close{background:var(--soft);border:0;border-radius:12px;min-width:44px;min-height:44px;font-size:22px}dialog h2{font-size:24px;margin:0}.section-title{margin:22px 0 10px}details{border-top:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:600;min-height:44px;padding:8px 0}.expense{padding:15px 0;border-top:1px solid var(--line)}.expense:first-child{border-top:0}.error{color:var(--red)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.empty{padding:20px 0}.spaced{margin-top:24px}@media(max-width:360px){main{padding:18px 14px}.tile{padding:12px}.demo{max-width:100px;text-align:right}.balance{font-size:20px}}@media(prefers-reduced-motion:no-preference){button,a{transition:border-color .15s ease}}

/* Restore the reference's compact Trips rhythm: paragraphs must not add
   a second layer of spacing inside the tile's own gap. */
.trip-tile{gap:4px}.trip-tile p{margin:0}.trip-tile h2{margin:8px 0 4px}.trip-tile .weather-icons{line-height:1.3}.trip-tile .foot{padding-top:8px}.trip-tile .cover{margin-bottom:8px}

/* Compact member composition follows the supplied screenshot. */
.members-board{border:1px solid var(--line);border-radius:24px;padding:18px}.board-heading h1{font-size:24px;letter-spacing:-.5px;margin:0}.board-heading .sub{font-size:14px}.member-grid{gap:12px;margin:20px 0 14px}.member{position:relative;width:100%;padding:16px;aspect-ratio:1.53;min-height:170px;border-radius:20px;gap:0}.member-open{gap:0;justify-content:space-between}.member-identity{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding-right:0}.has-dispute .member-identity{padding-right:34px}.member-name{font-size:22px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member .avatar{position:relative;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--soft);color:var(--ink)}.avatar>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.invite-dot{position:absolute;bottom:-3px;right:-3px;border-radius:50%;background:var(--soft);border:2px solid var(--paper);width:17px;height:17px}.invite-dot svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2}.member .balance{font-size:30px;font-weight:600;letter-spacing:-.6px;line-height:1.2;margin:15px 0}.receivable{color:var(--good)}.member-status{display:flex;align-items:center;gap:7px;color:var(--sub);font-size:17px;line-height:1.4;white-space:nowrap}.member-status svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.member-status.agreed svg{color:var(--good)}.member>.dispute{position:absolute;top:14px;right:10px;margin:0;background:none;border:0;padding:0 4px;min-width:38px;min-height:44px;gap:5px;font-size:18px}.dispute svg{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dispute path{fill:none;stroke:var(--ink);stroke-width:2}.member>.dispute svg{width:20px;height:20px}.add-member{width:100%;min-height:44px;background:none;border:1px dashed var(--line);border-radius:12px;color:var(--sub);font-size:14px}.add-member:hover{color:var(--ink);border-color:var(--sub)}.add-member span{font-size:20px;margin-right:4px}.trip-details{margin:18px 0;color:var(--sub);font-size:13px}.primary{color:var(--onbrand)}.warning{background:var(--warn);color:var(--ink)}.dispute{background:var(--warn)}.back{color:var(--sub);font-weight:500}.tile:hover{border-color:var(--sub)}.trip-tile .badge{color:var(--brand)}
@media(max-width:599px){main{padding:16px 14px 30px}.members-board{padding:12px;border-radius:20px}.board-heading h1{font-size:21px}.board-heading .sub{font-size:12px}.member-grid{gap:9px;margin-top:16px}.member{padding:12px;min-height:145px;border-radius:16px}.member .avatar{width:28px;height:28px}.avatar>svg{width:17px;height:17px}.member-identity{gap:7px;min-height:30px}.member-name{font-size:16px}.member .balance{font-size:25px;margin:17px 0}.member-status{font-size:11px;gap:5px}.member-status svg{width:13px;height:13px}.member>.dispute{top:5px;right:4px;min-width:30px;font-size:13px;gap:3px}.member>.dispute svg{width:15px;height:15px}.has-dispute .member-identity{padding-right:26px}}
@media(max-width:350px){.members-board{padding:10px}.member{padding:10px}.member-name{font-size:14px}.member .balance{font-size:22px}.member-status{font-size:10px}.member .avatar{width:24px;height:24px}.member-identity{gap:5px}}

/* Amber outline and count stay visible without relying on colour alone. */
.dispute{color:var(--amber)}
.dispute svg,.dispute path{stroke:var(--amber)}
.dispute path:first-child{fill:none}
.member .avatar{color:var(--brand)}
.add-member{background:var(--soft);color:var(--brand)}

.trip-nav{display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:5px;margin:0 0 16px}.trip-nav button{flex:1;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--sub);font-weight:600}.trip-nav [aria-pressed=true]{background:var(--soft);color:var(--brand)}.quick-expense{margin:0 0 16px}.expense-tile{min-height:175px;justify-content:space-between}.expense-tile h2{overflow-wrap:anywhere}.expense-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.expense-fields input{min-width:0;width:100%}.allocation{border:0;padding:0;margin:20px 0 0}.allocation legend{font-weight:600;font-size:14px}.allocation-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:6px 0}.allocation-row label{display:flex;align-items:center;gap:10px;flex:1;margin:6px 0;min-height:44px;min-width:0}.allocation-row input[type=checkbox]{width:20px;height:20px;min-height:20px;margin:0;accent-color:var(--brand);flex-shrink:0}.allocation-row small{display:block;color:var(--sub);font-weight:400}.allocation-row .custom-share{width:95px;min-width:0;margin:0;padding:9px}.allocation-row [hidden]{display:none}.share-preview{font-variant-numeric:tabular-nums}.allocation-row label span{overflow-wrap:anywhere}#split-summary{min-height:40px}input::placeholder{color:var(--sub);opacity:.75}

.repayment-visual{display:flex;flex-direction:column;align-items:center;gap:7px;margin:9px 0}.repayment-ring{width:100px;height:100px;border-radius:50%;background:conic-gradient(var(--brand) var(--progress),var(--line) 0);display:grid;place-items:center}.ring-centre{width:82px;height:82px;border-radius:50%;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.ring-centre strong{font-size:15px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}.ring-centre small{font-size:11px;color:var(--sub)}.settled-tick{font-size:34px;color:var(--brand)}.repayment-caption{font-size:12px}.repayment-panel{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:16px}.repayment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.repayment-row strong{overflow-wrap:anywhere}.repayment-row .sub{margin:2px 0}.record-payment{background:var(--soft);color:var(--brand);border:0;border-radius:10px;min-height:44px;padding:8px 10px;font-size:12px;flex-shrink:0}
.expense-tile .repayment-ring{width:86px;height:86px}.expense-tile .ring-centre{width:70px;height:70px}.expense-tile .ring-centre strong{font-size:13px}.expense-tile .repayment-visual{min-height:110px;justify-content:center}
.trip-tools{margin-top:-8px}.trip-tools .link{padding:8px 0}.danger{color:var(--red);border-color:var(--red)}button[hidden]{display:none!important}.repayment-ring .ring-centre strong{max-width:95%;overflow-wrap:anywhere;font-size:12px}.expense-tile .balance{overflow-wrap:anywhere}.expense-fields label{min-width:0}
textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;width:100%;margin-top:7px;resize:vertical}#connection-status{font-size:11px}