/* Burnout Forecast — Weather Station Aesthetic
   Dark terminal green on black, like an old weather station monitor.
   No purple gradients. No SaaS card shadows. Just data. */

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

body {
  font-family: "SF Mono", "Monaco", "Courier New", monospace;
  background: #0a0e0a;
  color: #c8d4c8;
  line-height: 1.5;
  font-size: 15px;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
}

/* Masthead */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #2a4a2a;
  padding-bottom: 12px;
}

.station-id {
  font-size: 11px;
  color: #5a8a5a;
  letter-spacing: 2px;
  border: 1px solid #2a4a2a;
  padding: 4px 8px;
  border-radius: 2px;
}

.masthead-text h1 {
  font-size: 22px;
  color: #8fcf8f;
  font-weight: 700;
  letter-spacing: 1px;
}

.tagline {
  font-size: 12px;
  color: #5a8a5a;
  margin-top: 2px;
}

.lang-switch a {
  color: #8fcf8f;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid #2a4a2a;
  padding: 4px 12px;
  border-radius: 2px;
}

.lang-switch a:hover { background: #1a2a1a; }

/* Ticker bar */
.ticker-bar {
  display: flex;
  gap: 24px;
  padding: 6px 0;
  border-bottom: 1px solid #1a2a1a;
  overflow: hidden;
  font-size: 11px;
  color: #4a6a4a;
  letter-spacing: 1px;
}

.ticker-item {
  white-space: nowrap;
}

/* Input section */
.input-section {
  padding: 20px 0;
  border-bottom: 1px solid #1a2a1a;
}

.section-label {
  font-size: 11px;
  color: #5a8a5a;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-group label {
  font-size: 11px;
  color: #5a8a5a;
}

.input-group input,
.input-group select {
  background: #0e1a0e;
  border: 1px solid #2a4a2a;
  color: #c8d4c8;
  padding: 8px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 2px;
  outline: none;
}

.input-group input:focus,
.input-group select:focus {
  border-color: #4a8a4a;
}

.input-group input::webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

/* Buttons */
.action-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.btn-primary {
  background: #1a3a1a;
  color: #8fcf8f;
  border: 1px solid #4a8a4a;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 1px;
}

.btn-primary:hover { background: #2a4a2a; }

.btn-secondary {
  background: transparent;
  color: #5a8a5a;
  border: 1px solid #2a4a2a;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
}

.btn-secondary:hover { background: #0e1a0e; }

.input-hint {
  font-size: 11px;
  color: #aa6644;
  margin-top: 8px;
  min-height: 16px;
}

/* Result card */
.result-container {
  padding: 16px 0;
}

.weather-card {
  background: #0e1a0e;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 12px;
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.weather-main {
  flex: 1;
}

.weather-condition {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

.weather-pressure {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  margin-top: 8px;
}

.pressure-unit {
  font-size: 14px;
  color: #5a8a5a;
  margin-left: 4px;
}

.weather-icon {
  font-size: 40px;
  margin-left: 16px;
}

.weather-advisory {
  border-left: 3px solid;
  padding: 10px 14px;
  margin-top: 14px;
  font-size: 13px;
  background: #0a140a;
}

/* Forecast strip */
.forecast-strip {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #1a2a1a;
}

.forecast-day {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  background: #0a140a;
  border-radius: 2px;
}

.forecast-day .day-name {
  font-size: 11px;
  color: #5a8a5a;
}

.forecast-day .day-icon {
  font-size: 18px;
  margin: 4px 0;
}

.forecast-day .day-pressure {
  font-size: 13px;
  font-weight: 700;
}

/* Risk factors */
.risk-section {
  background: #0e1a0e;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  padding: 16px;
}

.risk-title {
  font-size: 11px;
  color: #5a8a5a;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.risk-list {
  list-style: none;
  padding: 0;
}

.risk-list li {
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px dotted #1a2a1a;
}

.risk-list li:last-child { border-bottom: none; }

.case-id {
  font-size: 11px;
  color: #4a6a4a;
  margin-top: 12px;
  text-align: right;
}

/* Dividers */
.divider-thin {
  border-top: 1px solid #1a2a1a;
  margin: 4px 0;
}

/* Payment */
.payment-section {
  padding: 16px 0;
}

.section-heading {
  font-size: 16px;
  color: #8fcf8f;
  margin-bottom: 10px;
}

.payment-desc {
  font-size: 13px;
  color: #8a9a8a;
  margin-bottom: 14px;
}

.payment-box {
  background: #0e1a0e;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  padding: 16px;
}

.price-tag {
  font-size: 28px;
  font-weight: 700;
  color: #8fcf8f;
}

.price-note {
  font-size: 12px;
  color: #5a8a5a;
  margin-bottom: 12px;
}

.wallet-box {
  border-top: 1px solid #1a2a1a;
  padding-top: 12px;
}

.wallet-label {
  font-size: 11px;
  color: #5a8a5a;
  display: block;
  margin-bottom: 4px;
}

.wallet-address {
  font-family: "SF Mono", monospace;
  font-size: 12px;
  color: #c8d4c8;
  word-break: break-all;
  background: #0a140a;
  padding: 8px;
  border-radius: 2px;
  border: 1px solid #1a2a1a;
}

.btn-copy {
  background: transparent;
  border: 1px solid #2a4a2a;
  color: #5a8a5a;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  margin-top: 8px;
}

.btn-copy:hover { background: #1a2a1a; }

.payment-instructions {
  font-size: 12px;
  color: #5a8a5a;
  margin-top: 10px;
}

.coming-later {
  font-size: 11px;
  color: #4a5a4a;
  margin-top: 8px;
}

/* Share */
.share-section {
  padding: 16px 0;
}

.share-buttons {
  display: flex;
  gap: 8px;
}

.btn-share {
  background: transparent;
  border: 1px solid #2a4a2a;
  color: #5a8a5a;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px;
}

.btn-share:hover { background: #1a2a1a; }

/* Footer */
.footer {
  padding: 16px 0;
  font-size: 11px;
  color: #4a5a4a;
  border-top: 1px solid #1a2a1a;
}

.footer-links {
  margin-top: 8px;
}

.footer-links a {
  color: #5a8a5a;
  text-decoration: none;
}

.footer-links a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 600px) {
  .input-grid { grid-template-columns: 1fr; }
  .weather-pressure { font-size: 36px; }
  .weather-condition { font-size: 18px; }
  .forecast-strip { flex-wrap: wrap; }
  .forecast-day { min-width: 60px; }
  .ticker-bar { flex-direction: column; gap: 2px; }
  .weather-header { flex-direction: column; }
  .weather-icon { margin-left: 0; margin-top: 8px; }
}