/* Light Peaceful Color Palette */
:root {
  --primary-blue: #4a7c9e;
  --light-cream: #faf8f3;
  --pale-blue: #e8f4f8;
  --sage-green: #d4e4d0;
  --soft-purple: #e8ddf0;
  --gold-accent: #d4a574;
  --silver-accent: #c7c7c7;
  --shadow-light: 0 4px 15px rgba(74, 124, 158, 0.08);
  --shadow-medium: 0 8px 25px rgba(74, 124, 158, 0.12);
}

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body.body-bg {
  background: linear-gradient(135deg, #faf8f3 0%, #e8f4f8 50%, #d4e4d0 100%);
  color: #2c3e50;
  min-height: 100vh;
}

/* Login Panel */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 3rem;
  box-shadow: var(--shadow-medium);
  border: 1px solid rgba(255, 255, 255, 0.6);
  width: 100%;
  max-width: 400px;
  animation: slideUp 0.5s ease;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h2 {
  color: var(--primary-blue);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.login-header p {
  color: #888;
  font-size: 0.95rem;
}

.login-card .form-label {
  color: var(--primary-blue);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.login-card .form-control-lg {
  border: 2px solid var(--pale-blue);
  border-radius: 8px;
  color: var(--primary-blue);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.login-card .form-control-lg:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(74, 124, 158, 0.15);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section Cards */
.section-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-light);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.section-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.section-header {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--pale-blue);
}

/* Modern Cards */
.modern-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(232, 244, 248, 0.5) 100%);
  border: 2px solid rgba(232, 244, 248, 0.6);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
  min-height: 200px;
  display: flex;
  align-items: center;
}

.modern-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
  border-color: var(--primary-blue);
}

.gold-card {
  border-top: 4px solid #d4a574;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 240, 0.5) 100%);
}

.silver-card {
  border-top: 4px solid #c7c7c7;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.5) 100%);
}

.market-card {
  border-top: 4px solid var(--primary-blue);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 244, 248, 0.3) 100%);
}

/* Karat Badge */
.karat-badge {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  background: linear-gradient(135deg, var(--pale-blue) 0%, var(--sage-green) 100%);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(74, 124, 158, 0.1);
}

/* Form Control */
.form-control-lg {
  border: 2px solid var(--pale-blue);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  color: var(--primary-blue);
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.form-control-lg:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(74, 124, 158, 0.15);
  background: white;
}

.form-control-lg::placeholder {
  color: #aaa;
}

/* Save Button */
.save-btn {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #3a5f7d 100%);
  border: none;
  color: white;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-light);
  transition: all 0.3s ease;
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  background: linear-gradient(135deg, #3a5f7d 0%, #2a4f6d 100%);
  color: white;
}

.save-btn:active {
  transform: translateY(0);
}

.logout-btn {
  border: 1px solid rgba(196, 91, 99, 0.35);
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  color: #b14b54;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.45rem 1rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(196, 91, 99, 0.12);
}

.logout-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #d8757d 0%, #c45b63 100%);
  border-color: #c45b63;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(196, 91, 99, 0.2);
}

.logout-btn:active {
  transform: translateY(0);
}

/* Market Price Display */
.market-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 1rem 0;
}

.unit-price-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  text-align: left;
}

.unit-row {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-blue);
  line-height: 1.2;
}

/* Status Message */
.status-message {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  display: none;
  animation: slideIn 0.3s ease;
}

.status-message.show {
  display: block;
}

.status-message.success {
  background: linear-gradient(135deg, #d4e4d0 0%, #c9dbc4 100%);
  color: #2d5c3a;
  border: 2px solid #a8c998;
}

.status-message.error {
  background: linear-gradient(135deg, #f5d4d4 0%, #f0c9c9 100%);
  color: #8b3a3a;
  border: 2px solid #e0a0a0;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .section-card {
    padding: 1.5rem;
  }

  .display-5 {
    font-size: 2rem;
  }

  .karat-badge {
    font-size: 1.1rem;
    padding: 0.6rem 1.2rem;
  }

  .market-price {
    font-size: 1.5rem;
  }
}