/* BBNKS affiliate portal + login. Brand kit v2: Bison Red #AE2A2D, Shield Black #0C0C0C, Signal Red #D63A3A on dark. */
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/russo-one-latin.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/oswald-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2')}
:root{
  --red:#ae2a2d;--red-d:#8a1f22;--red-b:#d63a3a;--red-t:#fbecec;--black:#0c0c0c;--char:#1c1c1e;--char2:#26262a;
  --steel:#52525b;--ash:#a1a1aa;--smoke:#f5f4f2;--line:#e7e5e1;--ok:#15803d;
  --display:'Russo One','Arial Black',sans-serif;--head:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.5 var(--body);color:var(--black);background:var(--smoke);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--red)}
button,input{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--red-b);outline-offset:2px}

/* ---------- login ---------- */
.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(32px + var(--st)) max(20px,var(--sr)) calc(32px + var(--sb)) max(20px,var(--sl));color:#fff;
  background:radial-gradient(900px 520px at 85% -10%,rgba(174,42,45,.55),transparent 62%),radial-gradient(700px 420px at -10% 110%,rgba(174,42,45,.22),transparent 60%),var(--black)}
.auth-logo{width:min(200px,52vw);height:auto;margin-bottom:28px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
.auth-card{width:min(420px,100%);background:rgba(28,28,30,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:30px 24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative;overflow:hidden}
.auth-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--red),var(--red-b))}
.auth h1{font:400 1.7rem/1.1 var(--display);text-transform:uppercase;margin:0 0 6px;text-align:center;letter-spacing:.01em}
.auth .sub{color:var(--ash);text-align:center;margin:0 0 22px;font-size:.98rem}
.field{display:block;margin-bottom:14px}
.field span{display:block;font:600 .8rem/1 var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--ash);margin-bottom:8px}
.field input{width:100%;min-height:52px;padding:0 16px;font-size:17px;color:#fff;background:#0f0f10;border:1.5px solid #34343a;border-radius:12px;transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:none;border-color:var(--red-b);box-shadow:0 0 0 4px rgba(214,58,58,.22)}
.pw{position:relative}
.pw input{padding-right:84px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:44px;min-width:64px;background:none;border:0;color:var(--ash);font-weight:600;font-size:.9rem;cursor:pointer;border-radius:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:14px;border:0;cursor:pointer;
  font:600 1.02rem/1 var(--head);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;transition:transform .1s,background .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(174,42,45,.4)}
.btn-red:hover{background:var(--red-d)}
.btn-dark{background:var(--black);color:#fff}
.btn-light{background:#fff;color:var(--black);border:1.5px solid var(--line)}
.btn-light:hover{border-color:var(--black)}
.btn-block{width:100%}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.alert{border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:.95rem;font-weight:500}
.alert-err{background:rgba(214,58,58,.14);border:1px solid rgba(214,58,58,.45);color:#fecaca}
.alert-ok{background:rgba(21,128,61,.14);border:1px solid rgba(21,128,61,.45);color:#bbf7d0}
.auth-foot{margin-top:22px;color:var(--ash);font-size:.9rem;text-align:center}
.auth-foot a{color:#fff;text-decoration:none;display:inline-flex;min-height:44px;align-items:center}

/* ---------- portal ---------- */
.pbar{position:sticky;top:0;z-index:20;background:rgba(12,12,12,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:2px solid var(--red);padding-top:var(--st)}
.pbar .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 max(16px,var(--sr)) 0 max(16px,var(--sl))}
.pbar img{height:34px;width:auto}
.pbar nav{display:flex;gap:4px}
.pbar nav a{color:#e4e4e7;text-decoration:none;font:600 .82rem/1 var(--head);text-transform:uppercase;letter-spacing:.08em;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:10px}
.pbar nav a:hover{background:var(--char)}
.pwrap{max-width:1080px;margin:0 auto;padding:24px max(16px,var(--sr)) calc(48px + var(--sb)) max(16px,var(--sl))}
.hello{margin:6px 0 20px}
.hello .eyebrow{font:600 .8rem/1 var(--head);text-transform:uppercase;letter-spacing:.14em;color:var(--red)}
.hello h1{font:400 clamp(1.8rem,6vw,2.6rem)/1.05 var(--display);text-transform:uppercase;margin:8px 0 6px}
.hello p{margin:0;color:var(--steel)}
.viewing{background:var(--black);color:#fff;border-radius:14px;padding:12px 16px;margin-bottom:16px;font-size:.95rem;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.viewing select{min-height:44px;border-radius:10px;border:0;padding:0 12px;font-size:16px}
.pgrid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:860px){.pgrid{grid-template-columns:1fr}}

.qrcard{background:var(--black);color:#fff;border-radius:26px;padding:22px;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(12,12,12,.28)}
.qrcard:before{content:"";position:absolute;inset:-40% -30% auto auto;width:420px;height:420px;background:radial-gradient(closest-side,rgba(174,42,45,.6),transparent);pointer-events:none}
.qrcard .top{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.qrcard .top img{height:30px;width:auto}
.qrcard .tag{font:600 .74rem/1 var(--head);text-transform:uppercase;letter-spacing:.12em;color:#fff;background:rgba(255,255,255,.1);border-radius:99px;padding:8px 12px}
.qrframe{position:relative;background:#fff;border-radius:20px;padding:18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.qrframe:before{content:"";position:absolute;left:18px;right:18px;top:0;height:5px;background:var(--red);border-radius:0 0 6px 6px}
.qrframe .code svg{width:100%;height:auto;display:block}
.qrframe .who{text-align:center;color:var(--black);margin-top:10px}
.qrframe .who b{display:block;font:400 1.35rem/1.1 var(--display);text-transform:uppercase}
.qrframe .who span{display:block;font:600 .86rem/1.3 var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-top:6px}
.linkrow{position:relative;margin-top:16px;display:flex;align-items:center;gap:8px;background:var(--char);border-radius:14px;padding:6px 6px 6px 14px}
.linkrow code{flex:1;min-width:0;font:600 .98rem/1.2 var(--body);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkrow button{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--red);color:#fff;font:600 .85rem/1 var(--head);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.actions{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.actions .btn{min-height:50px;font-size:.92rem;padding:0 12px}
.actions .wide{grid-column:1/-1}
.btn-glass{background:rgba(255,255,255,.1);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.16)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.stat span{display:block;font:600 .74rem/1.2 var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--steel)}
.stat b{display:block;font:400 2rem/1.1 var(--display);margin-top:8px}
.stat.hot{background:var(--red);border-color:var(--red);color:#fff}
.stat.hot span{color:rgba(255,255,255,.85)}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:6px 0 4px;overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 18px 8px}
.panel-h h2{margin:0;font:600 1.05rem/1 var(--head);text-transform:uppercase;letter-spacing:.08em}
.panel-h small{color:var(--steel);font-size:.88rem}
.seg{display:flex;gap:6px;padding:4px 18px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg a{flex:0 0 auto;min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:99px;background:var(--smoke);color:var(--black);text-decoration:none;font-size:.88rem;font-weight:600}
.seg a.on{background:var(--black);color:#fff}
.bk{list-style:none;margin:0;padding:0}
.bk li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.av{width:44px;height:44px;border-radius:50%;background:var(--red-t);color:var(--red);display:grid;place-items:center;font:400 1rem/1 var(--display)}
.bk .nm{font-weight:700;line-height:1.25}
.bk .meta{color:var(--steel);font-size:.9rem;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}
.bk .meta a{color:var(--steel);text-decoration:none}
.bk .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bk .when{font-size:.8rem;color:var(--steel);white-space:nowrap}
.pill{display:inline-block;font:600 .72rem/1 var(--head);text-transform:uppercase;letter-spacing:.08em;padding:7px 10px;border-radius:99px;white-space:nowrap}
.p-new{background:var(--red-t);color:var(--red-d)}
.p-contacted{background:#eef2ff;color:#3730a3}
.p-scheduled{background:#fef3c7;color:#92400e}
.p-sold{background:#dcfce7;color:#166534}
.p-lost{background:#f4f4f5;color:#52525b}
.empty{padding:34px 22px 38px;text-align:center;color:var(--steel)}
.empty b{display:block;color:var(--black);font:600 1.1rem/1.2 var(--head);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.tip{margin-top:16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:16px;padding:14px 16px;font-size:.95rem;color:var(--steel)}
.tip b{color:var(--black)}

/* full-screen QR for showing a customer */
.qrfull{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:calc(20px + var(--st)) max(20px,var(--sr)) calc(20px + var(--sb)) max(20px,var(--sl));background:var(--black);color:#fff;text-align:center}
.qrfull.open{display:flex}
.qrfull .box{background:#fff;border-radius:26px;padding:20px;width:min(86vw,62vh,460px)}
.qrfull .box svg{width:100%;height:auto;display:block}
.qrfull img.lg{height:40px;width:auto}
.qrfull h2{margin:0;font:400 clamp(1.3rem,5vw,1.8rem)/1.1 var(--display);text-transform:uppercase}
.qrfull p{margin:0;color:var(--ash)}
.qrfull .x{position:absolute;top:calc(12px + var(--st));right:max(12px,var(--sr));width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--sb));transform:translateX(-50%);background:var(--black);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Developer "view as" bar (portal) */
.viewas{margin:0 0 16px;border-radius:14px;background:var(--black);color:#fff;border:1px solid #27272a}
.viewas.on{background:var(--red);border-color:var(--red)}
.va-in{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px}
.va-label,.va-live{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px;font-family:var(--body)}
.va-live .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:vapulse 1.6s infinite}
@keyframes vapulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.va-form{display:flex;gap:8px;margin:0}
.viewas select{min-height:44px;border-radius:10px;border:0;padding:0 12px;font-size:16px;background:#fff;color:var(--black);max-width:60vw}
.va-exit{min-height:44px;border:0;border-radius:10px;padding:0 16px;background:#fff;color:var(--red);font-weight:700;cursor:pointer}

/* inline link under a form button (forgot password) */
.auth-link{text-align:center;margin:14px 0 0}
.auth-link a{color:var(--ash);text-decoration:none;font-size:.92rem;min-height:44px;display:inline-flex;align-items:center}
.auth-link a:hover{color:#fff}