:root{
  --bnui-overlay-bg: rgba(15,23,42,.28);
  --bnui-panel-bg: rgba(255,255,255,.88);
  --bnui-panel-border: rgba(255,255,255,.72);
  --bnui-text: #0f172a;
  --bnui-subtle: #64748b;
  --bnui-shadow: 0 24px 80px rgba(15,23,42,.20), 0 10px 30px rgba(15,23,42,.10);
  --bnui-radius: 28px;
}
body.bnui-modal-open{overflow:hidden;}
.bnui-root{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:24px;pointer-events:none;}
.bnui-root.is-open{display:flex;pointer-events:auto;}
.bnui-overlay{position:absolute;inset:0;background:var(--bnui-overlay-bg);backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);opacity:0;transition:opacity .22s ease;}
.bnui-root.is-open .bnui-overlay{opacity:1;}
.bnui-dialog{position:relative;width:min(100%, 520px);background:var(--bnui-panel-bg);border:1px solid var(--bnui-panel-border);border-radius:var(--bnui-radius);box-shadow:var(--bnui-shadow);padding:22px 22px 18px;transform:translateY(12px) scale(.985);opacity:0;transition:transform .22s ease, opacity .22s ease;background-clip:padding-box;}
.bnui-root.is-open .bnui-dialog{transform:translateY(0) scale(1);opacity:1;}
.bnui-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;}
.bnui-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;background:rgba(15,23,42,.055);color:#0f172a;flex:0 0 auto;}
.bnui-mark svg{width:20px;height:20px;display:block;}
.bnui-close{appearance:none;border:0;background:rgba(15,23,42,.045);color:#334155;width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease, transform .18s ease;flex:0 0 auto;}
.bnui-close:hover{background:rgba(15,23,42,.09);transform:translateY(-1px);}
.bnui-close:active{transform:translateY(0);}
.bnui-title{margin:0 0 8px;font-size:30px;line-height:1.08;letter-spacing:-.03em;color:var(--bnui-text);font-weight:800;}
.bnui-body{margin:0 0 18px;font-size:16px;line-height:1.7;color:var(--bnui-subtle);}
.bnui-actions{display:flex;justify-content:flex-end;gap:10px;}
.bnui-btn{appearance:none;border:1px solid transparent;min-height:44px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;}
.bnui-btn:hover{transform:translateY(-1px);}
.bnui-btn:active{transform:translateY(0);}
.bnui-btn-secondary{background:rgba(248,250,252,.96);border-color:rgba(148,163,184,.34);color:#0f172a;}
.bnui-btn-secondary:hover{background:rgba(15,23,42,.07);}
.bnui-btn-danger{background:#0f172a;border-color:#0f172a;color:#fff;box-shadow:0 12px 20px rgba(15,23,42,.18);}
.bnui-btn-danger:hover{background:#1e293b;border-color:#1e293b;}
.bnui-toast-wrap{position:fixed;right:20px;bottom:20px;z-index:1000000;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.bnui-toast{min-width:240px;max-width:min(420px, calc(100vw - 32px));padding:14px 16px;border-radius:18px;background:rgba(15,23,42,.88);color:#fff;box-shadow:0 16px 40px rgba(15,23,42,.24);font-size:14px;line-height:1.45;opacity:0;transform:translateY(10px);transition:opacity .2s ease, transform .2s ease;}
.bnui-toast.is-show{opacity:1;transform:translateY(0);}
.bnui-toast.is-error{background:rgba(127,29,29,.92);}
@media (max-width: 640px){.bnui-root{padding:16px;}.bnui-dialog{width:min(100%, 100%);padding:18px 18px 16px;border-radius:24px;}.bnui-title{font-size:24px;}.bnui-actions{flex-direction:column-reverse;}.bnui-btn{width:100%;}.bnui-toast-wrap{left:12px;right:12px;bottom:12px;}}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,.16), 0 0 0 1px rgba(37,99,235,.42);
}
.bnui-toast{border:1px solid rgba(255,255,255,.08);font-weight:600;}
.bnui-toast.is-error{border-color:rgba(254,202,202,.28);}

/* R9: vector close mark, centered independently of the font baseline. */
.bnui-root .bnui-close{width:32px;height:32px;min-height:32px;padding:0;line-height:0;transform:none}.bnui-root .bnui-close svg{display:block;width:16px;height:16px;flex:none}.bnui-root .bnui-close:hover{transform:none}.bnui-root .bnui-close:focus-visible{outline:2px solid #477cad;outline-offset:3px}
@media(pointer:coarse){.bnui-root .bnui-close{width:44px;height:44px}}

.bnui-root .bnui-close svg{pointer-events:none}

/* Informational confirmations share one header and icon across BACKNEO. */
body #bnui-root.bnui-information .bnui-dialog{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:18px}
body #bnui-root.bnui-information .bnui-head{display:contents}
body #bnui-root.bnui-information .bnui-close{grid-column:2;grid-row:1;align-self:center}
body #bnui-root.bnui-information .bnui-title{grid-column:1;grid-row:1;display:flex;align-items:center;gap:10px;margin:0;font-size:21px;font-weight:500;line-height:1.35}
body #bnui-root.bnui-information .bnui-mark{width:20px;height:20px;flex:0 0 20px;background:transparent;box-shadow:none;color:#617b91;border:0}
body #bnui-root.bnui-information .bnui-mark svg{width:20px;height:20px}
body #bnui-root.bnui-information .bnui-body,body #bnui-root.bnui-information .bnui-actions{grid-column:1 / -1;margin:0}
body #bnui-root.bnui-information .bnui-btn-danger{background:#20394f;color:#fff;border-color:#20394f;box-shadow:none}

/* The glyph conveys meaning; colour only reinforces it. */
:root body svg.bn-ui-symbol{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html:root body #bnui-root .bnui-title{display:flex;align-items:center;gap:9px}
html:root body #bnui-root .bnui-mark{width:18px;height:18px;flex:0 0 18px;border:0;border-radius:0;background:transparent;color:#607a91}
html:root body #bnui-root .bnui-mark svg{width:18px;height:18px;stroke-width:1.5}
html:root body #bnui-root[data-tone=warning] .bnui-mark{color:#607a91}
html:root body #bnui-root[data-tone=danger] .bnui-mark{color:#b24740}
html:root body #bnui-root[data-tone=error] .bnui-mark{color:#b24740}
html:root body #bnui-root[data-tone=success] .bnui-mark{color:#34735a}
html:root body #bnui-root:not([data-tone=danger]) [data-bnui-confirm]{background:#35566e;border-color:#35566e;color:#fff}
html:root body #bnui-root[data-tone=danger] [data-bnui-confirm]{background:#aa3f3a;border-color:#aa3f3a;color:#fff}
html:root body #bnui-root [data-bnui-confirm]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
:root body .bn-ui-note>.bn-ui-symbol,:root body .bn-guide-note>.bn-ui-symbol{width:14px;height:14px;flex:0 0 14px;margin-top:2px}
:root body .bn-ai-usage-summary button.bn-ai-usage-help.bn-ai-rules-trigger{display:flex;align-items:flex-start;gap:7px;width:100%;min-height:44px;margin:10px 0 0;padding:4px 0;border:0;border-radius:3px;background:none;box-shadow:none;text-align:start;white-space:normal;font:400 11px/1.65 var(--bn-type-face,system-ui,sans-serif);color:#627b8d;cursor:pointer}
:root body .bn-ai-rules-trigger>.bn-ai-rules-copy{flex:1;min-width:0;display:block;font:inherit;color:inherit}
:root body .bn-ai-rules-trigger .bn-ai-rules-label{display:block;margin-top:4px;font-size:11px;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b3c1cb}
:root body .bn-ai-rules-trigger>.bn-ui-symbol{width:14px;height:14px;flex:0 0 14px;margin-top:2px}
:root body .bn-ai-rules-trigger::after{content:'';width:5px;height:5px;flex:0 0 5px;border:solid currentColor;border-width:0 1.4px 1.4px 0;transform:rotate(-45deg);margin:6px 3px 0 4px}
:root body .bn-ai-rules-trigger:hover{color:#234e6b;background:none}
:root body .bn-ai-rules-trigger:focus-visible{outline:2px solid #557b98;outline-offset:4px}
:root body .bn-usage-guide .bn-ai-guide-current{padding:14px 16px;background:#f5f8fa;border-left:2px solid #91a8b8;margin:0 0 24px}
:root body .bn-ai-guide-current dl{margin:0}
:root body .bn-ai-guide-current dl>div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:12px}
:root body .bn-ai-guide-current dd{margin:0;text-align:end}
:root body .bn-usage-guide .bn-ai-guide-states>p{margin:8px 0 0}
:root body.bn-portal .bn-key-notice:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M12 7.5v6m0 3v1'/%3E%3C/g%3E%3C/svg%3E")}


/* Caution requires attention; danger discards data. Shape and words carry meaning. */
html:root body #bnui-root[data-tone=caution] .bnui-mark{color:#91611b}
html:root body #bnui-root[data-tone=caution] [data-bnui-confirm]{background:#8b5c18;border-color:#8b5c18;color:#fff}
html:root body #bnui-root .bnui-dialog{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
@media(max-width:640px){html:root body #bnui-root .bnui-actions{flex-direction:column;flex-wrap:nowrap;gap:8px}html:root body #bnui-root .bnui-actions .bnui-btn{flex:0 0 auto;min-height:44px;width:100%}}
@media(pointer:coarse){html:root body #bnui-root .bnui-close{width:44px;height:44px}html:root body #bnui-root .bnui-btn{min-height:44px}}