.container {
  background-color: #1e1e1e;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* Material Elevation */
  width: 100%;
  max-width: 400px; /* Vừa vặn để overlay lên góc video */
}

h2 {
  margin-top: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: #bb86fc; /* Màu nhấn chuẩn Material Dark */
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Lưới chứa các nút bấm */
.input-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Chính xác tối đa 4 nút mỗi hàng ngang */
  gap: 12px;
  align-items: center;
}

/* Thiết kế nút bấm chuẩn Material */
.input-btn {
  background-color: #2c2c2c;
  border: 2px solid #444; /* Viền mặc định */
  border-radius: 8px;
  padding: 16px 0;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e0e0e0;
  /* Hiệu ứng chuyển động mượt mà khi đổi màu viền và tỏa sáng */
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s;
}

/* Trạng thái phát sáng khi đang nhấn giữ nút */
.input-btn.glowing {
  border-color: #03dac6; /* Màu Teal sáng của Material */
  box-shadow: 0 0 12px rgba(3, 218, 198, 0.8), inset 0 0 8px rgba(3, 218, 198, 0.4);
  color: #ffffff;
  background-color: #3a3a3a;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
}

canvas {
  border: 1px solid #444;
  max-width: 100%;
  display: block;
  margin-top: 15px;
}

/* CSS cho Toast (Material Design) */
.toast {
  visibility: hidden; /* Mặc định ẩn */
  min-width: 250px;
  background-color: #323232; /* Màu xám tối Material */
  color: #fff;
  text-align: center;
  border-radius: 8px; /* Bo góc */
  padding: 16px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%); /* Căn giữa màn hình */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Đổ bóng nhẹ */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  opacity: 0;
  transition: opacity 0.3s, bottom 0.3s;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 50px; /* Trượt nhẹ lên khi xuất hiện */
}

.toast-icon {
  margin-right: 12px;
  color: #03dac6; /* Màu nhấn Teal */
}
/* --- BỐ CỤC (LAYOUT) --- */
.button-container {
  display: flex;        /* Đặt các nút trên cùng 1 hàng */
  gap: 16px;            /* Khoảng cách giữa 2 nút */
  margin-top: 80px;     /* Cách top 80px theo yêu cầu */
  
  /* Căn giữa các nút (bạn có thể bỏ dòng này nếu muốn căn trái) */
  justify-content: center; 
}

/* --- PHONG CÁCH MATERIAL DESIGN CHO NÚT --- */
.btn_rec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  min-width: 64px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 4px; /* Bo góc nhẹ đặc trưng của Material */
  
  /* Chữ (Typography) */
  font-family: "Roboto", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase; /* Chữ in hoa */
  letter-spacing: 1.25px;
  color: #ffffff;
  
  /* Đổ bóng (Elevation) */
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
              0px 2px 2px 0px rgba(0, 0, 0, 0.14),
              0px 1px 5px 0px rgba(0, 0, 0, 0.12);
              
  /* Hiệu ứng chuyển đổi mượt mà */
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

/* Màu cho nút Bắt đầu */
#btnStart {
  background-color: #1976d2; /* Xanh lam Material */
}

/* Đổ bóng và đổi màu khi di chuột vào (Hover state) */
#btnStart:hover {
  background-color: #1565c0;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
              0px 4px 5px 0px rgba(0, 0, 0, 0.14),
              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

/* Đổ bóng sâu hơn khi click (Active state) */
#btnStart:active {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
              0px 8px 10px 1px rgba(0, 0, 0, 0.14),
              0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

/* --- TRẠNG THÁI DISABLED (NÚT DỪNG) --- */
/* Ghi đè toàn bộ style cho bất kỳ nút nào có thuộc tính disabled */
.btn:disabled {
  background-color: rgba(0, 0, 0, 0.12) !important;
  color: rgba(0, 0, 0, 0.38) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Màu cho nút Dừng (Phòng trường hợp bạn bỏ thuộc tính disabled đi sau này) */
#btnStop {
  background-color: #d32f2f; /* Đỏ Material */
}

#btnStop:not(:disabled):hover {
  background-color: #c62828;
}