:root{
  --bg1:#f0f7ff;
  --bg2:#e8f3ff;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#5dd3ff;
  --accent-ink:#0b3b59;
  --secondary:#ffd86b;
  --secondary-ink:#5a3f00;
  --danger:#ff6b6b;
  --danger-ink:#5a0b0b;
  --success:#b3ff8f;
  --green:#22c55e;
  --green-ink:#064e3b;
  --red:#ef4444;
  --red-ink:#5a0b0b;
  --ring: rgba(0,0,0,0.08);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
}

.bg{
  background:
    radial-gradient(90rem 60rem at -10% -10%, var(--bg2), transparent 60%),
    radial-gradient(90rem 60rem at 110% -10%, #fef6ff, transparent 60%),
    radial-gradient(90rem 60rem at 50% 120%, #f4fff6, transparent 60%),
    linear-gradient(180deg, var(--bg1), #ffffff);
}

.wrap{ max-width: 960px; margin: 40px auto; padding: 0 16px; }

.card{
  background: var(--card);
  border-radius: 24px;
  padding: 22px;
  border: 1px solid #eef2f7;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 14px 40px rgba(119,170,255,0.20);
}

.pop{ transition: transform .2s ease, box-shadow .2s ease; }
.pop:hover{ transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,0.06), 0 20px 50px rgba(119,170,255,0.25); }

.title{
  font-family: "Fredoka","Nunito",sans-serif;
  font-weight: 600;
  font-size: clamp(26px,3.2vw,36px);
  margin: 0 0 8px;
}

.subtitle{
  font-family: "Fredoka","Nunito",sans-serif;
  font-weight: 600;
  margin: 14px 0 8px;
}

.muted{ color: var(--muted) }
.tiny{ font-size: 12px }
.hidden{ display:none !important }

.grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 16px; }
@media (min-width:680px){ .grid{ grid-template-columns:1fr 1fr; } }

.field{ display:flex; flex-direction:column; gap:6px }
.label{ font-size:13px; color:var(--muted) }
.input{
  border: 2px solid #e8eef7; background:#f9fbff;
  border-radius: 14px; padding: 12px 14px; font-size: 16px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 6px rgba(93,211,255,0.18); }
.input.small{ max-width: 160px }

/* buttons */
.row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.btn{
  display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;
  padding:12px 16px; font-weight:700; border-radius:16px; font-size:16px;
  box-shadow: 0 6px 0 var(--ring);
  transition: transform .05s, box-shadow .15s, filter .15s, background .2s;
}
.btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--ring); }
.btn-emoji{ font-size:20px; transform: translateY(1px); }
.btn-accent{ background: var(--accent); color: var(--accent-ink); }
.btn-secondary{ background: var(--secondary); color: var(--secondary-ink); }
.btn-danger{ background: var(--danger); color: var(--danger-ink); }
.btn-success{ filter: drop-shadow(0 0 10px rgba(92,255,92,.6)); }
.btn-disabled{ filter: grayscale(1) brightness(.92); opacity:.6; pointer-events:none; }
.locked{ opacity:.55; pointer-events:none; }

.badge{ display:inline-block; background:#ecf7ff; color:#0b3b59; padding:4px 10px; border-radius:999px; border:1px solid #d7ecff; font-size:.9em; }

/* header */
.header{ display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center; }
.brand-title{ font-family:"Fredoka","Nunito",sans-serif; font-weight:700; letter-spacing:.4px; }
.brand-sub{ margin-top:4px; }
.header-balance{ text-align:center; }
.hb-label{ display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
.hb-amount{
  display:inline-block; font-family:"Fredoka","Nunito",sans-serif; font-weight:800;
  padding:6px 12px; border-radius:12px; background:#dcfce7; color:#065f46; border:1px solid #bbf7d0;
}

/* lists */
.list{ list-style:none; margin:8px 0 0; padding:0; }
.list-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; margin:10px 0;
  border-radius:16px; background:#f7fbff; border:1px solid #e7f1ff;
}
.avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#c9efff; color:#063c57; font-weight:800; font-family:"Fredoka","Nunito",sans-serif; }
.name{ font-weight:700; letter-spacing:.2px; }
.crown{ margin-left:6px; }
.chip{ margin-left:auto; background:#ffe9ae; color:#5a3f00; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #f6d981; }
.chip-money{ background:#dcfce7; color:#065f46; border-color:#bbf7d0; }

/* settings panel */
.panel{
  margin:12px 0 8px; padding:12px; border:1px solid #e7f1ff;
  background:#ffffffaa; backdrop-filter: blur(6px); border-radius:16px;
}
.panel-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.panel-field{ display:flex; flex-direction:column; gap:6px }

/* toggle */
.toggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.toggle input{ display:none }
.toggle-ui{
  width:48px; height:28px; border-radius:999px; background:#e8eef7; border:2px solid #d5e2f7;
  position:relative; transition: background .2s, border-color .2s;
}
.toggle-ui::after{
  content:""; position:absolute; top:50%; left:4px; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; background:white; box-shadow:0 2px 0 rgba(0,0,0,.06); transition:left .2s;
}
.toggle input:checked + .toggle-ui{ background:#b7f5cc; border-color:#96eab0; }
.toggle input:checked + .toggle-ui::after{ left:24px; }
.toggle-label{ font-weight:700 }

/* actions */
.actions{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px; }
@media (min-width:720px){ .actions{ grid-template-columns:1fr 1fr; } }
.action-card{
  border:1px solid #e7f1ff; background:#ffffffaa; backdrop-filter: blur(6px);
  border-radius:16px; padding:12px;
}
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

/* bigger, friendly pills */
.pill{
  border:2px solid transparent; padding:12px 16px; border-radius:999px; cursor:pointer;
  font-weight:800; font-size:16px; transition: transform .05s, box-shadow .15s, filter .15s;
}
.pill:active{ transform: translateY(1px); }
.pill-pay{ background:#fee2e2; color:var(--red-ink); border-color:#fecaca; box-shadow:0 4px 0 rgba(239,68,68,0.15); }
.pill-receive{ background:#dcfce7; color:var(--green-ink); border-color:#bbf7d0; box-shadow:0 4px 0 rgba(34,197,94,0.15); }

/* log */
.log-card{ margin-top:12px; max-height:280px; overflow:auto; }
.log{ list-style:none; margin:8px 0 0; padding:0; }
.log-item{
  background:#f9fbff; border:1px solid #e7f1ff; border-radius:12px;
  padding:8px 10px; font-size:14px; margin:6px 0;
}