/* Login da Cartel — mesmo layout do login.html do Playnex Hub (painel de formulario + painel visual). */
:root { --bg: #0d0d12; --neon: #00A8FC; --neon-dim: rgba(0,168,252,.12); --glass-border: rgba(255,255,255,.07); --text: #e8e8ef; --muted: rgba(255,255,255,.45); --danger: #ef4444; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.layout { display: flex; min-height: 100vh; width: 100%; }
.panel-form { position: relative; z-index: 10; width: 460px; min-width: 380px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px 40px; background: rgba(13,13,18,.96); border-right: 1px solid var(--glass-border); overflow: hidden; }
.panel-form::before { content: ''; position: absolute; top: -200px; left: -200px; width: 500px; height: 500px; border-radius: 50%; background: rgba(0,168,252,.06); filter: blur(120px); pointer-events: none; }
.brand { text-align: center; margin-bottom: 28px; position: relative; }
.brand-logo { width: 220px; height: auto; }
.brand-tagline { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.card { width: 100%; max-width: 360px; position: relative; }
.card[hidden] { display: none; }
h1 { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.lead { font-size: 13px; color: var(--muted); margin-bottom: 22px; line-height: 1.5; }
.field { position: relative; margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.field input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); color: #fff; font: 500 14px Inter, sans-serif; outline: none; transition: border-color .15s, box-shadow .15s; }
.field input:focus { border-color: rgba(0,168,252,.55); box-shadow: 0 0 0 3px rgba(0,168,252,.1); }
.toggle-pw { position: absolute; right: 8px; bottom: 7px; width: 32px; height: 32px; background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.toggle-pw svg { width: 17px; height: 17px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.primary { width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--neon); color: #0a0d10; font: 800 14px Inter, sans-serif; letter-spacing: .3px; cursor: pointer; margin-top: 6px; box-shadow: 0 10px 30px -12px rgba(0,168,252,.6); }
.primary:disabled { opacity: .6; cursor: wait; }
.alert { padding: 11px 13px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.alert.error { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.35); color: #fecaca; }
.switch { font-size: 13px; color: var(--muted); margin-top: 16px; text-align: center; }
.switch a { color: var(--neon); font-weight: 600; text-decoration: none; }
.sep { display: flex; align-items: center; gap: 10px; margin: 20px 0 16px; color: var(--muted); font-size: 12px; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }
.hub-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px; border-radius: 12px; border: 1px solid rgba(0,168,252,.35);
  background: var(--neon-dim); color: var(--neon); font: 700 13px Inter, sans-serif; text-decoration: none; text-align: center; }
.hub-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: -2px 0 10px; }
.panel-visual { flex: 1; position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 70% 30%, rgba(0,168,252,.10), transparent 60%), radial-gradient(800px 500px at 20% 90%, rgba(20,160,255,.10), transparent 60%), var(--bg); }
.visual-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; }
.chip-neon { display: inline-flex; align-items: center; gap: 8px; background: var(--neon-dim); border: 1px solid rgba(0,168,252,.35); border-radius: 100px; padding: 7px 16px; font-size: 12px; font-weight: 600; color: var(--neon); margin-bottom: 28px; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); }
.visual-headline { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.2; color: #fff; text-align: center; margin-bottom: 14px; }
.visual-headline span { color: var(--neon); }
.visual-sub { font-size: 14px; color: rgba(255,255,255,.5); text-align: center; line-height: 1.6; max-width: 380px; }
@media (max-width: 860px) {
  .panel-visual { display: none; }
  .panel-form { width: 100%; min-width: 0; border-right: 0; padding: 36px 20px; }
  .field input { font-size: 16px; }
}

/* convite de sub-gerente (/convite/<token>) */
.conv { width: 100%; max-width: 360px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(0,168,252,.07); border: 1px solid rgba(0,168,252,.35); }
.conv[hidden] { display: none; }
.conv-t { display: flex; align-items: center; gap: 8px; font: 800 14px Manrope, Inter, sans-serif; color: #fff; margin-bottom: 8px; }
.conv-t svg { width: 17px; height: 17px; color: var(--neon); }
.conv-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.conv-kv div { min-width: 0; }
.conv-kv span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.conv-kv b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-kv b.azul { color: var(--neon); }
.conv-s { font-size: 12px; color: var(--muted); line-height: 1.5; }
.conv.erro { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.35); }

/* iPhone instalado (status bar translúcida): não deixa o conteúdo sob o relógio/notch */
body { padding-top: env(safe-area-inset-top, 0px); }
.conv-big { font: 700 16px/1.4 Manrope, Inter, sans-serif; color: #fff; margin-bottom: 8px; }
.conv-big b.azul, .conv b.azul { color: var(--neon); }