/* ===== Paleta do painel Unique (VPS) — escopo local desta tela ===== */
        .unq-login{
          --ouro:#A58546; --ouro-btn:#906E2B; --ouro-deep:#7A5A23; --ouro-claro:#EBC65E;
          --preto:#0E0E0E; --text-strong:#0E0E0E; --tinta:#1A1A1A; --c700:#555; --c300:#999;
          --creme:#FAF8F5; --creme2:#F5F0E8; --branco:#FFF; --linha:#ECE6DC;
          color-scheme:light;
        }

        .unq-login{
          height:100dvh; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr;
          background:var(--branco); color:var(--tinta);
          font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif; line-height:1.6;
          -webkit-font-smoothing:antialiased;
        }
        .unq-login *{box-sizing:border-box}

        /* ---- Arte (coluna esquerda) ---- */
        .unq-art{
          height:100%; 
          background:linear-gradient(180deg,rgba(14,14,14,.72),rgba(14,14,14,.86)),
                    var(--unq-bg) center/cover no-repeat,#0E0E0E;
          position:relative; padding:56px; display:flex; flex-direction:column;
          justify-content:space-between; overflow:hidden;
        }
        .unq-art::after{
          content:""; position:absolute; inset:0;
          background:radial-gradient(60% 50% at 70% 82%,rgba(165,133,70,.22),transparent 70%);
        }
        .unq-art > *{position:relative; z-index:1}
        .unq-wordmark{width:210px; filter:brightness(0) invert(1); opacity:.96; display:block}
        .unq-quote{color:#E9E2D4; font-weight:300; font-size:20px; line-height:1.7; max-width:360px; margin:0}
        .unq-quote b{color:var(--ouro-claro); font-weight:600}
        .unq-art-foot{color:#8a7f6b; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:0}
        /* [Higor 19/08] rodapé discreto no lado escuro (áreas + copyright),
           tudo alinhado à ESQUERDA (especificidade maior que .unq-foot-areas) */
        .unq-art .unq-art-areas{justify-content:flex-start; color:#8a7f6b; margin-top:10px}
        .unq-art-copy{color:#6f6657; font-size:11px; margin:8px 0 0}
        .unq-marca{display:flex; align-items:center; gap:12px}
        /* [Higor 19/08] lockup COPA oficial (arquivo transparente novo) — a marca
           inteira é a imagem, sem texto ao lado */
        .unq-marca img{width:min(245px,55%); height:auto; display:block}
        .unq-marca span{font-family:Georgia,"Times New Roman",serif; font-size:26px; letter-spacing:.16em;
                        color:var(--ouro-claro,#c9a04a); font-weight:700; line-height:1; white-space:nowrap}
        .unq-marca b{color:#E9E2D4; font-weight:400}

        /* ---- Formulário (coluna direita) ---- */
        .unq-form{
          height:100dvh; overflow-y:auto; overscroll-behavior:contain;
          /* reserva o espaco da barra de rolagem nos DOIS lados: o formulario
             nao desliza pro lado se a barra de rolagem aparecer */
          scrollbar-gutter:stable both-edges;
          /* fundo com manchas douradas suaves (nao chapado) */
          background:
            radial-gradient(52% 38% at 88% 4%, rgba(235,198,94,.26), transparent 68%),
            radial-gradient(46% 40% at 4% 96%, rgba(165,133,70,.16), transparent 70%),
            radial-gradient(38% 30% at 96% 78%, rgba(197,165,114,.14), transparent 72%),
            linear-gradient(158deg,#FFFDF8 0%,#FDFAF4 42%,#F7F1E6 100%);
          display:flex; align-items:flex-start; justify-content:center;
          padding:clamp(28px,9vh,84px) 40px;
        }
        /* barra de rolagem discreta, so na coluna do formulario */
        .unq-form::-webkit-scrollbar{width:10px}
        .unq-form::-webkit-scrollbar-track{background:transparent}
        .unq-form::-webkit-scrollbar-thumb{background:rgba(165,133,70,.28); border-radius:999px; border:3px solid transparent; background-clip:padding-box}
        .unq-form::-webkit-scrollbar-thumb:hover{background:var(--ouro-suave,#C5A572)}
        .unq-inner{width:100%; max-width:380px}
        /* [Bruna 20/08] lockup COPA oficial como cabeçalho do form (era só texto "COPA UNIQUE") */
        /* [Higor 20/08] -40% e CENTRALIZADO (era 290px encostado à esquerda) */
        .unq-form-logo{display:block; width:min(175px,60%); height:auto; margin:0 auto 16px}
        .unq-sronly{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
        .unq-inner h1{
          font-weight:700; font-size:29px; letter-spacing:-.01em; color:var(--text-strong);
          margin:0; line-height:1.25;
        }
        /* [Higor 19/08] UNIQUE em degradê dourado ESTÁTICO */
        .unq-inner h1 b{
          font-weight:800;
          background:linear-gradient(90deg,#7A5A23,#B08A3C,#E3C878);
          -webkit-background-clip:text; background-clip:text;
          -webkit-text-fill-color:transparent; color:transparent;
        }
        .unq-sub{color:var(--c700); font-size:14px; margin:6px 0 30px}

        .unq-field{display:block; margin-bottom:18px}
        .unq-lbl{
          display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
          color:var(--c700); margin-bottom:8px;
        }
        .unq-inp{
          display:flex; align-items:center; gap:10px; border:1px solid var(--linha); border-radius:12px;
          padding:0 16px; background:rgba(255,255,255,.72); transition:border-color .3s, background .3s, box-shadow .3s;
        }
        .unq-inp:focus-within{border-color:var(--ouro); background:var(--branco); box-shadow:0 0 0 4px rgba(165,133,70,.10)}
        .unq-ic{color:var(--ouro); display:inline-flex; align-items:center; flex:none}
        .unq-ic svg{width:18px; height:18px}
        .unq-inp input{
          flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:inherit;
          font-size:14px; color:var(--tinta); padding:13px 0;
        }
        .unq-inp input::placeholder{color:var(--c300)}
        .unq-inp input:-webkit-autofill,
        .unq-inp input:-webkit-autofill:hover,
        .unq-inp input:-webkit-autofill:focus{
          -webkit-text-fill-color:var(--tinta);
          -webkit-box-shadow:0 0 0 1000px #FFFCF7 inset;
          caret-color:var(--tinta);
          transition:background-color 9999s ease-in-out 0s;
        }
        .unq-eye{
          flex:none; border:none; background:none; color:var(--c300); cursor:pointer;
          display:inline-flex; align-items:center; padding:4px; border-radius:8px;
        }
        .unq-eye:hover{color:var(--ouro)}
        .unq-eye svg{width:19px; height:19px}

        .unq-error{
          background:#fdeceb; color:#a3312a; border-radius:10px; padding:11px 14px;
          font-size:13px; font-weight:500; margin:0 0 16px;
        }
        .unq-field-error{color:#a3312a; font-size:12px; margin:6px 0 0}

        .unq-btn{
          width:100%; border:none; color:#fff; text-transform:uppercase;
          background:linear-gradient(135deg,#B08A3C 0%,#906E2B 52%,#7A5A23 100%);
          box-shadow:0 10px 26px -12px rgba(122,90,35,.55);
          letter-spacing:.06em; font-weight:700; font-size:14px; padding:16px; border-radius:999px;
          cursor:pointer; font-family:inherit; margin-top:6px; position:relative; overflow:hidden;
          display:inline-flex; align-items:center; justify-content:center; gap:10px; isolation:isolate;
          transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .45s ease;
        }
        .unq-btn::after{
          content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
          background:linear-gradient(135deg,#C9A24E 0%,#A58546 52%,#8A6829 100%);
          opacity:0; transition:opacity .45s ease;
        }
        .unq-btn:hover::after{opacity:1}
        .unq-btn:hover{transform:translateY(-1px); box-shadow:0 14px 32px -12px rgba(122,90,35,.62)}
        .unq-btn:active{transform:translateY(0)}
        .unq-btn:disabled{opacity:.6; cursor:default; transform:none}
        /* [Higor 19/08] variante clara do "Entrar no painel": texto escuro no
           normal, BRANCO só no hover (quando o dourado do ::after cobre o fundo) */
        .unq-btn-claro{background:#fff; color:#1f2937; border:1px solid #d1d5db;
          transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .45s ease, color .25s ease}
        .unq-btn-claro:hover{color:#fff}

        .unq-link{
          display:inline-block; margin-top:2px; background:none; border:none; padding:0;
          font-family:inherit; font-size:12px; font-weight:600; color:var(--ouro-deep);
          cursor:pointer; transition:color .25s ease;
        }
        .unq-link:hover{color:var(--ouro)}
        .unq-ghost{
          width:100%; margin-top:14px; background:none; border:none; font-family:inherit;
          font-size:13px; color:var(--c700); cursor:pointer; padding:8px; border-radius:999px;
          transition:color .2s, background .2s;
        }
        .unq-ghost:hover{color:var(--tinta); background:var(--creme)}

        /* aviso discreto: cadastro só pela administração */
        .unq-no-access{
          margin:18px 0 0; text-align:center; font-size:12px; color:var(--c700);
        }

        .unq-foot{margin-top:30px; text-align:center}
        .unq-foot-areas{
          display:flex; align-items:center; justify-content:center; gap:10px;
          font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c300);
        }
        .unq-foot-dot{width:3px; height:3px; border-radius:999px; background:var(--ouro); opacity:.6}
        .unq-foot-copy{font-size:11px; color:var(--c300); margin:8px 0 0}

        .unq-spin{
          width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
          border-radius:999px; animation:unqSpin .7s linear infinite;
        }
        @keyframes unqSpin{to{transform:rotate(360deg)}}
        @keyframes unqPhrase{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

        /* ---- responsivo: igual ao painel (arte some, logo no topo do form) ---- */
        @media (max-width:900px){
          .unq-login{grid-template-columns:1fr}
          .unq-art{display:none}
          .unq-form{height:100dvh; padding:34px 22px}
          .unq-inner{max-width:420px}
          .unq-form-logo{display:block; width:100px; margin:0 auto 18px}
          .unq-inner h1{text-align:center}
          .unq-sub{text-align:center}
        }

        /* ===== [30/07/2026 Higor] MODO ESCURO da tela de login — a tela seguia
           sempre clara, ignorando o tema. Paleta espelhada do painel Unique VPS
           (o [data-theme="dark"] do styles.css de la), mesma referencia do resto
           do sistema. O claro acima fica INTOCADO (aprovado em 22/07). ===== */
        [data-theme="dark"] .unq-login{
          --ouro-btn:#A07C34; --ouro-deep:#E0BC72;
          --text-strong:#F4EFE4; --tinta:#E9E3D6; --c700:#AEA491; --c300:#7C7362;
          --creme:#141009; --creme2:#0D0B06; --branco:#1B1710; --linha:#2C261B;
          color-scheme:dark;
        }
        [data-theme="dark"] .unq-login .unq-form{
          background:
            radial-gradient(52% 38% at 88% 4%, rgba(235,198,94,.10), transparent 68%),
            radial-gradient(46% 40% at 4% 96%, rgba(165,133,70,.08), transparent 70%),
            radial-gradient(38% 30% at 96% 78%, rgba(197,165,114,.06), transparent 72%),
            linear-gradient(158deg,#16120B 0%,#110E08 42%,#0D0B06 100%);
        }
        [data-theme="dark"] .unq-login .unq-tabs{
          background:linear-gradient(180deg,rgba(36,29,17,.85),rgba(27,23,16,.75));
          box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
        }
        [data-theme="dark"] .unq-login .unq-tab{color:var(--c700)}
        [data-theme="dark"] .unq-login .unq-tab.on{
          background:#241D11; color:var(--ouro-deep);
          box-shadow:0 2px 7px -2px rgba(0,0,0,.5), 0 0 0 1px rgba(165,133,70,.22);
        }
        [data-theme="dark"] .unq-login .unq-tab:hover:not(.on){color:var(--tinta); background:rgba(255,255,255,.05)}
        [data-theme="dark"] .unq-login .unq-inp{background:rgba(27,23,16,.72)}
        [data-theme="dark"] .unq-login .unq-select{background:rgba(27,23,16,.72)}
        [data-theme="dark"] .unq-login .unq-inp input:-webkit-autofill,
        [data-theme="dark"] .unq-login .unq-inp input:-webkit-autofill:hover,
        [data-theme="dark"] .unq-login .unq-inp input:-webkit-autofill:focus{
          -webkit-box-shadow:0 0 0 1000px var(--branco) inset;
        }
        [data-theme="dark"] .unq-login .unq-error{background:rgba(163,49,42,.16); color:#E59B95}
        [data-theme="dark"] .unq-login .unq-field-error{color:#E59B95}
      

/* ===== Painel VPS — acréscimos (05/10) =====
   Logos da Unique ocupam a MESMA caixa dos logos COPA (mesma largura e altura), então tudo abaixo fica na mesma posição. */
.unq-marca img.unq-marca-unique{aspect-ratio:1100/366; object-fit:contain; object-position:left center}
.unq-form-logo.unq-logo-unique{aspect-ratio:1100/367; object-fit:contain; object-position:center}
.unq-login .eye .eye-closed{display:none}
.unq-login .eye.on .eye-open{display:none}
.unq-login .eye.on .eye-closed{display:block}
.lg-esqueci{display:block; font-size:12px; color:var(--c700); margin:6px 0 0}
.lg-esqueci[hidden]{display:none}
/* convite (definir senha): mensagens e tela final que o app.js escreve com as classes antigas */
.unq-login .error{background:#fdeceb; color:#a3312a; border-radius:10px; padding:11px 14px; font-size:13px; font-weight:500; margin:0 0 16px}
.unq-login .error.ok{background:rgba(31,122,77,.10); color:#1f7a4d}
[data-theme="dark"] .unq-login .error{background:rgba(163,49,42,.16); color:#E59B95}
.unq-login #spwDone h1{font-weight:700; font-size:29px; letter-spacing:-.01em; color:var(--text-strong); margin:0; line-height:1.25}
.unq-login #spwDone .sub{color:var(--c700); font-size:14px; margin:6px 0 30px}
.unq-login #spwDone .btn-ouro{display:flex; align-items:center; justify-content:center; width:100%; text-decoration:none; background:#fff; color:#1f2937; border:1px solid #d1d5db;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:14px; padding:16px; border-radius:999px; box-shadow:0 10px 26px -12px rgba(122,90,35,.55)}
/* mesma base do comercial (preflight do Tailwind): campos e botões herdam fonte e altura de linha */
:where(.unq-login) :where(button,input){font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0}
:where(.unq-login) :where(button){padding:0;background:transparent}