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

body {
  background: #ede7d8;
  color: #243428;
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}

header {
  height: 16vh;
  background: #263d2b;
  color: #f3ead7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
  box-sizing: border-box;
}

.logo {
  font-size: 6vh;
  font-weight: bold;
  letter-spacing: 0.8vw;
}

.sublogo {
  font-size: 1.7vh;
  letter-spacing: 0.35vw;
  opacity: 0.85;
}

.clockbox {
  text-align: right;
}

#date {
  font-size: 2vh;
}

#clock {
  font-size: 4.5vh;
  font-weight: bold;
}

main {
  padding: 2vh 3vw;
}

.section-title {
  font-size: 2vh;
  font-weight: bold;
  letter-spacing: 0.15vw;
  margin-bottom: 1.5vh;
  color: #49634c;
}

.weather-card {
  display: flex;
  background: #f7f2e7;
  border: 2px solid #b9af96;
  padding: 2vh 2vw;
  height: 24vh;
  box-sizing: border-box;
}

.current {
  width: 42%;
}

.temperature {
  font-size: 10vh;
  line-height: 10vh;
}

#condition {
  font-size: 2.4vh;
}

.details {
  width: 58%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 2.4vh;
  align-content: center;
  gap: 1.5vh 3vw;
}

.label {
  display: inline-block;
  width: 8vw;
  font-size: 1.6vh;
  color: #6f735f;
}

.farm-card {
  margin-top: 2vh;
  background: #f7f2e7;
  border: 2px solid #b9af96;
  padding: 2vh 2vw;
  min-height: 12vh;
  box-sizing: border-box;
}

#farm-summary {
  font-size: 2.3vh;
  line-height: 1.5;
}

.forecast-card {
  margin-top: 2vh;
  background: #f7f2e7;
  border: 2px solid #b9af96;
  padding: 1.5vh 1.5vw;
}

.forecast {
  display: flex;
  justify-content: space-between;
}

.day {
  width: 13%;
  text-align: center;
  border-right: 1px solid #cfc5ad;
}

.day:last-child {
  border-right: none;
}

.day-name {
  font-weight: bold;
  font-size: 1.7vh;
}

.day-temp {
  font-size: 2.5vh;
  margin-top: 0.5vh;
}

.day-rain {
  font-size: 1.4vh;
  opacity: 0.75;
}

.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6vh;
  background: #263d2b;
  color: #f3ead7;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

#ticker-text {
  font-size: 2vh;
  padding-left: 3vw;
  letter-spacing: 0.1vw;
}
.ai-title {
  font-size: 2.1vh;
  font-weight: bold;
  letter-spacing: 0.08vw;
  margin-bottom: 1.2vh;
  color: #2f4d35;
}

.ai-bullet {
  font-size: 2.0vh;
  line-height: 1.45;
  margin-bottom: 0.55vh;
}

.ai-text {
  font-size: 1.9vh;
  line-height: 1.4;
  margin-bottom: 0.6vh;
}
.flight-card {
  margin-top: 2vh;
  background: #f7f2e7;
  border: 2px solid #b9af96;
  padding: 1.5vh 2vw;
  box-sizing: border-box;
}

#flight-list {
  display: flex;
  gap: 2vw;
}

.flight {
  flex: 1;
  border-right: 1px solid #cfc5ad;
  padding-right: 1vw;
}

.flight:last-child {
  border-right: none;
}

.flight-call {
  font-size: 2.2vh;
  font-weight: bold;
  color: #2f4d35;
}

.flight-info {
  font-size: 1.6vh;
  line-height: 1.45;
}

.screen {
  display: none;
  height: 72vh;
  box-sizing: border-box;
}

.screen.active {
  display: block;
}

.flight-full {
  height: 68vh;
}

.forecast-full {
  height: 68vh;
}

.flight-full #flight-list {
  margin-top: 4vh;
}

.flight-full .flight-call {
  font-size: 4vh;
}

.flight-full .flight-info {
  font-size: 2.6vh;
  line-height: 1.6;
}

.forecast-full .forecast {
  margin-top: 5vh;
}

.forecast-full .day-name {
  font-size: 2.8vh;
}

.forecast-full .day-temp {
  font-size: 3.8vh;
}

.forecast-full .day-rain {
  font-size: 2.2vh;
}
.radar-page {
  height: 68vh;
  background: #102019;
  border: 2px solid #49634c;
  padding: 2vh 2vw;
  box-sizing: border-box;
  color: #dfe9d8;
}

.radar-page .section-title {
  color: #b8d4b0;
}

.radar-layout {
  display: flex;
  height: 58vh;
  gap: 2vw;
}

#radar {
  position: relative;
  width: 65%;
  height: 100%;
  background: #07130d;
  border: 2px solid #4f7656;
  overflow: hidden;
}

.flight-sidebar {
  width: 35%;
  padding: 1vh 1vw;
  box-sizing: border-box;
  overflow: hidden;
}

.flight-heading {
  font-size: 2vh;
  letter-spacing: 0.12vw;
  margin-bottom: 2vh;
  color: #a9c9a6;
}

.radar-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(120, 180, 130, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-1 {
  width: 30%;
  height: 30%;
}

.ring-2 {
  width: 60%;
  height: 60%;
}

.ring-3 {
  width: 90%;
  height: 90%;
}

.radar-line {
  position: absolute;
  background: rgba(120, 180, 130, 0.18);
}

.radar-horizontal {
  left: 5%;
  top: 50%;
  width: 90%;
  height: 1px;
}

.radar-vertical {
  top: 5%;
  left: 50%;
  width: 1px;
  height: 90%;
}

.direction {
  position: absolute;
  font-size: 1.6vh;
  color: #789a7b;
  font-weight: bold;
}

.north {
  top: 1%;
  left: 49%;
}

.south {
  bottom: 1%;
  left: 49%;
}

.east {
  right: 1%;
  top: 49%;
}

.west {
  left: 1%;
  top: 49%;
}

.range {
  position: absolute;
  color: #58735d;
  font-size: 1.1vh;
}

.range-1 {
  left: 52%;
  top: 37%;
}

.range-2 {
  left: 52%;
  top: 22%;
}

.range-3 {
  left: 52%;
  top: 7%;
}

.home-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #f3d77b;
  font-size: 2vh;
  text-align: center;
  z-index: 10;
}

.home-marker span {
  display: block;
  font-size: 1vh;
  margin-top: 0.3vh;
}

.radar-plane {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #9ce8a9;
  z-index: 5;
  white-space: nowrap;
}

.plane-icon {
  font-size: 2.2vh;
  display: inline-block;
  transform-origin: center;
}

.plane-label {
  display: inline-block;
  margin-left: 0.5vw;
  vertical-align: middle;
  font-size: 1.15vh;
  line-height: 1.2;
  color: #d5e7d4;
}

.flight {
  border-bottom: 1px solid rgba(170, 200, 170, 0.25);
  padding-bottom: 1.2vh;
  margin-bottom: 1.2vh;
}

.flight-call {
  font-size: 2vh;
  color: #a9e6ae;
  font-weight: bold;
}

.flight-info {
  font-size: 1.45vh;
  line-height: 1.45;
  color: #d4ddd1;
}

#aircraft-count {
  margin-top: 2vh;
  font-size: 1.4vh;
  color: #94aa94;
}