:root {
  --navy: #06263a;
  --deep: #041824;
  --teal: #0d6e7a;
  --foam: #e8f6f8;
  --gold: #e2b84a;
  --coral: #d94848;
  --glass: rgba(6, 24, 36, 0.72);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--foam);
  background: var(--deep);
  min-height: 100vh;
}

.hero {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(4,18,30,.35) 0%, rgba(4,18,30,.55) 45%, rgba(4,18,30,.88) 100%),
    url("../images/bg-1280.jpg") center / cover no-repeat;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: rgba(4, 18, 30, 0.45);
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.brand img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: #0b3a4a;
}

.brand h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.brand span {
  display: block;
  font-size: .78rem;
  opacity: .85;
  letter-spacing: .16em;
}

nav a {
  color: var(--foam);
  text-decoration: none;
  margin-left: 18px;
  font-weight: 600;
}
nav a:hover { color: var(--gold); }

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  padding: 36px 28px 64px;
  max-width: 1280px;
  margin: 0 auto;
}

.panel {
  background: var(--glass);
  border: 1px solid rgba(232,246,248,.12);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.conditions {
  grid-column: 1 / -1;
}
.day-nav {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.day-copy { text-align: center; }
.day-kicker {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}
#day-label {
  font-size: 1.55rem;
  font-weight: 700;
}
.arrow-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(232,246,248,.2);
  background: rgba(13,110,122,.35);
  color: var(--foam);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.arrow-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.arrow-btn:disabled { opacity: .35; cursor: default; }
.fine { opacity: .75; font-size: .88rem; }
.sub {
  margin: 0 0 20px;
  opacity: .8;
  font-size: .95rem;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.metric {
  background: rgba(13, 110, 122, .22);
  border-radius: 14px;
  padding: 16px;
  min-height: 110px;
}
.metric .label {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.metric .value {
  font-size: 1.45rem;
  font-weight: 700;
  margin-top: 8px;
  color: var(--gold);
}
.metric .note { font-size: .82rem; opacity: .8; margin-top: 4px; }

.moon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.moon-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0b1220;
  box-shadow: inset -10px 0 0 0 #f3f0d8;
  border: 2px solid #c9c4a0;
}

.intro p { line-height: 1.55; }
.badge {
  display: inline-block;
  background: var(--teal);
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.shop h2 { margin-top: 0; }
.shop-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.shop-item:hover { border-color: var(--gold); }
.shop-item strong { display: block; color: var(--gold); margin-bottom: 4px; }
.shop-item span { font-size: .88rem; opacity: .85; }

footer {
  text-align: center;
  padding: 18px;
  font-size: .85rem;
  opacity: .7;
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: 12px; text-align: center; }
  nav a { margin: 0 8px; }
}