:root{
  --bg:#030201;
  --panel:#11100d;
  --panel-2:#17140d;
  --panel-3:#070604;
  --line:#3d321d;
  --line-soft:rgba(212,164,66,.15);
  --txt:#fff8e7;
  --muted:#b7a98a;
  --muted-2:#867555;
  --red:#c8942e;
  --red-2:#d4a442;
  --blue:#f1c45f;
  --yellow:#ffd977;
  --green:#d8b45a;
  --purple:#cfa451;
  --orange:#e3b35c;
  --alien:#d4a442;
  --gold:#d4a442;
  --gold-2:#ffd977;
  --shadow:0 18px 70px rgba(0,0,0,.68);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:"Segoe UI", Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 18%, rgba(212,164,66,.16), transparent 24%),
    radial-gradient(circle at 12% 0%, rgba(255,217,119,.08), transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(212,164,66,.10), transparent 31%),
    linear-gradient(145deg, #020201 0%, #080704 42%, #020201 100%);
  color:var(--txt);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(212,164,66,.17) 18.2%, transparent 18.7% 42%, rgba(212,164,66,.10) 42.2%, transparent 42.7%),
    linear-gradient(23deg, transparent 0 33%, rgba(255,217,119,.10) 33.3%, transparent 33.9% 73%, rgba(212,164,66,.11) 73.2%, transparent 73.8%),
    radial-gradient(circle at 50% 20%, rgba(212,164,66,.08), transparent 30%);
  background-size:680px 680px, 760px 760px, 100% 100%;
  opacity:.72;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0}
input,select,textarea{
  width:100%;
  background:#05070a;
  color:var(--txt);
  border:1px solid #3a4456;
  border-radius:7px;
  outline:none;
  padding:10px 12px;
}
input:focus,select:focus,textarea:focus{border-color:var(--alien);box-shadow:0 0 0 3px rgba(77,255,202,.10)}
input[type="checkbox"]{width:auto;accent-color:var(--green)}
label{display:block;color:#cbd5e1;font-size:13px;margin:0 0 7px}
small{color:var(--muted)}
.hidden{display:none!important}
.mono{font-family:"Consolas","Courier New",monospace}
.green{color:var(--green)!important}
.red{color:var(--red-2)!important}
.blue{color:var(--blue)!important}
.yellow{color:var(--yellow)!important}
.purple{color:var(--purple)!important}
.orange{color:var(--orange)!important}
.muted{color:var(--muted)!important}
.hr{height:1px;background:var(--line-soft);margin:14px 0}

/* Login */
.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:22px;
}
.login-box{
  width:min(460px,100%);
  background:linear-gradient(180deg, rgba(18,22,30,.96), rgba(8,11,18,.96));
  border:1px solid #303a4c;
  border-radius:18px;
  box-shadow:var(--shadow), 0 0 60px rgba(77,255,202,.08);
  padding:32px;
  position:relative;
  overflow:hidden;
}
.login-box:before{
  content:"";
  position:absolute;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(77,255,202,.55), transparent 64%);
  filter:blur(14px);
  right:-74px;top:-90px;
  opacity:.45;
}
.login-top{text-align:center;position:relative;z-index:1;margin-bottom:22px}
.brand{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:900;letter-spacing:3px;
  font-size:34px;
  color:var(--alien);
  text-shadow:0 0 22px rgba(77,255,202,.22);
}
.brand span:first-child{color:var(--red-2)}
.login-top p{color:#c9d5e9;margin-top:8px;font-size:14px}
.login-box .btn{margin-top:8px}

/* Layout */
.app{display:grid;grid-template-columns:255px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:rgba(13,15,21,.95);
  border-right:1px solid rgba(255,255,255,.08);
  padding:18px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
.side-logo{
  display:flex;align-items:center;gap:10px;
  padding:8px 6px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:16px;
}
.side-logo .ufo{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,rgba(77,255,202,.18),rgba(191,99,255,.18));
  display:grid;place-items:center;
  border:1px solid rgba(77,255,202,.28);
}
.side-logo h2{font-size:20px;letter-spacing:2px;color:var(--alien);line-height:1}
.side-logo small{font-size:10px;letter-spacing:2px;color:var(--muted)}
.menu{display:grid;gap:9px}
.menu button{
  background:#0b1018;
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:12px 13px;
  display:flex;align-items:center;gap:10px;
  text-align:left;
}
.menu button.active,.menu button:hover{
  border-color:rgba(77,255,202,.35);
  background:linear-gradient(90deg, rgba(77,255,202,.14), rgba(47,125,255,.08));
}
.side-user{
  margin-top:18px;
  padding:13px;
  border-radius:13px;
  background:#080c12;
  border:1px solid rgba(255,255,255,.08);
}
.side-user b{display:block;color:var(--alien)}
.side-user p{font-size:12px;color:var(--muted);margin-top:4px}
.main{min-width:0;padding:22px 28px 60px}
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:20px;
}
.page-title h1{font-size:26px;margin-bottom:3px}
.page-title p{color:var(--muted);font-size:13px}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{
  border:1px solid rgba(77,255,202,.2);
  color:var(--alien);
  background:rgba(77,255,202,.06);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
}
.watermark{
  position:fixed;
  right:24px;bottom:18px;
  font-size:44px;
  letter-spacing:12px;
  color:rgba(182,0,12,.13);
  font-weight:900;
  pointer-events:none;
  user-select:none;
}

/* Components */
.panel{
  background:rgba(18,20,26,.94);
  border:1px solid #303a4c;
  border-radius:var(--radius);
  box-shadow:0 10px 35px rgba(0,0,0,.18);
  padding:18px;
}
.panel-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.panel-title h2{font-size:20px;font-weight:700}
.panel-title small{text-transform:uppercase;letter-spacing:1px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.card{
  background:linear-gradient(180deg, rgba(23,27,36,.98), rgba(12,15,22,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.card:after{
  content:"";
  position:absolute;
  width:95px;height:95px;border-radius:50%;
  right:-52px;top:-52px;
  background:rgba(77,255,202,.08);
}
.card h3{
  color:#9ba9c0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}
.value{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:11px 15px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#d00011,#970008);
  color:#fff;
  font-weight:800;
  transition:.18s;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.full{width:100%}
.btn.dark{background:#1e293b}
.btn.blue{background:#2d67e9;color:#fff}
.btn.green{background:#00b86b;color:#00180d}
.btn.purple{background:#5b2394;color:#fff}
.btn.ghost{background:#070a10;color:#dbeafe;border-color:#3b465a}
.btn.small{min-height:33px;padding:7px 10px;font-size:12px;border-radius:7px}
.btn.icon{width:35px;padding:0;min-height:35px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--green);box-shadow:0 0 14px var(--green)}
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:999px;
  background:rgba(47,125,255,.13);
  color:#8fbcff;
  font-size:12px;
  border:1px solid rgba(47,125,255,.18);
}
.tag.green{background:rgba(0,255,136,.10);border-color:rgba(0,255,136,.18)}
.tag.yellow{background:rgba(255,208,0,.10);border-color:rgba(255,208,0,.22)}
.tag.purple{background:rgba(191,99,255,.12);border-color:rgba(191,99,255,.22)}
.alert{
  border:1px solid rgba(191,99,255,.32);
  background:linear-gradient(90deg,rgba(191,99,255,.14),rgba(47,125,255,.08));
  border-radius:12px;
  padding:13px 15px;
  color:#e9d5ff;
}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{
  padding:13px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:middle;
  font-size:14px;
}
th{
  color:#cbd5e1;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
}
td .sub{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.actions{display:flex;gap:6px;align-items:center}
.empty{
  text-align:center;
  color:var(--muted);
  padding:30px 10px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
}


/* Dashboard filters and ranking */
.dashboard-filter{
  display:grid;
  grid-template-columns:repeat(3,auto) minmax(150px,190px) minmax(150px,190px) auto auto;
  gap:10px;
  align-items:end;
  justify-content:end;
  margin-bottom:18px;
}
.dashboard-filter .filter-field label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#aebcd2;
}
.dashboard-filter input{min-height:42px}
.rank-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.rank-card{
  background:linear-gradient(180deg, rgba(23,27,36,.98), rgba(9,11,17,.98));
  border-radius:14px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.rank-card.montante{border-color:rgba(255,208,0,.78)}
.rank-card.contas{border-color:rgba(47,125,255,.78)}
.rank-card small{
  display:block;
  text-transform:uppercase;
  letter-spacing:.9px;
  font-size:11px;
  font-weight:800;
  margin-bottom:7px;
}
.rank-card.montante small{color:var(--yellow)}
.rank-card.contas small{color:#73a7ff}
.rank-card b{display:block;font-size:24px}
.rank-icon{font-size:32px;filter:drop-shadow(0 0 10px rgba(255,255,255,.12))}
@media(max-width:980px){
  .dashboard-filter{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .dashboard-filter .btn{width:100%}
  .rank-grid{grid-template-columns:1fr}
}

/* Montantes page */
.montante-layout{
  display:grid;
  grid-template-columns:390px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.tools-stack{display:grid;gap:18px}
.quick-bar{
  display:grid;
  grid-template-columns:minmax(170px,1.2fr) minmax(150px,1fr) 86px 128px 40px 40px;
  gap:10px;
  align-items:end;
}
.quick-card{
  background:#070a10;
  border:1px solid #38465f;
  border-radius:8px;
  padding:11px 10px;
  min-height:59px;
  display:grid;
  place-items:center;
  text-align:center;
}
.quick-card small{text-transform:uppercase;letter-spacing:.8px;color:#aebcd2}
.quick-card b{font-size:20px;margin-top:3px;display:block}
.summary-strip{
  display:grid;
  grid-template-columns:150px repeat(5,minmax(115px,1fr));
  gap:10px;
  align-items:center;
}
.date-switch{
  height:48px;
  display:grid;
  grid-template-columns:36px 1fr 36px;
  gap:4px;
  background:#06080c;
  border:1px solid #334155;
  border-radius:8px;
  overflow:hidden;
}
.date-switch button{background:transparent;color:#fff;font-size:20px}
.date-switch strong{display:grid;place-items:center;font-size:14px}
.metric{
  background:#06080c;
  border:1px solid #3c4658;
  border-radius:7px;
  padding:9px 10px;
  min-height:56px;
}
.metric small{display:block;text-transform:uppercase;letter-spacing:.8px;font-size:10px}
.metric b{font-size:16px;display:block;margin-top:4px}
.metric.purple{border-color:var(--purple);background:rgba(191,99,255,.13)}

.bank-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(140px,1fr)) minmax(180px,1fr);
  gap:10px;
  align-items:end;
}
.bank-panel input{
  text-align:center;
  font-weight:800;
}
.bank-result{
  background:#06080c;
  border:1px solid rgba(212,164,66,.38);
  border-radius:8px;
  padding:10px 12px;
  min-height:63px;
}
.bank-result small{
  display:block;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:10px;
}
.bank-result b{
  display:block;
  margin-top:5px;
  font-size:17px;
}
@media (max-width:760px){
  .bank-panel{grid-template-columns:1fr}
}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.multi-row{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr 35px;
  gap:6px;
  align-items:center;
  margin-bottom:8px;
}
.multi-row input{padding:8px 9px;font-size:12px}
.tab-buttons{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:14px}
.tab-buttons button{
  background:transparent;
  color:#cbd5e1;
  padding:10px 8px;
  border-bottom:2px solid transparent;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.8px;
}
.tab-buttons button.active{color:var(--red-2);border-color:var(--red-2)}
.output-box{
  min-height:104px;
  background:#05050b;
  border:1px solid #384152;
  border-radius:6px;
  padding:14px;
  color:#9ba9c0;
  white-space:pre-wrap;
  line-height:1.55;
  font-family:"Consolas","Courier New",monospace;
  font-size:13px;
}
.search-inline{max-width:230px}


/* Contas page */
.section-tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin:0 0 18px;
}
.section-tabs button{
  background:transparent;
  color:#dbeafe;
  padding:13px 22px;
  border-bottom:2px solid transparent;
  font-weight:700;
}
.section-tabs button.active{
  border-color:var(--red-2);
  color:#fff;
}
.contas-layout{
  display:grid;
  grid-template-columns:390px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.conta-rate-top{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,1.8fr) 130px 40px 40px;
  gap:12px;
  align-items:end;
}
.rate-board{
  display:grid;
  grid-template-columns:1.7fr .9fr;
  gap:12px;
}
.rate-box{
  background:#08100d;
  border:1px solid rgba(0,255,136,.18);
  border-radius:8px;
  padding:11px;
}
.rate-box.pinguim{
  background:#070b13;
  border-color:rgba(47,125,255,.22);
}
.rate-box h3{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
  margin-bottom:10px;
  color:var(--green);
}
.rate-box.pinguim h3{color:#73a7ff}
.rate-inputs{
  display:grid;
  gap:6px;
}
.rate-inputs.dragao{grid-template-columns:repeat(3,1fr)}
.rate-inputs.pinguim{grid-template-columns:repeat(3,1fr)}
.rate-inputs label{
  font-size:10px;
  text-align:center;
  margin-bottom:3px;
  color:#cbd5e1;
}
.rate-inputs input{
  text-align:center;
  padding:8px 6px;
}
.rate-box.active{
  box-shadow:0 0 0 2px rgba(77,255,202,.18), 0 0 22px rgba(77,255,202,.10);
}
.group-result{
  margin-top:7px;
  font-size:12px;
  color:var(--muted);
}
.sum-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.sum-box textarea{
  min-height:122px;
  resize:vertical;
  font-family:"Consolas","Courier New",monospace;
  line-height:1.45;
}
.sum-total-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  font-weight:900;
}
@media(max-width:1200px){
  .contas-layout{grid-template-columns:1fr}
  .conta-rate-top{grid-template-columns:1fr}
  .rate-board{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section-tabs{display:grid;grid-template-columns:1fr 1fr}
  .rate-inputs.dragao,.rate-inputs.pinguim,.sum-columns{grid-template-columns:1fr}
}

/* Média page */
.media-layout{
  display:grid;
  grid-template-columns:390px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.media-rate-top{
  display:grid;
  grid-template-columns:minmax(170px,1fr) 140px 140px 140px 40px;
  gap:12px;
  align-items:end;
}
.media-value-card{
  background:linear-gradient(180deg, rgba(212,164,66,.18), rgba(6,8,12,.98));
  border:1px solid rgba(212,164,66,.55);
  border-radius:14px;
  padding:18px;
  box-shadow:0 0 22px rgba(212,164,66,.08);
}
.media-value-card small{
  display:block;
  color:#d9c08a;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
}
.media-value-card b{
  display:block;
  font-size:34px;
  margin-top:8px;
  color:var(--gold-2);
}
.media-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  gap:12px;
}
.media-note{
  border:1px dashed rgba(212,164,66,.35);
  background:rgba(212,164,66,.08);
  border-radius:12px;
  padding:14px;
  color:#d8dee9;
  line-height:1.5;
}
.media-note b{color:var(--gold-2)}
.section-tabs.tri{flex-wrap:wrap}
.section-tabs.tri button{min-width:120px}
@media(max-width:1200px){
  .media-layout{grid-template-columns:1fr}
  .media-rate-top{grid-template-columns:1fr}
}
@media(max-width:760px){
  .section-tabs.tri{grid-template-columns:repeat(3,1fr)}
  .media-mini-grid{grid-template-columns:1fr}
}

/* Dashboard chart */
.chart-box{
  height:330px;
  background:#0a0d14;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
}
canvas{width:100%;height:100%}

/* Toast */
.toast{
  position:fixed;
  right:20px;top:20px;
  background:#07100d;
  border:1px solid rgba(0,255,136,.35);
  color:#d1fae5;
  padding:13px 15px;
  border-radius:12px;
  box-shadow:var(--shadow);
  transform:translateY(-20px);
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:30;
}
.toast.show{transform:translateY(0);opacity:1}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  display:grid;place-items:center;
  padding:20px;z-index:20;
}
.modal{
  width:min(680px,100%);
  background:#10131a;
  border:1px solid #344158;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:20px;
}
.modal textarea{min-height:180px;resize:vertical}

/* Mobile */
@media(max-width:1200px){
  .cards{grid-template-columns:repeat(3,minmax(150px,1fr))}
  .montante-layout{grid-template-columns:1fr}
  .quick-bar{grid-template-columns:repeat(3,1fr)}
  .summary-strip{grid-template-columns:1fr repeat(2,1fr)}
}
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{height:auto;position:relative}
  .main{padding:18px}
  .topbar{flex-direction:column}
  .cards{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .quick-bar,.summary-strip,.input-row,.multi-row{grid-template-columns:1fr}
  .watermark{display:none}
}