/**
 * Studio CRM — tela de entrada do tema Ônix (v79.88). Carregado só quando o Ônix é o tema padrão.
 * Mundo próprio, sempre escuro: aurora carmim/brasa que se move devagar, cartão claro com o logo da Studio Simões.
 */
html[data-auth="onix"] {
  --ax-bg: #0A0909; --ax-ink: #F4EFE9; --ax-muted: #A39A91;
  --ax-card: #FFFFFF; --ax-card-ink: #1A1817; --ax-card-muted: #6F6962; --ax-line: rgba(26, 24, 23, .12);
  --ax-focus: #2F5BD3; --ax-focus-soft: rgba(47, 91, 211, .16);
  --ax-ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-auth="onix"] body.auth-shell {
  min-height: 100vh; margin: 0; background: var(--ax-bg) !important; color: var(--ax-ink);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); place-items: stretch; padding: 0; overflow-x: hidden;
}
.ax-stage { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.ax-aurora { position: absolute; inset: -20%; filter: blur(70px) saturate(120%); }
.ax-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.ax-aurora i:nth-child(1) { width: 55vw; height: 55vw; left: -5%; top: 10%; background: radial-gradient(circle, #B01E28 0, transparent 65%); animation: ax-d1 22s ease-in-out infinite alternate; }
.ax-aurora i:nth-child(2) { width: 45vw; height: 45vw; left: 25%; top: 35%; background: radial-gradient(circle, #FF6A3D 0, transparent 62%); opacity: .7; animation: ax-d2 26s ease-in-out infinite alternate; }
.ax-aurora i:nth-child(3) { width: 50vw; height: 50vw; left: 5%; top: -25%; background: radial-gradient(circle, #4E1630 0, transparent 65%); animation: ax-d3 30s ease-in-out infinite alternate; }
@keyframes ax-d1 { to { transform: translate(12%, -8%) scale(1.15); } }
@keyframes ax-d2 { to { transform: translate(-18%, 10%) scale(.9); } }
@keyframes ax-d3 { to { transform: translate(10%, 18%) scale(1.1); } }
.ax-grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.ax-veil { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, rgba(10, 9, 9, .7) 75%, var(--ax-bg) 100%); }

.ax-brand { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 48px; padding: clamp(28px, 5vw, 64px); }
.ax-claim { margin: 0; max-width: 14ch; font: 400 clamp(46px, 6.2vw, 92px)/.95 "Instrument Serif", "Iowan Old Style", Georgia, serif; letter-spacing: -.02em; text-wrap: balance; animation: ax-rise .9s .1s var(--ax-ease) both; }
.ax-claim em { font-style: italic; color: #FFB59E; }
.ax-facts { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; font-size: 13px; color: var(--ax-muted); animation: ax-rise .9s .25s var(--ax-ease) both; }
.ax-facts b { display: block; color: var(--ax-ink); font-size: 15px; font-weight: 600; }

html[data-auth="onix"] .auth-main { position: relative; z-index: 1; width: auto; display: flex; align-items: center; justify-content: center; padding: 24px; }
html[data-auth="onix"] .auth-panel { width: min(420px, 100%); background: var(--ax-card); color: var(--ax-card-ink); border: 0; border-radius: 22px; padding: 34px 32px 26px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 90px -30px rgba(0, 0, 0, .85); backdrop-filter: none; animation: ax-card .8s .15s var(--ax-ease) both; }
html[data-auth="onix"] .auth-brand { margin-bottom: 26px; }
html[data-auth="onix"] .auth-brand span:not(.brand-mark) { border-left-color: var(--ax-line); }
html[data-auth="onix"] .auth-brand em { color: var(--ax-card-muted); font-weight: 600; }
html[data-auth="onix"] .auth-copy { margin-bottom: 22px; }
html[data-auth="onix"] .auth-copy .eyebrow { display: none; }
html[data-auth="onix"] .auth-copy h1, html[data-auth="onix"] .auth-card h2 { font: 400 40px/1.02 "Instrument Serif", "Iowan Old Style", Georgia, serif; letter-spacing: -.01em; color: var(--ax-card-ink); margin: 0; }
html[data-auth="onix"] .auth-copy p, html[data-auth="onix"] .auth-card p { color: var(--ax-card-muted); font-size: 14.5px; margin: 8px 0 0; }
html[data-auth="onix"] .auth-card.surface { background: transparent; border: 0; box-shadow: none; padding: 0; }
html[data-auth="onix"] .stacked-form { gap: 16px; }
html[data-auth="onix"] .form-label { font-size: 13px; font-weight: 500; color: #4A4642; margin-bottom: 6px; }
html[data-auth="onix"] .form-control { height: 46px; border-radius: 12px; border: 1px solid rgba(26, 24, 23, .17); font-size: 15px; color: var(--ax-card-ink); }
html[data-auth="onix"] .form-control-lg { font-size: 15px; }
html[data-auth="onix"] .form-control:focus { border-color: var(--ax-focus); box-shadow: 0 0 0 4px var(--ax-focus-soft); }
html[data-auth="onix"] .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[data-auth="onix"] .input-group .password-toggle { border-radius: 0 12px 12px 0; border-color: rgba(26, 24, 23, .17); color: #4A4642; background: #FAF9F7; }
html[data-auth="onix"] .btn-primary { height: 48px; border: 0; border-radius: 12px; font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #C2262E, #E5532F); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 30px -10px rgba(229, 83, 47, .65); transition: filter .2s, transform .12s; }
html[data-auth="onix"] .btn-primary:hover, html[data-auth="onix"] .btn-primary:focus { filter: brightness(1.06); color: #fff; }
html[data-auth="onix"] .btn-primary:active { transform: translateY(1px); }
html[data-auth="onix"] .btn-primary .bi { display: none; }
html[data-auth="onix"] .subtle-link { color: #4A4642; font-size: 13.5px; text-decoration: none; }
html[data-auth="onix"] .subtle-link:hover { color: var(--ax-card-ink); text-decoration: underline; }
html[data-auth="onix"] .auth-legal { border-top-color: var(--ax-line); margin-top: 22px; padding-top: 16px; font-size: 13px; }
html[data-auth="onix"] .auth-legal a { color: var(--ax-card-muted); text-decoration: none; }
html[data-auth="onix"] .auth-legal a:hover { color: var(--ax-card-ink); }
html[data-auth="onix"] :focus-visible { outline: 2px solid var(--ax-focus); outline-offset: 2px; }
html[data-auth="onix"] .skip-link { background: #fff; color: #1A1817; }

@keyframes ax-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ax-card { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  html[data-auth="onix"] body.auth-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ax-brand { padding: 28px 20px 0; gap: 0; }
  .ax-claim { font-size: 44px; }
  .ax-facts { display: none; }
  .ax-veil { background: linear-gradient(180deg, transparent 15%, rgba(10, 9, 9, .85) 65%); }
  html[data-auth="onix"] .auth-main { align-items: flex-start; padding: 24px 16px 32px; }
  html[data-auth="onix"] .auth-panel { padding: 28px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-aurora i, .ax-claim, .ax-facts, html[data-auth="onix"] .auth-panel { animation: none !important; }
}

/* ============================================================ UX premium (refino da entrada) */
/* borda de luz que percorre o cartão devagar (só transform/opacity do gradiente; parada com movimento reduzido) */
@property --ax-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-auth="onix"] .auth-panel { position: relative; isolation: isolate; }
html[data-auth="onix"] .auth-panel::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 23px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ax-angle), rgba(255, 255, 255, .08), rgba(255, 150, 110, .7) 12%, rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, .08) 62%, rgba(229, 72, 77, .55) 74%, rgba(255, 255, 255, .08) 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ax-orbit 14s linear infinite; }
html[data-auth="onix"] .auth-panel { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 90px -30px rgba(0, 0, 0, .85), 0 30px 90px -50px rgba(229, 83, 47, .55); }
@keyframes ax-orbit { to { --ax-angle: 360deg; } }
/* o formulário entra em sequência curta, depois do cartão */
html[data-auth="onix"] .auth-copy, html[data-auth="onix"] .stacked-form > * { animation: ax-rise .6s var(--ax-ease) both; }
html[data-auth="onix"] .auth-copy { animation-delay: .22s; }
html[data-auth="onix"] .stacked-form > :nth-child(3) { animation-delay: .28s; }
html[data-auth="onix"] .stacked-form > :nth-child(4) { animation-delay: .33s; }
html[data-auth="onix"] .stacked-form > :nth-child(5) { animation-delay: .38s; }
html[data-auth="onix"] .stacked-form > :nth-child(n+6) { animation-delay: .43s; }
/* "Esqueci minha senha" na linha do rótulo; Área do Cliente como rodapé discreto */
.ax-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ax-label-row .subtle-link { font-size: 13px; }
html[data-auth="onix"] .ax-alt { margin: 4px 0 0; font-size: 13.5px; color: var(--ax-card-muted); text-align: center; }
html[data-auth="onix"] .ax-alt .subtle-link { font-weight: 600; color: var(--ax-card-ink); display: inline-flex; align-items: center; gap: 4px; }
html[data-auth="onix"] .ax-alt .subtle-link .bi { transition: transform .2s var(--ax-ease); }
html[data-auth="onix"] .ax-alt .subtle-link:hover .bi { transform: translateX(3px); }
/* aviso de Caps Lock no campo de senha (studio-premium.js) */
.lk-caps { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: #9A620E; }
.lk-caps[hidden] { display: none; }
/* mensagens da entrada: dentro do cartão, acima do formulário (não flutuam) */
.auth-panel .lk-toasts { position: static; width: auto; margin: 0 0 16px; align-items: stretch; pointer-events: auto; }
.auth-panel .lk-toast.alert { box-shadow: none !important; background: #FAF9F7 !important; color: #1A1817 !important; border-color: rgba(26, 24, 23, .12) !important; }
/* botão Entrar carregando */
html[data-auth="onix"] .btn-primary.lk-busy { filter: saturate(.8); opacity: 1; }
/* aurora: menos trabalho para a placa de vídeo */
.ax-aurora i { will-change: transform; }
@media (max-width: 900px) { .ax-aurora i:nth-child(3) { display: none; } .ax-aurora { filter: blur(50px); } }
@media (prefers-reduced-motion: reduce) {
  html[data-auth="onix"] .auth-panel::before { animation: none; }
  html[data-auth="onix"] .auth-copy, html[data-auth="onix"] .stacked-form > * { animation: none !important; }
}
