/* Studio composition, adapted to System branding and native account forms. */
@font-face{font-family:Geist;src:url('/assets/panel-reference/geist.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Crizol Brand';src:url('/assets/panel-reference/dm-sans-brand.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#111216;--bg1:#1a1d23;--bg2:#252931;--text:#e9ecf2;--text2:#9da5b4;--text3:#778496;--border:#ffffff1c;--teal:#83c6e7;--teal-border:#83c6e740;--login-height:100dvh;font-synthesis:none}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{height:var(--login-height);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#111216;color:var(--text);font:14px/1.5 Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a,button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:wait}button,a{-webkit-tap-highlight-color:transparent}svg{flex-shrink:0;vertical-align:middle}a:focus-visible,button:focus-visible{outline:2px solid #8ad8fa;outline-offset:4px}button:disabled{opacity:.58}[hidden],.hidden{display:none!important}
.login-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 15% 20%,#00a8ff14,transparent 55%),radial-gradient(ellipse at 90% 85%,#2685c218,transparent 52%),linear-gradient(125deg,#10171f,#16222e 55%,#0c1118);z-index:0}
.login-scene i{position:absolute;background:linear-gradient(130deg,#2e4357,#182a3a 35%,#0d1722 74%);border:1px solid #83c6e710;border-radius:36px;box-shadow:inset 1px 1px #ffffff08,25px 28px 60px #0007;transform:rotate(-27deg);width:480px;height:230px}
.login-scene i:nth-child(1){left:-210px;top:12%}.login-scene i:nth-child(2){right:-170px;top:1%;width:600px;height:270px}.login-scene i:nth-child(3){left:10%;bottom:-215px;width:600px;height:390px}.login-scene i:nth-child(4){right:-190px;bottom:-80px;width:450px;height:300px}.login-scene i:nth-child(5){left:34%;top:-245px;width:460px;height:340px}
.login-header,.panel-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.login-header{padding:24px 4.4vw;min-height:86px;padding-top:max(24px,env(safe-area-inset-top))}
.login-brand{display:flex;align-items:center;gap:14px;min-width:0;color:#ededf2}.login-brand img{width:38px;height:38px;object-fit:contain;flex:none}.login-brand span{font:300 22px/1.2 'Crizol Brand',sans-serif;letter-spacing:.12em;white-space:nowrap}
.home-link{display:flex;align-items:center;gap:9px;color:#9297a4;font-size:12px}.home-link svg{width:16px;height:16px}.home-link:hover{color:#e2e9f1}
.page{position:relative;z-index:1;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:24px;isolation:isolate}
.auth-glass{display:grid;grid-template-columns:1.05fr 1fr;width:min(980px,100%);height:min(550px,100%);min-height:0;max-height:100%;overflow:hidden;border:1px solid #ffffff23;border-radius:28px;background:linear-gradient(118deg,#272a30fa,#1b1e25fc);box-shadow:0 28px 100px #0006,inset 0 1px #ffffff0a}
.panel-right{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:0;overflow:hidden;padding:52px 50px 36px;border-right:1px solid #ffffff15;background:linear-gradient(135deg,#ffffff05,#ffffff01)}
.eyebrow{display:block;font-size:10px;line-height:1.4;font-weight:600;letter-spacing:2.1px;color:#9cacc0}.visual-tagline{font-size:clamp(34px,3.2vw,46px);line-height:1.13;letter-spacing:-1.8px;font-weight:560;margin:20px 0}.visual-tagline span{color:#b9c0ce}.visual-sub{font-size:14px;line-height:1.7;color:#9da5b4;margin-bottom:27px}.visual-note{display:flex;align-items:center;gap:8px;margin-top:36px;font-size:11px;line-height:1.4;color:#858f9f}.visual-note>span{width:5px;height:5px;background:#6bcfff;border-radius:50%;flex:none}
.orbit{position:absolute;top:42px;right:48px;width:112px;height:112px;border-radius:50%;border:1px solid #ffffff26;box-shadow:inset 0 0 20px #ffffff03;transform:rotate(-30deg)}.orbit>div{position:absolute;inset:14px;border:1px solid #ffffff35;border-radius:50%;box-shadow:inset -3px -3px 14px #48bfff08}.orbit>span{position:absolute;width:24px;height:24px;right:5px;top:5px;background:linear-gradient(140deg,#d4d9e4,#727b8b 60%,#2b3240);box-shadow:0 3px 14px #0005;border-radius:50%}
.operation-chart{height:34px;width:205px;display:flex;align-items:flex-end;gap:9px;position:relative;opacity:.75}.operation-chart>span{flex:1;height:30%;border-radius:3px;background:linear-gradient(#65768b66,#35465e55)}.operation-chart>span:nth-child(2){height:45%}.operation-chart>span:nth-child(3){height:38%}.operation-chart>span:nth-child(4){height:66%}.operation-chart>span:nth-child(5){height:58%}.operation-chart>span:nth-child(6){height:83%}.operation-chart>span:nth-child(7){height:100%}.operation-chart svg{position:absolute;inset:0;width:100%;height:100%;color:#95d9fa;overflow:visible}
.panel-left{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;overflow:hidden;padding:38px 48px 28px}.form-card{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#65748755 transparent;padding:3px;margin:-3px}
.form-eyebrow{font-size:9px;letter-spacing:1.8px;color:#8594aa}.form-title{font-size:26px;font-weight:550;letter-spacing:-.9px;line-height:1.25;margin:12px 0 10px}.form-hint,.reset-desc{font-size:12px;line-height:1.7;color:#9da5b4;margin:0 0 22px}.field+.field{margin-top:16px}.field>label{display:block;color:#c4cad5;font-size:12px;line-height:1.4;font-weight:500;margin:0 0 8px}
.input-wrap{display:flex;align-items:center;gap:11px;min-width:0;height:47px;padding:0 14px;border:1px solid #ffffff1c;border-radius:12px;background:linear-gradient(110deg,#080b1033,#ffffff02);color:#727d90;box-shadow:inset 0 1px 2px #0002;transition:border-color .15s,box-shadow .15s}.input-wrap:focus-within{border-color:#7bcfff88;box-shadow:0 0 0 3px #7bcfff0a}.input-icon{display:flex;align-items:center;flex:none}.input-icon svg,.eye-btn svg{width:17px;height:17px;stroke-width:1.5}
.input-wrap input{border:0!important;outline:none!important;min-width:0;width:100%;height:100%;padding:0;background:transparent;color:#f4f6fc;font:13px/normal Geist,sans-serif;border-radius:0;box-shadow:none}.input-wrap input::placeholder{color:#6e7889;opacity:1}.input-wrap input:autofill{color:#f4f6fc;caret-color:#f4f6fc;box-shadow:0 0 0 80px #1d2128 inset!important}.input-wrap input:-webkit-autofill,.input-wrap input:-webkit-autofill:hover,.input-wrap input:-webkit-autofill:focus{-webkit-text-fill-color:#f4f6fc!important;caret-color:#f4f6fc;box-shadow:0 0 0 80px #1d2128 inset!important}
.eye-btn{padding:7px;margin-right:-7px;background:none;border:0;color:#8792a5;display:grid;place-items:center;border-radius:6px;min-width:32px;height:32px}.eye-btn:hover{color:#dbe4f2}.eye-btn:focus-visible{outline-offset:1px}
.forgot-row{display:flex;justify-content:flex-end;margin-top:12px;font-size:11px;line-height:1.5;color:#9aa4b5}.forgot-row a:hover{text-decoration:underline;color:#d7e2f2}
.btn-login{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:51px;margin-top:22px;padding:13px 18px;border-radius:12px;border:1px solid #ffffff26;color:#e3f3fc;background:linear-gradient(120deg,#3c739688,#447b9944);box-shadow:inset 0 1px #ffffff0f,0 5px 12px #0002;font-weight:550;font-size:13px;line-height:1.4;transition:background .15s}.btn-login:hover{background:linear-gradient(120deg,#4c95bf99,#548daa77)}.button-arrow{width:17px;height:17px;color:#b0def5}.btn-login:active{background:#366780}.spinner{display:none;width:18px;height:18px;border:2px solid #ffffff30;border-top-color:#b0def5;border-radius:50%;animation:login-spin .7s linear infinite;position:absolute;left:calc(50% - 9px);top:calc(50% - 9px)}.btn-login.loading .spinner{display:block}.btn-login.loading :is(.btn-text,.button-arrow){visibility:hidden}
#login-error,#reset-error{display:none;padding:10px 12px;margin-top:13px;border:1px solid #f49eab30;border-radius:9px;background:#f49eab08;color:#ffc3c3;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.or-signup{display:block;margin-top:23px;font-size:11px;line-height:1.5;color:#8f98aa;text-align:center}.or-signup a{color:#ccd6e7;margin-left:3px}.or-signup a:hover{text-decoration:underline}.access-note{display:flex;align-items:center;justify-content:center;gap:7px;flex:none;border-top:1px solid #ffffff0c;font-size:10px;line-height:1.5;color:#727f91;margin-top:23px;padding-top:18px}.access-note svg{width:13px;height:13px}
.btn-back{display:block;width:100%;min-height:34px;margin-top:14px;border:0;border-radius:7px;background:transparent;color:#b4bfce;font-size:12px}.btn-back:hover{background:#ffffff06;color:#e2e9f1}.reset-success{display:none;text-align:center;padding:12px 0}.reset-success-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 20px;border:1px solid #8ad8fa38;border-radius:18px;color:#a6d9f0;background:#8ad8fa0a}.reset-success h3{font-size:22px;line-height:1.3;letter-spacing:-.5px;font-weight:550;margin-bottom:14px}.reset-success p{font-size:12px;line-height:1.7;color:#9da5b4;margin-bottom:9px}
.panel-footer{justify-content:flex-end;font-size:11px;line-height:1.5;color:#77808e;padding:14px 4.4vw;padding-bottom:max(18px,env(safe-area-inset-bottom))}.panel-footer nav{display:flex;gap:24px;align-items:center;justify-content:center}.panel-footer a:hover{color:#ccd4e0}
@keyframes login-spin{to{transform:rotate(360deg)}}
@media(max-height:720px){.login-header{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:16px;min-height:70px}.page{padding:12px 24px}.panel-left{padding:26px 38px 22px}.panel-right{padding:30px 38px}.orbit{width:92px;height:92px;top:30px;right:36px}.visual-tagline{font-size:38px;margin:16px 0}.visual-note{margin-top:26px}.form-title{font-size:24px;margin:9px 0}.form-hint,.reset-desc{margin-bottom:17px}.field+.field{margin-top:13px}.input-wrap{height:43px}.btn-login{min-height:47px;margin-top:18px}.or-signup{margin-top:18px}.access-note{margin-top:19px;padding-top:16px}.panel-footer{padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media(max-height:640px){.access-note{display:none}.form-eyebrow{display:none}.visual-tagline{font-size:35px}.visual-sub{font-size:13px}.form-hint{margin-bottom:16px}}
@media(max-width:1000px) and (min-width:761px){.panel-left{padding-left:34px;padding-right:34px}.panel-right{padding-left:34px;padding-right:34px}.visual-tagline{font-size:38px}}
@media(max-width:760px){.login-header{min-height:64px;padding:18px 24px;padding-top:max(18px,env(safe-area-inset-top))}.login-brand{gap:10px}.login-brand img{width:32px;height:32px}.login-brand span{font-size:18px}.home-link span{display:none}.page{padding:12px 20px}.auth-glass{width:min(460px,100%);height:min(620px,100%);grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);border-radius:24px}.panel-right{padding:24px 28px 21px;border-right:0;border-bottom:1px solid #ffffff12;min-height:0}.panel-right .eyebrow{font-size:8px;letter-spacing:1.5px}.visual-tagline{font-size:29px;letter-spacing:-1px;line-height:1.1;margin:12px 0 0}.visual-tagline br{display:none}.visual-tagline span{display:block}.visual-sub,.operation-chart,.visual-note{display:none}.orbit{width:70px;height:70px;right:25px;top:29px}.orbit>div{inset:9px}.orbit>span{width:16px;height:16px;top:3px;right:3px}.panel-left{padding:25px 28px 23px}.form-title{font-size:25px}.form-eyebrow{display:none}.form-hint{margin-bottom:20px}.access-note{margin-top:21px;padding-top:17px}.panel-footer{justify-content:center;font-size:10px;padding:12px 16px;padding-bottom:max(14px,env(safe-area-inset-bottom))}.panel-footer nav{gap:22px}.login-scene i{opacity:.6}}
@media(max-width:760px) and (max-height:720px){.login-header{min-height:58px;padding:14px 20px;padding-top:max(14px,env(safe-area-inset-top))}.page{padding:8px 16px}.auth-glass{height:min(490px,100%);grid-template-rows:minmax(0,1fr)}.panel-right{display:none}.panel-left{padding:24px}.form-title{font-size:24px}.form-hint{margin-bottom:18px}.access-note{display:none}}
@media(max-width:360px){.login-header{padding-left:16px;padding-right:16px}.login-brand img{width:29px;height:29px}.login-brand span{font-size:16px}.panel-left{padding-left:22px;padding-right:22px}.form-title{font-size:23px}.panel-footer nav{gap:18px}}
@media(max-height:520px){.login-header{padding:8px 4.4vw;min-height:42px}.login-brand img{width:26px;height:26px}.login-brand span{font-size:16px}.home-link{font-size:11px}.page{padding:6px 16px}.auth-glass{width:min(460px,100%);height:min(490px,100%);grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);border-radius:18px}.panel-right{display:none}.panel-left{padding:14px 22px}.form-eyebrow,.form-hint,.access-note{display:none}.form-title{font-size:22px;line-height:1.25;margin:0 0 13px}.field>label{font-size:11px;margin-bottom:4px}.field+.field{margin-top:11px}.input-wrap{height:38px}.input-wrap input{font-size:12px}.forgot-row{margin-top:8px;font-size:10px}.btn-login{min-height:40px;padding:8px 14px;margin-top:12px;font-size:12px}.or-signup{margin-top:12px;font-size:10px}.panel-footer{font-size:10px;padding:6px 16px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.reset-desc{font-size:11px;margin-bottom:13px}.reset-success{padding:0}.reset-success-icon{width:42px;height:42px;margin-bottom:10px}.reset-success-icon svg{width:24px;height:24px}.reset-success h3{font-size:19px;margin-bottom:9px}.reset-success p{font-size:11px}}
.login-keyboard .panel-right,.login-keyboard .panel-footer,.login-keyboard .access-note{display:none}.login-keyboard .auth-glass{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);width:min(460px,100%)}
.login-has-error :is(.access-note,.form-hint){display:none}.login-has-error .or-signup{margin-top:12px}.login-has-error .btn-login{margin-top:12px}
.reset-success:focus{outline:none}
@media(max-width:760px) and (min-height:721px){.auth-glass{height:min(650px,100%)}}
@media(max-width:760px) and (max-height:720px){.login-has-error .panel-left{padding-top:20px;padding-bottom:20px}}
@media(max-height:520px){.login-has-error .panel-left{padding-top:14px;padding-bottom:14px}}
@media(max-height:520px) and (min-width:520px){.auth-glass{width:min(700px,100%)}#login-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}#login-form>.field+.field{margin-top:0}#login-form>:is(.forgot-row,#login-error,#login-btn){grid-column:1/-1}}
@media(max-height:350px) and (min-width:520px){.panel-left,.login-has-error .panel-left{padding:6px 22px}.form-title{font-size:19px;line-height:1.2;margin-bottom:8px}.forgot-row{margin-top:4px}.btn-login,.login-has-error .btn-login{min-height:36px;margin-top:8px}.or-signup,.login-has-error .or-signup{margin-top:6px}#login-error{font-size:11px;padding:8px 12px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Native subscription blocker, retained from login.html. */
/* ── Bloqueio de assinatura pendente ──────────────────────────────────
       Quem se cadastrou e nao concluiu o pagamento para aqui, no login. Antes
       entrava no painel e so via um aviso depois de tudo carregado. */
    .pw-overlay {
      display: none; position: fixed; inset: 0; z-index: 9000;
      align-items: center; justify-content: center; padding: 20px;
      background: rgba(4,6,9,.88); backdrop-filter: blur(10px);
      overflow-y: auto;
    }
    .pw-overlay.open { display: flex; }
    .pw-card {
      width: min(440px, 100%); margin: auto;
      background: linear-gradient(180deg, #101418 0%, #0b0e11 100%);
      border: 1px solid rgba(255,255,255,.09); border-radius: 20px;
      box-shadow: 0 34px 90px rgba(0,0,0,.66);
      padding: 26px 24px 22px;
      animation: pwIn .26s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes pwIn { from { opacity:0; transform: translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
    .pw-head { text-align: center; margin-bottom: 20px; }
    .pw-ic {
      width: 50px; height: 50px; margin: 0 auto 14px; display: grid; place-items: center;
      border-radius: 15px; background: rgba(245,180,60,.11);
      border: 1px solid rgba(245,180,60,.3); color: #f5b43c;
    }
    .pw-head h2 { font-size: 19px; font-weight: 700; color: #f2f5f9; letter-spacing: -.02em; }
    .pw-head p { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--text2); }

    /* card do plano escolhido, no mesmo desenho da pagina de precos */
    .pw-plan {
      position: relative; border: 1px solid var(--teal-border); border-radius: 15px;
      background: linear-gradient(165deg, rgba(0,168,255,.08) 0%, rgba(0,168,255,.02) 55%, transparent 100%);
      padding: 17px 17px 15px; margin-bottom: 14px; overflow: hidden;
    }
    .pw-plan-tag {
      position: absolute; top: 0; right: 0;
      padding: 4px 11px; border-radius: 0 14px 0 10px;
      background: var(--teal); color: #04212f; font-size: 8.5px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
    }
    .pw-plan-label { font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text3); }
    .pw-plan-name { margin-top: 4px; font-size: 21px; font-weight: 700; color: #f4f7fa; letter-spacing: -.025em; }
    .pw-plan-price { display: flex; align-items: baseline; gap: 3px; margin-top: 6px; }
    .pw-plan-price b { font-size: 25px; font-weight: 700; color: #fff; letter-spacing: -.03em; }
    .pw-plan-price span { font-size: 12px; color: var(--text2); }
    .pw-plan-desc { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text2); }
    .pw-plan-feats { list-style: none; margin-top: 12px; display: grid; gap: 7px; }
    .pw-plan-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text); }
    .pw-plan-feats svg { flex: 0 0 auto; margin-top: 1px; color: var(--teal); }

    /* conta que vai assinar, so pra confirmar */
    .pw-account {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 14px; margin-bottom: 16px;
      border: 1px solid rgba(0,168,255,.22); border-radius: 13px; background: #0d1d27;
    }
    .pw-account-av {
      width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
      border: 1px solid rgba(0,168,255,.25); border-radius: 11px;
      background: #122c3d; color: #74d0ff; font-size: 15px; font-weight: 700;
    }
    .pw-account-data { min-width: 0; flex: 1; }
    .pw-account-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #71808d; }
    .pw-account-name { margin-top: 3px; font-size: 13px; font-weight: 700; color: #eaf1f7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pw-account-mail { margin-top: 1px; font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pw-account-ok {
      display: flex; align-items: center; gap: 5px; flex: 0 0 auto; height: 26px; padding: 0 9px;
      border: 1px solid rgba(34,197,94,.2); border-radius: 999px;
      background: rgba(34,197,94,.08); color: #43dd7d; font-size: 10px; font-weight: 700;
    }

    .pw-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; min-height: 46px; border: 0; border-radius: 11px;
      background: var(--teal); color: #04212f;
      font-family: 'Geist', sans-serif; font-size: 13.5px; font-weight: 700;
      cursor: pointer; transition: filter .16s, transform .16s;
    }
    .pw-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .pw-ghost {
      width: 100%; min-height: 38px; margin-top: 9px;
      border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: transparent;
      color: var(--text2); font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: background .16s, color .16s;
    }
    .pw-ghost:hover { background: rgba(255,255,255,.05); color: var(--text); }
    .pw-note { margin-top: 12px; text-align: center; font-size: 10.5px; color: var(--text3); line-height: 1.5; }
    @media (max-width: 480px) { .pw-card { padding: 22px 18px 18px; } .pw-head h2 { font-size: 17px; } }

/* Fit the native blocker to the same access surface. */
.pw-overlay{height:var(--login-height);padding:12px;overflow:hidden;background:#080b10e8;backdrop-filter:none}
.pw-card{max-height:calc(var(--login-height) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:linear-gradient(118deg,#272a30fa,#1b1e25fc);border-color:#ffffff23;box-shadow:0 28px 100px #0006;animation:none}
.pw-head h2,.pw-plan-name,.pw-plan-price b,.pw-account-name{font-weight:550}
.pw-account{background:#1c2c38aa;border-color:#83c6e730}.pw-account-av{background:#304b60aa;border-color:#83c6e735;color:#b0def5}
.pw-cta{padding:11px 14px;min-height:46px;line-height:1.4;font-size:13px;font-weight:550;color:#e3f3fc;background:linear-gradient(120deg,#3c739688,#447b9944);border:1px solid #ffffff26;box-shadow:inset 0 1px #ffffff0f}
.pw-cta:hover{filter:brightness(1.1);transform:none}.pw-note{color:#8d98aa}.pw-ghost{font-weight:500}