:root{
  color-scheme:dark;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  --bg:#050507;
  --panel:#0e1015;
  --panel2:#151820;
  --line:#30343d;
  --text:#f6f6f7;
  --muted:#9ca1ac;
  --red:#ff1717;
  --red2:#8f0505;
  --gold:#ffd000;
  --green:#20d879;
  --blue:#47bfff;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 18% 0,rgba(255,23,23,.08),transparent 33%),radial-gradient(circle at 82% 0,rgba(255,208,0,.07),transparent 30%),var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.admin-login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(410px,100%);padding:30px;border:1px solid #4a3c29;border-radius:20px;background:linear-gradient(180deg,#13151b,#090a0e);box-shadow:0 30px 100px rgba(0,0,0,.5)}
.login-logo{display:block;width:150px;height:85px;object-fit:contain;margin:0 auto 8px}
.login-card h1{text-align:center;margin:0;font-size:27px;letter-spacing:1px}.login-card h1 span{color:var(--red)}
.login-card p{text-align:center;color:#d2b85c;font-size:12px;margin:6px 0 22px}
label{display:block;color:#cdd0d6;font-size:11px;font-weight:700;margin:12px 0 6px}
input,select,textarea{width:100%;border:1px solid #3a3f49;border-radius:10px;background:#08090d;color:#fff;padding:11px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#a97c16;box-shadow:0 0 0 3px rgba(255,208,0,.08)}
button{border:1px solid #474c56;border-radius:10px;background:#171a20;color:#fff;padding:10px 13px;font-weight:750}
button:hover{filter:brightness(1.14)}
.primary{border:0;background:linear-gradient(90deg,#d60000,#ff2727);color:#fff;box-shadow:0 0 20px rgba(255,23,23,.13)}
.login-card .primary{width:100%;margin-top:16px}
.message{min-height:18px;color:#ff758c;font-size:11px;margin-top:10px}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid #2c2a29;background:linear-gradient(180deg,#0c0d11,#07080b);display:flex;flex-direction:column}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 5px 18px;border-bottom:1px solid #272a31}
.sidebar-brand img{width:55px;height:45px;object-fit:contain}.sidebar-brand strong{display:block;font-size:13px;letter-spacing:.6px}.sidebar-brand strong span{color:var(--red)}.sidebar-brand small{color:#c9ab46;font-size:8px;letter-spacing:1.3px}
.sidebar nav{display:grid;gap:5px;margin-top:18px}
.sidebar nav button{text-align:left;border:0;background:transparent;color:#b8bdc8;padding:12px}
.sidebar nav button.active{color:#fff;background:linear-gradient(90deg,rgba(255,23,23,.24),rgba(255,208,0,.05));border-left:3px solid var(--red)}
.sidebar-bottom{margin-top:auto;display:grid;gap:10px}.server-dot{color:#9da3ad;font-size:10px}.server-dot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-right:6px}
.workspace{min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #292c33;background:rgba(9,10,14,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:3}
.topbar small{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:1.4px}.topbar h1{margin:5px 0 0;font-size:25px}
.top-actions{display:flex;align-items:center;gap:10px}.top-actions span{color:var(--muted);font-size:10px}
#page-content{padding:22px;max-width:1450px;margin:auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.stat-card,.card{border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,#12151b,#0b0d11)}
.stat-card{padding:16px;position:relative;overflow:hidden}.stat-card::after{content:"";position:absolute;right:-25px;top:-30px;width:85px;height:85px;border-radius:50%;background:rgba(255,23,23,.07)}.stat-card.gold::after{background:rgba(255,208,0,.09)}.stat-card.green::after{background:rgba(0,230,118,.09)}.stat-card.green strong{color:#00e676}
.stat-card span{color:var(--muted);font-size:10px}.stat-card strong{display:block;font-size:27px;margin-top:7px}.stat-card small{color:var(--green)}
.card{padding:18px;margin-bottom:14px}
.card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.card-head small{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:1px}.card-head h2{margin:4px 0 0}
.form-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 2fr;gap:9px;align-items:end}
.form-grid .primary{height:42px}
.helper{color:var(--muted);font-size:10px}
.new-license{padding:13px;border:1px solid #7b6417;border-radius:10px;background:#1a1608;margin-top:12px}.new-license code{display:block;color:var(--gold);font-size:15px;margin:7px 0;word-break:break-all}
.filters{display:grid;grid-template-columns:1fr 220px;gap:9px;margin-bottom:12px}
.licenses{display:grid;gap:10px}
.license-card {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  background: linear-gradient(180deg, #12151d, #0b0d12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}
.license-card:hover {
  border-color: rgba(255, 208, 0, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 208, 0, 0.06);
}
.license-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.license-head h3 {
  margin: 6px 0 4px;
  font-size: 15px;
  color: #fff;
  font-weight: 700;
}
.license-key {
  display: inline-block;
  font-family: monospace;
  background: #050507;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #ffd000;
  letter-spacing: 0.5px;
  margin-top: 6px;
  word-break: break-all;
}
.license-plan, .license-status, .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.license-plan.basic {
  background: rgba(150, 150, 150, 0.15);
  color: #bdc1c9;
  border: 1px solid rgba(150, 150, 150, 0.3);
}
.license-plan.pro {
  background: rgba(68, 207, 255, 0.15);
  color: #44cfff;
  border: 1px solid rgba(68, 207, 255, 0.3);
}
.license-plan.premium {
  background: rgba(255, 208, 0, 0.15);
  color: #ffd000;
  border: 1px solid rgba(255, 208, 0, 0.35);
}
.license-status.active {
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.35);
}
.license-status.pending {
  background: rgba(255, 208, 0, 0.12);
  color: #ffd000;
  border: 1px solid rgba(255, 208, 0, 0.35);
}
.license-status.revoked, .license-status.expired {
  background: rgba(255, 23, 23, 0.15);
  color: #ff1717;
  border: 1px solid rgba(255, 23, 23, 0.35);
}
.license-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.license-grid > div, .metric-box {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}
.license-grid span, .metric-box span {
  display: block;
  color: var(--muted);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.license-grid strong, .metric-box strong {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: #fff;
  font-family: monospace;
  font-weight: 700;
}
.license-note {
  color: var(--muted);
  font-size: 10.5px;
  background: rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  line-height: 1.4;
}
.license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.license-actions button {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8e8ea;
}
.license-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.license-actions button[data-action="copy"] {
  border-color: rgba(255, 208, 0, 0.25);
  color: #ffd000;
  background: rgba(255, 208, 0, 0.05);
}
.license-actions button[data-action="copy"]:hover {
  background: #ffd000;
  color: #000;
}
.danger {
  border-color: rgba(255, 23, 23, 0.25) !important;
  color: #ff5252 !important;
  background: rgba(255, 23, 23, 0.05) !important;
}
.danger:hover {
  background: #ff5252 !important;
  color: #fff !important;
}
.dashboard-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}.chart-card{min-height:260px}
.bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 12px;
  height: 175px;
  padding: 25px 15px 35px 15px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.bar {
  display: block !important;
  width: 28px !important;
  min-width: 28px !important;
  border-radius: 6px 6px 0 0;
  background-color: #ffd000 !important;
  background: #ffd000 !important;
  box-shadow: 0 0 8px rgba(255, 208, 0, 0.2);
  position: relative;
  transition: all 0.3s ease;
}
.bar.red {
  background-color: #ff3b30 !important;
  background: #ff3b30 !important;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.25);
}
.bar-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.bar-value {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: #00e676 !important;
  font-weight: 800;
  font-family: monospace;
  white-space: nowrap;
}
.bar.red .bar-value {
  color: #00e676 !important;
}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:10px;border-bottom:1px solid #242830;font-size:10px}.table th{color:#bdc1c9}.table td{color:#e8e8ea}
.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px}.offline-dot{background:#666}
.ticket{padding:13px;border:1px solid #2c313a;border-radius:11px;background:#090b10;margin-bottom:8px}.ticket-head{display:flex;justify-content:space-between;gap:10px}.ticket p{color:var(--muted);font-size:11px}.priority-high{color:#ff6178}.priority-normal{color:var(--gold)}.priority-low{color:#6ec7ff}
.report-actions{display:flex;flex-wrap:wrap;gap:8px}.empty{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:1000px){.admin-shell{grid-template-columns:75px 1fr}.sidebar-brand div,.sidebar nav button{font-size:0}.sidebar nav button::first-letter{font-size:18px}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:650px){.admin-shell{display:block}.sidebar{position:static;height:auto}.sidebar nav{grid-template-columns:repeat(3,1fr)}.sidebar nav button{font-size:9px}.sidebar-brand div{display:block}.stats,.license-grid,.form-grid,.filters{grid-template-columns:1fr}.topbar{position:static}}

.plan-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:14px;
}
.plan-card{
  border:1px solid var(--line);
  border-radius:15px;
  padding:17px;
  background:linear-gradient(180deg,#14171d,#090b0f);
  position:relative;
  overflow:hidden;
}
.plan-card::after{
  content:"∞";
  position:absolute;
  right:12px;
  top:4px;
  font-size:52px;
  opacity:.06;
}
.plan-card small{
  color:var(--gold);
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}
.plan-card strong{
  display:block;
  font-size:27px;
  margin:8px 0;
}
.plan-card strong span{
  font-size:11px;
  color:var(--muted);
}
.plan-card p{
  min-height:32px;
  color:var(--muted);
  font-size:11px;
}
.plan-card.basic{border-color:#535862}
.plan-card.pro{border-color:#a77913;box-shadow:0 0 22px rgba(255,208,0,.06)}
.plan-card.premium{border-color:#8d2030;box-shadow:0 0 22px rgba(255,23,23,.08)}
@media(max-width:850px){
  .plan-cards{grid-template-columns:1fr}
}

.input-action-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.license-account-email{margin-top:3px;font-size:10px}

.customer-accounts{
  display:grid;
  gap:14px;
}
.customer-account-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#12151b,#090b0f);
  overflow:hidden;
}
.customer-account-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:18px;
  border-bottom:1px solid var(--line);
}
.customer-account-header small{
  color:var(--gold);
  font-size:9px;
  letter-spacing:.8px;
  font-weight:900;
}
.customer-account-header h3{
  margin:5px 0 3px;
}
.customer-account-header p{
  color:var(--muted);
  font-size:11px;
}
.customer-account-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.status-pill{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:9px;
  text-transform:uppercase;
}
.status-pill.active{color:#4be38b;border-color:#1d6c42}
.status-pill.manual{color:#d7dce5}
.status-pill.cancelled,
.status-pill.refunded,
.status-pill.chargeback{color:#ff7070;border-color:#7b2c2c}
.account-keys{
  display:grid;
}
.account-key-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.account-key-item:last-child{
  border-bottom:0;
}
.account-key-index{
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#171b22;
  color:var(--gold);
  font-weight:900;
}
.account-key-main{
  min-width:0;
}
.account-key-main strong,
.account-key-main code,
.account-key-main small{
  display:block;
}
.account-key-main code{
  margin:5px 0;
  color:#f0f2f6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-key-main small{
  color:var(--muted);
}
.account-key-actions{
  display:flex;
  gap:7px;
}
.empty.compact{
  margin:14px 18px;
}
@media(max-width:760px){
  .customer-account-header,
  .account-key-item{
    grid-template-columns:1fr;
    display:grid;
  }
  .customer-account-actions,
  .account-key-actions{
    justify-content:flex-start;
  }
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:grid;
  place-items:center;
  padding:20px;
  z-index:999;
}
.modal-card {
  display: flex !important;
  flex-direction: column !important;
  width: min(520px, 95vw) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid var(--line, #27272a) !important;
  border-radius: 18px !important;
  background: #0b0e13 !important;
  padding: 24px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .8) !important;
  box-sizing: border-box !important;
}
.modal-card label {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
}
.modal-card input,
.modal-card select,
.modal-card textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 4px !important;
}
.modal-card .full {
  width: 100% !important;
  margin-top: 16px !important;
}


.update-admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr);
  gap: 18px;
}

.update-publish-card textarea {
  resize: vertical;
}

.update-mandatory-notice {
  margin: 15px 0;
  padding: 12px;
  border: 1px solid rgba(255,65,65,.42);
  border-radius: 10px;
  color: #ff9d9d;
  background: rgba(170,20,20,.12);
  font-weight: 750;
}

.update-list {
  display: grid;
  gap: 12px;
}

.update-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel2);
}

.update-row-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.update-row h3 {
  margin: 8px 0 4px;
}

.update-row p {
  color: var(--muted);
}

.update-row-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 125px;
}

.button-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #474c56;
  border-radius: 10px;
  color: #fff;
  background: #171a20;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}

.muted {
  color: var(--muted);
}

@media (max-width: 950px) {
  .update-admin-grid {
    grid-template-columns: 1fr;
  }

  .update-row {
    grid-template-columns: 1fr;
  }

  .update-row-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Dashboard Premium Additional Styles */
.platform-badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.platform-badge.tiktok {
  background: rgba(255, 0, 80, 0.12);
  color: #ff0050;
  border: 1px solid rgba(255, 0, 80, 0.25);
}
.platform-badge.shopee {
  background: rgba(238, 77, 45, 0.12);
  color: #ee4d2d;
  border: 1px solid rgba(238, 77, 45, 0.25);
}
.platform-badge.instagram {
  background: rgba(225, 48, 108, 0.12);
  color: #e1306c;
  border: 1px solid rgba(225, 48, 108, 0.25);
}
.pulse-live {
  font-size: 10px;
  font-weight: 700;
  color: #ff3b30;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: pulseLive 1.8s infinite ease-in-out;
}
@keyframes pulseLive {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}
.status-badge-pulsing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #00e676;
  font-weight: 700;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 8px #00e676;
  animation: dotPulse 1.2s infinite alternate ease-in-out;
}
@keyframes dotPulse {
  from { transform: scale(0.9); opacity: 0.6; }
  to { transform: scale(1.25); opacity: 1; }
}

/* Correção do Ícone do WhatsApp */
.wa-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #1ebd5b !important;
  color: #fff !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  margin-top: 4px !important;
}

.wa-badge:hover {
  background: #158f43 !important;
  color: #fff !important;
}

.wa-badge svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  fill: #fff !important;
  margin-right: 4px !important;
  display: inline-block !important;
}