:root{ --accent:#2b6cb0; --muted:#6b7280; --bg:#0f172a}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; background:#f7fafc; color:#0b1220; margin:0}
.container{max-width:900px;margin:28px auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.08)}
header h1{margin:0;font-size:26px}
.muted{color:var(--muted)}
.hidden{display:none}
#login-form{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
#login-form input{flex:1 1 200px;padding:10px;border:1px solid #e6e9ef;border-radius:8px}
#login-form button{padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px}
button{cursor:pointer}
.button{display:inline-block;padding:10px 14px;background:#0ea5a2;color:#fff;border-radius:8px;text-decoration:none}
.pin{font-size:22px;background:#0f172a;color:#fff;padding:8px;border-radius:6px;display:inline-block}
footer{margin-top:16px;text-align:center}

/* ================================
   LANGUAGE SWITCHER
================================ */
#lang-links {
  display: inline-flex;
  gap: 8px;
  margin-left: 10px;
}

.lang-btn {
  display: inline-block;
  padding: 6px 12px;
  background: #444;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  transition: background 0.2s ease;
}

.lang-btn:hover {
  background: #222;
}

/* ================================
   GENERAL STYLES
================================ */
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #0e0e0e;
  color: #f5f5f5;
  line-height: 1.6;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-weight: 600;
  margin: 0 0 12px;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ================================
   NAVIGATION
================================ */
nav {
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 0;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

nav a,
button {
  color: #f5f5f5;
  text-decoration: none;
  padding: 10px 18px;
  display: block;
  transition: background-color 0.3s ease;
  background-color: #1a1a1a;
  border-radius: 6px;
  margin: 5px;
  font-size: 0.95em;
  cursor: pointer;
}

nav a:hover,
button:hover {
  background-color: #333;
}

/* ================================
   HOME / MAIN SECTION
================================ */
#home {
  background-color: #fff;
  max-width: 900px;
  margin: 20px auto;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  border-radius: 10px;
  color: #222;
}

/* ================================
   VIDEO
================================ */
video {
  width: 100%;
  max-width: 600px;
  border: 2px solid #222;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

/* ================================
   CAMERA CONTAINER
================================ */
.camera-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  width: 90%;
  max-width: 600px;
}

/* ================================
   SCAN / REWARD COUNTS
================================ */
#rewardCount,
#scanCount {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #111;
  background-color: #e5e5e5;
  padding: 6px 12px;
  border-radius: 4px;
  text-align: center;
}

/* ================================
   RESULT FIELD
================================ */
.result-container {
  width: 100%;
  margin-top: 14px;
}

.result-container input {
  padding: 12px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #aaa;
}

/* ================================
   AUTH / QR BOXES
================================ */
.card,
.auth-box,
.qr-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  max-width: 80%;
  width: 100%;
  text-align: center;
  margin-bottom: 22px;
  color: #222;
}

.qr-box {
  border-left: 5px solid #444;
}

.auth-container,
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

/* ================================
   FORM INPUTS
================================ */
#regEmail,
#loginEmail,
#loginPassword,
#regPassword {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 0.95em;
}

/* ================================
   CHECKBOXES
================================ */
input[type="checkbox"] {
  accent-color: black;
  transform: scale(1.2);
  cursor: pointer;
}

/* ================================
   RESPONSIVE DESIGN
================================ */
@media screen and (max-width: 480px) {
  nav a {
    padding: 8px 12px;
    font-size: 14px;
  }

  #rewardCount,
  #scanCount {
    font-size: 16px;
  }

  .result-container input {
    font-size: 14px;
  }

  .auth-box,
  .qr-box {
    max-width: 95%;
    padding: 20px;
  }
}
.camera-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal centering */
  margin: 0 auto;
  min-height: 70vh; /* fills most of the screen vertically */
  width: 90%;
  max-width: 600px;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #0e0e0e;
  color: #f5f5f5;
  margin: 0;
  padding: 20px;
}

/* ================================
   CARD CONTAINER
================================ */
.card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
  max-width: 800px;
  margin: auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  color: #f5f5f5;
}

/* ================================
   HEADER
================================ */
header {
  text-align: center;
  margin-bottom: 20px;
}

/* ================================
   BUTTONS
================================ */
button {
  cursor: pointer;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 0.95em;
  transition: background 0.2s ease, color 0.2s ease;
}

button.primary {
  background: #007bff;
  color: #fff;
}

button.primary:hover {
  background: #0056b3;
}

button.ghost {
  background: #2a2a2a;
  color: #f5f5f5;
}

button.ghost:hover {
  background: #3a3a3a;
}

/* ================================
   TABLE
================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  color: #f5f5f5;
}

th,
td {
  border-bottom: 1px solid #333;
  padding: 8px;
  text-align: left;
}

th {
  background: #222;
  font-weight: 600;
}

/* ================================
   PROGRESS BAR
================================ */
progress {
  width: 100%;
  margin-top: 6px;
  height: 8px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #333;
}

progress::-webkit-progress-bar {
  background-color: #333;
}

progress::-webkit-progress-value {
  background-color: #007bff;
}

progress::-moz-progress-bar {
  background-color: #007bff;
}

/* ================================
   FOLDER HOVER / LINKS
================================ */
.folder-hover {
  background: #222;
}

a.file-link {
  text-decoration: none;
  color: #00aaff;
  cursor: pointer;
}

a.file-link:hover {
  text-decoration: underline;
}