/* Settings modal styles */
#btp-settings-modal.backdrop[aria-hidden="true"] { display: none; }
#btp-settings-modal.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10000; display: flex; align-items: flex-end; justify-content: center; }
#btp-settings-modal .sheet { background: #fff; color: #111; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; box-shadow: 0 12px 32px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; }
#btp-settings-modal .sheet-wide { max-width: 1100px; }

.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.08); }
.settings-header h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

.settings-tabs { display: flex; gap: 8px; padding: 8px 8px 0 8px; border-bottom: 1px solid rgba(0,0,0,.08); }
.settings-tabs .tab-btn { appearance: none; border: none; background: transparent; padding: 10px 14px; border-radius: 10px 10px 0 0; font-weight: 600; color: #555; cursor: pointer; }
.settings-tabs .tab-btn.active { background: #f2f2f2; color: #111; }
.settings-tabs .tab-btn:focus-visible { outline: 2px solid #2b7cff; outline-offset: 2px; }

.settings-content { padding: 12px; overflow: auto; }
.tab-panel[hidden] { display: none; }
.placeholder { color: #777; font-style: italic; padding: 24px; text-align: center; }

.settings-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
@media (max-width: 1024px) { .settings-form { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 640px) { .settings-form { grid-template-columns: repeat(2, 1fr); } }

.card { grid-column: span 12; background: #fafafa; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px; }
.card.half { grid-column: span 6; }
.card.third { grid-column: span 4; }
@media (max-width: 1024px) { .card.half { grid-column: span 6; } .card.third { grid-column: span 6; } }
@media (max-width: 640px) { .card, .card.half, .card.third { grid-column: span 2; } }

.card h4 { margin: 4px 0 10px; font-size: 1rem; display: flex; align-items: center; gap: 6px; }

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.form-grid .col-12 { grid-column: span 12; }
.form-grid .col-6 { grid-column: span 6; }
.form-grid .col-4 { grid-column: span 4; }
.form-grid .col-3 { grid-column: span 3; }
@media (max-width: 640px) { .form-grid .col-6, .form-grid .col-4, .form-grid .col-3 { grid-column: span 12; } }

.field { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid rgba(0,0,0,.06); padding: 8px; border-radius: 8px; }
.field label { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field input[type="number"], .field select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.field small { color: #666; }

.info-btn { appearance: none; border: none; background: transparent; color: #666; cursor: pointer; padding: 2px; }
.hint { margin-top: 4px; color: #555; font-size: 0.8rem; display: none; }
.hint[data-open="true"] { display: block; }

.table-like { width: 100%; border-collapse: collapse; }
.table-like thead th { text-align: left; font-size: 0.8rem; color: #555; padding: 4px 6px; }
.table-like tbody td { padding: 4px 6px; }
.table-like input[type="number"] { width: 100%; box-sizing: border-box; }

.settings-footer { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid rgba(0,0,0,.08); background: #fff; }
.settings-footer .grow { flex: 1; }

/* Reuse app buttons */
#btp-settings-modal .btn { display: inline-flex; align-items: center; gap: 8px; }