:root{
  --bg:#f4f7fb; --card:#ffffff; --muted:#6b7280; --accent1:#6c5ce7; --accent2:#00b894; --glass:rgba(255,255,255,0.6);
}
[data-theme="dark"]{
  --bg:#0b1020; --card:#0f1724; --muted:#94a3b8; --accent1:#8b5cf6; --accent2:#38bdf8; --glass:rgba(255,255,255,0.03);
}

.sbf-wrap {
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0 auto;
  background:linear-gradient(180deg,var(--bg),#e9eef7);
  padding:32px;
  color:var(--muted);
  max-width:980px;
}
.sbf-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.sbf-brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.sbf-logo{
  width:56px;
  height:56px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:700;
  box-shadow:0 6px 18px rgba(12,15,30,0.08);
  font-size:20px;
  line-height:1;
  white-space:nowrap;
}
.sbf-wrap h2{font-size:18px;margin:0;color:var(--card);}
.sbf-wrap p{margin:0;font-size:13px;color:var(--muted)}
.sbf-controls{
  display:flex;
  gap:12px;
  align-items:center;
}
.btn, .clear-btn, .ghost, .chip, .example-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.btn{ 
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white; padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:600;
}
.ghost{ background:transparent; color:var(--muted); padding:8px 10px; border-radius:8px; border:1px solid rgba(99,102,241,0.08); cursor:pointer; }
.clear-btn{ background:transparent; color:var(--muted); padding:10px 12px; border-radius:8px; border:1px solid rgba(99,102,241,0.08); cursor:pointer; font-size:13px; }
.chip{ padding:8px 14px; border-radius:999px; border:none; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; cursor:pointer; font-size:13px; font-weight:600; transition:box-shadow .15s, opacity .15s; }
.chip.active{ box-shadow:0 0 0 2px rgba(108,92,231,0.25); }
.chip:not(.active):hover{ opacity:0.9; }
.example-button{ padding:8px 12px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; border-radius:8px; cursor:pointer; border:none; font-size:13px; font-weight:500; }
.card{ background:var(--card); border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(12,15,30,0.06); }
.muted{color:var(--muted);font-size:13px}
label{ display:block; font-weight:600; margin-bottom:8px; color:var(--muted); font-size:13px }
input[type="text"], input[type="number"], select{ width:100%; padding:12px; border-radius:10px; border:1px solid rgba(15,23,42,0.06); background:linear-gradient(180deg,var(--glass),transparent); font-size:14px; color:var(--muted); }
.members-list{margin-top:12px}
.member-row{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.member-row input[type="text"]{flex:1}
.member-row input[type="number"]{width:120px}
.member-actions{display:flex;gap:8px}
.muted-sm{font-size:13px;color:var(--muted)}
.result-box{ background:linear-gradient(180deg,var(--glass),transparent); padding:16px; border-radius:12px; margin-top:14px; border:1px solid rgba(15,23,42,0.04); }
.result-total{ font-size:20px; font-weight:700; color:var(--muted); }
.result-list{margin-top:10px}
.result-item{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,0.04); }
.options{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.footer-note{font-size:13px;color:var(--muted);margin-top:12px}
.theme-toggle{ background:transparent; border:1px solid rgba(15,23,42,0.05); padding:8px; border-radius:10px; cursor:pointer; }
.flex{display:flex;gap:8px;align-items:center}
.danger{ background:#fee2e2; border:1px solid #fecaca; color:#b91c1c; padding:6px 8px; border-radius:999px; cursor:pointer; font-size:12px; }
.small-link{font-size:13px;color:var(--muted);cursor:pointer}

/* layout helpers */
.sbf-row{display:flex;gap:12px;margin-top:12px}
.sbf-col{flex:1}
.sbf-col-fixed{width:140px}
.sbf-flex-between{display:flex;align-items:center;justify-content:space-between}
.sbf-actions-row .btn{min-width:120px}

/* responsive fixes */
@media (max-width:900px){ .sbf-grid{grid-template-columns:1fr} }
@media (max-width:480px){
  .sbf-logo{width:48px;height:48px;font-size:18px}
  .btn, .ghost, .clear-btn, .chip, .example-button{padding:8px 10px;font-size:12px;gap:4px;}
  .member-row{flex-direction:column;align-items:stretch}
  .member-row input[type="number"]{width:100%}
}