/* DubMog Business — shared styles for business.html (buy panel, sign-in sheet, account menu), team.html and join.html.
   Oct 21 2026. Every class is prefixed bz- so nothing collides with a page's own rules; tokens repeat business.html's. */
:root{
  --ink:#0A0C10; --bg:#0E1116; --surface:#141A22; --surface-2:#1A212B;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#EAEDF3; --muted:#98A2B2; --faint:#808A99;
  --live:#FF5A4D; --live-soft:rgba(255,90,77,.14);
  --echo:#46D6C8; --echo-soft:rgba(70,214,200,.14);
  --biz:#8AB4FF; --biz-soft:rgba(138,180,255,.14);
  --ok:#4ADE80; --ok-soft:rgba(74,222,128,.14);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.14);
  --r:16px; --r-lg:22px;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.bz-hidden{display:none!important}
.bz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.bz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;font-weight:600;font-size:.95rem;font-family:var(--body);
  padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s,border-color .15s,opacity .15s;line-height:1.2;text-decoration:none;color:inherit;background:none}
.bz-btn:active{transform:translateY(1px)}
.bz-btn:focus-visible,.bz-input:focus-visible,.bz-icon:focus-visible{outline:2px solid var(--biz);outline-offset:2px}
.bz-btn[disabled]{opacity:.5;cursor:not-allowed}
.bz-primary{background:var(--text);color:#0A0C10}
.bz-primary:hover:not([disabled]){background:#fff}
.bz-blue{background:var(--biz);color:#0A0C10}
.bz-blue:hover:not([disabled]){background:#a6c6ff}
.bz-ghost{color:var(--text);border-color:var(--line-2)}
.bz-ghost:hover:not([disabled]){border-color:var(--text);background:rgba(255,255,255,.04)}
.bz-danger{color:#FF8A80;border-color:rgba(255,90,77,.35)}
.bz-danger:hover:not([disabled]){background:var(--live-soft);border-color:var(--live)}
.bz-link{background:none;border:0;padding:0;color:var(--biz);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bz-sm{padding:8px 13px;font-size:.86rem;border-radius:10px}
.bz-wide{width:100%}
.bz-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;font-size:1.15rem}
.bz-icon:hover:not([disabled]){border-color:var(--text)}
.bz-icon[disabled]{opacity:.4;cursor:not-allowed}
.bz-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:bzspin .7s linear infinite;display:inline-block}
@keyframes bzspin{to{transform:rotate(360deg)}}

/* ---------- inputs ---------- */
.bz-label{display:block;font-size:.84rem;color:var(--muted);margin:0 0 7px;font-weight:500}
.bz-input{width:100%;background:var(--ink);color:var(--text);border:1px solid var(--line-2);border-radius:11px;padding:12px 13px;font:inherit;font-size:.95rem}
.bz-input::placeholder{color:var(--faint)}
textarea.bz-input{min-height:84px;resize:vertical;line-height:1.5}
.bz-check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text);cursor:pointer}
.bz-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--biz)}
.bz-hint{font-size:.82rem;color:var(--faint);margin:7px 0 0}
.bz-err{color:#FF8A80;font-size:.88rem;margin:10px 0 0;min-height:0}
.bz-err:empty{display:none}
.bz-okmsg{color:var(--ok);font-size:.88rem;margin:10px 0 0}
.bz-okmsg:empty{display:none}

/* ---------- cards / chips ---------- */
.bz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.bz-card h2,.bz-card h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
.bz-card h2{font-size:1.35rem}
.bz-card h3{font-size:1.08rem}
.bz-sub{color:var(--muted);font-size:.93rem;margin:6px 0 0}
.bz-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.bz-chip.ok{color:var(--ok);border-color:rgba(74,222,128,.35);background:var(--ok-soft)}
.bz-chip.warn{color:var(--warn);border-color:rgba(251,191,36,.35);background:var(--warn-soft)}
.bz-chip.bad{color:#FF8A80;border-color:rgba(255,90,77,.35);background:var(--live-soft)}
.bz-chip.biz{color:var(--biz);border-color:rgba(138,180,255,.35);background:var(--biz-soft)}
.bz-banner{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;border-radius:16px;padding:16px 18px;border:1px solid var(--line-2);background:var(--surface-2)}
.bz-banner.warn{border-color:rgba(251,191,36,.4);background:linear-gradient(180deg,rgba(251,191,36,.08),rgba(251,191,36,.03))}
.bz-banner.bad{border-color:rgba(255,90,77,.45);background:linear-gradient(180deg,rgba(255,90,77,.10),rgba(255,90,77,.03))}
.bz-banner.ok{border-color:rgba(74,222,128,.4);background:linear-gradient(180deg,rgba(74,222,128,.09),rgba(74,222,128,.03))}
.bz-banner p{margin:0;color:var(--text);font-size:.95rem}
.bz-banner p small{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}

/* ---------- account slot + menu (nav) ---------- */
.bz-acct{position:relative}
.bz-acct-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:rgba(255,255,255,.02);border-radius:999px;padding:4px 12px 4px 4px;
  color:var(--text);cursor:pointer;font:inherit;font-size:.88rem;max-width:220px}
.bz-acct-btn:hover{border-color:var(--text)}
.bz-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--biz-soft);color:var(--biz);font-weight:700;font-size:.85rem;flex:0 0 28px}
.bz-acct-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:80}
.bz-menu-head{padding:10px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bz-menu-head b{display:block;font-size:.92rem}
.bz-menu-head span{display:block;color:var(--faint);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-menu a,.bz-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;color:var(--text);
  background:none;border:0;font:inherit;font-size:.92rem;cursor:pointer;text-align:left;text-decoration:none}
.bz-menu a:hover,.bz-menu button:hover{background:rgba(255,255,255,.06)}
.bz-menu small{color:var(--faint);font-size:.78rem}

/* ---------- sign-in sheet (modal) ---------- */
.bz-scrim{position:fixed;inset:0;background:rgba(5,7,10,.66);backdrop-filter:blur(4px);z-index:90;display:flex;align-items:center;justify-content:center;padding:18px}
.bz-sheet{width:100%;max-width:420px;max-height:calc(100vh - 36px);overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:26px 24px 22px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.bz-sheet h2{font-family:var(--display);font-size:1.4rem;letter-spacing:-.02em;margin:0 30px 6px 0}
.bz-sheet .bz-sub{margin:0 0 18px}
.bz-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.bz-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.bz-prov{display:grid;gap:10px}
.bz-prov .bz-btn{width:100%;justify-content:center}
.bz-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.8rem;margin:16px 0}
.bz-or::before,.bz-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bz-form{display:grid;gap:10px}
.bz-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bz-fine{color:var(--faint);font-size:.8rem;margin:14px 0 0;line-height:1.5}
.bz-fine a{color:var(--muted);text-decoration:underline}
@media (max-width:520px){ .bz-scrim{align-items:flex-end;padding:0} .bz-sheet{border-radius:22px 22px 0 0;max-height:92vh} }

/* ---------- toast ---------- */
.bz-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;transition:transform .2s,opacity .2s;background:var(--text);color:#0A0C10;
  padding:11px 16px;border-radius:12px;font-weight:600;font-size:.9rem;z-index:95;pointer-events:none;max-width:calc(100vw - 32px)}
.bz-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- confirm dialog ---------- */
.bz-dialog .bz-row{justify-content:flex-end;margin-top:18px}
/* Oct 22 2026: the nav never overflows a phone (the account name hides at 520 px, the Business tag at 360 px). */
.bz-acct{min-width:0;display:flex;justify-content:flex-end}
.bz-acct .bz-btn{white-space:nowrap}
@media (max-width:520px){.bz-acct-name{display:none}.bz-acct-btn{padding:4px}}
@media (max-width:360px){.brand .tag,.tm-brand .tag,.jn-brand .tag{display:none}}