.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: 0.2rem; padding-bottom: 0px;}

.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: 0.2rem 0.2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.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); background: mediumspringgreen;box-shadow: 0 6px 20px lightgray; color:black;text-decoration: none;border-style:none}

.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: 0.3rem 0.3rem; background: #FFFFFF; color: grey; 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; width:120px}
.back-button:hover {transform: translateY(-2px); color: grey; background: mediumspringgreen;box-shadow: 0 6px 20px 96f5f3; text-decoration: none;width:120px;border-style: none}

.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.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;}
input[type="submit"]:hover,
input[type="reset"]:hover {transform: translateY(-2px); background: mediumspringgreen;box-shadow: 0 6px 20px lightgray; color:black;text-decoration: none;border-style:none}

h1 {text-align: center; margin: 0; font-weight: 700; letter-spacing: -0.5px; color: #355E3B;}

h3 {color: #2d5016; font-weight: 600;}

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: 2rem; font-weight: 700; margin-bottom: 10px;}

.header p {font-size: 1.1rem; opacity: 0.9;}

.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: "📍"; 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: "🗺️"; 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: #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:hover {background: linear-gradient(180deg, var(--mist-bg), #e9f0e6); color: #2d5016; border: 2px solid #2d5016; transform: translateY(-5px); box-shadow: 0 8px 25px rgba(74, 124, 44, 0.3);}

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

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

.circle-button-medium {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 140px; height: 140px; margin: 2px 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-medium: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.circle-button-medium:link,
a.circle-button-medium:visited {color: #2d5016 !important;}

a.circle-button-medium:hover,
a.circle-button-medium:active {color: white !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: #2d5016; border: 2px solid #2d5016; 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.50rem; font-weight: 700; margin: 5px 0; color: #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.5rem;
    }
    
    .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 */
}