:root {

  --bg: #F4F7F9;
  --card: #FFFFFF;

  --primary: #1D3557;
  --accent: #E6F2A4;

  --text: #1A1A1A;
  --muted: #6B7280;

  --success: #27AE60;
  --danger: #E74C3C;

  --radius: 22px;

  --shadow:
    0 10px 25px rgba(0,0,0,0.06);

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  background: var(--bg);

  font-family:
    Inter,
    system-ui,
    sans-serif;

  color: var(--text);

}

.app-container {

  width: 100%;
  min-height: 100vh;

  padding: 18px;

}

.topbar {

  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 22px;

}

.brand {

  display: flex;
  align-items: center;
  gap: 14px;

}

.logo-box {

  width: 58px;
  height: 58px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #1D3557,
      #274472
    );

  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  font-weight: 800;

  box-shadow: var(--shadow);

}

.brand h1 {

  font-size: 22px;
  font-weight: 800;

}

.brand p {

  color: var(--muted);
  font-size: 13px;

}

.status-badge {

  background: var(--accent);

  color: #000;

  padding: 8px 14px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;

}

.hero-card,
.scan-panel,
.recent-section {

  background: var(--card);

  border-radius: var(--radius);

  padding: 22px;

  box-shadow: var(--shadow);

  margin-bottom: 22px;

}

.hero-card h2,
.scan-panel h3 {

  margin-bottom: 18px;

}

.metrics-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;

}

.metric-card {

  background: #F8FAFC;

  border-radius: 18px;

  padding: 18px;

}

.metric-card span {

  display: block;

  color: var(--muted);

  font-size: 13px;

  margin-bottom: 8px;

}

.metric-card strong {

  font-size: 28px;
  font-weight: 800;

}

.field-label {

  display: block;

  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 600;

}

.field-control {

  width: 100%;

  border: none;

  border-radius: 16px;

  padding: 16px;

  margin-bottom: 18px;

  font-size: 15px;

  background: #F8FAFC;

  box-shadow: var(--shadow);

  outline: none;

}

.actions-section {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;

  margin-bottom: 22px;

}

.action-btn {

  border: none;

  background: var(--primary);

  color: white;

  border-radius: 18px;

  padding: 20px 14px;

  font-size: 16px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;

  box-shadow: var(--shadow);

}

.action-btn.full {

  width: 100%;

  margin-top: 8px;

}

.action-btn:hover {

  transform: translateY(-2px);

  background: #274472;

}

.search-section {

  margin-bottom: 22px;

}

.search-section input {

  width: 100%;

  padding: 18px;

  border-radius: 18px;

  border: none;

  font-size: 16px;

  box-shadow: var(--shadow);

  outline: none;

}

.recent-section h3 {

  margin-bottom: 18px;

}

#recent-movements,
#ocr-result {

  display: flex;
  flex-direction: column;
  gap: 14px;

}

.movement-card {

  background: #F8FAFC;

  border-radius: 18px;

  padding: 18px;

}

.movement-card strong {

  display: block;

  margin-bottom: 8px;

  font-size: 16px;

}

.movement-card span {

  color: var(--muted);

  font-size: 14px;

}

.ocr-actions {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 12px;

  margin-top: 16px;

}

.ocr-action-btn {

  border: none;

  border-radius: 14px;

  padding: 14px;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

}

.checkout-btn {

  background: var(--primary);
  color: white;

}

.checkin-btn {

  background: var(--accent);
  color: black;

}

.cancel-btn {

  background: #ECECEC;
  color: black;

}

@media (min-width: 900px) {

  .dashboard {

    max-width: 1100px;
    margin: auto;

  }

  .metrics-grid {

    grid-template-columns:
      repeat(4, 1fr);

  }

  .actions-section {

    grid-template-columns:
      repeat(4, 1fr);

  }

}