/* Settings › Branding (js/views/branding-settings.js). App tokens only. */
.bs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; margin-top: 14px; }
@media (max-width: 760px) { .bs-grid { grid-template-columns: 1fr; } }
.bs-form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bs-field { display: flex; flex-direction: column; gap: 5px; width: 100%; font-size: 13px; }
.bs-field > span { font-weight: 600; color: var(--text-primary); }
.bs-field input { width: 100%; box-sizing: border-box; }
.bs-field small, .bs-muted { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.bs-note { font-size: 13px; color: var(--text-secondary); margin: 10px 0 0; }
.bs-logo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; min-height: 32px; }
.bs-logo-img { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; flex: none; }
.bs-rule { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ui-paper-2, var(--surface-2)); font-size: 12.5px;
           color: var(--text-primary); line-height: 1.45; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.bs-side .sp-k { margin: 0 0 8px; }
.bs-preview { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.bs-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.bs-head b { display: block; font-size: 14px; }
.bs-head .sp-fav { width: 26px; height: 26px; }
.bs-gs { width: 30px; height: 24px; flex: none; color: var(--text-primary); }
.bs-note-start p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.bs-note-start .bs-sign { margin-top: 6px; color: var(--text-primary); }
.bs-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.bs-btn { border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-weight: 600; }
.bs-preview .bs-muted { margin: 0; overflow-wrap: anywhere; }
.bs-quota { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.bs-quota p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.bs-quota button { margin-top: 10px; }
.bs-bar { display: grid; grid-auto-flow: column; gap: 4px; }
.bs-bar i { height: 6px; border-radius: 3px; background: var(--border); }
.bs-bar i.on { background: var(--text-primary); }
/* Share modal hint under the agency preview. */
.share-preview { flex-wrap: wrap; }
.sp-hint { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }