/* In-page product app (dark), used by the beauty variants. Prefix: bfa-. Shapes: 12px cards, 8px controls, round chips. */
.bfa {
  /* light theme (default): the app reads as a bright product screen inside the dark page */
  --a-bg: #f5f6f8; --a-side: #eceef2; --a-card: #ffffff; --a-card-2: #f5f6f8; --a-hover: rgb(17 20 26 / .045);
  --a-line: rgb(17 20 26 / .08); --a-line-2: rgb(17 20 26 / .14); --a-line-hover: rgb(17 20 26 / .26);
  --a-ink: #15171b; --a-ink-2: #4a4f57; --a-ink-3: #838892;
  --a-acc: #ee6a2f; --a-acc-hover: #f5824d; --a-acc-ink: #b4451a; --a-on-acc: #1a0c05; --a-acc-rgb: 242 118 63;
  --a-ok: #1c8752; --a-warn: #946200; --a-bad: #c13c2b; --a-bad-ink: #b0382a; --a-info: #2e6c95; --a-info-2: #8fb3cf;
  --a-soft: rgb(17 20 26 / .06); --a-faint: rgb(17 20 26 / .03); --a-track: rgb(17 20 26 / .16); --a-knob: #ffffff;
  --a-pop: #ffffff; --a-th: #f3f4f7; --a-docbg: #e6e8ec; --a-btn-hover: #eceef2; --a-scrim: rgb(18 20 26 / .32); --a-shadow: rgb(18 20 26 / .2);
  --a-seg-mix: #000; --a-seg-amt: 48%;
  position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; min-height: 0; background: var(--a-bg); color: var(--a-ink);
  font-family: var(--font, system-ui); font-size: 13px; line-height: 1.4; overflow: hidden; text-align: left; isolation: isolate;
}

/* dark theme option: <div class="bfa bfa-dark"> */
.bfa.bfa-dark {
  --a-bg: #0e1014; --a-side: #0a0b0e; --a-card: #13161b; --a-card-2: #191c22; --a-hover: rgb(255 255 255 / .035);
  --a-line: rgb(255 255 255 / .07); --a-line-2: rgb(255 255 255 / .12); --a-line-hover: rgb(255 255 255 / .2);
  --a-ink: #e9eaec; --a-ink-2: #a3a8b0; --a-ink-3: #6b717a;
  --a-acc: var(--d, #f2763f); --a-acc-hover: #f68a58; --a-acc-ink: #f7b493; --a-on-acc: #160a04; --a-acc-rgb: 242 118 63;
  --a-ok: #7fd1a3; --a-warn: #f0c062; --a-bad: #f07a6a; --a-bad-ink: #f6a497; --a-info: var(--s, #cfe0ee); --a-info-2: #9cb7cc;
  --a-soft: rgb(255 255 255 / .07); --a-faint: rgb(255 255 255 / .03); --a-track: rgb(255 255 255 / .14); --a-knob: #d9dbdf;
  --a-pop: #1b1f26; --a-th: #15181d; --a-docbg: #0b0c0f; --a-btn-hover: #20242b; --a-scrim: rgb(5 6 8 / .55); --a-shadow: rgb(0 0 0 / .8);
  --a-seg-mix: #fff; --a-seg-amt: 0%;
}

.bfa *, .bfa *::before, .bfa *::after { box-sizing: border-box; }
/* low-specificity resets so every component class wins */
:where(.bfa) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
:where(.bfa) input, :where(.bfa) select, :where(.bfa) textarea { font: inherit; color: inherit; }
.bfa .ph-light { font-size: 1.15em; line-height: 1; flex: none; }
.bfa h3, .bfa h4, .bfa h5 { margin: 0; font-weight: 500; letter-spacing: -.01em; }
.bfa b { font-weight: 500; }

/* sidebar */
.bfa-side { display: flex; flex-direction: column; background: var(--a-side); border-right: 1px solid var(--a-line); min-height: 0; padding: 14px 10px 10px; }
.bfa-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; font-size: 14px; }
.bfa-brand img { height: 22px; }
.bfa-brand b { color: var(--a-acc); font-weight: 500; }
.bfa-nav { flex: 1; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 4px; }
.bfa-grp-h { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 8px; color: var(--a-ink); font-weight: 500; transition: background-color 200ms; }
.bfa-grp-h:hover { background: var(--a-hover); }
.bfa-grp-h .car { margin-left: auto; color: var(--a-ink-3); transition: transform 250ms cubic-bezier(.16,1,.3,1); }
.bfa-grp.shut .car { transform: rotate(180deg); }
.bfa-grp-i { display: flex; flex-direction: column; margin: 2px 0 6px 17px; padding-left: 10px; border-left: 1px solid var(--a-line); overflow: hidden; }
.bfa-grp.shut .bfa-grp-i { display: none; }
.bfa-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 7px; color: var(--a-ink-2); transition: background-color 200ms, color 200ms; }
.bfa-item:hover { background: var(--a-hover); color: var(--a-ink); }
.bfa-item.on { background: var(--a-soft); color: var(--a-ink); font-weight: 500; }
.bfa-item em { font-style: normal; font-size: 11px; min-width: 20px; text-align: center; padding: 0 6px; border-radius: 99px; background: rgb(var(--a-acc-rgb) / .16); color: var(--a-acc); }
.bfa-fb { display: flex; align-items: center; gap: 9px; padding: 8px; color: var(--a-ink-3); border-radius: 8px; }
.bfa-fb:hover { color: var(--a-ink); background: var(--a-hover); }
.bfa-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px 4px; border-top: 1px solid var(--a-line); margin-top: 6px; }
.bfa-user .av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--a-card-2); font-size: 12px; font-weight: 500; border: 1px solid var(--a-line-2); flex: none; }
.bfa-user span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.bfa-user small { color: var(--a-ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfa-user > .ph-light { margin-left: auto; color: var(--a-ink-3); }

/* main + header */
.bfa-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bfa-top { position: relative; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px 0 12px; border-bottom: 1px solid var(--a-line); flex: none; }
.bfa-top h3 { font-size: 15px; }
.bfa-crumbs { display: flex; align-items: center; gap: 6px; color: var(--a-ink-3); white-space: nowrap; overflow: hidden; }
.bfa-crumbs b { color: var(--a-ink); }
.bfa-top-r { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bfa-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--a-ink-2); flex: none; transition: background-color 200ms, color 200ms; }
.bfa-ic:hover { background: var(--a-hover); color: var(--a-ink); }
.bfa-ic.bell { position: relative; } .bfa-ic.bell i { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--a-acc); }
.bfa-sel { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--a-line-2); border-radius: 8px; color: var(--a-ink); white-space: nowrap; transition: border-color 200ms, background-color 200ms; }
.bfa-sel:hover { background: var(--a-hover); border-color: var(--a-line-hover); }
.bfa-sel small { color: var(--a-ink-3); }
.bfa-sel.sm { height: 28px; padding: 0 8px; }
.bfa-sel.act { border-color: rgb(var(--a-acc-rgb) / .45); }
.bfa-sel .n { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--a-acc); color: var(--a-on-acc); font-size: 11px; font-weight: 600; }
.bfa-top .bfa-menu[data-menu="region"] { right: 210px; top: 48px; }
.bfa-top .bfa-menu[data-menu="lang"] { right: 160px; top: 48px; }
.bfa-menu { position: absolute; z-index: 20; min-width: 200px; max-height: 300px; overflow: auto; padding: 5px; border-radius: 10px; background: var(--a-pop); border: 1px solid var(--a-line-2); box-shadow: 0 20px 40px -16px var(--a-shadow); animation: bfa-pop 180ms cubic-bezier(.16,1,.3,1); }
.bfa-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 6px; white-space: nowrap; color: var(--a-ink-2); }
.bfa-menu button:hover, .bfa-menu button.on { background: var(--a-hover); color: var(--a-ink); }
.bfa-menu .cb { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--a-line-2); font-size: 11px; color: var(--a-acc); }
.bfa-menu button.on .cb { border-color: var(--a-acc); }
@keyframes bfa-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.bfa-content { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 14px; scrollbar-width: thin; scrollbar-color: var(--a-track) transparent; }
.bfa-content.anim > * { animation: bfa-in 420ms cubic-bezier(.16,1,.3,1) both; }
.bfa-content.anim > *:nth-child(2) { animation-delay: 40ms; } .bfa-content.anim > *:nth-child(3) { animation-delay: 80ms; } .bfa-content.anim > *:nth-child(4) { animation-delay: 120ms; }
@keyframes bfa-in { from { opacity: 0; transform: translateY(8px); } }

/* tabs bar */
.bfa-tabsbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 14px; border-bottom: 1px solid var(--a-line); flex-wrap: wrap; }
.bfa-tabs { display: flex; gap: 4px; }
.bfa-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 10px 11px; color: var(--a-ink-3); font-size: 14px; transition: color 200ms; }
.bfa-tabs button:hover { color: var(--a-ink-2); }
.bfa-tabs button.on { color: var(--a-ink); }
.bfa-tabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--a-acc); }
.bfa-tabs em, .bfa-ptabs em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--a-soft); color: var(--a-ink-2); }
.bfa-tabs button.on em { background: rgb(var(--a-acc-rgb) / .16); color: var(--a-acc); }
.bfa-tabs-r { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.bfa-ap { display: inline-flex; align-items: center; gap: 7px; color: var(--a-ink-2); padding: 4px 6px; border-radius: 8px; }
.bfa-ap .ph-light { color: var(--a-acc); }
.bfa-switch { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--a-track); transition: background-color 250ms; flex: none; }
.bfa-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--a-knob); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform 300ms cubic-bezier(.16,1,.3,1); }
.bfa-switch.on { background: var(--a-acc); } .bfa-switch.on i { transform: translateX(14px); background: #fff; }
.bfa-banner { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 12px; border-radius: 10px; background: rgb(var(--a-acc-rgb) / .09); border: 1px solid rgb(var(--a-acc-rgb) / .25); color: var(--a-acc-ink); animation: bfa-in 400ms both; }

/* buttons */
.bfa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--a-line-2) !important; background: var(--a-card-2) !important; color: var(--a-ink) !important; white-space: nowrap; transition: background-color 200ms, border-color 200ms, transform 150ms; }
.bfa-btn:hover { background: var(--a-btn-hover) !important; border-color: var(--a-line-hover) !important; }
.bfa-btn:active { transform: scale(.98); }
.bfa-btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.bfa-btn.primary { background: var(--a-acc) !important; border-color: var(--a-acc) !important; color: var(--a-on-acc) !important; font-weight: 500; }
.bfa-btn.primary:hover { background: var(--a-acc-hover) !important; }
.bfa-btn.accent { border-color: rgb(var(--a-acc-rgb) / .45) !important; color: var(--a-acc-ink) !important; background: rgb(var(--a-acc-rgb) / .08) !important; }
.bfa-btn.ghost { background: transparent !important; }
.bfa-btn.danger { background: rgb(240 122 106 / .12) !important; border-color: rgb(240 122 106 / .4) !important; color: var(--a-bad-ink) !important; }
.lnk { color: var(--a-ink); text-align: left; }
.lnk:hover { color: var(--a-acc); }

/* tiles */
.bfa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bfa-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--a-card); border: 1px solid var(--a-line); }
.bfa-tile b { font-family: var(--mono, ui-monospace); font-size: 21px; font-weight: 400; letter-spacing: -.04em; }
.bfa-tile span { color: var(--a-ink-2); font-size: 12.5px; }
.bfa-tile em { font-style: normal; font-size: 10.5px; color: var(--a-ink-3); }

/* filters */
.bfa-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bfa-dd { position: relative; }
.bfa-dd .bfa-menu { top: 38px; left: 0; }
.bfa-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; min-width: 260px; flex: 1; max-width: 360px; border-radius: 8px; border: 1px solid var(--a-line-2); background: var(--a-faint); color: var(--a-ink-3); }
.bfa-search.solo { max-width: 420px; margin-bottom: 12px; }
.bfa-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--a-ink); }
.bfa-search input::placeholder { color: var(--a-ink-3); }
.bfa-search:focus-within { border-color: rgb(var(--a-acc-rgb) / .5); }

/* table */
.bfa-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 12px; }
.bfa-tablewrap { overflow: auto; }
.bfa-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bfa-tablewrap.wide .bfa-table { min-width: 1720px; }
.bfa-table th { position: sticky; top: 0; z-index: 1; background: var(--a-th); text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .05em; color: var(--a-ink-3); padding: 9px 12px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.bfa-table .grp-row th { padding: 7px 12px 0; border-bottom: 0; position: static; }
.bfa-table th.grp { border-left: 1px solid var(--a-line); }
.bfa-table th.sortable { cursor: pointer; user-select: none; } .bfa-table th.sortable:hover { color: var(--a-ink-2); }
.bfa-table th .srt { font-size: 11px; margin-left: 4px; opacity: .6; vertical-align: -1px; }
.bfa-table th.asc .srt, .bfa-table th.desc .srt { color: var(--a-acc); opacity: 1; }
.bfa-table td { padding: 10px 12px; border-bottom: 1px solid var(--a-line); vertical-align: middle; color: var(--a-ink-2); }
.bfa-table tbody tr { transition: background-color 150ms; }
.anim .bfa-table tbody tr { animation: bfa-row 380ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(min(var(--i, 0), 14) * 22ms); }
.bfa-table tbody tr:hover { background: var(--a-hover); }
.bfa-table tbody tr:last-child td { border-bottom: 0; }
@keyframes bfa-row { from { opacity: 0; transform: translateY(4px); } }
.bfa-table .cname { color: var(--a-ink); font-weight: 500; display: block; white-space: nowrap; }
.bfa-table .code { display: flex; gap: 10px; color: var(--a-ink-3); font-size: 11px; margin-top: 2px; letter-spacing: .02em; }
.bfa-table .code a { color: var(--a-acc-ink); cursor: pointer; letter-spacing: 0; }
.bfa-table .code a:hover { text-decoration: underline; }
.bfa-table .subj { max-width: 300px; }
.bfa-table .subj .lnk { display: block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--a-ink); margin-bottom: 4px; }
.bfa-table .num { font-family: var(--mono, ui-monospace); text-align: right; white-space: nowrap; color: var(--a-ink); }
.bfa-table .num.mg { color: var(--a-acc); }
.bfa-table .mono { font-family: var(--mono, ui-monospace); white-space: nowrap; color: var(--a-ink); }
.bfa-table .mono.sm { font-size: 11.5px; color: var(--a-ink-2); }
.bfa-table .nowrap { white-space: nowrap; }
.bfa-table .cbx { width: 34px; }
.bfa-table .cb { display: block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--a-line-2); }
.bfa-table tr.unread .msgcell b { color: var(--a-ink); }
.bfa-table tr.unread .msgcell::before { content: ""; }
.bfa-table .msgcell { display: flex; gap: 10px; align-items: flex-start; max-width: 520px; }
.bfa-table .msgcell > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bfa-table .msgcell b { color: var(--a-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfa-table .msgcell small { color: var(--a-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfa-table .memo b { color: var(--a-ink); display: block; max-width: 420px; }
.bfa-table .memo small { color: var(--a-ink-3); }
.bfa-table tr.ap-busy td { background: linear-gradient(90deg, transparent, rgb(var(--a-acc-rgb) / .06), transparent); background-size: 200% 100%; animation: bfa-shim 1.2s linear infinite; }
@keyframes bfa-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bfa-pager { display: flex; align-items: center; gap: 8px; padding: 12px 2px 2px; color: var(--a-ink-3); font-size: 12.5px; }
.bfa-pager .sp { flex: 1; } .bfa-pager .cnt { margin-right: 10px; }
.bfa-pg { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 7px; color: var(--a-ink-3); }
.bfa-pg.on { border: 1px solid var(--a-line-2); color: var(--a-ink); }

/* chips, logos */
.bfa-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; white-space: nowrap; background: var(--a-soft); color: var(--a-ink-2); margin-right: 4px; }
.bfa-chip.c-new { background: var(--a-soft); color: var(--a-ink); }
.bfa-chip.c-review, .bfa-chip.c-warn { background: rgb(240 192 98 / .12); color: var(--a-warn); }
.bfa-chip.c-ready, .bfa-chip.c-ok { background: rgb(127 209 163 / .12); color: var(--a-ok); }
.bfa-chip.c-sent { background: rgb(207 224 238 / .12); color: var(--a-info); }
.bfa-chip.c-rej { background: rgb(240 122 106 / .12); color: var(--a-bad); }
.bfa-chip.c-cat { background: var(--a-faint); color: var(--a-ink-2); }
.bfa-chip.c-ai { background: rgb(var(--a-acc-rgb) / .12); color: var(--a-acc-ink); }
.bfa-chip.c-lock { background: rgb(var(--a-acc-rgb) / .12); color: var(--a-acc-ink); }
.bfa-chip.c-src { background: transparent; border: 1px solid var(--a-line-2); color: var(--a-ink-2); }
.bfa-chtag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .06em; color: var(--a-ink-3); padding: 2px 7px 2px 4px; border-radius: 5px; background: var(--a-faint); }
.bfa-logo { display: inline-block; width: 15px; height: 15px; background: var(--c); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; flex: none; }
.bfa-glyph { display: inline-grid; place-items: center; width: 15px; height: 15px; color: var(--c); font-size: 16px; flex: none; }
.bfa-logo.lg, .bfa-glyph.lg { width: 26px; height: 26px; font-size: 27px; }
.bfa-chtag .bfa-logo, .bfa-chtag .bfa-glyph { width: 12px; height: 12px; font-size: 13px; }
.bfa-seg { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c), var(--a-seg-mix) var(--a-seg-amt)); font-size: 11.5px; white-space: nowrap; }
.bfa-seg i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.bfa-conf { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono, ui-monospace); font-size: 11.5px; padding: 2px 8px; border-radius: 99px; }
.bfa-conf i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bfa-conf.hi { color: var(--a-ok); background: rgb(127 209 163 / .1); } .bfa-conf.mid { color: var(--a-warn); background: rgb(240 192 98 / .1); } .bfa-conf.lo { color: var(--a-bad); background: rgb(240 122 106 / .1); }
.bfa-bar { display: inline-block; vertical-align: middle; width: 70px; height: 5px; border-radius: 3px; background: var(--a-soft); overflow: hidden; margin-right: 7px; }
.bfa-bar.wide { width: 140px; }
.bfa-bar i { display: block; height: 100%; background: var(--a-ink-3); border-radius: 3px; }
.bfa-bar i.full { background: var(--a-ok); } .bfa-bar i.part { background: var(--a-acc); } .bfa-bar i.low { background: var(--a-warn); }
.bfa-table .pct { font-family: var(--mono, ui-monospace); font-size: 11px; color: var(--a-ink-3); }
.bfa-checks { display: inline-flex; gap: 6px; font-size: 11.5px; } .bfa-checks .p { color: var(--a-ok); } .bfa-checks .w { color: var(--a-warn); }

/* empty */
.bfa-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 20px 14px; color: var(--a-ink-3); text-align: center; }
.bfa-empty .ph-light { font-size: 30px; color: var(--a-ink-2); }
.bfa-empty b { color: var(--a-ink); font-size: 14px; }
.bfa-empty-act { display: flex; justify-content: center; padding-bottom: 28px; }

/* calls hero */
.bfa-hero-card { display: grid; grid-template-columns: 180px 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; margin-bottom: 14px; border-radius: 12px; border: 1px solid rgb(var(--a-acc-rgb) / .25); background: linear-gradient(110deg, rgb(var(--a-acc-rgb) / .12), var(--a-card) 55%); }
.bfa-hero-card h4 { font-size: 15px; margin-bottom: 3px; } .bfa-hero-card p { margin: 0; color: var(--a-ink-2); max-width: 58ch; }
.bfa-wave { display: flex; align-items: center; gap: 2px; height: 40px; }
.bfa-wave i { flex: 1; height: 30%; border-radius: 2px; background: var(--a-acc); opacity: .75; animation: bfa-wave 1.1s cubic-bezier(.65,0,.35,1) infinite alternate; }
.bfa-wave i:nth-child(3n) { animation-delay: -.3s; } .bfa-wave i:nth-child(4n+1) { animation-delay: -.6s; } .bfa-wave i:nth-child(5n+2) { animation-delay: -.9s; }
@keyframes bfa-wave { to { height: 100%; } }

/* actions, kpis, integrations, forms */
.bfa-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bfa-agrp { padding: 12px 14px; }
.bfa-agrp h5 { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.bfa-agrp h5 em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--a-soft); color: var(--a-ink-2); }
.bfa-arow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--a-line); }
.anim .bfa-arow { animation: bfa-row 380ms both; animation-delay: calc(var(--i) * 30ms); }
.bfa-arow > .ph-light { font-size: 18px; } .ai-draft { color: var(--a-acc); } .ai-warn { color: var(--a-warn); } .ai-conf { color: var(--a-info); } .ai-gap { color: var(--a-bad); }
.bfa-arow span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bfa-arow b { color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bfa-arow small { color: var(--a-ink-3); }
.bfa-kgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.bfa-chart { padding: 14px 16px; } .bfa-chart h5 { font-size: 13px; margin-bottom: 14px; }
.bfa-chart .bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.bfa-chart .col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; font-size: 11px; color: var(--a-ink-3); }
.bfa-chart .stack { position: relative; width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: repeating-linear-gradient(135deg, rgb(var(--a-acc-rgb) / .55) 0 2px, rgb(var(--a-acc-rgb) / .12) 2px 6px); display: flex; align-items: flex-end; overflow: hidden; min-height: 2px; animation: bfa-grow 900ms cubic-bezier(.16,1,.3,1) both; transform-origin: bottom; }
.bfa-chart .stack i { width: 100%; background: linear-gradient(var(--a-info), var(--a-info-2)); }
.bfa-chart .col small { font-family: var(--mono, ui-monospace); font-size: 10px; }
@keyframes bfa-grow { from { transform: scaleY(0); } }
.bfa-chart .leg { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--a-ink-2); }
.bfa-chart .leg span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bfa-chart .leg .g::before { background: var(--a-info); } .bfa-chart .leg .n::before { background: rgb(var(--a-acc-rgb) / .55); }
.bfa-chart .hbars { display: flex; flex-direction: column; gap: 12px; }
.bfa-chart .hrow { display: grid; grid-template-columns: 18px 90px 1fr 30px; align-items: center; gap: 8px; color: var(--a-ink-2); }
.bfa-chart .hrow b { height: 8px; border-radius: 4px; width: var(--w); background: linear-gradient(90deg, var(--a-acc), var(--a-acc-ink)); animation: bfa-growx 900ms cubic-bezier(.16,1,.3,1) both; transform-origin: left; }
.bfa-chart .hrow em { font-style: normal; font-family: var(--mono, ui-monospace); text-align: right; color: var(--a-ink); }
@keyframes bfa-growx { from { transform: scaleX(0); } }
.bfa-intg { padding: 14px 16px; margin-bottom: 12px; } .bfa-intg h5 { font-size: 13px; margin-bottom: 10px; }
.bfa-igrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bfa-irow { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; background: var(--a-card-2); border: 1px solid var(--a-line); }
.anim .bfa-irow { animation: bfa-row 380ms both; animation-delay: calc(var(--i, 0) * 30ms); }
.bfa-irow span { display: flex; flex-direction: column; flex: 1; min-width: 0; } .bfa-irow small { color: var(--a-ink-3); font-size: 11.5px; }
.bfa-form { padding: 16px 18px; max-width: 760px; } .bfa-form h5 { font-size: 13px; margin: 6px 0 12px; }
.bfa-form .bfa-irow { margin-bottom: 8px; }
.bfa-form-f { display: flex; justify-content: flex-end; margin-top: 10px; }
.bfa-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 8px; }
.bfa-fgrid.one { grid-template-columns: 1fr; }
.bfa-fgrid label { display: flex; flex-direction: column; gap: 5px; color: var(--a-ink-3); font-size: 11.5px; }
.bfa-fgrid input, .bfa-fgrid select, .bfa-fgrid textarea { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--a-line-2); background: var(--a-faint); color: var(--a-ink); font-size: 13px; outline: none; }
.bfa-fgrid textarea { height: auto; padding: 8px 10px; resize: vertical; }
.bfa-fgrid input:focus, .bfa-fgrid select:focus, .bfa-fgrid textarea:focus { border-color: rgb(var(--a-acc-rgb) / .55); }
.bfa-fgrid select option { background: var(--a-pop); }

/* detail (split view) */
.bfa-detail { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: -16px -18px -14px; }
.bfa-dh { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--a-line); flex-wrap: wrap; }
.bfa-content > .bfa-dh { margin: -16px -18px 14px; }
.bfa-dh h3 { font-family: var(--mono, ui-monospace); font-size: 17px; font-weight: 500; letter-spacing: -.03em; margin-right: 4px; }
.bfa-dh .srcs { display: flex; align-items: center; gap: 4px; margin-left: auto; } .bfa-dh .srcs small { color: var(--a-ink-3); font-size: 10.5px; letter-spacing: .06em; margin-right: 4px; }
.bfa-dh .srcs .bfa-chip { height: 24px; }
.bfa-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.bfa-docwrap { overflow: auto; padding: 18px; background: var(--a-docbg); border-right: 1px solid var(--a-line); }
.bfa-doc { position: relative; overflow: hidden; background: #f6f6f4; color: #1d1f23; border-radius: 6px; padding: 26px 26px 20px; font-size: 11.5px; box-shadow: 0 24px 50px -24px var(--a-shadow); }
.bfa-doc small { display: block; font-size: 9px; letter-spacing: .1em; color: #7a7d83; margin-bottom: 3px; }
.bfa-doc .doc-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #cb3f1d; }
.bfa-doc h4 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 2px 0 4px; }
.bfa-doc .r { text-align: right; } .bfa-doc .r b { font-family: var(--mono, ui-monospace); font-size: 14px; display: block; }
.bfa-doc span { color: #555960; }
.bfa-doc .doc-addr { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; padding: 14px 0; }
.bfa-doc .doc-addr b { display: block; font-size: 12.5px; }
.bfa-doc table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.bfa-doc th { text-align: left; font-size: 9px; letter-spacing: .08em; color: #fff; background: #2b2e33; padding: 6px 7px; font-weight: 500; }
.bfa-doc td { padding: 7px; border-bottom: 1px solid #e2e2df; vertical-align: top; }
.bfa-doc td small { margin: 2px 0 0; letter-spacing: 0; font-size: 10px; }
.bfa-doc td:nth-child(n+3), .bfa-doc th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.bfa-doc .doc-total { display: flex; justify-content: flex-end; gap: 18px; padding: 12px 7px; font-size: 12.5px; } .bfa-doc .doc-total b { font-family: var(--mono, ui-monospace); }
.bfa-doc .doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; } .bfa-doc .doc-sign span { padding-top: 6px; border-top: 1px solid #c9c9c5; font-size: 10px; font-style: italic; }
.bfa-doc .wm { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-24deg); font-style: normal; font-size: 92px; font-weight: 600; letter-spacing: .08em; color: rgb(203 63 29 / .07); pointer-events: none; white-space: nowrap; }
.doc-cap { margin: 10px 2px 0; font-size: 11.5px; color: var(--a-ink-3); text-align: center; }
.bfa-pane { display: flex; flex-direction: column; min-height: 0; }
.bfa-ptabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--a-line); flex: none; overflow-x: auto; scrollbar-width: none; }
.bfa-ptabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 11px 10px; color: var(--a-ink-3); white-space: nowrap; }
.bfa-ptabs button.on { color: var(--a-ink); } .bfa-ptabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--a-acc); }
.bfa-pbody { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bfa-pfoot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--a-line); flex: none; }
.bfa-pfoot .done { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; color: var(--a-ok); } .bfa-pfoot .done.rej { color: var(--a-bad); }
.bfa-val { border-radius: 10px; border: 1px solid rgb(127 209 163 / .25); background: rgb(127 209 163 / .04); padding: 10px 12px; }
.bfa-val.has-warn { border-color: rgb(240 192 98 / .3); background: rgb(240 192 98 / .04); }
.bfa-val .vh { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bfa-val .vc { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--a-ink-2); }
.bfa-val .vc i { width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; } .bfa-val .vc .p { background: var(--a-ok); } .bfa-val .vc .w { background: var(--a-warn); } .bfa-val .vc .f { background: var(--a-bad); }
.bfa-val .vrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--a-ink-2); }
.bfa-val .vrow span { flex: 1; } .bfa-val .vrow b { font-family: var(--mono, ui-monospace); font-size: 10.5px; }
.bfa-val .vrow.pass .ph-light, .bfa-val .vrow.pass b { color: var(--a-ok); } .bfa-val .vrow.warn .ph-light, .bfa-val .vrow.warn b { color: var(--a-warn); }
.bfa-sec { border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-card); }
.bfa-sec summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; cursor: pointer; list-style: none; font-weight: 500; }
.bfa-sec summary::-webkit-details-marker { display: none; }
.bfa-sec[open] summary .ph-light { transform: rotate(180deg); }
.bfa-sec .bfa-fgrid { padding: 2px 12px 10px; }
.bfa-lrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--a-line); }
.bfa-lrow span { color: var(--a-ink-3); font-size: 12px; } .bfa-lrow em { font-style: normal; font-family: var(--mono, ui-monospace); }
.bfa-dcard { padding: 11px 12px; border-radius: 10px; background: var(--a-card); border: 1px solid var(--a-line); }
.bfa-dcard .dt { display: flex; align-items: center; gap: 8px; } .bfa-dcard .dt em { margin-left: auto; font-style: normal; font-family: var(--mono, ui-monospace); color: var(--a-info); font-size: 14px; }
.bfa-dcard .dm { display: flex; gap: 14px; margin-top: 6px; color: var(--a-ink-3); font-size: 12px; flex-wrap: wrap; }
.bfa-dcard blockquote { margin: 9px 0 6px; padding: 8px 10px; border-left: 2px solid var(--a-acc); background: var(--a-faint); border-radius: 0 6px 6px 0; color: var(--a-ink-2); font-size: 12.5px; }
.bfa-dcard .lnk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--a-acc-ink); }
.bfa-dtot { display: flex; justify-content: space-between; padding: 4px 4px; color: var(--a-ink-2); } .bfa-dtot b { font-family: var(--mono, ui-monospace); color: var(--a-ink); }
.bfa-log { list-style: none; margin: 0; padding: 0; position: relative; }
.bfa-log::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 1px; background: var(--a-line-2); }
.bfa-log li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; animation: bfa-row 400ms both; }
.bfa-log li:nth-child(2) { animation-delay: 60ms; } .bfa-log li:nth-child(3) { animation-delay: 120ms; } .bfa-log li:nth-child(4) { animation-delay: 180ms; } .bfa-log li:nth-child(5) { animation-delay: 240ms; }
.bfa-log .ic { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--a-card-2); border: 1px solid var(--a-line-2); color: var(--a-acc); flex: none; z-index: 1; }
.bfa-log span:nth-child(2) { display: flex; flex-direction: column; flex: 1; } .bfa-log small { color: var(--a-ink-3); }
.bfa-log time { color: var(--a-ink-3); font-size: 11.5px; white-space: nowrap; font-family: var(--mono, ui-monospace); }
.bfa-ai { display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px; background: rgb(var(--a-acc-rgb) / .07); border: 1px solid rgb(var(--a-acc-rgb) / .25); color: var(--a-ink-2); }
.bfa-ai > .ph-light { color: var(--a-acc); font-size: 17px; }
.bfa-ai > span { display: flex; flex-direction: column; gap: 3px; } .bfa-ai b { display: flex; align-items: center; gap: 8px; color: var(--a-ink); }
.bfa-mail { border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-card); }
.bfa-mail .mh { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--a-line); } .bfa-mail .mh span { color: var(--a-ink-3); }
.bfa-mail .mb { padding: 12px; color: var(--a-ink-2); line-height: 1.6; outline: none; min-height: 160px; }
.bfa-mail .mb:focus { background: var(--a-faint); }
.bfa-mail .ma { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 6px 10px; border-radius: 7px; background: var(--a-faint); font-size: 12px; color: var(--a-ink-2); }

/* drawer */
.bfa-scrim { position: absolute; inset: 0; z-index: 30; background: var(--a-scrim); }
.bfa-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 31; width: min(560px, 62%); display: flex; flex-direction: column; background: var(--a-pop); border-left: 1px solid var(--a-line-2); box-shadow: -30px 0 60px -30px var(--a-shadow); }
.bfa-drawer.enter { animation: bfa-slide 380ms cubic-bezier(.16,1,.3,1); }
@keyframes bfa-slide { from { transform: translateX(40px); opacity: 0; } }
.bfa-drawer .dh { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; } .bfa-drawer .dh > div { flex: 1; min-width: 0; }
.bfa-drawer h4 { font-size: 15px; } .bfa-drawer .dh small { color: var(--a-ink-3); }
.bfa-drawer .db { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bfa-drawer .df { padding: 11px 16px; border-top: 1px solid var(--a-line); display: flex; justify-content: flex-end; }
.bfa-bubble { padding: 12px 14px; border-radius: 12px; background: var(--a-card); border: 1px solid var(--a-line); }
.bfa-bubble.whatsapp { background: rgb(37 211 102 / .06); border-color: rgb(37 211 102 / .2); }
.bfa-bubble .bh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bfa-bubble .bh small { color: var(--a-ink-3); margin-right: auto; }
.bfa-bubble p { margin: 0; color: var(--a-ink-2); line-height: 1.6; }
.bfa-facts { list-style: none; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--a-line); }
.bfa-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--a-line); } .bfa-facts li:first-child { border-top: 0; } .bfa-facts span { color: var(--a-ink-3); }
.bfa-att { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--a-card); border: 1px solid var(--a-line); } .bfa-att > .ph-light { font-size: 24px; color: #e2483d; }
.bfa-att span { display: flex; flex-direction: column; } .bfa-att small { color: var(--a-ink-3); }

/* modal */
.bfa-overlay { position: absolute; inset: 0; z-index: 40; background: var(--a-scrim); backdrop-filter: blur(3px); animation: bfa-fade 200ms both; }
@keyframes bfa-fade { from { opacity: 0; } }
.bfa-modal { position: absolute; z-index: 41; left: 50%; top: 50%; width: min(520px, 92%); max-height: 88%; overflow: auto; transform: translate(-50%, -50%); padding: 16px 18px; border-radius: 14px; background: var(--a-pop); border: 1px solid var(--a-line-2); box-shadow: 0 40px 80px -30px var(--a-shadow); animation: bfa-modal 320ms cubic-bezier(.16,1,.3,1); }
@keyframes bfa-modal { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } }
.bfa-modal .mh { position: relative; padding-right: 36px; margin-bottom: 14px; } .bfa-modal .mh h4 { font-size: 16px; } .bfa-modal .mh small { color: var(--a-ink-3); }
.bfa-modal .mh .bfa-ic { position: absolute; right: -6px; top: -6px; }
.bfa-modal .mf { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.bfa-modal .bfa-ptabs { padding: 0; margin: -6px 0 12px; }
.bfa-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bfa-choice > * { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--a-line-2); background: var(--a-card); cursor: pointer; transition: border-color 200ms, transform 200ms; }
.bfa-choice > *:hover { border-color: rgb(var(--a-acc-rgb) / .5); transform: translateY(-2px); }
.bfa-choice .ph-light { font-size: 24px; color: var(--a-acc); } .bfa-choice span { color: var(--a-ink-3); font-size: 12px; }
.bfa-reasons { display: flex; flex-direction: column; gap: 6px; }
.bfa-reasons button { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--a-line-2); background: var(--a-card); transition: border-color 200ms; }
.bfa-reasons button:hover { border-color: rgb(240 122 106 / .5); }
.bfa-sendlist { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.bfa-sendlist div { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--a-card); } .bfa-sendlist .ph-light { color: var(--a-ok); } .bfa-sendlist span { margin-left: auto; color: var(--a-ink-3); font-family: var(--mono, ui-monospace); font-size: 12px; }
.bfa-backtest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--a-line); margin-top: 4px; }
.bfa-backtest > span:first-child { display: grid; grid-template-columns: 20px 1fr; column-gap: 6px; } .bfa-backtest small { grid-column: 2; color: var(--a-ink-3); font-size: 11.5px; }
.bt-run { width: 120px; height: 5px; border-radius: 3px; background: var(--a-soft); overflow: hidden; } .bt-run i { display: block; height: 100%; background: var(--a-acc); transition: width 90ms linear; }
.bt-ok { color: var(--a-ok); font-size: 12px; white-space: nowrap; }

/* tour */
.bfa-tour { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.bfa-tour .spot { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px rgb(5 6 8 / .62), 0 0 0 1.5px rgb(var(--a-acc-rgb) / .8); transition: all 450ms cubic-bezier(.16,1,.3,1); }
.bfa-tour .pop { position: absolute; width: 300px; padding: 14px 16px 12px; border-radius: 12px; background: var(--a-pop); border: 1px solid var(--a-line-2); box-shadow: 0 30px 60px -20px var(--a-shadow); pointer-events: auto; transition: left 450ms cubic-bezier(.16,1,.3,1), top 450ms cubic-bezier(.16,1,.3,1); animation: bfa-pop 300ms both; }
.bfa-tour .pop b { font-size: 14px; } .bfa-tour .pop p { margin: 5px 0 12px; color: var(--a-ink-2); }
.bfa-tour .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
.bfa-tour .tf { display: flex; align-items: center; gap: 6px; } .bfa-tour .dots { display: flex; gap: 4px; margin-right: auto; }
.bfa-tour .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-track); } .bfa-tour .dots i.on { background: var(--a-acc); width: 16px; border-radius: 3px; }

/* toasts */
.bfa-toasts { position: absolute; right: 16px; top: 64px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.bfa-toast.shown { animation: none; }
.bfa-toast { display: flex; align-items: center; gap: 9px; max-width: 380px; padding: 10px 14px; border-radius: 10px; background: var(--a-pop); border: 1px solid var(--a-line-2); box-shadow: 0 20px 40px -16px var(--a-shadow); animation: bfa-toast 380ms cubic-bezier(.16,1,.3,1); }
.bfa-toast .ph-light { color: var(--a-ok); font-size: 17px; }
@keyframes bfa-toast { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* mini (laptop preview) */
.bfa-mini { pointer-events: none; user-select: none; }
.bfa-mini .bfa-content.anim > * , .bfa-mini .bfa-table tbody tr { animation: none; }

/* narrow */
@container (max-width: 900px) { .bfa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .bfa { grid-template-columns: 1fr; }
  .bfa-side { display: none; }
  .bfa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bfa-split { grid-template-columns: 1fr; overflow: auto; }
  .bfa-docwrap { border-right: 0; border-bottom: 1px solid var(--a-line); }
  .bfa-actions, .bfa-kgrid, .bfa-igrid, .bfa-choice { grid-template-columns: 1fr; }
  .bfa-hero-card { grid-template-columns: 1fr; }
  .bfa-top-r .bfa-sel:not([data-act="tour"]), .bfa-top-r .bfa-ic:not(.bell) { display: none; }
  .bfa-drawer { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bfa *, .bfa *::before, .bfa *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* 2026 value modules: price changes, allocation, subsidiaries */
.bfa-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bfa-price { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.anim .bfa-price, .anim .bfa-al { animation: bfa-row 420ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 50ms); }
.bfa-price.done { opacity: .75; }
.bfa-price .pt { display: flex; align-items: center; gap: 11px; }
.bfa-price .pp { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(var(--a-acc-rgb) / .12); color: var(--a-acc); font-size: 18px; flex: none; }
.bfa-price .pm { display: flex; flex-direction: column; flex: 1; min-width: 0; } .bfa-price .pm small { color: var(--a-ink-3); }
.bfa-price .pt em { font-style: normal; font-family: var(--mono, ui-monospace); font-size: 16px; color: var(--a-acc-ink); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.bfa-price .pt em i { font-style: normal; font-family: var(--font, system-ui); font-size: 10.5px; color: var(--a-ink-3); }
.bfa-price .pd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); }
.bfa-price .pd span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--a-ink-3); } .bfa-price .pd b { font-family: var(--mono, ui-monospace); font-weight: 400; font-size: 17px; color: var(--a-ink); }
.bfa-price .po { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } .bfa-price .po .lnk { color: var(--a-acc-ink); }
.bfa-price .pf, .bfa-al .pf { display: flex; justify-content: flex-end; margin-top: auto; }
.okline { display: inline-flex; align-items: center; gap: 6px; color: var(--a-ok); font-size: 12.5px; } .okline.muted { color: var(--a-ink-3); }
.bfa-allot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bfa-al { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bfa-al .at { display: flex; align-items: center; gap: 8px; } .bfa-al .at > b { font-family: var(--mono, ui-monospace); font-size: 17px; font-weight: 500; }
.bfa-al .sp { flex: 1; } .bfa-al .ar { font-size: 12px; color: var(--a-ink-3); font-family: var(--mono, ui-monospace); } .bfa-al .ar b { color: var(--a-ink); font-weight: 500; }
.bfa-bar.wide2 { width: 100%; height: 6px; margin: 0; }
.al-rows { display: flex; flex-direction: column; }
.al-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 70px 92px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--a-line); font-size: 12.5px; }
.al-row .nm { color: var(--a-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al-row .tg { display: flex; flex-wrap: wrap; gap: 3px; }
.al-row .bfa-bar { width: 70px; margin: 0; } .al-row .q { font-family: var(--mono, ui-monospace); font-size: 11.5px; text-align: right; color: var(--a-ink-2); white-space: nowrap; }
.yn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--a-soft); color: var(--a-ink-3); } .yn.y { background: rgb(28 135 82 / .12); color: var(--a-ok); }
.bfa-fn { margin: 10px 2px 0; font-size: 11.5px; color: var(--a-ink-3); }
@media (max-width: 860px) { .bfa-prices, .bfa-allot { grid-template-columns: 1fr; } }