.bs-header { margin-bottom: 28px; text-align: center; }
.bs-title { font-size: 32px; font-weight: 800; background: linear-gradient(135deg, #10b981 0%, #059669 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 10px; }
.bs-desc { font-size: 15px; color: #6b7280; margin: 0; }

.bs-participants { padding: 28px; }
.bs-participants h3 { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 700; margin: 0 0 20px; color: #111827; }

.bs-people { display: flex; flex-wrap: wrap; gap: 10px; }
.bs-person { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 24px; border: 1px solid #a7f3d0; transition: all 0.2s ease; }
.bs-person:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }
.bs-person input { border: none; background: transparent; font-size: 14px; width: 80px; outline: none; padding: 0; font-weight: 500; color: #065f46; }
.bs-person .bs-remove { cursor: pointer; color: #6b7280; font-size: 16px; line-height: 1; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
.bs-person .bs-remove:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.bs-add-btn { padding: 10px 18px; border: 2px dashed #10b981; color: #059669; background: white; border-radius: 24px; font-size: 14px; cursor: pointer; font-weight: 500; transition: all 0.2s ease; }
.bs-add-btn:hover { background: #ecfdf5; border-style: solid; transform: translateY(-1px); }

.bs-bills { padding: 28px; }
.bs-bills h3 { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 700; margin: 0 0 20px; color: #111827; }

.bs-bill-item { padding: 20px; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 16px; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); transition: all 0.2s ease; }
.bs-bill-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }
.bs-bill-header { display: grid; grid-template-columns: 1fr 120px 140px auto; gap: 12px; align-items: center; margin-bottom: 16px; }
.bs-bill-header input, .bs-bill-header select { padding: 12px 14px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; background: white; transition: all 0.2s ease; }
.bs-bill-header input:focus, .bs-bill-header select:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.bs-bill-header input:hover, .bs-bill-header select:hover { border-color: #a7f3d0; }
.bs-bill-amount { text-align: right; }
.bs-bill-delete { color: #9ca3af; cursor: pointer; font-size: 18px; padding: 4px; }
.bs-bill-delete:hover { color: #ef4444; }

.bs-split-mode { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bs-mode-label { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; font-size: 13px; background: white; transition: all 0.2s ease; }
.bs-mode-label input[type="radio"] { accent-color: #10b981; width: 16px; height: 16px; }
.bs-mode-label:has(input:checked) { border-color: #10b981; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #059669; font-weight: 500; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1); }

.bs-split-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bs-split-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: white; border-radius: 6px; border: 1px solid #e5e7eb; }
.bs-split-row label { font-size: 13px; flex: 1; }
.bs-split-row input[type="number"] { width: 60px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 4px; font-size: 13px; }
.bs-split-row input[type="checkbox"] { accent-color: #3b82f6; }

.bs-result { padding: 24px; }
.bs-result h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }

.bs-summary { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.bs-summary-card { flex: 1; min-width: 140px; padding: 20px 16px; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); border-radius: 14px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid #e5e7eb; transition: all 0.3s ease; }
.bs-summary-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.bs-summary-card .bs-label { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
.bs-summary-card .bs-value { font-size: 26px; font-weight: 800; background: linear-gradient(135deg, #111827 0%, #374151 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bs-summary-card .bs-value.positive { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); -webkit-background-clip: text; }
.bs-summary-card .bs-value.negative { background: linear-gradient(135deg, #10b981 0%, #059669 100%); -webkit-background-clip: text; }

.bs-detail-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.bs-detail-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bs-detail-table-wrap th { background: #f9fafb; padding: 12px 16px; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb; text-align: left; }
.bs-detail-table-wrap td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; }
.bs-detail-table-wrap tr:hover td { background: #f9fafb; }
.bs-detail-table-wrap .bs-total-row { font-weight: 600; background: #eff6ff; }

.bs-actions { display: flex; gap: 12px; }
.bs-export-btn, .bs-copy-btn { flex: 1; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bs-export-btn { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
.bs-export-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45); }
.bs-copy-btn { background: white; border: 2px solid #e5e7eb; }
.bs-copy-btn:hover { border-color: #10b981; color: #059669; background: #ecfdf5; transform: translateY(-2px); }
.bs-copy-btn.copied { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #10b981; color: #059669; }

.bs-guide { padding: 20px; }
.bs-guide h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.bs-guide-content { font-size: 14px; line-height: 1.8; color: #374151; }
.bs-guide-content ul { padding-left: 20px; }
.bs-guide-content li { margin: 6px 0; }

@media (max-width: 640px) {
    .bs-title { font-size: 22px; }
    .bs-bill-header { grid-template-columns: 1fr 100px; }
    .bs-bill-header select, .bs-bill-delete { grid-column: span 1; }
    .bs-split-detail { grid-template-columns: 1fr 1fr; }
}

@media (prefers-color-scheme: dark) {
    .bs-person { background: #1f2937; border-color: #374151; }
    .bs-bill-item { background: #1f2937; border-color: #374151; }
    .bs-bill-header input, .bs-bill-header select { background: #1f2937; border-color: #374151; color: #f9fafb; }
    .bs-mode-label { background: #1f2937; border-color: #374151; }
    .bs-mode-label:has(input:checked) { background: #1e3a5f; }
    .bs-split-row { background: #1f2937; border-color: #374151; }
    .bs-summary-card { background: #1f2937; }
    .bs-detail-table-wrap th { background: #1f2937; }
}