:root{--side:#12233a;--side2:#1d3555;--acc:#c9a24a;--pri:#1d4e89;--bg:#eff2f6;--card:#fff;--line:#e1e6ee;--ink:#1c2736;--mut:#667487;--red:#b3372e;--green:#23744f;--r:10px}
*{box-sizing:border-box}html{scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
a{color:var(--pri)}h1{font-size:1.55rem;margin:.2em 0 .5em;letter-spacing:-.01em}h2{font-size:1.1rem;margin:1.8em 0 .6em}h3{font-size:1rem;margin:1.4em 0 .5em;color:var(--mut)}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* shell */
.shell{display:flex;min-height:100vh}
.side{width:270px;flex:none;background:var(--side);color:#cdd7e6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1rem 1rem;color:#fff;text-decoration:none;border-bottom:1px solid var(--side2);border-left:4px solid var(--acc)}
.brand img{width:54px;height:54px;flex:none}.brand b{display:block;font:700 1rem/1.25 Georgia,'Times New Roman',serif}.brand small{display:block;margin-top:.3rem;font-size:.8rem;color:#93a4bd}
.side nav{padding:.6rem .7rem;flex:1}.grp{margin:1.1rem .6rem .35rem;font-size:.8rem;color:#7f93b1}
.side a:not(.brand){display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;margin-bottom:2px;border-radius:8px;color:#cdd7e6;text-decoration:none}
.side a:not(.brand):hover{background:var(--side2);color:#fff}.side a.on{background:var(--side2);color:#fff;box-shadow:inset 3px 0 0 var(--acc)}
.sidefoot{padding:.7rem;border-top:1px solid var(--side2)}
.page{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.8rem;height:58px;padding:0 1.5rem;background:var(--card);border-bottom:1px solid var(--line)}
.ptitle{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user{margin-left:auto;display:flex;align-items:center;gap:.55rem;color:var(--mut);font-size:.9rem;white-space:nowrap}
.user i{font:600 .85rem system-ui;font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center}
.burger{display:none;padding:.35rem;background:none;border:0;color:var(--ink)}.burger:hover{background:var(--bg);color:var(--ink)}
.scrim{display:none}
.content{padding:1.5rem;width:100%;max-width:1250px}
.foot{margin-top:auto;padding:1rem 1.5rem;color:var(--mut);font-size:.82rem;border-top:1px solid var(--line);background:var(--card)}

/* login */
.bare{background:var(--side)}.bare .content{max-width:420px;margin:0 auto;padding:0 1rem 2rem}
.loginbrand img{display:block;width:120px;height:120px;margin:0 auto 1rem}.loginbrand{text-align:center;padding:3rem 1rem 1.5rem;color:#fff}.loginbrand b{display:block;font:700 1.6rem Georgia,serif}.loginbrand small{color:#93a4bd}
.bare .foot{background:none;border:0;color:#93a4bd;text-align:center}.bare .card.narrow{margin:0}

/* controls */
input,select,textarea,button,.btn{font:inherit;padding:.5rem .75rem;border:1px solid #cfd7e3;border-radius:8px;background:#fff;color:var(--ink)}
button,.btn{background:var(--pri);color:#fff;border-color:var(--pri);cursor:pointer;text-decoration:none;display:inline-block;font-weight:500}
button:hover,.btn:hover{background:#163d6c;border-color:#163d6c;color:#fff}.btn.alt{background:#fff;color:var(--pri);border-color:#cfd7e3}.btn.alt:hover{background:#f3f6fb;color:var(--pri)}
:focus-visible{outline:3px solid rgba(201,162,74,.65);outline-offset:1px}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;color:var(--mut);font-weight:500}label input,label select,label textarea{width:100%;color:var(--ink);font-weight:400}
label.chk{flex-direction:row;align-items:center;margin-top:.5rem}label.chk input{width:auto}
.filters,.inline,.pay{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end}.filters{margin:0 0 1rem}.filters input[name=s]{flex:1;min-width:220px}.inline label{flex:1;min-width:130px}
.pay input[type=number]{width:90px}.pay input{padding:.35rem .5rem}.pay button{padding:.35rem .8rem}

/* cards, tables */
.card,.scroll,.facts,.stats div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(18,35,58,.05)}
.card{padding:1.3rem;margin:0 0 1rem}.narrow{max-width:400px;margin:2rem auto}.narrow label{margin-bottom:.9rem}.narrow h1{margin-top:0}
.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%}
th,td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid #edf0f5;vertical-align:middle}
th{background:#f6f8fb;color:var(--mut);font-size:.82rem;font-weight:600;white-space:nowrap}tr:last-child td{border-bottom:0}tbody tr:hover td,table tr:hover td{background:#fafbfd}
td a{font-weight:500;text-decoration:none}td a:hover{text-decoration:underline}
.n{text-align:right;font-variant-numeric:tabular-nums}.owing{color:var(--red);font-weight:600}.clear{color:var(--green)}.tot td{font-weight:700;background:#f6f8fb}
.count{font-size:.9rem;font-weight:500;color:var(--mut);background:#e4e9f1;padding:.1rem .6rem;border-radius:99px;vertical-align:middle}.sub{color:var(--mut);font-size:.95rem;font-weight:400}
.pager{display:flex;flex-wrap:wrap;gap:.3rem;margin:1rem 0}.pager a{min-width:34px;text-align:center;padding:.3rem .55rem;border:1px solid var(--line);border-radius:7px;background:#fff;text-decoration:none}.pager a:hover{border-color:var(--pri)}.pager .cur{background:var(--pri);border-color:var(--pri);color:#fff}
.profile{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.profile h1{margin:0}.profile .sub{margin:.2rem 0 0}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 2rem;padding:1.2rem}.facts dt{color:var(--mut)}.facts dd{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.full{grid-column:1/-1}
.msg{padding:.75rem 1rem;margin:0 0 1rem;border-radius:8px;border-left:4px solid var(--green);background:#e6f3ec}.msg.err{border-color:var(--red);background:#fae9e7}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:0 0 1.3rem}
.stats div{padding:1.1rem 1.2rem;color:var(--mut);font-size:.9rem;border-top:4px solid var(--pri)}.stats div:nth-child(2){border-top-color:var(--acc)}.stats div:nth-child(3){border-top-color:var(--green)}.stats div:nth-child(4){border-top-color:var(--red)}
.stats b{display:block;font:700 1.9rem/1.2 system-ui;color:var(--ink)}.stats b.owing{color:var(--red)}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;background:#e3e8f0}
.avatar.lg{width:96px;height:96px;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}.ph svg{width:100%;height:100%;display:block;fill:#a7b3c6}
.who,.photo-field{display:flex;gap:1rem;align-items:center}

/* mobile */
@media(max-width:900px){
  .side{position:fixed;z-index:20;left:0;top:0;transform:translateX(-100%);transition:transform .2s}
  .nav-open .side{transform:none}.nav-open .scrim{display:block;position:fixed;inset:0;z-index:15;background:rgba(10,20,35,.5)}
  .burger{display:block}.topbar{padding:0 .8rem}.content{padding:1rem}
}
@media(max-width:600px){.facts{grid-template-columns:1fr;gap:.1rem}.facts dd{margin-bottom:.6rem}.user span{display:none}.profile{align-items:flex-start}.who{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.side{transition:none}}

.stats div.ok{border-top-color:var(--green)}.stats div.bal{border-top-color:var(--red)}
.side .sidefoot a{margin-bottom:2px}
.msg.warn{border-color:#c9a24a;background:#fbf3df}