:root{
 --blue:#063764;
 --blue2:#07518c;
 --gold:#d8a33b;
 --gold2:#f3c868;
 --bg:#ffffff;
 --text:#102337;
 --muted:#6c7a89;
 --line:#e5e9ee;
}

*{
 box-sizing:border-box;
 -webkit-tap-highlight-color:transparent;
}

html{
 touch-action:manipulation;
}

body{
 margin:0;
 font-family:Arial,Helvetica,sans-serif;
 background:#fff;
 color:var(--text);
}

button,input,select{
 font:inherit;
}

button{
 cursor:pointer;
}

header{
 height:74px;
 padding:12px 18px;
 border-bottom:1px solid var(--line);
 display:flex;
 align-items:center;
 justify-content:space-between;
 background:#fff;
 position:sticky;
 top:0;
 z-index:20;
}

.brand{
 display:flex;
 align-items:center;
 gap:10px;
}

.brand img{
 width:48px;
 height:48px;
 object-fit:contain;
}

.brand b{
 color:var(--blue);
 font-size:19px;
}

.brand small{
 display:block;
 color:var(--gold);
 margin-top:2px;
}

main{
 max-width:1050px;
 margin:auto;
 padding:20px 16px 100px;
}

.card,.panel{
 background:#fff;
 border:1px solid var(--line);
 border-radius:20px;
 padding:20px;
 box-shadow:0 8px 30px rgba(0,34,68,.06);
 margin-bottom:16px;
}

.authLogo{
 display:block;
 width:190px;
 max-height:160px;
 object-fit:contain;
 margin:0 auto 12px;
}

h1,h2,h3{
 color:var(--blue);
}

input,select{
 width:100%;
 min-height:50px;
 padding:0 14px;
 border:1px solid #d7dee6;
 border-radius:13px;
 background:#fff;
 margin:6px 0;
 outline:none;
}

input:focus,select:focus{
 border-color:var(--gold);
 box-shadow:0 0 0 3px rgba(216,163,59,.15);
}

.primary{
 width:100%;
 min-height:50px;
 border:0;
 border-radius:14px;
 margin-top:9px;
 color:#fff;
 font-weight:800;
 background:linear-gradient(135deg,var(--blue),var(--blue2));
 box-shadow:0 8px 20px rgba(6,55,100,.18);
}

.gold{
 background:linear-gradient(135deg,#bd8422,var(--gold2));
 color:#102337;
}

.ghost{
 border:1px solid #d8e0e8;
 background:#fff;
 color:var(--blue);
 border-radius:12px;
 padding:10px 13px;
 font-weight:700;
}

.hide{
 display:none!important;
}

.info{
 padding:14px;
 border-radius:14px;
 background:#f5f8fb;
 border-left:4px solid var(--gold);
 color:#415466;
}

.welcome{
 background:linear-gradient(135deg,#052d52,#07518c);
 color:#fff;
 border-radius:22px;
 padding:23px;
 margin-bottom:16px;
 position:relative;
 overflow:hidden;
}

.welcome h2{
 color:#fff;
 margin:0 0 5px;
}

.welcome small{
 color:#d8e8f6;
}

.balance{
 margin-top:25px;
}

.balance small{
 display:block;
}

.balance strong{
 display:block;
 font-size:32px;
 margin-top:5px;
}

.actions{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:11px;
}

.action{
 min-height:112px;
 border:1px solid var(--line);
 background:#fff;
 border-radius:18px;
 padding:12px 8px;
 color:var(--blue);
 font-weight:800;
}

.action i{
 width:45px;
 height:45px;
 margin:0 auto 8px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:14px;
 background:#eef5fa;
 color:var(--gold);
 font-size:22px;
 font-style:normal;
}

.row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 border-bottom:1px solid var(--line);
 padding:13px 0;
}

.row:last-child{
 border:0;
}

.bottomNav{
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 background:#fff;
 border-top:1px solid var(--line);
 min-height:68px;
 display:flex;
 align-items:center;
 justify-content:space-around;
 z-index:30;
}

.bottomNav button{
 border:0;
 background:none;
 color:#66798a;
 font-size:12px;
 font-weight:700;
}

.bottomNav button b{
 display:block;
 font-size:21px;
 color:var(--blue);
 margin-bottom:3px;
}

.tokenBox{
 text-align:center;
 padding:25px 18px;
}

.tokenIcon{
 width:72px;
 height:72px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 14px;
 font-size:32px;
 background:#fff5da;
 color:#bd8422;
}

.adminQuick{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:10px;
 margin-bottom:16px;
}

.adminQuick button{
 min-height:70px;
}

.danger{
 border:1px solid #e0a2a2;
 color:#a62929;
 background:#fff;
 border-radius:10px;
 padding:8px 10px;
}

@media(max-width:600px){
 .actions{
   grid-template-columns:repeat(3,1fr);
 }
 .action{
   min-height:105px;
   font-size:12px;
 }
 .adminQuick{
   grid-template-columns:repeat(2,1fr);
 }
}

/* ==========================================
   FINZORA - CADASTRO / LOADING
   ========================================== */

.finzoraAuthSpinner{
  width:42px;
  height:42px;
  margin:0 auto 18px;
  border-radius:50%;
  border:4px solid #e7e7e7;
  border-top-color:#062f63;
  animation:finzoraSpin .7s linear infinite;
}

@keyframes finzoraSpin{
  to{
    transform:rotate(360deg);
  }
}

#createAccountArea .primary{
  width:100%;
}

#registerArea{
  margin-top:20px;
}

#registerArea.hide{
  display:none !important;
}


/* ==========================================
   FINZORA - MODAL
   ========================================== */

.finzoraModal{
  position:fixed;
  inset:0;
  background:rgba(4,18,38,.55);
  backdrop-filter:blur(7px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:999999;
}

.finzoraModal.show{
  display:flex;
}

.finzoraModalCard{
  width:min(100%,390px);
  background:#fff;
  border-radius:26px;
  padding:30px 24px 24px;
  text-align:center;
  box-shadow:0 25px 70px rgba(0,25,65,.25);
  animation:finzoraModalIn .22s ease-out;
}

.finzoraModalIcon{
  width:68px;
  height:68px;
  margin:0 auto 18px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#062f63,#0b5597);
  color:#d6a846;
  font-size:34px;
  font-weight:900;
}

.finzoraModalCard h3{
  margin:0 0 10px;
  color:#062f63;
  font-size:22px;
}

.finzoraModalCard p{
  margin:0 0 22px;
  color:#647184;
  line-height:1.5;
}

.finzoraModalCard .primary{
  width:100%;
}

@keyframes finzoraModalIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.97);
  }

  to{
    opacity:1;
    transform:none;
  }
}



/* =========================================================
   FINZORA - IDENTIDADE / CRÉDITO
   ========================================================= */

#vstatus.verifiedGreen,
.verifiedGreen{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:7px;
  padding:7px 12px;
  border-radius:999px;
  background:#e9f9ef;
  border:1px solid #bce8ca;
  color:#16823d !important;
  font-weight:800;
  box-shadow:0 5px 15px rgba(22,130,61,.10);
}

.creditLimitBadge{
  margin:12px 0 18px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#f5f8fc,#eef4fb);
  border:1px solid #dbe5f0;
  color:#536276;
}

.creditLimitBadge b{
  color:#062f63;
}

.adminCreditRow{
  gap:12px;
}

.creditAdminButtons{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
}

.creditStatus{
  display:inline-block;
  margin-top:6px;
  padding:5px 9px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

.creditStatus-pending{
  background:#fff5d8;
  color:#9a6900;
}

.creditStatus-approved{
  background:#e7f4ff;
  color:#0964a5;
}

.creditStatus-rejected{
  background:#ffeded;
  color:#b62828;
}

.creditStatus-released{
  background:#e8f9ee;
  color:#16823d;
}

.creditReleased{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border-radius:12px;
  background:#e8f9ee;
  color:#16823d;
  font-weight:800;
}



/* ==========================================
   FINZORA LOADING
========================================== */

.finzoraLoading{
 position:fixed;
 inset:0;
 z-index:9999999;
 background:rgba(4,18,38,.55);
 backdrop-filter:blur(8px);
 display:none;
 align-items:center;
 justify-content:center;
 padding:25px;
}

.finzoraLoading.show{
 display:flex;
}

.finzoraLoadingCard{
 width:min(100%,330px);
 background:#fff;
 border-radius:26px;
 padding:32px 25px;
 text-align:center;
 box-shadow:0 25px 70px rgba(0,25,65,.25);
}

.finzoraLoadingCard b,
.finzoraLoadingCard small{
 display:block;
}

.finzoraLoadingCard small{
 margin-top:6px;
 color:#6b7788;
}

.finzoraLoadingSpinner{
 width:48px;
 height:48px;
 margin:0 auto 18px;
 border-radius:50%;
 border:4px solid #e8edf3;
 border-top-color:#0b5597;
 animation:finzoraSpin .75s linear infinite;
}

@keyframes finzoraSpin{
 to{transform:rotate(360deg)}
}


/* ==========================================
   ÍCONES PERSONALIZÁVEIS
========================================== */

.action i.iconNoBackground{
 background:transparent !important;
 box-shadow:none !important;
 border:none !important;
}

.tokenStatus{
 padding:16px;
 border-radius:16px;
 background:#f3f6f9;
 color:#657184;
 font-weight:700;
 margin-bottom:16px;
}

.tokenStatus.tokenActive{
 background:#edf8f1;
 color:#147a3f;
}

.uiEditorRow{
 margin:12px 0;
}

.uiEditorRow label{
 display:block;
 margin-top:12px;
 margin-bottom:5px;
 font-size:13px;
 font-weight:700;
}

.adminCheck{
 display:flex !important;
 align-items:center;
 gap:9px;
}

.adminCheck input{
 width:auto !important;
 margin:0;
}



/* FINZORA - ÍCONES POR IMAGEM */

.finzoraActionIconImage{
 width:28px;
 height:28px;
 display:block;
 object-fit:contain;
 border-radius:7px;
}

.action i.iconNoBackground .finzoraActionIconImage{
 width:32px;
 height:32px;
 border-radius:0;
}

.adminIconPreview{
 width:58px;
 height:58px;
 margin:8px 0 12px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:16px;
 background:#f3f6f9;
 border:1px solid #e4e9ef;
 overflow:hidden;
 font-size:28px;
 font-weight:800;
 color:#0b5597;
}

.adminIconPreview img{
 width:38px;
 height:38px;
 object-fit:contain;
 display:block;
}

.adminIconPreview small{
 padding:5px;
 font-size:9px;
 text-align:center;
 color:#7a8492;
}



/* =====================================================
   APLICATIVO FINZORA
===================================================== */

.finzoraAppClient{
 margin-top:18px;
}

.finzoraAppCard{
 display:flex;
 gap:15px;
 align-items:flex-start;
 padding:18px;
 border:1px solid #e4e9ef;
 border-radius:20px;
 background:#fff;
 box-shadow:0 8px 30px rgba(8,45,85,.06);
}

.finzoraAppIcon{
 width:52px;
 height:52px;
 min-width:52px;
 border-radius:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#0b5597;
 color:#fff;
 font-size:25px;
 font-weight:800;
}

.finzoraAppContent{
 flex:1;
 min-width:0;
}

.finzoraAppContent p{
 margin:7px 0 13px;
 color:#667384;
}

.finzoraDownloadButton{
 display:block;
 text-align:center;
 text-decoration:none;
 margin-top:10px;
}

.finzoraAppNotice{
 display:block;
 margin-top:13px;
 line-height:1.45;
 color:#788494;
}

.finzoraUploadCard label{
 display:block;
 margin:14px 0 6px;
 font-size:13px;
 font-weight:700;
}

.finzoraUploadCard input[type="file"]{
 padding:12px;
 background:#f6f8fa;
 border-radius:12px;
}

.finzoraUploadCard button{
 width:100%;
 margin-top:15px;
}

.finzoraAdminAppStatus{
 display:flex;
 gap:15px;
 align-items:center;
}


/* ===== FINZORA - BOTÃO BAIXAR APLICATIVO ===== */
#token a.primary,
#token .primary[href],
#token button.primary,
.finzoraAppCard a,
.finzoraAppCard .primary,
.finzora-app-card a,
.finzora-app-card .primary {
  display:flex !important;
  width:100% !important;
  max-width:100% !important;
  min-height:54px !important;
  box-sizing:border-box !important;
  margin:18px 0 12px !important;
  padding:14px 18px !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  text-decoration:none !important;
  line-height:1.2 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  white-space:normal !important;
  font-weight:700 !important;
}

#token,
#token .card,
.finzoraAppCard,
.finzora-app-card {
  box-sizing:border-box !important;
  max-width:100% !important;
}

#token * {
  box-sizing:border-box;
}

@media (max-width:600px){
  #token a.primary,
  #token .primary[href],
  #token button.primary,
  .finzoraAppCard a,
  .finzoraAppCard .primary,
  .finzora-app-card a,
  .finzora-app-card .primary {
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* BOTÃO ATUALIZAR ADMIN */
#adminRefreshPage{
 position:fixed;
 right:16px;
 top:16px;
 z-index:9999;
 width:auto;
 padding:11px 16px;
 border:0;
 border-radius:12px;
 background:#073b83;
 color:#fff;
 font-weight:700;
 font-size:14px;
 cursor:pointer;
 box-shadow:0 5px 18px rgba(0,0,0,.15);
}

#adminRefreshPage:active{
 transform:scale(.97);
}
