/* QuickSplit by SWC styles */
:root{
  --bg:#0b0f1a;
  --panel:#0f1524;
  --soft:#1b2340;
  --text:#e7ecff;
  --muted:#9eb0ff;
  --accent-a:#7c4dff;
  --accent-b:#00e5ff;
  --accent-c:#ff67e7;
  --ring: 0 0 0 2px rgba(124,77,255,.25), 0 0 24px rgba(124,77,255,.35), inset 0 0 12px rgba(0,229,255,.15);
  --glow: 0 0 24px rgba(0,229,255,.35), 0 0 48px rgba(124,77,255,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.15), transparent 60%),
              radial-gradient(1000px 500px at 110% 20%, rgba(0,229,255,.12), transparent 60%),
              linear-gradient(180deg, #0b0f1a 0%, #0a0d18 100%);
  color:var(--text);
}

.container{width:min(1100px, 92%); margin:0 auto}
.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  align-items:start;
}
@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
}

.app-title{font-weight:800; letter-spacing:.5px; font-size:clamp(28px, 6vw, 46px); margin:32px 0 0}
.muted{font-weight:400; color:var(--muted)}
.tagline{margin:6px 0 24px; color:#cfe1ff; opacity:.85}

.card{
  background: linear-gradient(180deg, rgba(27,35,64,.4), rgba(27,35,64,.22));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:16px;
  position:relative;
  box-shadow: var(--glow);
}
.card h2{margin:0 0 10px; font-size:20px}

.row{display:flex; gap:10px; align-items:center; margin:10px 0}
.row label{width:140px; color:#cfd8ff}
.row input[type="text"], .row input[type="number"], .item-form input[type="text"], .item-form input[type="number"]{
  background: #0c1224;
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
  box-shadow: var(--ring);
  flex:1;
}
.btn{
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  color:white; border:0; padding:10px 14px; border-radius:12px;
  cursor:pointer; font-weight:700;
  box-shadow: 0 0 16px rgba(124,77,255,.35);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.05)}
.btn:active{transform: translateY(0) scale(.98)}
.btn-ghost{
  background: transparent; border:1px solid rgba(255,255,255,.14); color:#d2daff;
  box-shadow:none;
}

.people-list{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  padding:8px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 8px rgba(0,229,255,.15);
  display:flex; gap:8px; align-items:center;
}
.pill .remove{opacity:.8; cursor:pointer; font-size:14px}

.item-form{display:grid; grid-template-columns: 2fr 1fr; gap:10px; align-items:center}
.assignees{grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.assignee{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:#0c1224; color:#d2daff; cursor:pointer; user-select:none;
  box-shadow: var(--ring);
}
.assignee.active{
  background: linear-gradient(90deg, var(--accent-b), var(--accent-c));
  color:#02121a;
}

.table-wrap{margin-top:12px; max-height:240px; overflow:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
table{width:100%; border-collapse:collapse}
thead th{position:sticky; top:0; background:#101633; text-align:left; font-weight:600; padding:10px}
tbody td{padding:10px; border-top:1px solid rgba(255,255,255,.06)}
tbody tr:hover{background:rgba(255,255,255,.03)}
td.actions{text-align:right}

.totals-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin-top:8px}
.total-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 0 14px rgba(124,77,255,.18);
}
.total-card h3{margin:0 0 8px; font-size:18px}
.total-row{display:flex; justify-content:space-between; margin:4px 0; color:#cfe1ff}
.total-amt{font-weight:800; font-size:20px}

.bg-orbs{position:fixed; inset:0; overflow:hidden; pointer-events:none}
.orb{position:absolute; filter: blur(60px); opacity:.6}
.orb-a{width:380px; height:380px; background: radial-gradient(circle at 30% 30%, var(--accent-a), transparent 60%); left:-80px; top:-120px}
.orb-b{width:420px; height:420px; background: radial-gradient(circle at 60% 40%, var(--accent-b), transparent 60%); right:-100px; top:40px}
.orb-c{width:360px; height:360px; background: radial-gradient(circle at 50% 50%, var(--accent-c), transparent 60%); left:20%; bottom:-160px}

.foot{opacity:.7; text-align:center; padding:24px 0 40px}
.glow{text-shadow: 0 0 12px rgba(0,229,255,.6), 0 0 28px rgba(124,77,255,.45)}