:root {
    --green: #2f7a3e;
    --green-900: #1f5a2b;
    --mint: #e7f4ea;
    --ink: #1f2937;
    --muted: #6b7280;
    --card: #fff;
    --ring: #cfe8d5;
    --shadow: 0 8px 24px rgba(0, 0, 0, .06);
    --radius: 14px;
    --gap: 16px;
    --max: 1100px;
}

* {
    box-sizing: border-box
}
/* header css */
  /* Navbar */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2f7a3e;
    padding: 12px 20px;
    color: white;
  }

  .navbar .logo {
    font-size: 22px;
    font-weight: 700;
  }

  .navbar ul {
    list-style: none;
    display: flex;
    gap: 16px;
  }

  .navbar ul li a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
  }

  .navbar ul li a:hover,
  .navbar ul li a.active {
    background: #1f5a2b;
  }

  .nav-right .btn {
    background: white;
    color: #2f7a3e;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
  }

  /* Hero Section */
  .hero {
    text-align: center;
    padding: 50px 20px;
    background: #e7f4ea;
    color: #2f7a3e;
  }

  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 12px;
  }

  .hero p {
    font-size: 1.1rem;
    color: #4b6c3a;
  }

/* over of header css */
html,
body {
    margin: 0;
    background: #f5faf6;
    color: var(--ink);
    font-family: Inter, system-ui, Arial, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.muted {
    color: var(--muted)
}

.hidden {
    display: none
}

.full {
    grid-column: 1/-1
}

.margin-top {
    margin-top: 1rem
}

/* Header/Footer */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--green);
    color: #fff;
    box-shadow: var(--shadow)
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 700
}

.logo {
    font-size: 22px
}

.brand-text {
    font-size: 20px
}

.nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.nav a {
    padding: 8px 12px;
    border-radius: 8px;
    color: #eaf7ed
}

.nav a.active,
.nav a:hover {
    background: var(--green-900);
    color: #fff
}

.auth-btn {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer
}

.site-footer {
    background: var(--green);
    color: #eaf7ed;
    text-align: center;
    padding: 18px;
    margin-top: 40px
}

/* Layout */
.container {
    max-width: var(--max);
    margin: 28px auto;
    padding: 0 20px
}

.card {
    background: var(--card);
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-top: 18px
}

.form-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.grid-2 {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px
}

input,
select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ring);
    border-radius: 10px;
    background: #fff
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.cta {
    display: inline-block;
    background: var(--green);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px
}

.cta:hover {
    background: var(--green-900)
}

.ghost {
    border: 1px solid var(--green);
    background: #fff;
    color: var(--green);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer
}

.ghost:hover {
    background: var(--mint)
}

/* Score */
.score-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ddd;
    color: #111;
    font-weight: 700
}

.badge.good {
    background: #b7f0c0
}

.badge.ok {
    background: #ffe9a8
}

.badge.poor {
    background: #ffb3b3
}

.score-bar {
    flex: 1;
    height: 14px;
    background: #e6f4ea;
    border-radius: 999px;
    border: 1px solid var(--ring);
    overflow: hidden;
    min-width: 220px
}

#scoreFill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ff6868, #ffd166, #6bd66b)
}

/* Lists */
.crops li {
    margin: 6px 0
}

.precautions li {
    margin: 6px 0
}

/* ===== Market Page Specific Styles ===== */

/* Price Table */
#priceTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

#priceTable th,
#priceTable td {
    padding: 10px;
    text-align: left;
}

#priceTable th {
    background: var(--green);
    color: #fff;
}

#priceTable tr:nth-child(even) {
    background-color: var(--mint);
}

/* Chart container */
#priceChart {
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow);
}

/* Nearby Markets list */
#nearbyMarkets li {
    margin: 6px 0;
    padding: 6px 10px;
    background: var(--mint);
    border-radius: 8px;
}