*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#0a0a14;
  color:#e0e0e0;
  font-family:'Inter',-apple-system,sans-serif;
  display:flex;
  min-height:100vh;
  overflow-x:hidden
}

/* ===== SIDEBAR ===== */
.sidebar{
  width:240px;
  min-height:100vh;
  background:linear-gradient(180deg,#0d0d1a 0%,#111128 100%);
  border-right:1px solid rgba(106,13,173,.15);
  display:flex;
  flex-direction:column;
  position:fixed;
  left:0;
  top:0;
  z-index:100;
  transition:.3s
}
.sidebar-brand{
  padding:24px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.04)
}
.sidebar-brand h1{
  font-size:16px;font-weight:900;
  background:linear-gradient(135deg,#9b59b6,#e67e22);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}
.sidebar-brand small{
  font-size:10px;color:#555;display:block;margin-top:2px
}
.sidebar-user{
  padding:14px 20px;
  background:rgba(106,13,173,.08);
  border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  gap:10px
}
.sidebar-user .avatar{
  width:32px;height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,#6a0dad,#9b59b6);
  display:flex;
  align-items:center;justify-content:center;
  font-size:14px;font-weight:700
}
.sidebar-user .info .name{font-size:12px;font-weight:600}
.sidebar-user .info .role{font-size:10px;color:#666}
.sidebar-nav{
  flex:1;
  padding:12px 0;
  overflow-y:auto
}
.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 20px;
  font-size:13px;
  color:#888;
  cursor:pointer;
  transition:.2s;
  border-left:3px solid transparent;
  text-decoration:none
}
.nav-item:hover{color:#e0e0e0;background:rgba(255,255,255,.02)}
.nav-item.active{
  color:#9b59b6;
  background:rgba(106,13,173,.1);
  border-left-color:#9b59b6;
  font-weight:600
}
.nav-item .icon{font-size:16px;width:22px;text-align:center}
.nav-item .badge{
  margin-left:auto;
  font-size:10px;
  background:rgba(106,13,173,.2);
  color:#9b59b6;
  padding:2px 8px;
  border-radius:10px
}
.nav-item .badge.green{background:rgba(46,204,113,.15);color:#2ecc71}
.nav-item .badge.blue{background:rgba(52,152,219,.15);color:#3498db}
.nav-item .badge.yellow{background:rgba(241,196,15,.15);color:#f1c40f}
.nav-footer{
  padding:12px 20px;
  border-top:1px solid rgba(255,255,255,.04)
}
.nav-footer .nav-item{font-size:12px;padding:8px 0;color:#555}

/* ===== MAIN ===== */
.main{
  margin-left:240px;
  flex:1;
  padding:30px 35px 40px;
  max-width:calc(100vw - 240px)
}
.page-header{
  margin-bottom:28px
}
.page-header h2{
  font-size:22px;font-weight:800;
  background:linear-gradient(135deg,#9b59b6,#e67e22);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}
.page-header p{font-size:12px;color:#555;margin-top:4px}
.page{display:none}
.page.active{display:block}

/* ===== STATS CARDS ===== */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:28px
}
.stat-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
  transition:.3s
}
.stat-card:hover{
  border-color:rgba(106,13,173,.2);
  transform:translateY(-2px)
}
.stat-card .stat-icon{
  font-size:22px;
  margin-bottom:8px
}
.stat-card .stat-num{
  font-size:26px;
  font-weight:800;
  color:#fff;
  line-height:1
}
.stat-card .stat-num.purple{color:#9b59b6}
.stat-card .stat-num.green{color:#2ecc71}
.stat-card .stat-num.yellow{color:#f1c40f}
.stat-card .stat-num.blue{color:#3498db}
.stat-card .stat-num.red{color:#ef4444}
.stat-card .stat-label{
  font-size:11px;
  color:#555;
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:.5px
}
.stat-card .stat-sub{
  font-size:10px;
  color:#333;
  margin-top:2px
}
.stat-card .stat-glow{
  position:absolute;
  top:-50%;
  right:-30%;
  width:100px;height:100px;
  border-radius:50%;
  opacity:.05;
  pointer-events:none
}
.stat-card .stat-glow.purple{background:#9b59b6}
.stat-card .stat-glow.green{background:#2ecc71}

/* ===== CARDS ===== */
.glass-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:14px;
  padding:22px;
  margin-bottom:20px;
  backdrop-filter:blur(10px);
  transition:.3s
}
.glass-card:hover{border-color:rgba(106,13,173,.12)}
.glass-card .card-title{
  font-size:14px;
  font-weight:700;
  color:#9b59b6;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px
}
.glass-card .card-title .icon{font-size:16px}
.glass-card .card-title .right{
  margin-left:auto;
  font-size:11px;
  font-weight:400;
  color:#555
}

/* ===== TAB ===== */
.tab-bar{
  display:flex;
  gap:4px;
  margin-bottom:16px;
  background:rgba(255,255,255,.02);
  border-radius:10px;
  padding:4px;
  overflow-x:auto
}
.tab-item{
  padding:8px 16px;
  font-size:12px;
  font-weight:600;
  color:#666;
  cursor:pointer;
  border-radius:8px;
  transition:.2s;
  border:none;
  background:none;
  white-space:nowrap
}
.tab-item:hover{color:#e0e0e0;background:rgba(255,255,255,.03)}
.tab-item.active{
  color:#9b59b6;
  background:rgba(106,13,173,.15)
}
.tab-content{display:none}
.tab-content.active{display:block}

/* ===== TABLE ===== */
.table-wrap{overflow-x:auto;border-radius:10px}
table.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
table.admin-table th{
  text-align:left;
  padding:10px 10px;
  color:#555;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-weight:600
}
table.admin-table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.03);
  vertical-align:middle
}
table.admin-table tr:hover td{background:rgba(255,255,255,.01)}
.codigo-mono{font-family:monospace;font-size:13px;letter-spacing:1px}
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  font-size:10px;
  font-weight:600
}
.tag-green{background:rgba(46,204,113,.12);color:#2ecc71}
.tag-yellow{background:rgba(241,196,15,.12);color:#f1c40f}
.tag-red{background:rgba(239,68,68,.12);color:#ef4444}
.tag-purple{background:rgba(106,13,173,.12);color:#9b59b6}

/* ===== FORMS ===== */
.input-group{margin-bottom:14px}
.input-group label{
  display:block;
  font-size:11px;
  color:#555;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.3px
}
.input-group input,.input-group select{
  width:100%;
  padding:11px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  color:#e0e0e0;
  font-size:13px;
  outline:none;
  transition:.2s
}
.input-group input:focus{border-color:#9b59b6}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border:none;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:.2s
}
.btn-sq{padding:6px 10px;font-size:11px}
.btn-primary{background:linear-gradient(135deg,#6a0dad,#9b59b6);color:#fff}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-success{background:rgba(46,204,113,.12);color:#2ecc71;border:1px solid rgba(46,204,113,.2)}
.btn-success:hover{background:rgba(46,204,113,.18)}
.btn-danger{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.18)}
.btn-ghost{background:rgba(255,255,255,.04);color:#888;border:1px solid rgba(255,255,255,.06)}
.btn-ghost:hover{color:#e0e0e0;background:rgba(255,255,255,.06)}
.btn-warning{background:rgba(241,196,15,.12);color:#f1c40f;border:1px solid rgba(241,196,15,.2)}

/* ===== SEARCH ===== */
.search-box{
  position:relative;
  margin-bottom:14px
}
.search-box input{
  width:100%;
  padding:10px 14px 10px 38px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  color:#e0e0e0;
  font-size:13px;
  outline:none
}
.search-box input:focus{border-color:#9b59b6}
.search-box .icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#444;
  font-size:14px
}

/* ===== CHART ===== */
.chart-wrap{
  padding:10px 0;
  max-height:250px
}

/* ===== REVENDA CARD ===== */
.revenda-card{
  background:rgba(255,255,255,.01);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
  transition:.2s
}
.revenda-card:hover{border-color:rgba(106,13,173,.15)}
.revenda-card .rv-avatar{
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(106,13,173,.15);
  display:flex;
  align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  color:#9b59b6;
  flex-shrink:0
}
.revenda-card .rv-info{flex:1;min-width:0}
.revenda-card .rv-info .rv-name{font-size:13px;font-weight:600}
.revenda-card .rv-info .rv-meta{font-size:10px;color:#555;margin-top:1px}
.revenda-card .rv-credits{
  text-align:center;
  flex-shrink:0
}
.revenda-card .rv-credits .num{font-size:18px;font-weight:800;color:#2ecc71}
.revenda-card .rv-credits .label{font-size:9px;color:#444;text-transform:uppercase}
.revenda-card .rv-actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
  flex-wrap:wrap
}
.revenda-card .rv-status{
  flex-shrink:0;
  font-size:10px;
  text-align:center;
  min-width:60px
}
.revenda-card .rv-status .dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:4px
}
.revenda-card .rv-status .dot.green{background:#2ecc71}
.revenda-card .rv-status .dot.red{background:#ef4444}

/* ===== MODAL ===== */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:999;
  justify-content:center;
  align-items:center;
  backdrop-filter:blur(4px)
}
.modal-box{
  background:#141428;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:24px;
  width:90%;
  max-width:500px;
  max-height:80vh;
  overflow-y:auto;
  animation:modalIn .2s ease
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.95) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.modal-box h3{
  font-size:15px;
  font-weight:700;
  color:#9b59b6;
  margin-bottom:14px
}

/* ===== EMPTY ===== */
.empty-state{
  text-align:center;
  padding:40px 20px;
  color:#333
}
.empty-state .icon{font-size:32px;margin-bottom:10px}
.empty-state p{font-size:13px}

/* ===== TOAST ===== */
.toast{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:#2ecc71;
  color:#000;
  padding:12px 22px;
  border-radius:10px;
  font-weight:600;
  font-size:12px;
  display:none;
  z-index:9999;
  animation:slideUp .3s ease;
  box-shadow:0 8px 30px rgba(0,0,0,.3)
}
.toast.erro{background:#ef4444;color:#fff}
.toast.show{display:block}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ===== CODIGO CLICK ===== */
.codigo-click{
  cursor:pointer;
  padding:2px 6px;
  border-radius:6px;
  transition:.2s;
  display:inline-block
}
.codigo-click:hover{background:rgba(106,13,173,.12);color:#9b59b6}

/* ===== RESPONSIVO ===== */
@media(max-width:768px){
  body{padding-bottom:70px}
  .sidebar{
    width:85vw;max-width:320px;
    transform:translateX(-100%);
    box-shadow:4px 0 30px rgba(0,0,0,.5)
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.6);z-index:99
  }
  .sidebar-overlay.show{display:block}
  .sidebar .sidebar-brand h1,.sidebar .sidebar-brand small,
  .sidebar .sidebar-user .info,.sidebar .nav-item span:not(.icon),
  .sidebar .nav-item .badge,.sidebar .nav-footer .nav-item span:not(.icon),
  .sidebar-user .avatar{display:block}
  .nav-item{padding:14px 20px;font-size:14px}
  .nav-item .icon{font-size:20px;width:26px}
  .nav-footer .nav-item{padding:12px 20px;font-size:14px;color:#e74c3c}
  .main{margin-left:0;padding:56px 12px 20px;max-width:100vw}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .input-row{grid-template-columns:1fr}
  .revenda-card{flex-wrap:wrap}
  .revenda-card .rv-actions{width:100%;justify-content:flex-end}
  /* Top bar mobile */
  .top-bar{
    display:flex !important;
    position:fixed;top:0;left:0;right:0;z-index:50;
    height:48px;
    background:#0d0d1a;
    border-bottom:1px solid rgba(106,13,173,.15);
    align-items:center;
    padding:0 12px;
    gap:10px
  }
  .top-bar .menu-btn{
    width:36px;height:36px;
    border:none;background:none;
    color:#9b59b6;font-size:20px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px
  }
  .top-bar .menu-btn:active{background:rgba(106,13,173,.15)}
  .top-bar .title{flex:1;font-size:14px;font-weight:700;color:#e0e0e0}
  .top-bar .title small{font-size:10px;color:#666;font-weight:400;margin-left:6px}
  .top-bar .sair-btn{
    width:36px;height:36px;
    border:none;background:none;
    color:#e74c3c;font-size:18px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px
  }
  .top-bar .sair-btn:active{background:rgba(231,76,60,.12)}
  /* Bottom nav mobile */
  .bottom-nav{
    display:flex !important;
    position:fixed;bottom:0;left:0;right:0;z-index:50;
    height:60px;
    background:#0d0d1a;
    border-top:1px solid rgba(106,13,173,.15);
    justify-content:space-around;
    align-items:center;
    padding:4px 0 env(safe-area-inset-bottom,4px) 0
  }
  .bottom-nav .bn-item{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:2px;
    width:60px;padding:4px 0;
    border:none;background:none;
    color:#666;font-size:10px;
    position:relative;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:.15s
  }
  .bottom-nav .bn-item .bn-icon{font-size:20px;line-height:1}
  .bottom-nav .bn-item.active{color:#9b59b6}
  .bottom-nav .bn-item:active{opacity:.6}
  .bottom-nav .bn-item .bn-badge{
    position:absolute;top:-2px;right:-6px;
    background:#e74c3c;color:#fff;
    font-size:9px;font-weight:700;
    min-width:16px;height:16px;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    padding:0 4px
  }
  /* Ajustes nas páginas */
  .page-header h2{font-size:18px}
  .page-header p{font-size:11px}
  .glass-card{padding:14px}
  .admin-table{font-size:12px}
  .admin-table th,.admin-table td{padding:8px 10px}
  /* Esconder sidebar toggle antigo */
  .menu-toggle{display:none !important}
  .btn-sair-mobile{display:none !important}
}
@media(min-width:769px){
  .top-bar,.bottom-nav,.menu-toggle,.btn-sair-mobile{display:none !important}
}