:root { --bg: #0a0a0f; --panel: #1a1a24; --primary: #00d4ff; --danger: #ff4757; --success: #2ed573; --warning: #ffa502; --text: #e0e0e0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; max-width: 500px; margin: 0 auto; }
.device-title { font-weight: bold; text-align: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 18px; color: var(--warning); }
.box { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid rgba(255,255,255,0.05); }
input, select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.4); color: white; margin-bottom: 10px; font-size: 14px; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
button { padding: 10px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; width: 100%; color: white; margin-bottom: 10px; font-size: 13px; }
.btn-main { background: linear-gradient(135deg, var(--primary), #0099cc); color:#000; }
.btn-success { background: linear-gradient(135deg, var(--success), #1e9e4a); }
.btn-danger { background: linear-gradient(135deg, var(--danger), #c0392b); }
.btn-warning { background: linear-gradient(135deg, var(--warning), #e67e22); color: #111; }
ul { list-style: none; font-size: 12px; }
ul li { background: rgba(0,0,0,0.3); padding: 10px; margin-bottom: 5px; border-radius: 6px; display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(255,255,255,0.05); }
.action-group { display: flex; gap: 5px; width: 100%; }
.action-group button { margin-bottom: 0; padding: 6px; font-size: 11px; }
.tab-header { display: flex; margin-bottom: 10px; border-bottom: 1px solid #333; }
.tab-btn { flex: 1; background: transparent; color: #888; margin: 0; border-radius: 0; padding: 10px; }
.tab-btn.active { color: var(--warning); border-bottom: 2px solid var(--warning); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.struk-modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; color:#000; padding:20px; width:280px; max-width:85vw; text-align:center; z-index:100; box-shadow:0 0 50px rgba(0,0,0,0.8); font-family:monospace; }
.struk-modal.show { display:block; }
#loginScreen { display: block; }
#adminPanel { display: none; }

/* ---------- RESPONSIF HP ----------
   Base layout (max-width 500px, mobile-first) sudah otomatis mengecil di layar sempit
   karena tidak ada width tetap. Tambahan di bawah murni penyesuaian kenyamanan di HP
   kecil, tidak mengubah struktur/tampilan dasar yang sudah ada. */
@media (max-width: 480px) {
  body { padding: 12px; }
  .box { padding: 12px; }
  /* font-size input < 16px memicu auto-zoom di Safari iOS saat difokus */
  input, select { font-size: 16px; }
  .tab-btn { font-size: 12px; padding: 8px 4px; }
}

@media (max-width: 360px) {
  body { padding: 8px; }
  .device-title { font-size: 15px; }
  .tab-btn { font-size: 10px; padding: 6px 2px; }
  .action-group button { font-size: 10px; }
}