*{box-sizing:border-box}html,body{height:100%}body{font-family:Inter,system-ui,Arial,sans-serif;background:#f6f7fb;color:#0f172a;margin:0}
.shell{min-height:100%;display:flex;flex-direction:column}
.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#fff;border-bottom:1px solid #e6e8f0;position:sticky;top:0;z-index:10}
.brand{display:flex;gap:.75rem;align-items:center}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#0a66ff,#7aa8ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.titles h1{font-size:1.05rem;margin:0}
.titles p{margin:0;color:#64748b;font-size:.85rem}
.nav .ghost{background:transparent;border:1px solid #d9dce7;color:#0f172a;border-radius:12px;padding:.55rem .9rem}
main{padding:1rem;max-width:1200px;margin:0 auto;width:100%}
.card{background:#fff;border:1px solid #e6e8f0;border-radius:18px;padding:1rem;box-shadow:0 10px 30px rgba(16,24,40,.04);margin-bottom:1rem}
.maxw{max-width:560px}
.row{display:flex;gap:.6rem;align-items:center}
.wrap{flex-wrap:wrap}
input,button{padding:.8rem 1rem;border-radius:14px;border:1px solid #d9dce7;background:#fff}
input{flex:1}
button{cursor:pointer;background:#0a66ff;color:#fff;border-color:#0a66ff;font-weight:600}
button:hover{filter:brightness(1.05)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.span2{grid-column:span 2}
.hidden{display:none}
.chip{padding:.5rem .8rem;border-radius:20px;background:#eef2ff;border:1px solid #dbe2ff;color:#1e293b}
.tbl{width:100%;border-collapse:separate;border-spacing:0;margin-top:.5rem}
.tbl tr{border:1px solid #edf0f6;border-radius:12px;margin:.3rem 0;display:grid;grid-template-columns:1fr 110px 110px;align-items:center;padding:.4rem .6rem;background:#fafbff}
.tbl .hdr{font-weight:700;background:#f3f6ff}
.tbl .right{text-align:right}
.tbl button{background:#ef4444;border-color:#ef4444;padding:.45rem .75rem}
.stats{gap:1rem;flex-wrap:wrap}
.stats .pill{background:#f3f6ff;border:1px solid #e1e7ff;padding:.5rem .75rem;border-radius:12px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}
.settlement{margin-top:.5rem}
@media(max-width:900px){.grid{grid-template-columns:1fr}.span2{grid-column:span 1}.charts{grid-template-columns:1fr}}
select{padding:.8rem 1rem;border-radius:14px;border:1px solid #d9dce7;background:#fff}
a.ghost{display:inline-block;text-decoration:none;border:1px solid #d9dce7;color:#0f172a;border-radius:12px;padding:.55rem .9rem}

.mine { font-weight:700 }
.theirs { opacity:0.9 }
.tbl tr { grid-template-columns:1fr 110px 160px }
@media(max-width:900px){
  .charts{grid-template-columns:1fr}
  canvas{max-height:320px}
  .tbl tr{grid-template-columns:1fr 90px 140px}
}