/* broker profile: public page + the owner's editor */
.bp-banner { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 16px; border-radius:14px; background:#FEF3C7; border:1px solid #F59E0B; color:#78350F; }
.bp-banner div { flex:1; display:flex; flex-direction:column; font-size:.9rem; }
.bp-unready { max-width:560px; margin:48px auto; padding:32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.bp-unready h1 { margin:0; font-size:1.3rem; }
.bp-head { display:flex; gap:24px; padding:24px; margin-bottom:24px; }
.bp-av { flex:none; display:grid; place-items:center; width:112px; height:112px; border-radius:50%; background:linear-gradient(135deg,#4F8DF7,#2563EB); color:#fff; font-size:2.6rem; font-weight:700; overflow:hidden; }
.bp-av img { width:100%; height:100%; object-fit:cover; }
.bp-main { min-width:0; flex:1; }
.bp-main h1 { margin:0 0 4px; font-size:1.6rem; }
.bp-sub { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 10px; font-size:.88rem; }
.bp-code { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:700; letter-spacing:.03em; }
.bp-rate { display:inline-flex; align-items:center; gap:5px; color:inherit; }
.bp-bio { margin:0 0 12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.bp-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.bp-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:.82rem; font-weight:600; }
.bp-chip.soft { background:transparent; border:1px solid var(--border); color:var(--fg); }
.bp-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 8px; }
.bp-note { margin:8px 0 0; }
.bp-listings h2 { margin:0 0 14px; font-size:1.2rem; }
.bp-more { display:flex; flex-direction:column; align-items:center; gap:8px; margin:20px 0; }
.bp-err { margin:0; color:#DC2626; font-size:.88rem; }
.bp-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 16px; text-align:center; }
.bp-skel { height:340px; border-radius:18px; background:linear-gradient(90deg,var(--card) 25%,var(--primary-soft) 50%,var(--card) 75%); background-size:200% 100%; animation:skel 1.2s linear infinite; }
@media (max-width:640px) { .bp-head { flex-direction:column; align-items:center; text-align:center; padding:20px 16px; } .bp-sub, .bp-chips, .bp-actions { justify-content:center; } .bp-av { width:96px; height:96px; font-size:2.2rem; } }

/* editor */
.bpe h1 { margin:0 0 4px; }
.bpe-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.bpe-status { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; background:rgba(100,116,139,.18); color:#475569; font-weight:700; font-size:.82rem; }
.bpe-status[data-on="1"] { background:rgba(34,197,94,.18); color:#15803D; }
.bpe-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:16px; align-items:start; }
.bpe-form { display:flex; flex-direction:column; gap:18px; padding:22px; }
.bpe-field { display:flex; flex-direction:column; gap:6px; }
.bpe-field label, .bpe-field > label { font-weight:600; font-size:.92rem; }
.bpe-field input[type="text"], .bpe-field input:not([type]), .bpe-field textarea { width:100%; box-sizing:border-box; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--fg); font:inherit; }
.bpe-field input:focus, .bpe-field textarea:focus { outline:2px solid var(--primary); outline-offset:1px; }
.bpe-area { position:relative; }
.bpe-area textarea { padding-bottom:26px; resize:vertical; }
.bpe-count { position:absolute; right:12px; bottom:8px; font-size:.72rem; color:var(--muted); }
.bpe-tags { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.bpe-tags:focus-within { outline:2px solid var(--primary); outline-offset:1px; }
.bpe-tags #area-chips { display:contents; }
.bpe-tags input { flex:1 1 140px; min-width:120px; border:0 !important; outline:0 !important; padding:6px 4px !important; background:transparent !important; }
.bpe-chip-x { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 12px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:.84rem; font-weight:600; }
.bpe-chip-x button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:var(--primary); color:#fff; cursor:pointer; }
.bpe-toggles { display:flex; flex-wrap:wrap; gap:8px; }
.bpe-toggle { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--fg); font:inherit; font-size:.86rem; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.bpe-toggle[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
.bpe-sw { display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-weight:400 !important; }
.bpe-sw input { position:absolute; opacity:0; }
.bpe-sw-ui { flex:none; position:relative; width:42px; height:24px; border-radius:99px; background:#AEBBD2; transition:background .2s; margin-top:2px; }
.bpe-sw-ui::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; }
.bpe-sw input:checked + .bpe-sw-ui { background:var(--primary); }
.bpe-sw input:checked + .bpe-sw-ui::after { transform:translateX(18px); }
.bpe-sw input:focus-visible + .bpe-sw-ui { outline:2px solid var(--primary); outline-offset:2px; }
.bpe-sw span:last-child { display:flex; flex-direction:column; gap:2px; }
.bpe-sw small { font-size:.8rem; }
.bpe-msg { margin:0; padding:10px 14px; border-radius:12px; font-size:.9rem; }
.bpe-msg.ok { background:rgba(34,197,94,.14); color:#15803D; }
.bpe-msg.err { background:rgba(239,68,68,.12); color:#B91C1C; }
.bpe-actions { display:flex; flex-wrap:wrap; gap:10px; }
.bpe-actions .btn { flex:1 1 auto; }
.bpe-actions .btn[disabled] { opacity:.6; cursor:progress; }
.danger-outline { color:#DC2626; border-color:#DC2626; }
.bpe-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }
.bpe-side h2 { margin:0 0 10px; font-size:1rem; }
.bpe-check ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.bpe-check li { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); }
.bpe-check li svg { flex:none; }
.bpe-check li.ok { color:var(--fg); }
.bpe-check li.ok svg { color:#16A34A; }
.bpe-check li.no svg { color:#F59E0B; }
.bpe-prev-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.bpe-prev-head h2 { margin:0; }
.bpe-prev-head .link { display:inline-flex; align-items:center; gap:4px; font-size:.82rem; }
#bpe-prev .bp-head { padding:16px; margin:0; gap:14px; box-shadow:none; border:1px dashed var(--border); border-radius:14px; }
#bpe-prev .bp-av { width:64px; height:64px; font-size:1.5rem; }
#bpe-prev .bp-main h1 { font-size:1.1rem; }
#bpe-prev .bp-bio { font-size:.88rem; }
.bpe-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:6000; display:flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; background:#16A34A; color:#fff; font-weight:600; box-shadow:0 12px 30px -8px rgba(0,0,0,.4); animation:aod-in .2s ease-out; }
@media (max-width:980px) { .bpe-grid { grid-template-columns:1fr; } .bpe-side { position:static; } }

/* the editor inside /settings: .st-form label rules (display:block) must not flatten the switches */
#broker .bpe-sw { display:flex; flex-direction:row; position:relative; }
#broker .bpe-sw-ui { display:block; }
#broker .bpe-field { gap:8px; margin-bottom:20px; }
#broker .bpe-field > label:not(.bpe-sw) { display:block; }
#broker .bpe-actions { display:flex; gap:8px; margin-top:4px; }