@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap');

body {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important;
  background-color: #f4f0e6 !important; /* Clean light background */
  background-image: none !important;
  color: #1a1a1a !important; /* Very dark text for high contrast */
  margin: 0;
  padding: 0;
}

/* Background canvas clear */
.sky, .scanlines, .crt-flicker { display: none !important; }

.app-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Header */
.hero-section {
  background: transparent !important;
  border: none !important;
  border-bottom: 4px solid #1a1a1a !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 1rem 0 !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}

.header-logo-img {
  width: 60px !important;
  height: 60px !important;
  border: 4px solid #1a1a1a !important;
  box-shadow: 4px 4px 0px #1a1a1a !important;
  border-radius: 0 !important;
  background: #fff !important;
  object-fit: contain !important;
  filter: none !important;
}

.logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.logo-container img {
  width: 60px !important;
  height: 60px !important;
  border: 4px solid #1a1a1a !important;
  box-shadow: 4px 4px 0px #1a1a1a !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.app-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: -0.05em !important;
}
.app-title::after {
  content: ' PREDICTOR';
  color: #d90429 !important;
}

.app-subtitle {
  color: #2b9348 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

/* Nav Tabs */
.console-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  gap: 1rem !important;
}

.tab-btn {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  box-shadow: 4px 4px 0px #1a1a1a !important;
  padding: 0.5rem 1rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  transition: all 0.1s !important;
}

.tab-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px #1a1a1a !important;
}

.tab-btn.active {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
  box-shadow: 4px 4px 0px #d90429 !important;
}

/* Bento Boxes */
.console-widget, .weather-note, .prp, .srm__panel {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0px 0px #1a1a1a !important;
  padding: 1.5rem !important;
}

.status-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem !important;
}

.shop-title-row {
  display: flex !important;
  justify-content: space-between !important;
  border-bottom: 4px solid #1a1a1a !important;
  padding-bottom: 0.5rem !important;
}

.shop-title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
}

.global-cd-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 1rem 0 !important;
  text-align: left !important;
}

.cd-label {
  font-size: 1rem !important;
  color: #4a4e69 !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 800 !important;
  font-style: italic !important;
}

.global-countdown {
  font-size: 4rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.1em !important;
  text-shadow: 4px 4px 0px #f4a261 !important;
}

.console-footer-controls {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 1rem !important;
  border-top: 4px solid #1a1a1a !important;
  padding-top: 1rem !important;
}

/* Grid Cards (Bento style) */
.cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 1.5rem !important;
}

.rarity-header {
  grid-column: 1 / -1 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
  border-bottom: 4px solid #1a1a1a !important;
  padding-bottom: 0.5rem !important;
  margin-top: 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.cards-grid .row {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0px 0px #1a1a1a !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  transition: all 0.1s !important;
}

.cards-grid .row.in-stock:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px 0px #d90429 !important;
}

.cards-grid .row.out-of-stock {
  background: #e9e9e9 !important;
  opacity: 0.6 !important;
  border-color: #888 !important;
  box-shadow: 4px 4px 0px 0px #888 !important;
}
.cards-grid .row.out-of-stock img {
  filter: grayscale(100%) !important;
}
.cards-grid .row.out-of-stock .next-badge.none {
  background: #ccc !important;
  color: #666 !important;
  border-color: #888 !important;
}

.iconbox {
  background: #f4f0e6 !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 60px !important;
  height: 60px !important;
  overflow: hidden !important;
  position: relative !important;
}

.cards-grid .row.out-of-stock .iconbox {
  border-color: #888 !important;
}

.iconbox .sun {
  display: none !important;
}

.iconbox .ico {
  position: relative !important;
  width: 80% !important;
  height: 80% !important;
  object-fit: contain !important;
  filter: none !important;
  drop-shadow: none !important;
}

.iconbox img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

.mid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.name {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
}

.stock {
  font-size: 0.75rem !important;
  color: #4a4e69 !important;
  font-weight: 800 !important;
}

.bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 0.5rem !important;
}

.price {
  background: transparent !important;
  border: 2px solid #1a1a1a !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
}

.rar {
  border: 2px solid #1a1a1a !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8) !important;
}

.next-badge {
  background: #f4a261 !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  padding: 0.5rem !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Pets Bento */
.prp__head {
  border-bottom: 4px solid #1a1a1a !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
}
.prp__title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
}
.prp__sub { color: #4a4e69 !important; font-weight: 800 !important; }

.prp__filters {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1rem !important;
}

.prp__chip {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  font-family: 'JetBrains Mono', monospace !important;
  padding: 0.25rem 0.5rem !important;
  font-weight: 800 !important;
}
.prp__chip.is-on {
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: 2px 2px 0px #1a1a1a !important;
}

.prp__item {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  padding: 0.5rem 1rem !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  justify-content: space-between !important;
  border-radius: 0 !important;
}

.prp__name {
  font-weight: 800 !important;
  color: #1a1a1a !important;
}

.prp__chance {
  color: #2b9348 !important;
  font-weight: 800 !important;
}

/* Modals */
.srm__panel {
  max-width: 600px !important;
  width: 90% !important;
  background: #f4f0e6 !important;
}
.srm__close {
  background: #d90429 !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.srm__title {
  color: #1a1a1a !important;
  font-weight: 800 !important;
}
.srm__sub { color: #4a4e69 !important; font-weight: 800 !important; }

.srm__item {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  padding: 0.5rem 1rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
}
.srm__time { font-weight: 800 !important; color: #2b9348 !important; }

/* Buttons inside forms/controls */
.sort-select, .srk {
  background: #fff !important;
  border: 4px solid #1a1a1a !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  font-family: 'JetBrains Mono', monospace !important;
  padding: 0.5rem !important;
  font-weight: 800 !important;
}

/* Footer */
.app-footer {
  border-top: 4px solid #1a1a1a !important;
  background: transparent !important;
  color: #4a4e69 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  margin-top: 2rem !important;
  font-weight: 800 !important;
}
.info-modal-item { color: #1a1a1a !important; }
.info-modal-text strong { color: #d90429 !important; }