/* Tela de login animada (cena 3D) — só vale dentro de .lk-tela. Tudo com prefixo lk- para não colidir com o resto. */
.lk-tela{
  --lk-sky:#38bdf8; --lk-blue:#2563eb; --lk-deep:#1d4ed8; --lk-err:#dc2626;
  --lk-grad:linear-gradient(135deg,#38bdf8,#2563eb);
  --lk-display:'Poppins','Inter',system-ui,sans-serif;
  --lk-bg1:#f4f9ff; --lk-bg2:#d6e8ff; --lk-ink:#0b1b33; --lk-muted:#5b6b84;
  --lk-card:rgba(255,255,255,.76); --lk-card-line:rgba(255,255,255,.95);
  --lk-input:#f6faff; --lk-input-line:#d3e3f8;
  --lk-chip:rgba(255,255,255,.97); --lk-chip-ink:#0b1b33; --lk-chip-edge:rgba(160,190,235,.75);
  --lk-win:#ffffff; --lk-win-line:rgba(37,99,235,.16); --lk-win-bar:#eaf2ff; --lk-sk:#e3eeff; --lk-sk2:#cfe0fb; --lk-url:#8da0bd;
  --lk-grid:rgba(37,99,235,.2); --lk-shadow:rgba(20,70,170,.42);
}
.lk-tela[data-tema="dark"]{
  --lk-bg1:#0e1522; --lk-bg2:#060a12; --lk-ink:#eaf1fb; --lk-muted:#93a3ba;
  --lk-card:rgba(20,28,42,.74); --lk-card-line:rgba(255,255,255,.09);
  --lk-input:rgba(255,255,255,.06); --lk-input-line:rgba(255,255,255,.12);
  --lk-chip:rgba(24,34,52,.97); --lk-chip-ink:#eaf1fb; --lk-chip-edge:rgba(0,0,0,.55);
  --lk-win:#121b2b; --lk-win-line:rgba(120,165,255,.2); --lk-win-bar:#0d1522; --lk-sk:#1b2a45; --lk-sk2:#25375a; --lk-url:#6f84a6;
  --lk-grid:rgba(90,150,255,.26); --lk-shadow:rgba(0,0,0,.7);
}
.lockscreen.lk-tela{
  position:relative; display:block; padding:0; height:100vh; min-height:100vh; overflow:hidden;
  background:radial-gradient(120% 90% at 20% 30%, var(--lk-bg1), var(--lk-bg2)); color:var(--lk-ink); transition:background .5s, color .3s;
}

/* ===================== CENÁRIO 3D ===================== */
.lk-scene{ position:absolute; inset:0 auto 0 0; width:60%; perspective:1400px; overflow:hidden; }
.lk-glow{ position:absolute; left:50%; top:46%; width:700px; height:700px; margin:-350px 0 0 -350px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(56,140,255,.45), rgba(56,189,248,.14) 55%, transparent 72%); filter:blur(10px); animation:lk-k-respira 6s ease-in-out infinite; }
.lk-tela[data-tema="dark"] .lk-glow{ background:radial-gradient(closest-side, rgba(40,110,255,.5), rgba(56,150,255,.12) 55%, transparent 72%); }
@keyframes lk-k-respira{ 50%{ transform:scale(.92); opacity:.8; } }
.lk-grid{ position:absolute; left:-30%; right:-30%; bottom:-6%; height:58%; transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%;
  background-image:linear-gradient(var(--lk-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lk-grid) 1px, transparent 1px); background-size:54px 54px;
  animation:lk-k-avanca 5s linear infinite; -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 88%); mask-image:linear-gradient(to top,#000 8%,transparent 88%); }
@keyframes lk-k-avanca{ to{ background-position:0 54px; } }
.lk-bokeh{ position:absolute; border-radius:50%; filter:blur(14px); opacity:.5; animation:lk-k-sobe 14s ease-in-out infinite; }
.lk-b1{ width:90px; height:90px; left:10%; top:66%; background:#7dd3fc; }
.lk-b2{ width:54px; height:54px; left:80%; top:16%; background:#60a5fa; animation-delay:-5s; }
.lk-b3{ width:110px; height:110px; left:48%; top:82%; background:#93c5fd; animation-delay:-9s; }
.lk-b4{ width:38px; height:38px; left:22%; top:18%; background:#38bdf8; animation-delay:-3s; }
.lk-tela[data-tema="dark"] .lk-bokeh{ opacity:.3; mix-blend-mode:screen; }
.lk-tela[data-tema="dark"] .lk-b1,.lk-tela[data-tema="dark"] .lk-b3{ background:#2563eb; }
@keyframes lk-k-sobe{ 50%{ translate:0 -34px; } }

/* anéis no "chão": achatados por conta própria (fora do 3D das janelas, então nunca as atravessam) */
.lk-anel{ position:absolute; left:50%; top:calc(46% + 170px); border-radius:50%; border:1.5px solid rgba(37,99,235,.36); transform:perspective(900px) rotateX(76deg); }
.lk-anel i{ position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#38bdf8; box-shadow:0 0 16px 4px rgba(56,189,248,.7); }
.lk-a1{ width:560px; height:560px; margin:-280px 0 0 -280px; animation:lk-k-giraz 18s linear infinite; }
.lk-a2{ width:420px; height:420px; margin:-210px 0 0 -210px; border-style:dashed; border-color:rgba(37,99,235,.3); animation:lk-k-giraz 26s linear infinite reverse; }
.lk-a3{ width:700px; height:700px; margin:-350px 0 0 -350px; border-color:rgba(37,99,235,.16); animation:lk-k-giraz 40s linear infinite; }
@keyframes lk-k-giraz{ to{ rotate:360deg; } }

.lk-world{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); will-change:transform; }
/* Todas as peças ficam dentro deste grupo com a MESMA inclinação: assim são planos paralelos
   (só mudam de profundidade) e nunca se cruzam. */
.lk-tilt{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(7deg) rotateY(-15deg); }

.lk-win{ position:absolute; left:50%; top:46%; border-radius:16px; overflow:hidden; background:var(--lk-win); border:1px solid var(--lk-win-line);
  box-shadow:0 34px 60px -22px var(--lk-shadow); animation:lk-k-flutua 7s ease-in-out infinite, lk-k-monta .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes lk-k-flutua{ 50%{ translate:0 -12px; } }
@keyframes lk-k-monta{ from{ opacity:0; scale:.9; } }
.lk-bar{ height:30px; background:var(--lk-win-bar); display:flex; align-items:center; gap:6px; padding:0 12px; }
.lk-bar i{ width:9px; height:9px; border-radius:50%; background:#ff6b6b; }
.lk-bar i:nth-child(2){ background:#fbbf24; } .lk-bar i:nth-child(3){ background:#34d399; }
.lk-url{ margin-left:10px; flex:1; height:16px; border-radius:8px; background:var(--lk-sk); font:600 9px/16px var(--lk-display); color:var(--lk-url); padding:0 10px; overflow:hidden; white-space:nowrap; }
.lk-body{ padding:14px; display:grid; gap:10px; }
.lk-hero{ position:relative; height:96px; border-radius:12px; background:var(--lk-grad); overflow:hidden; }
.lk-hero b{ position:absolute; left:14px; top:16px; width:56%; height:12px; border-radius:6px; background:rgba(255,255,255,.96); }
.lk-hero u{ position:absolute; left:14px; top:36px; width:38%; height:8px; border-radius:4px; background:rgba(255,255,255,.62); }
.lk-hero s{ position:absolute; left:14px; bottom:14px; width:66px; height:20px; border-radius:10px; background:#fff; }
.lk-hero::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:36%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); animation:lk-k-brilho 5s ease-in-out 1.5s infinite; }
@keyframes lk-k-brilho{ 0%{ left:-60%; } 40%,100%{ left:140%; } }
.lk-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lk-cards i{ height:54px; border-radius:10px; background:var(--lk-sk); position:relative; }
.lk-cards i::before{ content:''; position:absolute; left:10px; top:10px; width:34%; height:7px; border-radius:4px; background:var(--lk-sk2); }
.lk-cards i::after{ content:''; position:absolute; left:10px; top:24px; width:62%; height:6px; border-radius:3px; background:var(--lk-sk2); box-shadow:0 12px 0 var(--lk-sk2); }
.lk-wm{ width:380px; margin:-125px 0 0 -190px; transform:translateZ(0); }
.lk-wb{ width:310px; margin:-190px 0 0 -265px; transform:translateZ(-120px); animation-delay:-3s, .3s; opacity:.9; }
.lk-wb .lk-hero{ height:70px; background:linear-gradient(135deg,#818cf8,#38bdf8); }
.lk-ph{ position:absolute; left:50%; top:46%; width:122px; height:236px; margin:-40px 0 0 112px; border-radius:24px; background:var(--lk-win); border:5px solid #0b1b33; overflow:hidden;
  transform:translateZ(80px); box-shadow:0 34px 56px -18px var(--lk-shadow); animation:lk-k-flutua 6s ease-in-out -2s infinite, lk-k-monta .9s cubic-bezier(.2,.9,.3,1) .5s both; }
.lk-tela[data-tema="dark"] .lk-ph{ border-color:#2a3a58; }
.lk-ph::before{ content:''; position:absolute; top:6px; left:50%; width:40px; height:8px; margin-left:-20px; border-radius:6px; background:#0b1b33; z-index:2; }
.lk-tela[data-tema="dark"] .lk-ph::before{ background:#2a3a58; }
.lk-ph .lk-hero{ margin:26px 10px 0; height:70px; }
.lk-ph .lk-hero b{ width:62%; } .lk-ph .lk-hero s{ width:48px; height:16px; }
.lk-ph i{ display:block; height:34px; margin:10px 10px 0; border-radius:8px; background:var(--lk-sk); }

.lk-chip{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:18px; background:var(--lk-chip); color:var(--lk-chip-ink);
  font:600 13px/1.2 var(--lk-display); letter-spacing:-.01em; white-space:nowrap; box-shadow:0 6px 0 var(--lk-chip-edge), 0 12px 18px -8px var(--lk-shadow);
  animation:lk-k-float 5s ease-in-out infinite, lk-k-entra .8s ease-out both; }
.lk-ic{ width:34px; height:34px; border-radius:11px; background:var(--lk-grad); color:#fff; display:grid; place-items:center; }
.lk-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lk-c1{ left:8%; top:20%; transform:translateZ(130px); animation-delay:-1.5s, 1.2s; }
.lk-c2{ right:6%; top:38%; transform:translateZ(160px); animation-delay:-3s, 1.4s; }
.lk-c3{ right:5%; bottom:21%; transform:translateZ(110px); animation-delay:-4.2s, 1.6s; }
.lk-cursor{ position:absolute; left:50%; top:46%; margin:36px 0 0 -70px; width:30px; height:30px; transform:translateZ(150px); animation:lk-k-float 4s ease-in-out -1s infinite; filter:drop-shadow(0 6px 6px rgba(11,27,51,.35)); }
@keyframes lk-k-float{ 50%{ translate:0 -14px; } }
@keyframes lk-k-entra{ from{ opacity:0; } }

.lk-tagline{ position:absolute; left:7%; bottom:12%; max-width:440px; z-index:2; }
.lk-tagline small{ display:inline-flex; align-items:center; gap:8px; font:600 12px var(--lk-display); text-transform:uppercase; letter-spacing:.12em; color:var(--lk-deep); margin-bottom:10px; }
.lk-tela[data-tema="dark"] .lk-tagline small{ color:#7dd3fc; }
.lk-tagline small::before{ content:''; width:26px; height:2px; background:var(--lk-grad); border-radius:2px; }
.lk-tagline h1{ font-family:var(--lk-display); font-size:clamp(26px,2.7vw,38px); line-height:1.1; letter-spacing:-.04em; font-weight:700; margin:0; color:var(--lk-ink); text-wrap:balance; }
.lk-tagline h1 em{ font-style:normal; background:var(--lk-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ===================== CARTÃO DE LOGIN ===================== */
.lk-tela .lk-login{ position:absolute; inset:0 0 0 auto; width:44%; min-width:420px; display:flex; align-items:center; justify-content:center; padding:24px; perspective:1100px; z-index:3; }
.lk-tela .lockcard{
  width:100%; max-width:420px; padding:34px 32px 30px; border-radius:30px; margin:0;
  background:var(--lk-card); border:1px solid var(--lk-card-line);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 40px 90px -40px rgba(20,70,170,.5), 0 2px 0 rgba(255,255,255,.4) inset;
  transform:rotateY(calc(var(--ry,0deg) * -.25)) rotateX(calc(var(--rx,0deg) * -.25));
  animation:lk-k-sobe-card .9s cubic-bezier(.16,1,.3,1) .4s both; transition:transform .12s linear; color:var(--lk-ink);
}
.lk-tela .lockcard:focus-within{ transform:none; }
@keyframes lk-k-sobe-card{ from{ opacity:0; translate:0 40px; } }
.lk-tela .lockcard.lk-shake{ animation:lk-k-treme .45s; }
@keyframes lk-k-treme{ 20%,60%{ translate:-9px 0; } 40%,80%{ translate:9px 0; } }
.lk-tela .logo-wrap-lock{ margin-bottom:22px; }
.lk-tela .logo-wrap-lock img{ height:62px; width:auto; max-width:100%; display:block; margin:0 auto; }
.lk-tela .lockcard h2{ font-family:var(--lk-display); font-size:26px; font-weight:700; letter-spacing:-.04em; text-align:center; margin:0 0 4px; color:var(--lk-ink); }
.lk-sub{ text-align:center; color:var(--lk-muted); font-size:14px; margin:0 0 18px; }
.lk-tela .lockcard label{ display:block; font-size:14px; font-weight:600; color:var(--lk-ink); margin:16px 0 6px; }
.lk-tela .lockcard .req-star{ color:var(--lk-blue); }
.lk-tela .lockcard input:not([type=checkbox]){ width:100%; font-size:16px; color:var(--lk-ink); background:var(--lk-input); border:1.5px solid var(--lk-input-line); border-radius:16px; padding:14px 16px; transition:border-color .2s, box-shadow .2s, background .2s; }
.lk-tela .lockcard input:not([type=checkbox])::placeholder{ color:var(--lk-muted); opacity:.7; }
.lk-tela .lockcard input:not([type=checkbox]):focus{ outline:none; border-color:var(--lk-blue); box-shadow:0 0 0 4px rgba(37,99,235,.18); background:var(--lk-card); }
.lk-tela .lockcard .pwd-wrap input{ padding-right:48px; }
.lk-tela .lockcard .pwd-toggle{ right:6px; padding:9px; color:var(--lk-muted); }
.lk-tela .lockcard .pwd-toggle:hover{ color:var(--lk-blue); }
.lk-tela .lockcard label.checkbox-row{ display:flex; align-items:center; gap:10px; margin:14px 0 18px; font-size:14px; font-weight:400; color:var(--lk-ink); user-select:none; }
.lk-tela .lockcard .checkbox-row input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; padding:0; border-radius:7px; border:1.5px solid var(--lk-input-line); background:var(--lk-input); display:grid; place-items:center; cursor:pointer; transition:all .2s; flex-shrink:0; }
.lk-tela .lockcard .checkbox-row input:checked{ background:var(--lk-grad); border-color:transparent; }
.lk-tela .lockcard .checkbox-row input:checked::after{ content:''; width:10px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; rotate:-45deg; translate:0 -1px; }
.lk-err{ color:var(--lk-err); font-size:13.5px; text-align:center; margin:12px 0 0; }
.lk-tela .lockcard .btn{ width:100%; border:0; cursor:pointer; font:600 16px var(--lk-display); color:#fff; padding:15px 22px; border-radius:16px;
  background:linear-gradient(90deg,#38bdf8,#2563eb,#38bdf8) 0 0/200% 100%; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 5px 0 #1a3fa8, 0 18px 30px -12px rgba(37,99,235,.75);
  animation:lk-k-desliza 5s linear infinite; transition:transform .12s, box-shadow .12s, filter .2s; }
.lk-tela .lockcard .btn:hover{ filter:brightness(1.07); transform:none; }
.lk-tela .lockcard .btn:active{ transform:translateY(4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #1a3fa8, 0 8px 16px -10px rgba(37,99,235,.75); }
.lk-tela .lockcard .btn:disabled{ opacity:.8; cursor:default; }
@keyframes lk-k-desliza{ to{ background-position:200% 0; } }

/* ===================== CELULAR / TABLET ===================== */
@media (max-width:960px){
  .lockscreen.lk-tela{ height:auto; min-height:100vh; overflow-x:hidden; overflow-y:visible; --lk-sh:300px; --lk-ss:.58; }
  .lk-scene{ position:relative; inset:auto; width:100%; height:var(--lk-sh); -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent); mask-image:linear-gradient(to bottom,#000 80%,transparent); }
  .lk-tagline,.lk-c3,.lk-wb{ display:none; }
  .lk-tilt{ scale:var(--lk-ss) var(--lk-ss) var(--lk-ss); transform-origin:50% 46%; }
  .lk-anel{ top:calc(46% + 110px); } .lk-a1{ width:400px; height:400px; margin:-200px 0 0 -200px; } .lk-a2{ width:300px; height:300px; margin:-150px 0 0 -150px; } .lk-a3{ width:500px; height:500px; margin:-250px 0 0 -250px; }
  .lk-glow{ width:460px; height:460px; margin:-230px 0 0 -230px; }
  .lk-chip{ font-size:11.5px; padding:8px 12px 8px 8px; } .lk-ic{ width:28px; height:28px; border-radius:9px; }
  .lk-c1{ left:3%; top:10%; } .lk-c2{ right:3%; top:64%; }
  .lk-tela .lk-login{ position:relative; inset:auto; width:100%; min-width:0; margin-top:-18px; padding:0 16px calc(28px + env(safe-area-inset-bottom,0px)); }
  .lk-tela .lockcard{ padding:26px 20px 22px; border-radius:26px; }
}
@media (max-width:960px) and (max-height:760px){ .lockscreen.lk-tela{ --lk-sh:230px; --lk-ss:.46; } .lk-anel{ top:calc(46% + 90px); } }
@media (prefers-reduced-motion:reduce){ .lk-tela *,.lk-tela *::before,.lk-tela *::after{ animation:none !important; transition:none !important; } }