/* ── style.css — AuxTec base ──────────────────────────────────────────────── */
:root{
  --bg:#0d0f14;--surface:#13161e;--border:#1e2230;--accent:#e8ff47;
  --text:#e2e6f0;--muted:#5a6070;--hbg:#0a0c10;
  --err:#ff4777;--ok:#47ffb2;--warn:#ffdd47;
  --c-mec:#ff8c47;--c-ter:#47c8ff;--c-qui:#c47fff;--c-imp:#ff4777;--c-opt:#ffdd47
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'DM Mono',monospace;min-height:100vh}

/* Grid animado */
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:0.4;animation:gridShift 20s linear infinite;z-index:0;pointer-events:none}
@keyframes gridShift{0%{background-position:0 0}100%{background-position:48px 48px}}

/* Blobs de fundo */
.blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:0.07;animation:blobFloat 8s ease-in-out infinite;z-index:0;pointer-events:none}
.blob-1{width:400px;height:400px;background:var(--c-mec);top:-100px;left:-100px}
.blob-2{width:300px;height:300px;background:var(--c-ter);bottom:-50px;right:-50px;animation-delay:-3s}
.blob-3{width:200px;height:200px;background:var(--accent);top:50%;left:50%;animation-delay:-6s}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-20px) scale(1.05)}}

/* Badge de role (canto inferior esquerdo) */
#cornerRole{position:fixed;bottom:20px;left:20px;z-index:10;display:none}
#cornerRole.show{display:block}
.user-role{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.role-admin{background:#ff477715;border:1px solid #ff477740;color:var(--err)}
.role-user{background:#47c8ff15;border:1px solid #47c8ff40;color:var(--c-ter)}

/* Tipografia */
h1{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;margin-bottom:6px}
h1 span{color:var(--accent)}
.subtitle{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:28px}

/* Card */
.card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:48px 40px;width:100%;max-width:440px;animation:cardIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.card::before,.card::after{content:'';position:absolute;width:20px;height:20px;border-color:var(--accent);border-style:solid}
.card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:16px 0 0 0}
.card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 16px 0}

/* Separador */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 0 28px}

/* Mensagem de erro/sucesso */
.msg{font-size:10px;letter-spacing:1px;padding:10px 14px;border-radius:6px;margin-bottom:16px;display:none}
.msg.error{background:#ff477715;border:1px solid #ff477740;color:var(--err);display:block}
.msg.success{background:#47ffb215;border:1px solid #47ffb240;color:var(--ok);display:block}

/* Botões */
.btn{width:100%;background:var(--accent);color:#0d0f14;border:none;border-radius:8px;font-family:'Sora',sans-serif;font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;padding:13px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;margin-top:4px}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff30,transparent);transform:translateX(-100%);transition:transform .4s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px #e8ff4730}
.btn:hover::after{transform:translateX(100%)}
.btn:active{transform:translateY(0)}
.btn-sec{width:100%;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:10px;cursor:pointer;transition:all .2s;margin-top:8px}
.btn-sec:hover{border-color:var(--accent);color:var(--accent)}

/* Inputs */
label{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field{margin-bottom:18px}
.input-wrap{position:relative}
.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none;transition:color .2s}
input[type=text],input[type=email],input[type=password]{width:100%;background:var(--hbg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'DM Mono',monospace;font-size:13px;padding:11px 14px 11px 38px;outline:none;transition:border-color .2s,box-shadow .2s}
input::placeholder{color:var(--muted)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e8ff4715}
.input-wrap:focus-within .input-icon{color:var(--accent)}

/* Botões de menu */
.menu-grid{display:flex;flex-direction:column;gap:8px}
.menu-btn{display:flex;align-items:center;gap:12px;background:var(--hbg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;text-align:left;width:100%;font-family:'DM Mono',monospace;color:var(--text)}
.menu-btn:hover{border-color:var(--accent);background:#e8ff4708}
.menu-btn.admin-btn{border-color:#ff477730}
.menu-btn.admin-btn:hover{border-color:var(--err);background:#ff47770a}
.menu-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0}
.menu-label{font-size:12px;letter-spacing:1px}
.menu-sub{font-size:9px;color:var(--muted);letter-spacing:1px;margin-top:2px}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  html{height:auto !important;overflow:auto !important}
  body{height:auto !important;min-height:100vh;overflow-y:auto !important;align-items:flex-start !important;padding:24px 16px 48px !important}
  .card{max-width:100%;padding:32px 20px}
}