:root{
  --appsbi-ink:#211C19;
  --appsbi-paper:#F6F1E6;
  --appsbi-maroon:#7A1F2B;
  --appsbi-maroon-dark:#59151E;
  --appsbi-gold:#C79A3B;
  --appsbi-gold-soft:#E9D9A9;
  --appsbi-sage:#31473F;
  --appsbi-line:#DDD2BC;
  --appsbi-white:#FFFDF8;
  --appsbi-danger:#A6392B;
}

/* ---------- shared card / table / tag styles (admin + front) ---------- */
.appsbi-card, .appsbi-admin .appsbi-card{
  background:var(--appsbi-white); border:1px solid var(--appsbi-line); border-radius:10px;
  padding:20px 22px; margin-bottom:18px;
}
.appsbi-card h2{ font-size:19px; margin:0 0 4px; color:var(--appsbi-maroon-dark); font-weight:700; }
.appsbi-sub{ font-size:13px; color:#7a7368; margin:0 0 14px; }
.appsbi-small{ font-size:12px; color:#8a7f6d; }
.appsbi-divider{ height:1px; background:var(--appsbi-line); margin:14px 0; }
.appsbi-empty{ text-align:center; padding:26px 10px; color:#a89d89; font-size:13.5px; }
.appsbi-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.appsbi-inline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.appsbi-notice{ background:var(--appsbi-gold-soft); color:var(--appsbi-maroon-dark); font-weight:600; }

table.appsbi-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.appsbi-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#8a7f6d; border-bottom:2px solid var(--appsbi-line); padding:8px; }
table.appsbi-table td{ padding:9px 8px; border-bottom:1px solid var(--appsbi-line); }

.appsbi-tag{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.appsbi-tag.ok{ background:#DEEAE1; color:var(--appsbi-sage); }
.appsbi-tag.pending{ background:#F5E4C8; color:#8A5A16; }
.appsbi-tag.off{ background:#EDE7D8; color:#8a7f6d; }

.appsbi-rank{ font-weight:700; color:var(--appsbi-gold); }
.appsbi-rank.rank-1{ color:#C79A3B; } .appsbi-rank.rank-2{ color:#8f8f8f; } .appsbi-rank.rank-3{ color:#a8703f; }

.appsbi-btn{ font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:7px; border:none; cursor:pointer; text-decoration:none; display:inline-block; }
.appsbi-btn-primary{ background:var(--appsbi-maroon); color:var(--appsbi-white); }
.appsbi-btn-primary:hover{ background:var(--appsbi-maroon-dark); color:var(--appsbi-white); }
.appsbi-btn-ghost{ background:transparent; color:var(--appsbi-maroon); border:1.5px solid var(--appsbi-maroon); }

.appsbi-score-row{ display:grid; grid-template-columns:1.6fr repeat(5,.7fr) .8fr; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--appsbi-line); }
.appsbi-score-head{ font-size:10.5px; text-transform:uppercase; color:#8a7f6d; font-weight:700; }
.appsbi-score-input{ padding:6px; text-align:center; width:100%; box-sizing:border-box; }
.appsbi-total-badge{ font-weight:700; background:var(--appsbi-gold-soft); color:var(--appsbi-maroon-dark); padding:5px 8px; border-radius:6px; text-align:center; }

/* ---------- WP admin pages ---------- */
.appsbi-admin .appsbi-h1{ font-weight:700; color:var(--appsbi-maroon-dark); }
.appsbi-admin .appsbi-inline-form{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.appsbi-admin .appsbi-inline-form label{ display:block; font-size:12px; font-weight:600; color:#5b5347; }
.appsbi-admin .appsbi-inline-form input, .appsbi-admin .appsbi-inline-form select{ margin-top:4px; }
.appsbi-admin .appsbi-tag.ok{ background:#DEEAE1; color:var(--appsbi-sage); padding:3px 9px; border-radius:20px; }
.appsbi-admin .appsbi-tag.off{ background:#EDE7D8; color:#8a7f6d; padding:3px 9px; border-radius:20px; }

/* ---------- front-end (shortcode) wrapper ---------- */
.appsbi-front{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--appsbi-ink); max-width:900px; }
.appsbi-front .appsbi-label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:#8a7f6d; margin-bottom:5px; }
.appsbi-front .appsbi-field{ margin-bottom:12px; }
.appsbi-front input[type=text], .appsbi-front input[type=number], .appsbi-front select{
  width:100%; font-size:14px; padding:9px 11px; border:1.5px solid var(--appsbi-line); border-radius:7px; background:var(--appsbi-white); color:var(--appsbi-ink); box-sizing:border-box;
}
.appsbi-front .appsbi-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .appsbi-front .appsbi-grid2{ grid-template-columns:1fr; } .appsbi-score-row{ grid-template-columns:1fr; } }
.appsbi-front .login-username label, .appsbi-front .login-password label{ font-weight:600; font-size:13px; }
.appsbi-front .login-remember, .appsbi-front .login-submit{ margin-top:10px; }
.appsbi-front #wp-submit{ background:var(--appsbi-maroon); color:var(--appsbi-white); border:none; padding:9px 16px; border-radius:7px; font-weight:700; cursor:pointer; }

/* ---------- clickable dashboard rows ---------- */
table.appsbi-table-clickable tbody tr.appsbi-row-detail{ cursor:pointer; }
table.appsbi-table-clickable tbody tr.appsbi-row-detail:hover{ background:#FBF3E4; }

/* ---------- detail modal ---------- */
.appsbi-modal-overlay{
  position:fixed; inset:0; background:rgba(33,28,25,.55); display:none; align-items:flex-start; justify-content:center;
  padding:5vh 16px; z-index:100000; overflow-y:auto;
}
.appsbi-modal-overlay.show{ display:flex; }
.appsbi-modal-box{ background:transparent; max-width:720px; width:100%; position:relative; }
.appsbi-modal-box .appsbi-card{ margin-bottom:0; }
.appsbi-modal-close{
  position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%;
  background:var(--appsbi-maroon); color:var(--appsbi-white); border:2px solid var(--appsbi-white);
  font-size:20px; line-height:1; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* ---------- Layar Arena (live, tampilan besar untuk ditayangkan di lokasi) ---------- */
.appsbi-arena-wrap{ max-width:none; position:relative; }
.appsbi-arena-control{ position:fixed; top:14px; right:14px; z-index:10; opacity:.55; transition:opacity .2s; }
.appsbi-arena-control:hover{ opacity:1; }
.appsbi-arena-control select{ font-size:12px; padding:6px 8px; width:auto; }

.appsbi-arena{
  background: radial-gradient(circle at 50% 0%, #3a0e17 0%, #1b0a0d 60%, #120708 100%);
  color:var(--appsbi-white); min-height:100vh; padding:26px 5vw 60px; box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.appsbi-arena-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.appsbi-arena-event{ font-size:15px; letter-spacing:.6px; text-transform:uppercase; color:var(--appsbi-gold-soft); font-weight:700; }
.appsbi-arena-live{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; letter-spacing:1px; color:#ff6a5e; }
.appsbi-arena-dot{ width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 10px #ff3b30; animation:appsbi-pulse 1.4s infinite; }
@keyframes appsbi-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.appsbi-arena-waiting{ text-align:center; padding:14vh 10px; color:var(--appsbi-gold-soft); }
.appsbi-arena-waiting-title{ font-size:clamp(28px,4vw,46px); font-weight:800; margin-bottom:12px; }
.appsbi-arena-waiting p{ color:#d8c7ba; font-size:16px; }

.appsbi-arena-current{ text-align:center; max-width:1100px; margin:0 auto; border-radius:18px; padding:10px 10px 20px; transition:background .3s; }
.appsbi-arena-current.appsbi-arena-flash{ animation:appsbi-flash 1.8s ease; }
@keyframes appsbi-flash{ 0%{ background:rgba(201,154,59,.35); } 100%{ background:transparent; } }

.appsbi-arena-kategori{ font-size:clamp(13px,1.6vw,16px); letter-spacing:1.5px; text-transform:uppercase; color:var(--appsbi-gold); font-weight:700; margin-bottom:6px; }
.appsbi-arena-nama{ font-size:clamp(30px,5vw,54px); font-weight:800; line-height:1.1; }
.appsbi-arena-sub{ font-size:clamp(14px,1.8vw,18px); color:#d8c7ba; margin-top:6px; margin-bottom:28px; }

.appsbi-arena-mainrow{ display:flex; gap:28px; align-items:stretch; justify-content:center; flex-wrap:wrap; }
.appsbi-arena-score-block{ flex:2 1 480px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px 16px; }
.appsbi-arena-total-block{ flex:1 1 220px; background:linear-gradient(160deg,var(--appsbi-gold) 0%,#a97c22 100%); color:#2a1a05; border-radius:14px; padding:20px; display:flex; flex-direction:column; justify-content:center; }
.appsbi-arena-total-label{ font-size:13px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; opacity:.85; }
.appsbi-arena-total-value{ font-size:clamp(46px,6vw,72px); font-weight:900; line-height:1.05; margin:2px 0 14px; }
.appsbi-arena-rank-label{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; opacity:.85; }
.appsbi-arena-rank-value{ font-size:clamp(24px,3vw,32px); font-weight:800; }

table.appsbi-arena-table{ width:100%; border-collapse:collapse; font-size:clamp(13px,1.5vw,16px); }
table.appsbi-arena-table th{ text-align:center; font-size:11px; text-transform:uppercase; color:#d8c7ba; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.15); }
table.appsbi-arena-table th:first-child{ text-align:left; }
table.appsbi-arena-table td{ text-align:center; padding:9px 6px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--appsbi-white); }
table.appsbi-arena-table td:first-child{ text-align:left; color:#d8c7ba; }
.appsbi-arena-cell-total{ font-weight:800; color:var(--appsbi-gold); }

.appsbi-arena-history{ max-width:1100px; margin:34px auto 0; }
.appsbi-arena-history-title{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#a8998a; font-weight:700; margin-bottom:10px; text-align:center; }
.appsbi-arena-history-list{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.appsbi-arena-history-item{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:8px 14px;
  display:flex; gap:12px; align-items:center; font-size:13px; color:#e8ddd0;
}
.appsbi-arena-history-total{ font-weight:800; color:var(--appsbi-gold); }
@media (max-width:720px){ .appsbi-arena-mainrow{ flex-direction:column; } }