/* ═══════════════════════════════════════════════════════════════════════════
   LOUDER BACKSTAGE — sign-in screen only.

   The app itself uses the standard light Backstage design. This one screen stays
   black, because it is the first thing the client sees and it is where the brand
   should speak loudest: a white wordmark on true black, which is exactly how
   Louder's own identity is set. Loaded only by login.blade.php.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  --bg-page:#000000;
  --bg-card:#0A0A0A;
  --bg-sunk:#141414;
  --border:#262626;
  --border-soft:#1A1A1A;

  --text-primary:#FFFFFF;
  --text-secondary:#B3B3B3;
  --text-muted:#7C7C7C;
  --text-label:#9A9A9A;
  --text-placeholder:#555555;

  --teal:#FFFFFF;
  --gradient-dark:#FFFFFF;
  --crit:#F87171; --crit-bg:#2E1616;

  /* Hard edges, taken from the wordmark. */
  --radius-card:0px; --radius-input:2px; --radius-btn:2px; --radius-badge:2px;
  --shadow-card:none; --shadow-pop:none;
}

body{
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#000000;
}
::selection{background:#FFFFFF; color:#000000}

.card{background:#0A0A0A; border:1px solid var(--border); box-shadow:none}

/* The lockup: wordmark above, product name tracked out beneath to the same
   width, so the two read as one mark rather than a logo beside a caption. */
.loginlock{display:inline-block; margin:0 auto 30px; text-align:center}
.loginlock .loginmark{display:block; height:30px; width:auto}
.loginlock .sub{
  display:block; margin-top:7px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  color:#FFFFFF; letter-spacing:.46em; text-indent:.46em;
}
.loginlockwrap{text-align:center}

.fld label{text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; color:var(--text-label)}
.fld input[type=email],.fld input[type=password],.fld input[type=text]{
  background:#141414; border-color:#3D3D3D; color:#FFFFFF;
}
.fld input:focus{outline:2px solid #FFFFFF; outline-offset:-1px; background:#000000}

.btn.primary{background:#FFFFFF; color:#000000; border-color:#FFFFFF}
.btn.primary:hover{background:#D4D4D4; color:#000000; filter:none; box-shadow:none}
.btn:focus-visible{outline:2px solid #FFFFFF; outline-offset:2px}

.badge.crit{background:var(--crit-bg); color:var(--crit)}
.sm{color:var(--text-muted)}