/* ===== BeatHouse Miami — Royalties Portal Login ===== */
/* Fonts loaded via <link> in HTML head (Lalezar + Figtree from Google Fonts) */

html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden;}

:root{
  --rich-black:#050405;
  --ink:#0c0a10;
  --dark-grey:#2D2D2D;
  --deep-purple:#3C235F;
  --electric-purple:#3B1289;
  --violet:#6B4FC4;
  --violet-bright:#8E6FE8;
  --paper:#0f0d14;
  --paper-light:#FAF9FC;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(12,10,16,.12);
  --text:#F4F2F7;
  --text-dim:rgba(244,242,247,.62);
  --text-faint:rgba(244,242,247,.40);
  --ink-text:#16131c;
  --ink-dim:rgba(22,19,28,.55);
}

*{box-sizing:border-box;}

.bh-login{
  font-family:'Figtree',system-ui,sans-serif;
  width:100%;min-height:100vh;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--ink);color:var(--text);
  overflow:hidden;position:relative;
}

/* ---------- Brand panel (left) ---------- */
.bh-brand{
  position:relative;overflow:hidden;
  padding:56px 56px 48px;
  display:flex;flex-direction:column;
  background:var(--rich-black);
}
.bh-brand-logo{height:64px;width:auto;object-fit:contain;align-self:flex-start;display:block;position:relative;z-index:3;opacity:.96;}
.bh-brand-body{margin-top:auto;position:relative;z-index:3;}
.bh-eyebrow{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--violet-bright);font-weight:600;margin:0 0 22px;
}
.bh-quote{
  font-family:'Figtree',sans-serif;font-weight:700;
  font-size:46px;line-height:1.04;letter-spacing:-.01em;
  margin:0;color:var(--text);text-wrap:balance;
}
.bh-quote .accent{color:var(--violet-bright);}
.bh-attrib{
  margin:22px 0 0;font-size:14px;color:var(--text-dim);
  display:flex;align-items:center;gap:10px;
}
.bh-attrib .dash{width:26px;height:1px;background:var(--violet);display:inline-block;flex-shrink:0;}

/* system status pill */
.bh-status{
  position:relative;z-index:3;margin-top:34px;
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
  font-size:12.5px;color:var(--text-dim);width:fit-content;
}
.bh-dot{width:8px;height:8px;border-radius:50%;background:#34d39a;position:relative;flex-shrink:0;}
.bh-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:#34d39a;opacity:.35;animation:bhpulse 2.2s ease-out infinite;}
@keyframes bhpulse{0%{transform:scale(.6);opacity:.5;}100%{transform:scale(2.4);opacity:0;}}
.bh-status b{color:var(--text);font-weight:600;}

/* ---------- Form panel (right) ---------- */
.bh-form-wrap{
  display:flex;align-items:center;justify-content:center;
  padding:48px;background:var(--paper);position:relative;
}
.bh-form{width:100%;max-width:380px;}
.bh-form h1{
  font-family:'Figtree',sans-serif;font-weight:600;
  font-size:28px;letter-spacing:-.01em;margin:0 0 8px;color:var(--text);
}
.bh-form .sub{font-size:15px;color:var(--text-dim);margin:0 0 32px;line-height:1.5;}

.bh-field{margin-bottom:18px;}
.bh-field label{
  display:block;font-size:13px;font-weight:500;
  color:var(--text-dim);margin:0 0 8px;letter-spacing:.01em;
}
.bh-input-shell{position:relative;}
.bh-input{
  width:100%;height:50px;padding:0 16px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:12px;
  color:var(--text);font-size:15px;font-family:inherit;
  transition:border-color .18s,background .18s,box-shadow .18s;
  outline:none;
}
.bh-input::placeholder{color:var(--text-faint);}
.bh-input:hover{border-color:rgba(255,255,255,.2);}
.bh-input:focus{
  border-color:var(--violet);background:rgba(107,79,196,.07);
  box-shadow:0 0 0 4px rgba(107,79,196,.16);
}
.bh-input.err{border-color:#e0608a;box-shadow:0 0 0 4px rgba(224,96,138,.14);}
.bh-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:none;background:none;cursor:pointer;
  color:var(--text-faint);display:grid;place-items:center;border-radius:9px;
  transition:color .15s,background .15s;
}
.bh-eye:hover{color:var(--text);background:rgba(255,255,255,.05);}
.bh-err-msg{
  font-size:12.5px;color:#ef84a5;margin:7px 2px 0;min-height:0;
  display:flex;align-items:center;gap:5px;
}

/* PHP server-side error alert */
.bh-alert-error{
  background:rgba(224,96,138,.12);
  border:1px solid #e0608a;
  border-radius:10px;
  color:#ef84a5;
  font-size:13.5px;
  padding:10px 14px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.4;
}

.bh-row{display:flex;align-items:center;justify-content:space-between;margin:-2px 2px 26px;}
.bh-link{
  font-size:13.5px;color:var(--violet-bright);text-decoration:none;font-weight:500;
  transition:color .15s;
}
.bh-link:hover{color:#b29bf2;text-decoration:underline;text-underline-offset:3px;}

.bh-btn{
  width:100%;height:52px;border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:.01em;
  color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--electric-purple),var(--violet));
  box-shadow:0 8px 24px -8px rgba(59,18,137,.7);
  transition:transform .14s,box-shadow .2s,filter .2s;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.bh-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(59,18,137,.8);filter:brightness(1.08);}
.bh-btn:active{transform:translateY(0);}
.bh-btn:disabled{cursor:default;filter:saturate(.5) brightness(.9);}
.bh-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:bhspin .7s linear infinite;flex-shrink:0;}
@keyframes bhspin{to{transform:rotate(360deg);}}

.bh-foot{margin-top:28px;font-size:13px;color:var(--text-faint);text-align:center;line-height:1.6;}
.bh-foot a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid var(--line);}
.bh-foot a:hover{color:var(--text);}

/* success screen */
.bh-success{text-align:center;animation:bhfade .4s ease;}
@keyframes bhfade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.bh-check{width:64px;height:64px;border-radius:50%;margin:0 auto 22px;
  background:linear-gradient(135deg,var(--electric-purple),var(--violet));
  display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(59,18,137,.7);}
.bh-success h1{color:var(--text);margin:0 0 10px;}
.bh-success .sub{font-size:15px;color:var(--text-dim);margin:0;line-height:1.5;}

/* ---------- graphics ---------- */
.bh-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1;}

/* equalizer bars */
.bh-eq{position:absolute;left:0;right:0;bottom:0;height:240px;z-index:1;
  display:flex;align-items:flex-end;gap:6px;padding:0 40px;opacity:.5;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 92%);
          mask-image:linear-gradient(to top,#000 0%,transparent 92%);}
.bh-eq span{flex:1;border-radius:4px 4px 0 0;
  background:linear-gradient(to top,var(--electric-purple),var(--violet-bright));
  animation:bheq 1.3s ease-in-out infinite;transform-origin:bottom;}
@keyframes bheq{0%,100%{transform:scaleY(.18);}50%{transform:scaleY(1);}}

/* animated data / tech field (canvas) */
.bh-datafield{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}

/* live metrics row */
.bh-metrics{position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  margin-top:30px;flex-wrap:wrap;}
.bh-metrics .bh-status{margin-top:0;}
.bh-metric{display:flex;align-items:center;gap:12px;padding:10px 15px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);}
.bh-metric .mbars{display:flex;align-items:flex-end;gap:2px;height:22px;}
.bh-metric .mbars i{width:3px;height:100%;border-radius:2px;transform-origin:bottom;
  background:linear-gradient(to top,var(--electric-purple),var(--violet-bright));
  animation:bheq 1.05s ease-in-out infinite;font-style:normal;}
.bh-metric .mtext{line-height:1.18;}
.bh-metric .mval{font-weight:700;font-size:17px;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.bh-metric .mlbl{font-size:11px;color:var(--text-dim);letter-spacing:.02em;}

@keyframes bhfloat{0%,100%{transform:translate(0,0);}50%{transform:translate(18px,-22px);}}

/* ===== TOTP page (login_2fa.php) — centered dark layout ===== */
.bh-totp-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--paper);padding:48px 24px;
  font-family:'Figtree',system-ui,sans-serif;color:var(--text);
}
.bh-totp-card{width:100%;max-width:400px;}
.bh-totp-card .bh-logo-wrap{text-align:center;margin-bottom:32px;}
.bh-totp-card .bh-logo-wrap img{height:32px;width:auto;opacity:.96;}
.bh-totp-icon{font-size:2.2rem;text-align:center;margin-bottom:8px;}
.bh-totp-card h3{margin:0 0 6px;font-size:20px;font-weight:600;color:var(--text);text-align:center;}
.bh-totp-hint{font-size:13px;color:var(--text-dim);text-align:center;margin:0 0 24px;line-height:1.5;}
.bh-totp-input{
  font-size:1.8rem;letter-spacing:.45rem;text-align:center;font-weight:700;
  width:100%;padding:.6rem .5rem;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.035);color:var(--text);
  font-family:inherit;transition:border-color .18s,box-shadow .18s;outline:none;
}
.bh-totp-input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(107,79,196,.16);}
.bh-totp-sub{font-size:12px;color:var(--text-faint);text-align:center;margin:8px 0 0;}
.bh-back-link{display:block;text-align:center;margin-top:16px;font-size:13px;
  color:var(--text-dim);text-decoration:none;}
.bh-back-link:hover{color:var(--violet-bright);}

/* ===== responsive: stack split on tablet/mobile ===== */
@media (max-width:880px){
  .bh-login{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:100vh;overflow-x:hidden;overflow-y:visible;}
  .bh-brand{padding:40px 32px 36px;min-height:340px;}
  .bh-quote{font-size:34px;}
  .bh-form-wrap{padding:40px 28px 56px;}
}
@media (max-width:520px){
  .bh-brand{padding:32px 24px 28px;min-height:300px;}
  .bh-quote{font-size:28px;}
  .bh-metrics{margin-top:22px;}
  .bh-form-wrap{padding:32px 22px 44px;}
  .bh-form h1{font-size:24px;}
}

@media (prefers-reduced-motion:reduce){
  .bh-glow,
  .bh-eq span,
  .bh-dot::after,
  .bh-metric .mbars i,
  .bh-spinner,
  .bh-success{animation:none !important;}
}