* { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { margin: 0; background: #f0f4f8; color: #1e293b; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
.hidden { display: none !important; }
.center-box { text-align: center; padding-top: 40px; }

.badge { display: inline-block; padding: 5px 14px; border-radius: 20px; background: #dbeafe; color: #1d4ed8; font-size: 0.85rem; font-weight: 600; }
.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 30px; }
.card { background: #ffffff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.06); margin-bottom: 18px; text-align: left; }
.portal-card { text-align: center; cursor: pointer; transition: transform 0.2s; }
.portal-card:hover { transform: translateY(-4px); }

input, select, textarea { width: 100%; padding: 10px; margin: 8px 0 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.95rem; }
button { padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.btn-primary { background: #2563eb; color: white; width: 100%; }
.btn-secondary { background: #0f172a; color: white; width: 100%; }
.btn-outline { background: transparent; border: 1px solid #94a3b8; color: #334155; }
.row-btn, .row-input { display: flex; gap: 10px; }
.row-input input { margin: 0; }
.row-input button { width: auto; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; }
.tab-btn { background: #e2e8f0; color: #475569; flex: 1; }
.tab-btn.active { background: #2563eb; color: white; }

/* FITUR TENAR (TEMAN BERBINAR) - AVATAR API */
.tenar-box { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, #1e293b, #0f172a); color: white; }
.avatar-container { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.08); border-radius: 50%; flex-shrink: 0; }
.flame { width: 34px; height: 34px; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); transition: all 0.5s ease; }

/* Level Api Tenar */
.flame-dead { background: #64748b; opacity: 0.4; box-shadow: none; }
.flame-orange { background: #f97316; box-shadow: 0 0 20px #f97316, 0 0 40px #ea580c; animation: flicker 1.2s infinite alternate; }
.flame-blue { background: #38bdf8; box-shadow: 0 0 22px #38bdf8, 0 0 45px #0284c7; animation: flicker 0.9s infinite alternate; }
.flame-gold { background: #facc15; box-shadow: 0 0 25px #facc15, 0 0 50px #a855f7; animation: flicker 0.7s infinite alternate; }

@keyframes flicker {
  0% { transform: rotate(-45deg) scale(0.95); }
  100% { transform: rotate(-45deg) scale(1.1); }
}

.media-preview { width: 100%; margin-top: 10px; border-radius: 8px; }
.success-text { color: #16a34a; font-weight: 600; }
.error-text { color: #dc2626; font-weight: 600; }
.data-list { padding-left: 20px; }
.data-list li { margin-bottom: 8px; }