/* Tela de entrada TeamClock — moldura dourada, paisagem com lua, cartão claro */
:root{
  --gold:#E3B865; --gold-2:#C9963E; --gold-3:#F6DCA0; --ink:#F4EFE6; --muted:#BDB4A4; --faint:#8A8273;
  --bg:#070605; --line:rgba(227,184,101,.30);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman","Songti SC","STSong","SimSun",serif;
  --kai:"KaiTi","STKaiti","Kaiti SC","BiauKai",var(--serif);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.auth{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;padding:26px;display:flex}
.auth a{color:var(--gold);text-decoration:none}
.auth a:hover{color:var(--gold-3)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* moldura */
.frame{position:relative;flex:1;min-height:calc(100vh - 52px);border-radius:24px;overflow:hidden;
  background:radial-gradient(900px 500px at 70% 10%,rgba(227,184,101,.08),transparent 60%),#0A0907;
  border:1px solid rgba(227,184,101,.45);box-shadow:0 0 0 1px rgba(227,184,101,.08),0 0 40px rgba(227,184,101,.10),inset 0 0 60px rgba(0,0,0,.6);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);gap:30px;padding:56px 64px 48px}
.frame::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:linear-gradient(135deg,rgba(246,220,160,.55),transparent 18%,transparent 82%,rgba(246,220,160,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.art{position:absolute;left:0;bottom:0;width:66%;height:56%;background:url("login-bg2.webp") left bottom/cover no-repeat;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,#000 70%,transparent 100%),linear-gradient(0deg,#000 75%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,#000 70%,transparent 100%) intersect,linear-gradient(0deg,#000 75%,transparent 100%)}

/* coluna da esquerda */
.left{position:relative;z-index:2;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:26px}
.mark{width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(circle at 50% 35%,#2A2216,#0D0B08 70%);border:4px solid transparent;
  background-clip:padding-box;box-shadow:0 0 0 3px #C9963E,0 0 0 5px rgba(246,220,160,.35),0 0 30px rgba(227,184,101,.35),inset 0 0 18px rgba(0,0,0,.8)}
.mark .ico{width:56px;height:56px;stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(227,184,101,.5))}
.brand .name b{display:block;font-family:var(--serif);font-size:58px;line-height:1;font-weight:700;color:#fff;letter-spacing:.005em}
.brand .name b span{color:var(--gold)}
.brand .name small{display:block;margin-top:10px;font-size:21px;color:#CFC6B6}
.rule{width:290px;height:2px;margin:36px 0 34px;background:linear-gradient(90deg,var(--gold) 0 44px,rgba(227,184,101,.25) 44px,transparent)}
.headline{font-family:var(--serif);font-size:50px;line-height:1.12;margin:0;color:#fff;font-weight:700;letter-spacing:-.005em}
.headline span{display:block;color:var(--gold)}
.pitch{font-size:20px;line-height:1.5;color:#CFC6B6;margin:18px 0 30px;max-width:30ch}
.feats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:22px 0;max-width:640px}
.feats div{display:flex;align-items:center;gap:12px;padding:0 20px;border-left:1px solid rgba(255,255,255,.12);font-size:15.5px;line-height:1.3;color:#EDE6DA;
  max-width:200px;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.feats div:nth-child(3n+1){border-left:0;padding-left:0}
.feats .ico{width:34px;height:34px;color:var(--gold);stroke-width:1.6}
.zh-vert{position:absolute;z-index:2;right:calc(42.5% + 36px);top:62px;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:12px;
  font-family:var(--kai);font-size:34px;line-height:1.18;color:#D9B56E;opacity:.92;text-shadow:0 0 12px rgba(0,0,0,.8)}
.zh-vert span{writing-mode:vertical-rl;letter-spacing:.06em}
.zh-vert span:nth-child(2){margin-top:38px}
.zh-vert .seal{writing-mode:horizontal-tb;align-self:flex-end;width:24px;height:28px;border:1.5px solid #B3261E;color:#C8372D;border-radius:3px;font-size:13px;line-height:1;display:grid;place-items:center;margin:0 -2px -40px 0;order:3}

/* coluna da direita */
.right{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:28px}
.langbar{display:flex;align-items:center;gap:10px}
.langbar .ico{width:26px;height:26px;color:var(--gold)}
.pills{display:flex;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:4px;gap:2px}
.pills a{padding:9px 20px;border-radius:999px;color:#E6DFD2;font-size:16px;font-weight:600;white-space:nowrap}
.pills a.on{border:1px solid var(--gold);color:#fff;background:linear-gradient(180deg,rgba(227,184,101,.22),rgba(227,184,101,.06));box-shadow:0 0 14px rgba(227,184,101,.25)}
.pills a:not(.on):hover{color:var(--gold-3)}

.lcard{width:100%;max-width:580px;border-radius:22px;padding:56px 60px 34px;color:#1C1813;
  background:linear-gradient(180deg,#FFFDF9 0%,#F6F1E8 100%);
  box-shadow:0 0 0 1px rgba(246,220,160,.8),0 0 0 6px rgba(227,184,101,.10),0 0 40px rgba(227,184,101,.35),0 30px 70px rgba(0,0,0,.55)}
.lcard h1{font-family:var(--serif);font-size:52px;line-height:1.05;margin:0;color:#14110D;font-weight:700}
.lcard .sub{color:#7A7166;margin:12px 0 34px;font-size:18px}
.lcard label.lb{display:block;font-size:17px;font-weight:600;color:#2A241C;margin:0 0 10px}
.field{position:relative;margin-bottom:26px}
.field .ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#4A4236;width:24px;height:24px}
.field input{width:100%;height:60px;padding:0 56px 0 60px;font:inherit;font-size:17px;color:#1C1813;background:#ECE7DF;border:1px solid #E0D8CB;border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.field input::placeholder{color:#9B9286}
.field input:focus{background:#F5F1EA;border-color:#D9A94F;box-shadow:0 0 0 1px #E3B865,0 0 18px rgba(227,184,101,.35)}
.field .eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:#3A332A;cursor:pointer;padding:8px;border-radius:8px}
.field .eye:hover{color:#B9842F}
.field .eye .ico{position:static;transform:none}
.opts{display:flex;justify-content:space-between;align-items:center;margin:2px 0 30px;font-size:16px;gap:12px;flex-wrap:wrap;position:relative}
.opts label{display:flex;align-items:center;gap:10px;cursor:pointer;color:#2A241C}
.opts input[type=checkbox]{appearance:none;width:22px;height:22px;border:1.5px solid #8B8273;border-radius:5px;margin:0;display:grid;place-items:center;cursor:pointer;background:#fff}
.opts input[type=checkbox]:checked{background:#1A1612;border-color:#1A1612}
.opts input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.forgot summary{list-style:none;cursor:pointer;color:#B9842F;font-weight:500}
.forgot summary::-webkit-details-marker{display:none}
.forgot p{position:absolute;left:0;right:0;top:34px;margin:0;padding:10px 14px;border-radius:10px;background:#FFF6E3;border:1px solid #E8D3A5;color:#6B5220;font-size:14px;z-index:3}
.dark-btn{width:100%;height:66px;border-radius:14px;cursor:pointer;font:inherit;font-size:22px;font-weight:600;color:var(--gold-3);letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(120% 140% at 50% 0%,#3A2F1E 0%,#16120C 55%,#0B0906 100%);border:1px solid #C9963E;
  box-shadow:0 0 0 1px rgba(246,220,160,.25) inset,0 10px 26px rgba(0,0,0,.35),0 0 22px rgba(227,184,101,.30);transition:filter .2s,transform .1s;text-decoration:none!important}
.dark-btn:hover{filter:brightness(1.15)}
.dark-btn:active{transform:translateY(1px)}
.dark-btn .ico{width:22px;height:22px;stroke-width:2}
.card-foot{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid #E6DED1;color:#7A7166;font-size:14px}
.card-foot i{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.card-foot.down i{background:#EF4444;box-shadow:0 0 0 4px rgba(239,68,68,.18)}
.msg{margin:0 0 22px;padding:12px 14px;border-radius:10px;font-size:15px}
.msg.erro{background:#FDECEC;border:1px solid #F3C1C1;color:#9B1C1C}
.msg.ok{background:#E9F8EF;border:1px solid #BFE6CD;color:#16663A}

/* telas menores */
@media (max-width:1250px){
  .frame{grid-template-columns:1fr;padding:40px 40px;justify-items:center;align-content:start}
  .art{width:100%;height:42%}
  .zh-vert{display:none}
  .left{display:contents}
  .brand{order:0;justify-self:center}
  .right{order:1;align-items:center;width:100%;max-width:580px}
  .langbar{order:-1}
  .rule{order:2;margin:10px auto 0}
  .headline{order:3;text-align:center}
  .pitch{order:4;text-align:center;margin:0 auto}
  .feats{order:5;margin:6px auto 240px;justify-content:center}
}
@media (max-width:640px){
  body.auth{padding:0}
  .brand .name{text-align:left}
  .frame{border-radius:0;min-height:100vh;padding:20px 16px 30px;gap:18px}
  .frame::after{border-radius:0}
  .right{gap:18px}
  .langbar .ico{display:none}
  .pills a{padding:8px 14px;font-size:14.5px}
  .lcard{padding:30px 22px 22px;border-radius:18px}
  .lcard h1{font-size:36px}
  .lcard .sub{font-size:15.5px;margin-bottom:24px}
  .field input,.dark-btn{height:56px}
  .brand{gap:14px}
  .mark{width:60px;height:60px}
  .mark .ico{width:30px;height:30px}
  .brand .name b{font-size:34px}
  .brand .name small{font-size:14px;margin-top:6px}
  .rule{display:none}
  .headline{font-size:28px;margin-top:18px}
  .pitch{font-size:15.5px;margin:10px auto 18px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-bottom:200px}
  .feats div,.feats div:nth-child(3n+1){border:0;padding:0;font-size:14px;text-align:left}
  .feats .ico{width:26px;height:26px}
}

/* ---------- efeito do mouse ---------- */
body.auth,body.auth *{cursor:url("cursor.svg") 6 4,auto}
body.auth input[type=text],body.auth input[type=password],body.auth input:not([type]){cursor:url("cursor.svg") 6 4,text}
.spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(227,184,101,.16),rgba(227,184,101,.05) 45%,transparent 70%);transform:translate(var(--mx,-999px),var(--my,-999px));transition:opacity .3s;mix-blend-mode:screen}
.lcard{--cx:50%;--cy:50%;position:relative}
.lcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(260px circle at var(--cx) var(--cy),rgba(227,184,101,.16),transparent 65%)}
.lcard:hover::before{opacity:1}
.field input:hover{border-color:#D9B56E}
.field:hover .ico{color:#B9842F}
.dark-btn{position:relative;overflow:hidden}
.dark-btn::after{content:"";position:absolute;width:120px;height:120px;left:var(--bx,50%);top:var(--by,50%);margin:-60px 0 0 -60px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(246,220,160,.45),transparent);opacity:0;transition:opacity .2s;pointer-events:none}
.dark-btn:hover::after{opacity:1}
.ripple{position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;z-index:50;animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(4.5);opacity:0}}
@media (hover:none),(prefers-reduced-motion:reduce){.spot,.ripple{display:none}.lcard::before{display:none}}