/* Crível Voice login presentation. Adapted from the existing Classify login only. */
:root {
  --gold:#caa45a;
  --gold-light:#ead39d;
  --gold-deep:#9b702a;
  --line-gold:#c8a45655;
  --muted:#97958f;
}
html,body { min-height:100%; margin:0; background:#040404; color-scheme:dark; }
body { color:#c7c4bc; font:14px/1.5 Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; }
.login-screen,.login-screen *,.login-screen *:before,.login-screen *:after { box-sizing:border-box; }
.login-screen button,.login-screen input { font:inherit; }
.login-screen button { cursor:pointer; }
.login-screen [hidden] { display:none!important; }
.login-screen {
  position:fixed; inset:0; z-index:200; overflow:auto; display:grid;
  place-items:center; min-height:100dvh; padding:clamp(38px,7vh,76px) 22px;
  background-color:#080909;
  background-image:radial-gradient(ellipse at 50% 47%,#0303031f 0,#0303033d 31rem,#00000073 65rem),
    linear-gradient(90deg,#00000024 0,#0505050f 50%,#0000003d 100%),url("background.webp");
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment:fixed; isolation:isolate;
}
.login-screen:after { content:none; }
.login-corner {
  position:fixed; left:34px; top:25px; display:flex; gap:10px; align-items:center;
  color:#a4a19a; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:1.8px;
}
.login-wrap { width:min(100%,460px); max-width:100%; min-width:0; }
.login-brand { text-align:center; margin:0 0 22px; }
.brand-lockup { display:flex; align-items:center; justify-content:center; gap:15px; text-align:left; }
.brand-lockup>div { display:flex; flex-direction:column; }
.brand-lockup strong { font-size:40px; line-height:.92; letter-spacing:4.5px; color:#c7c4bc; }
.brand-lockup div span { margin-top:8px; color:#e0c27f; font-size:11px; font-weight:700; letter-spacing:2.45px; }
.login-brand>p { max-width:430px; margin:14px auto 0; color:#aaa79f; font-size:12px; line-height:1.55; }
.brand-mark {
  position:relative; display:grid; place-items:center; flex:none; width:59px; height:59px;
  border:1px solid #d9b96d66; border-radius:50%;
  background:radial-gradient(circle at 35% 20%,#fff2,transparent 46%),#0a0a0a;
  color:var(--gold-light); font:800 31px/1 Georgia,serif;
  box-shadow:inset 0 0 0 4px #050505,0 10px 35px #000;
}
.brand-mark:after { content:""; position:absolute; inset:4px; border:1px solid #ffffff0d; border-radius:50%; }
.brand-mark--small { width:34px; height:34px; font-size:18px; box-shadow:inset 0 0 0 3px #050505,0 6px 18px #000; }
.login-corner .brand-mark--small { width:24px; height:24px; font-size:13px; }
.login-card {
  position:relative; overflow:hidden; min-width:0; border:1px solid #c9a35a75; border-radius:22px;
  background:linear-gradient(150deg,#20201ff5 0,#111110fa 54%,#080808fd 100%);
  box-shadow:0 36px 105px #000e,0 9px 28px #000b,inset 0 1px #ffffff1f;
}
.login-card:before {
  content:""; position:absolute; inset:0 13% auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent); opacity:.92;
}
.login-card:after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 100% 0,#d4aa5520,transparent 30%),
    repeating-linear-gradient(135deg,transparent 0,transparent 9px,#ffffff04 10px,transparent 11px);
  opacity:.56;
}
.login-card__eyebrow,.login-card__body,.login-card__footer { position:relative; z-index:1; }
.login-card__eyebrow {
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 28px 0;
  color:#c3c0b8; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
.status-dot { display:flex; align-items:center; gap:7px; color:#9e9b94; font-weight:500; letter-spacing:0; text-transform:none; }
.status-dot i { width:6px; height:6px; border-radius:50%; background:var(--gold-light); box-shadow:0 0 0 3px #c9a35a20; }
.login-card__body { padding:22px 28px 27px; }
.watermark { position:absolute; inset:20px 0 auto; text-align:center; color:#c7c4bc; opacity:.018; font-size:120px; font-weight:900; letter-spacing:-8px; pointer-events:none; }
.kicker { margin:0 0 6px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:1.35px; text-transform:uppercase; }
.login-heading { position:relative; }
.login-heading h1 { margin:0 0 8px; color:#c7c4bc; font:600 31px/1.15 Georgia,serif; letter-spacing:-.65px; }
.login-heading>p:last-child { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.login-form { position:relative; margin-top:21px; }
.login-form>label { display:block; margin:16px 0 8px; color:#aaa79f; font-size:10px; font-weight:800; letter-spacing:1.15px; text-transform:uppercase; }
.field {
  position:relative; display:block; isolation:isolate; overflow:hidden; min-height:54px;
  border:0; border-radius:13px; background:#090909; box-shadow:0 8px 20px #0005;
  transition:box-shadow .18s ease,background .18s ease;
}
.field:after { content:""; position:absolute; inset:0; z-index:5; border:1px solid #4b4943; border-radius:inherit; pointer-events:none; transition:border-color .18s ease,box-shadow .18s ease; }
.field:focus-within { outline:2px solid var(--gold-light); outline-offset:2px; box-shadow:inset 0 0 0 1px #786a4b,0 10px 24px #0007; }
.field:focus-within:after { border-color:#e6c878; box-shadow:0 0 0 3px #d8b66526,0 0 20px #d8b66512; }
.field>span { position:absolute; inset:0 auto 0 0; z-index:2; display:grid; place-items:center; width:50px; margin:0; color:#aaa69a; pointer-events:none; }
.field input {
  position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; min-width:0;
  padding:0 16px 0 50px; border-radius:inherit; -webkit-appearance:none; appearance:none;
  border:0; outline:0; background:#090909!important; background-color:#090909!important;
  box-shadow:none!important; color:#c7c4bc; font-size:14px; line-height:1.35; caret-color:#e6c878;
}
.field input[type="password"],.field input[data-password] { padding-right:54px; }
.field input::placeholder { color:#716f69; }
.field input:focus-visible { outline:0; }
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,.field input:-webkit-autofill:active {
  -webkit-text-fill-color:#c7c4bc!important; caret-color:#e6c878;
  background:#090909!important; background-color:#090909!important; background-image:none!important;
  border:0!important; border-radius:inherit!important; outline:0!important;
  -webkit-box-shadow:0 0 0 1000px #090909 inset!important; box-shadow:0 0 0 1000px #090909 inset!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
  filter:none!important; transition:background-color 99999s 0s,color 99999s 0s!important;
}
.icon-button { display:grid; place-items:center; min-width:38px; height:38px; padding:0; border:1px solid transparent; border-radius:9px; background:transparent; color:#aaa7a0; }
.icon-button:hover { border-color:#ffffff17; background:#ffffff0b; color:var(--gold-light); }
.password-toggle { position:absolute; top:50%; right:5px; z-index:3; width:44px; min-width:44px; height:44px; margin:0; transform:translateY(-50%); }
.gold-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px;
  padding:10px 16px; border:1px solid #edd494; border-radius:9px;
  background:linear-gradient(110deg,var(--gold-deep),#d2ae63 43%,var(--gold-light) 56%,#b6893f);
  color:#0b0906; font-weight:750; box-shadow:0 9px 22px #0006,inset 0 1px #fff6; transition:.15s;
}
.gold-button:hover { filter:brightness(1.07); transform:translateY(-1px); }
.gold-button--wide { display:flex; width:100%; min-height:52px; margin-top:23px; border-radius:12px; font-size:13px; }
.gold-button:disabled { opacity:.7; cursor:wait; transform:none; }
.form-error { color:#f0a79f; font-size:12px; }
.login-card__footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 28px; border-top:1px solid #ffffff0e; background:#040404a8; color:#929089; font-size:10px; }
.demo-note { color:#85827a; font-size:10px; text-align:center; margin:14px 0 0; line-height:1.45; }
.demo-note strong { color:#b3b0aa; }
.login-screen :is(.gold-button,.icon-button):focus-visible { outline:2px solid #efd28b; outline-offset:3px; }
@media(max-height:760px) and (min-width:681px) {
  .login-screen { place-items:start center; padding-top:32px; padding-bottom:32px; }
  .login-brand { margin-bottom:16px; }
  .login-brand>p { margin-top:10px; }
  .login-card__eyebrow { padding-top:18px; }
  .login-card__body { padding-top:18px; padding-bottom:21px; }
}
@media(max-width:680px) {
  .login-screen { grid-template-columns:minmax(0,1fr); place-items:start center; padding-top:max(64px,calc(env(safe-area-inset-top) + 44px)); padding-right:max(14px,env(safe-area-inset-right)); padding-bottom:max(28px,env(safe-area-inset-bottom)); padding-left:max(14px,env(safe-area-inset-left)); }
  .login-wrap { width:100%; max-width:460px; }
  .login-corner { top:max(18px,env(safe-area-inset-top)); left:max(18px,env(safe-area-inset-left)); }
  .login-corner>span:last-child { display:none; }
  .login-brand { margin-bottom:18px; }
  .brand-lockup strong { font-size:35px; }
  .login-brand>p { margin-top:11px; font-size:11px; }
  .login-card { border-radius:19px; }
  .login-card__eyebrow { padding:19px 20px 0; }
  .login-card__body { padding:19px 20px 23px; }
  .login-heading h1 { font-size:28px; }
  .login-card__footer { padding:13px 20px; align-items:flex-start; flex-direction:column; }
  .field { min-height:52px; }
}
@media(max-width:380px) {
  .login-card__eyebrow { gap:8px; align-items:flex-start; flex-direction:column; }
  .status-dot { font-size:9px; }
  .login-heading h1 { font-size:26px; }
  .login-card__body,.login-card__footer { padding-left:17px; padding-right:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .login-screen *,.login-screen *:before,.login-screen *:after { animation:none!important; transition:none!important; }
}

/* Crível Voice wordmark and preserved account recovery. */
.brand-lockup strong{font-size:44px;letter-spacing:1px;font-weight:750}.password-toggle{padding:0;border:0;background:transparent;color:#aaa7a0}.password-toggle:hover{color:var(--gold-light)}#password{padding-right:54px}.recovery-link{display:block;margin:11px auto 0;padding:5px 8px;border:0;background:transparent;color:#979187;font-size:10px}.recovery-link:hover{color:var(--gold-light)}.recovery-link:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}.login-screen input:read-only{opacity:.8}@media(max-width:680px){.brand-lockup strong{font-size:38px}}

/* Fit ordinary laptop windows without hiding form controls or disabling scroll. */
@media(max-height:900px) {
  .login-screen {padding-top:26px;padding-bottom:22px;}
  .login-brand {margin-bottom:16px;}
  .brand-mark {width:50px;height:50px;font-size:28px;}
  .brand-lockup strong {font-size:38px;}
  .login-brand>p {margin-top:10px;line-height:1.4;}
  .login-card__eyebrow {padding:16px 26px 0;}
  .login-card__body {padding:16px 26px 19px;}
  .login-heading h1 {font-size:28px;margin-bottom:6px;}
  .login-form {margin-top:16px;}
  .login-form>label {margin:12px 0 6px;}
  .field {min-height:48px;}
  .gold-button--wide {min-height:48px;margin-top:18px;}
  .login-card__footer {padding:11px 26px;}
  .demo-note {display:none;}
  .recovery-link {margin-top:9px;min-height:30px;}
}
@media(max-height:620px) and (min-width:761px) {
  .login-screen {padding-top:15px;padding-bottom:14px;}
  .login-brand>p {display:none;}
  .login-brand {margin-bottom:12px;}
  .login-card__eyebrow {padding-top:13px;}
  .login-card__body {padding-top:12px;padding-bottom:14px;}
  .login-form {margin-top:12px;}
  .login-card__footer {padding-top:8px;padding-bottom:8px;}
}