/* Runtime UI for the live site: user menu, drawer, modal, toast, status text */
.bx-um { position: relative; }
.bx-um > button { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-raised); color: var(--ink); font: 500 14px/22px var(--font-sans); cursor: pointer; }
.bx-um-av { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-lime, #c6f84a); color: #010232; display: grid; place-items: center; font: 700 12px/1 var(--font-display); }
.bx-um-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 210px; display: none; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-md, 12px); background: var(--surface-raised, #0b0d4a); box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 60; }
.bx-um[data-open="true"] .bx-um-pop { display: grid; gap: 2px; }
.bx-um-pop a, .bx-um-pop button { display: block; width: 100%; text-align: start; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/22px var(--font-sans); cursor: pointer; text-decoration: none; }
.bx-um-pop a:hover, .bx-um-pop button:hover { background: var(--surface); }
.bx-um-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }

.bx-drawer { display: none; }
@media (max-width: 900px) {
  .bs-header { position: relative; }
  .bx-drawer { position: absolute; inset-inline: 0; top: 100%; z-index: 55; padding: 12px 16px 20px; border-bottom: 1px solid var(--line-strong); background: var(--bg); }
  .nav-open .bx-drawer { display: grid; gap: 2px; }
  .bx-drawer a { padding: 12px; border-radius: 8px; color: var(--ink); font: 500 16px/24px var(--font-sans); text-decoration: none; }
  .bx-drawer a:hover, .bx-drawer a[aria-current="page"] { background: var(--surface); }
}

.bx-modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(1,2,50,.72); }
.bx-modal { width: min(480px, 100%); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 16px); background: var(--surface-raised, #0b0d4a); color: var(--ink); display: grid; gap: 16px; }
.bx-modal h3 { margin: 0; font: 600 20px/30px var(--font-display); }
.bx-modal p { margin: 0; color: var(--ink-muted); }
.bx-modal-actions { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
.bx-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-md, 12px); cursor: pointer; }
.bx-opt:has(input:checked) { border-color: var(--brand-lime, #c6f84a); background: var(--surface); }
.bx-opt b { font: 600 15px/24px var(--font-display); }
.bx-opt small { color: var(--ink-subtle); }

.bx-toasts { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 120; display: grid; gap: 8px; }
.bx-toast { padding: 12px 16px; border-radius: 10px; background: #0f7a3a; color: #fff; font: 500 14px/22px var(--font-sans); box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: min(420px, calc(100vw - 32px)); }
.bx-toast.err { background: #a32020; }

.bx-formmsg { min-height: 22px; font: 500 14px/22px var(--font-sans); color: var(--ink-muted); }
.bx-formmsg.err { color: var(--danger-text); }
.bx-formmsg.ok { color: var(--brand-lime, #c6f84a); }
.bx-empty-big { padding: 48px 16px; text-align: center; color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg, 16px); }
.bx-empty-big b { display: block; color: var(--ink); font: 600 18px/28px var(--font-display); margin-bottom: 4px; }
.bx-loading { padding: 32px; text-align: center; color: var(--ink-subtle); }
.bx-kbd { direction: ltr; unicode-bidi: embed; }
.bx-tablewrap { overflow-x: auto; }
.bx-tablewrap table { width: 100%; border-collapse: collapse; min-width: 620px; font: 400 14px/22px var(--font-sans); }
.bx-tablewrap th, .bx-tablewrap td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.bx-tablewrap th { color: var(--ink-subtle); font-weight: 600; }
.bx-linkbtn { background: none; border: 0; padding: 0; color: var(--accent-text, #c6f84a); font: 600 14px/22px var(--font-sans); cursor: pointer; }
.bx-rowform { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
@media print { .bs-header, .bs-footer, .bx-toasts { display: none; } }

@media print {
  body > *:not(.bx-modal-back) { display: none !important; }
  .bx-modal-back { position: static; background: none; padding: 0; }
  .bx-modal { border: 0; max-width: none; width: 100%; background: #fff; color: #000; }
  .bx-modal-actions, .bx-nocert { display: none !important; }
}
.bx-cert { text-align: center; padding: 32px 16px; border: 2px solid var(--brand-lime, #c6f84a); border-radius: 12px; display: grid; gap: 8px; }
.bx-cert h4 { margin: 0; font: 700 26px/36px var(--font-display); }
.bx-cert .nm { font: 700 30px/42px var(--font-display); color: var(--accent-text, #c6f84a); }
.bx-cert small { color: var(--ink-subtle); }
.bx-st-danger { }
.bx-form2 { display: grid; gap: 14px; }
.bx-form2 .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bx-btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bx-reqcard { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); background: var(--surface); }
.bx-reqcard dl { margin: 0; display: grid; gap: 6px; font: 400 14px/22px var(--font-sans); }
.bx-reqcard dt { color: var(--ink-subtle); font-size: 12px; }
.bx-reqcard dd { margin: 0; overflow-wrap: anywhere; }
.bx-appmsg { margin: 0 0 16px; }
#main:focus, .bx-main:focus { outline: none; }

/* support chat */
.bx-chat { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 90; font: 400 14px/22px var(--font-sans); }
.bx-chat-fab { border: 0; border-radius: 999px; padding: 12px 18px; background: #c6f84a; color: #010232; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.bx-chat-panel { position: absolute; bottom: 56px; inset-inline-start: 0; width: min(360px, calc(100vw - 32px)); height: min(480px, 70vh); display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-raised, #0b0d4a); color: var(--ink); overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.bx-chat-panel[hidden] { display: none; }
.bx-chat-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bx-chat-panel header button { background: none; border: 0; color: inherit; font-size: 22px; cursor: pointer; }
.bx-chat-log { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.bx-chat-m { padding: 8px 12px; border-radius: 12px; max-width: 85%; white-space: pre-wrap; }
.bx-chat-m.a { background: var(--surface, #13165a); justify-self: start; }
.bx-chat-m.u { background: #c6f84a; color: #010232; justify-self: end; }
.bx-chat-panel form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.bx-chat-panel form input { flex: 1; }
@media print { .bx-chat { display: none !important; } }