.font-x-large {font-size: 18px;}

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

html, body {height: 100%; min-height: 100%; margin: 0;}

body {font-family: "Poppins", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(180deg, var(--mist-bg), #e9f0e6); text-decoration: none; color: #233623;}

a:link,
a:visited {color: white; text-decoration: none;}

a:hover,
a:active {color: white; text-decoration: none;}

input[type="text"] {max-width: 100%; box-sizing: border-box;}

textarea {max-width: 100%; box-sizing: border-box;}

.page-container {width: 330px; height: 100dvh; min-height: 100vh; margin: 0 auto; background-color: white; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; padding: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border-radius: 20px;}

.container {width: 100%; margin: 0 auto; background-color: white; padding: 0;}

.scrollable-middle {flex: 1; overflow-y: auto; overflow-x: hidden;  padding-bottom: 0px;padding-top: 5px;}
.scrollable-middle-gps-input {overflow-y: auto; flex-shrink: 0; padding: 5px; padding-bottom: 5px; height: 100px; min-height: 100px;}

.scrollable-middle-map {overflow-y: auto; padding: 5px; padding-bottom: 5px; min-height: 200px;}

    .sticky-header {position: sticky; top: 0; z-index: 1000; background:  mediumspringgreen ; padding: 0px 0px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom:5px;border-bottom: 1px solid rgb(3, 247, 3);}

.sticky-footer {max-width: 330px; margin: 0 auto; padding: 1px; text-align: center; background: transparent; border-top: 1px solid rgba(76, 175, 80, 0.3);}

table {border-collapse: collapse; width: 100%; background-color: transparent; box-shadow: none; text-align: center; table-layout: fixed;}

tr,
th,
td {padding: 0 0px; text-align: center; border: 1; text-decoration: none;}

.td-menu {padding: 0 0px; text-align: center; background-color: rgb(0, 128, 0); color: white; border: 0; text-decoration: none; border-radius: 10px; font-size: 16px;}

.td-menu-new {padding: 0 0px; text-align: center; background-color: aqua; color: white; border: 0; text-decoration: none; border-radius: 10px; font-size: 20px;}

.card {border: none; border-radius: 16px; background-color: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); margin-bottom: 0.8rem; overflow: hidden;}

.card-body {padding: 1.5rem;}

.form-label {display: inline-block; margin-bottom: 0.5rem; font-weight: 500; color: #6b7280; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px;}

.form-control {display: block; width: 100%; padding: 0.875rem 1rem; font-size: 1rem; line-height: 1.5; color: #1f2937; background-color: white; border: 2px solid #e5e7eb; border-radius: 12px; transition: all 0.3s ease;}

.form-control:focus {color: #1f2937; background-color: white; border-color: #4a7c2c; outline: 0; box-shadow: 0 0 0 3px rgba(74, 124, 44, 0.1);}

.mb-3 {margin-bottom: 1rem;}

.form-check {display: block; min-height: 1.5rem; padding-left: 5px; margin-bottom: 0.125rem;}

.form-check-input {width: 8ch; height: 1em; margin-top: 0.25em; margin-left: -1.5rem; vertical-align: top; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0.25em;}

.form-check-label {color: #212529; cursor: pointer;}

.d-grid {display: grid;}

.header-button {background-color: rgba(255, 255, 255, 0.2); border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 11px; cursor: pointer; height: 20px; border-radius: 6px; padding: 0 8px; transition: all 0.3s ease;}
.header-button:hover {background-color: rgba(255, 255, 255, 0.3);}

.aqua-button {display: inline-block; width: 100%; padding: 0.4rem 0.4rem; background: #FFFFFF; color: black; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 1.125rem; cursor: pointer; transition: all 0.3s ease; margin: 5px 0; box-shadow: 0 4px 12px lightgray;  border-style: solid; border-color: lightgrey;}
.aqua-button:hover {transform: translateY(-2px);  text-decoration: none;border: 3px solid rgb(4, 253, 4);}

.red-button {display: inline-block; width: 100%; padding: 0.4rem 0.4rem; background: #FFFFFF; color: black; text-decoration: none; border-color:red;border-radius: 12px; font-weight: 600; font-size: 1.125rem; cursor: pointer; transition: all 0.3s ease; margin: 5px 0; box-shadow: 0 4px 12px lightgray;  border-style: solid; border-color: lightgrey;}
.red-button:hover {transform: translateY(-2px); background: red;box-shadow: 0 6px 20px lightgray; color:black;text-decoration: none;border-style:none}

.back-button {display: inline-block; padding: 0px 0px; background: #FFFFFF; color: grey; text-decoration: none; border-radius: 12px; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; margin: 0px 0; box-shadow: 0 2px 5px lightgray;  border-style: solid; border-color: lightgrey; width:120px}
.back-button:hover {transform: translateY(-2px);  color:black;text-decoration: none;border: 3px solid rgb(4, 253, 4);}

.summary-button, .linker {background: linear-gradient(135deg, #4a7c2c 0%, #3d6620 100%); font-size: 14px; width: 100%; border: none; cursor: pointer; color: white; padding: 1rem; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(74, 124, 44, 0.3);}

.summary-button:hover, .linker:hover {transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74, 124, 44, 0.4); text-decoration: none;}

.summary-button-icon {text-decoration: none; border: none; cursor: pointer; width: 100%;}

.summary-button-icon:hover {background-color: #a9f8f4; text-decoration: none;}

input[type="submit"],
input[type="reset"]  {display: inline-block; width: 100%; padding: 0.2rem 0.2rem; background: #FFFFFF; color: black; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 1.125rem; cursor: pointer; transition: all 0.3s ease; margin: 5px 0; box-shadow: 0 4px 12px lightgray;  border-style: solid; border-color: lightgrey;}
input[type="submit"]:hover,
input[type="reset"]:hover {transform: translateY(-2px);  color:black;text-decoration: none;border: 3px solid rgb(4, 253, 4);}

h1 {color:black;text-align: center; margin: 0; font-size:1.2em;font-weight: 500; letter-spacing: -0.5px; padding-top:0px }
h2 {color: black; font-weight: 500;}
h3 {color: black; font-weight: 400;}

hr {border: 0; height: 1px; background: #a19e9e; margin: 1rem 0;}

.header {background: linear-gradient(135deg, #2d5016 0%, #4a7c2c 100%); color: white; padding: 2rem 1.5rem; text-align: center; border-radius: 0 0 20px 20px;}
.header h1 {font-size: 1.2rem; font-weight: 700; margin-bottom: 10px;}

.header p {font-size: 1.2rem; opacity: 1;}

.input-section {padding: 1rem; background: #f8faf9;}

.coordinates-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem;}

.coordinate-group {background: white; padding: 1rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; border: 2px solid transparent;}

.coordinate-group:hover {transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border-color: #4a7c2c;}

.coordinate-group h3 {color: #2d3748; font-size: 1rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-weight: 600;}

.coordinate-group h3::before {content: "Location"; font-size: 1.2rem;}

.input-group {position: relative;}

.input-group label {display: block; color: #6b7280; font-weight: 500; margin-bottom: 6px; font-size: 0.875rem;}

.input-group input {width: 100%; padding: 0.875rem 1rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 0.875rem; transition: all 0.3s ease; background: white;}

.input-group input:focus {outline: none; border-color: #4a7c2c; box-shadow: 0 0 0 3px rgba(74, 124, 44, 0.1); transform: translateY(-1px);}

.input-group input:valid {border-color: #48bb78;}

.map-section {padding: 0; background: white;}

.map-header {padding: 1rem; background: white; border-top: 1px solid #e2e8f0;}

.map-header h2 {color: #2d3748; font-size: 1.5rem; margin-bottom: 0px; display: flex; align-items: center; gap: 2px; font-weight: 600;}

.map-header h2::before {content: "Map"; font-size: 1.5rem;}

.map-stats {display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px;}

.stat-item {background: linear-gradient(135deg, #4a7c2c 0%, #3d6620 100%); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500;}

#map {height: 160px; max-height: 160px; width: 100%; max-width: 310px; border-radius: 12px; overflow: hidden;}

.leaflet-control-zoom a,
.leaflet-control-attribution,
.leaflet-control-attribution a {color: #333 !important; text-decoration: none !important;}

.leaflet-control-zoom a:hover {color: #000 !important; background-color: #f4f4f4 !important;}

.leaflet-control-attribution {background-color: rgba(255, 255, 255, 0.8) !important; color: #333 !important;}

.leaflet-control-zoom a {background-color: #fff !important; border: 1px solid #ccc !important; color: #333 !important; font-weight: bold !important; border-radius: 8px !important;}

.color-legend {position: absolute; top: 5px; right: 5px; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; font-size: 0.9rem;}

.legend-item {display: flex; align-items: center; gap: 8px; margin-bottom: 5px;}

.legend-color {width: 16px; height: 16px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}

.gps-button {margin-right: 5px; padding: 8px 12px; font-size: 0.875rem; cursor: pointer; background: linear-gradient(135deg, #4a7c2c 0%, #3d6620 100%); color: white; border: none; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(74, 124, 44, 0.3);}

.gps-button:hover {transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74, 124, 44, 0.4);}

.circle-button {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 200px; height: 200px; margin: 10px auto; border-radius: 50%; background: rgba(255, 255, 255, 0.7); text-decoration: none; color: #04f929; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid #05f12826; backdrop-filter: blur(8px);}
.circle-button:hover {background: linear-gradient(180deg, var(--mist-bg), #e9f0e6); color: hsl(0, 0%, 3%); border: 5px solid hsl(141, 96%, 49%); transform: translateY(-5px); box-shadow: 0 8px 25px rgba(74, 124, 44, 0.3);}
a.circle-button:link,
a.circle-button:visited {color: #05f92d !important;}

a.circle-button:hover,
a.circle-button:active {color: #07f867 !important;}

.circle-button-medium {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 150px; height: 150px; margin: 10px auto; border-radius: 50%; background: rgba(255, 255, 255, 0.7); text-decoration: none; color: #101110; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid #05f12826; backdrop-filter: blur(8px);}
.circle-button-medium:hover {background: linear-gradient(180deg, var(--mist-bg), #e9f0e6); color: hsl(0, 0%, 4%); border: 5px solid hsl(141, 96%, 49%); transform: translateY(-5px); box-shadow: 0 8px 25px rgba(74, 124, 44, 0.3);}
a.circle-button-medium:link,
a.circle-button-medium:visited {color: #05f92d !important;}

.circle-button-small {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 120px; height: 120px; margin: 5px auto; border-radius: 50%; background: rgba(255, 255, 255, 0.7); text-decoration: none; color: #355E3B; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 1px solid rgba(53, 94, 59, 0.15); backdrop-filter: blur(8px);}
.circle-button-small:hover {background: linear-gradient(180deg, var(--mist-bg), #e9f0e6); color:black; border: 2px solid #08e899; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(74, 124, 44, 0.3);}

a.circle-button-small:link,
a.circle-button-small:visited {color: #2d5016 !important;}

a.circle-button-small:hover,
a.circle-button-small:active {color: #2d5016 !important;}

.rectangle-button {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 140px; height: 140px; margin: 10px auto; border-radius: 20px; background: rgba(255, 255, 255, 0.7); text-decoration: none; color: #355E3B; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 1px solid rgba(53, 94, 59, 0.15); backdrop-filter: blur(8px);}

.rectangle-button:hover {color: white; background: linear-gradient(135deg, #4a7c2c 0%, #3d6620 100%); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(74, 124, 44, 0.3);}

a.rectangle-button:link,
a.rectangle-button:visited {color: #2d5016;}

a.rectangle-button:hover,
a.rectangle-button:active {color: white;}

.site-header {background: linear-gradient(135deg, #355E3B 0%, #4A7C2C 100%); text-align: center; padding: 1.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}

.site-header .logo {font-size: 1.5rem; font-weight: 600; color: white; letter-spacing: 0.5px;}

.title {text-align: center; font-size: 1.20rem; font-weight: 500; margin: 5px 0; color: black#355E3B; letter-spacing: -0.5px;}

.site-footer {background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); text-align: center; padding: 1rem; font-size: 0.9rem; color: #355E3B; border-top: 1px solid rgba(53, 94, 59, 0.15);}

.site-footer nav {margin-bottom: 0.4rem;}

.site-footer a {text-decoration: none; color: #355E3B; margin: 0 0.5rem; transition: color 0.2s ease;}

.site-footer a:hover {color: #8FB339; text-decoration: underline;}

.chart-gauge {width: 300px; height: 200px;}

.chart-first {fill: #f69f08;}

.chart-second {fill: #f8f821;}

.chart-third {fill: #25e913;}

.needle,.needle-center {fill: #c3c5c8;}

.gauge-container {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; justify-items: center; align-items: center; width: 100%; max-width: 1000px; margin: 0 auto;}

.summary-menu {display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;}

.summary-item {display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); border-radius: 16px; padding: 1rem 1.4rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;}

.summary-item:hover {transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); background: linear-gradient(135deg, #4A7C2C 0%, #3D6620 100%); color: white;}

.summary-item .label {display: flex; align-items: center; gap: 1rem;}

.summary-item .label span.icon {font-size: 2rem;}

.summary-item .label h2 {font-size: 1rem; font-weight: 600;}

.summary-item .arrow {font-size: 1.5rem; color: #8FB339;}

@media (max-width: 768px) {
    .header h1 {
        font-size: 1.2rem;
    }
    
    .input-section {
        padding: 1rem;
    }
    
    .coordinates-grid {
        grid-template-columns: 1fr;
    }
    
    .map-header {
        padding: 1rem;
    }
    
}

/* Summary page button overrides: light bg, dark green border/font */

.chart-gauge {
    height: 100px !important;
    overflow: hidden;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0;
    display: block;
    width: 100%;
}

.chart-gauge svg {
    display: block;
    margin: 0 auto;
}

.arc.chart-first {
    fill: #bff1bfff; /* Green for ENGAGED */
}
.arc.chart-second {
    fill: #33ec58ff; /* Yellow for ADVANCED */
}
.arc.chart-third {
    fill: #17acf6d9; /* Red for EXPERT */
}
.section {
    background-color: #c4f3edd9; /* Red for EXPERT */
}

hr {
  border: none;                 /* remove the default border */
  height: 1px;                  /* keep it thin */
  background: #ccc;             /* main line color (change as needed) */
  position: relative;           /* so the pseudo-element can be placed */
}

hr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                    /* stick to the bottom edge */
  height: 4px;                  /* thickness of the green highlight */
  background: rgba(5, 247, 13, 0.914); /* soft green glow */
  box-shadow: 0 0 6px rgba(2, 243, 10, 0.45); /* optional extra glow */
}

/* ──────────────────────────────────────────────────────────────
   NEW TESLA-STYLE CLEAN CARD – these are the very last rules in your file
   (kept exactly as they appear, only earlier duplicates removed)
   ────────────────────────────────────────────────────────────── */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:#f5f7fa;
    font-size:1em;
}

.modern-data-card {
    max-width:420px;
    margin:20px auto;
    background:rgba(255,255,255,0.80);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-radius:28px;
    padding:32px 28px;
    box-shadow:0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
    border:1px solid rgba(255,255,255,0.4);
}

.modern-data-card h3 {
    font-size:0.8em;
    font-weight:600;
    margin:0 0 6px 0;
    color:#1d1d1f;
    text-align:center;
}
.modern-data-card .plot-name {
    font-size:0.8em;
    color:#666;
    margin-bottom:28px;
    text-align:center;
    font-weight:400;
}

.bordered-table {
    width:100%;
    border:none !important;
    background:transparent;
}
.bordered-table tr {
    background:rgba(255,255,255,0.65);
    border-radius:16px;
    margin-bottom:0.75em;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0px 0px;
    transition:all 0.2s ease;
}
.bordered-table tr:hover {
    background:rgba(255,255,255,0.95);
    transform:translateY(-2px);
    border-color:aqua;
    border-width:3px;
    font-size:1.2em;
}
.bordered-table td {
    border:none !important;
    padding:0;
    font-size:0.8em;
    font-weight:400;
}
.bordered-table td:first-child {
    color:#333;
    background-color:transparent !important;
}
.bordered-table td:last-child {
    font-weight:400;
    color:#000;
}

#map {
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.numbered-marker{background-color:#ff6b6b;border:3px solid #fff;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.5);box-shadow:0 2px 5px rgba(0,0,0,.3)}
.numbered-marker.farm{background-color:#4CAF50}
.numbered-marker.point{background-color:#2196F3}
.copy-button{font-size:12px;padding:4px 8px;margin-left:10px;background:#4CAF50;color:#fff;border:none;border-radius:4px;cursor:pointer;vertical-align:middle;text-align:center}
.copy-button:hover{background:#45a049}
#coords-to-copy{position:absolute;left:-9999px;opacity:0}

.sticky-header,
.sticky-header * {
    margin: 0 !important;
    padding: 10px 5px !important;
    line-height: 0.5;
}

.scrollable-middle h1:first-of-type {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}