@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #07090f;
  --bg-soft: #0b1018;
  --bg1: #0d1117;
  --bg2: #111827;
  --card: rgba(13, 17, 23, 0.92);
  --card-soft: rgba(17, 24, 39, 0.92);
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.14);
  --blue: #3b82f6;
  --blue2: #1d4ed8;
  --danger: #f97373;
  --warning: #fbbf24;
  --success: #22c55e;
  --text-main: #e2eeff;
  --text-soft: #8ea5c7;
  --text-subtle: #5a6d8f;
  --ink3: #51627f;
  --border-subtle: rgba(96, 165, 250, 0.26);
  --border-strong: rgba(96, 165, 250, 0.42);
  --shadow-soft: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-hard: 0 30px 80px rgba(0, 0, 0, 0.6);
  --radius-lg: 18px;
  --radius-xl: 24px;
  --nav-height: 82px;
  --header-height: calc(62px + var(--safeT));
  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);
  --fb: 'Barlow Condensed', sans-serif;
  --fu: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
}

html, body {
  background: var(--bg);
}

body {
  font-family: var(--fu);
  color: var(--text-main);
  background:
    radial-gradient(circle at 15% -10%, rgba(59, 130, 246, 0.20), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(34, 211, 238, 0.14), transparent 24%),
    linear-gradient(180deg, #07090f 0%, #09101a 42%, #05070b 100%);
  letter-spacing: -0.01em;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  filter: blur(50px);
  opacity: 0.42;
}

body::before {
  width: 180px;
  height: 180px;
  top: 76px;
  right: -40px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.10);
}

body::after {
  width: 220px;
  height: 220px;
  left: -70px;
  bottom: 90px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
}

.app-header,
#main-content,
.bottom-nav {
  position: relative;
  z-index: 1;
}

.app-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: calc(10px + var(--safeT)) 16px 10px !important;
  background: rgba(7, 9, 15, 0.82) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(96, 165, 250, 0.16) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  z-index: 1200 !important;
}


.brand {
  gap: 10px !important;
}

.brand-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.92), rgba(34,211,238,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 22px rgba(34, 211, 238, 0.24), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: #06111d !important;
  font-family: var(--fb);
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

.brand-text {
  gap: 2px !important;
}

.brand-title,
.sheet-title,
.wp-modal-title,
#home-loc-title,
#settings-sheet-title {
  font-family: var(--fb) !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(90deg, #d9eaff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.brand-subtitle,
.status-text,
.tiny-note,
.wp-modal-sub,
.wp-modal-tip,
.wp-sub,
.hint,
.muted,
.alert-meta,
.metric-caption,
.daily-cond,
.current-desc,
.current-extra,
#current-location-label,
#hourly-location-label,
#daily-location-label,
#alerts-location-label,
#photo-status,
#scanner-status,
#wewatch-page-status,
#auth-subtext,
#claim-status,
#profile-line,
#scanner-summary {
  color: var(--text-soft) !important;
}

.brand-subtitle {
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-button,
.sheet-close,
.wp-iconbtn,
#home-location-close {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
}

.icon-button:active,
.sheet-close:active,
.wp-iconbtn:active {
  transform: scale(0.96);
}

#main-content {
  width: min(100%, 720px) !important;
  padding: calc(var(--header-height) + 12px) 16px calc(var(--nav-height) + 26px + var(--safeB)) !important;
}

.card,
.settings-card,
.wp-modal-sheet,

.sheet,
.mobile-gate-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 20, 28, 0.96) 0%, rgba(10, 14, 22, 0.98) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.16) !important;
  outline: 1px solid rgba(255, 255, 255, 0.02) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-soft) !important;
}

.card::before,
.settings-card::before,
.wp-modal-sheet::before,
.wp-panel::before,
.wp-warnlist::before,
.mobile-gate-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(34,211,238,0.32), rgba(59,130,246,0.14), transparent 70%);
}

.card {
  padding: 16px !important;
  margin-bottom: 12px !important;
}

.card h2,
.section-header > span:first-child,
.wip-title,
.eyebrow,
#store-points,
#store-stars,
#store-status,
#balance-title,
#exchange-title {
  font-family: var(--fb);
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent) !important;
}

.section-header {
  align-items: center !important;
  gap: 12px;
  margin-bottom: 10px !important;
}

.pill,
.pill-soft,
.mini-pill,
.wp-badge,
.lock-badge,
.alert-pill {
  min-height: 26px;
  border-radius: 999px !important;
  padding: 0 10px !important;
  background: rgba(59, 130, 246, 0.10) !important;
  border: 1px solid rgba(96, 165, 250, 0.22) !important;
  color: var(--accent) !important;
  font-size: 0.69rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mini-pill {
  margin-left: 4px;
}

.alert-pill-danger { background: rgba(239, 68, 68, 0.14) !important; color: #fecaca !important; border-color: rgba(239, 68, 68, 0.36) !important; }
.alert-pill-warning { background: rgba(245, 158, 11, 0.12) !important; color: #fde68a !important; border-color: rgba(245, 158, 11, 0.34) !important; }
.alert-pill-info { background: rgba(59, 130, 246, 0.12) !important; color: #bfdbfe !important; border-color: rgba(59, 130, 246, 0.30) !important; }

.primary-btn,
.ghost-btn,
.mobile-gate-btn,
.wp-btn,
.wp-primary-btn,
.wp-secondary-btn,
.wp-mini-btn,
.quick-btn,
.quick-btn-locked,
.tab-btn,
#claim-btn,
#sign-out-main,
button[type="submit"] {
  min-height: 44px;
  border-radius: 14px !important;
  font-family: var(--fu);
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  transition: transform 120ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.primary-btn,
.wp-primary-btn,
#claim-btn,
button[type="submit"] {
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%) !important;
  color: #04101b !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(59, 130, 246, 0.28) !important;
}

.ghost-btn,
.wp-secondary-btn,
.wp-btn,
.wp-mini-btn,
.quick-btn,
.quick-btn-locked,
.tab-btn,
#sign-out-main {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  color: var(--text-main) !important;
}

.tab-row {
  padding: 4px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(96,165,250,0.16);
  gap: 6px !important;
}

.tab-btn {
  flex: 1;
}

.tab-btn.tab-active,
.tab-btn[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(34,211,238,0.18)) !important;
  border-color: rgba(96,165,250,0.30) !important;
  color: var(--accent) !important;
}

.primary-btn:active,
.ghost-btn:active,
.wp-btn:active,
.wp-primary-btn:active,
.wp-secondary-btn:active,
.quick-btn:active,
.tab-btn:active,
button[type="submit"]:active {
  transform: scale(0.98);
}

.settings-form,
.authFields,
.field {
  gap: 10px !important;
}

.settings-form label,
.settings-label,
.field label,
.wp-lbl,
.checkboxRow,
.row,
.k,
.v,
.footnote {
  color: var(--text-soft) !important;
}

.settings-form input,
.settings-form select,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea,
.wp-input,
.wp-select,
.wp-loc-input,
.wp-pro-input,
.authInput,
.memInput {
  min-height: 46px;
  border-radius: 14px !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

.settings-form input:focus,
.settings-form select:focus,
input:focus,
select:focus,
textarea:focus,
.wp-input:focus,
.wp-select:focus,
.wp-loc-input:focus,
.wp-pro-input:focus,
.authInput:focus,
.memInput:focus {
  outline: none !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.10) !important;
}

.current-card {
  padding: 18px !important;
  border-color: rgba(96,165,250,0.22) !important;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.52) !important;
}

.current-location-row {
  font-size: 0.78rem !important;
  letter-spacing: 0.03em;
  margin-bottom: 14px !important;
}

.current-main-row {
  gap: 18px !important;
  align-items: flex-end !important;
}

.current-temp {
  font-family: var(--fb);
  font-size: clamp(3.5rem, 10vw, 4.6rem) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  color: var(--text-main) !important;
  text-shadow: 0 0 30px rgba(34, 211, 238, 0.16);
}

.current-desc {
  margin-top: 6px;
  font-size: 0.95rem !important;
}

.current-extra {
  gap: 5px !important;
  font-size: 0.82rem !important;
}

.live-metrics,
.photo-stats-grid,
.rainSummaryGrid,
.followStatGrid,
.usageActions,
.billingActions,
.authButtons {
  gap: 10px !important;
}

.metric,
.hour-card,
.daily-card,
.alert-card,
.scanner-card,
.store-grid > *,
.wp-section,
.wp-warncard,
.followStat,
.briefSection,
.rainSummaryItem,
.memItem,
.planOption {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(96, 165, 250, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.metric {
  padding: 14px !important;
}

.metric-label,
.briefLabel,
.rainSummaryLabel,
.followStatLabel,
.planTag {
  color: var(--text-subtle) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.metric-value,
.rainSummaryVal,
.followStatVal,
.graphStat,
.planName {
  font-family: var(--fb);
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--text-main) !important;
}

.metric-value {
  font-size: 1.5rem !important;
  margin-top: 8px !important;
}

.hourly-scroll,
.chips,
.chatList,
.wp-scroll,
.store-grid {
  scrollbar-width: none;
}

.hourly-scroll::-webkit-scrollbar,
.chips::-webkit-scrollbar,
.chatList::-webkit-scrollbar,
.wp-scroll::-webkit-scrollbar,
.store-grid::-webkit-scrollbar {
  display: none;
}

.hour-card {
  min-width: 92px !important;
  padding: 12px 10px !important;
}

.hour-time,
.daily-pop,
.hour-pop {
  color: var(--accent) !important;
}

.daily-card {
  padding: 14px !important;
  align-items: center !important;
}

.daily-day,
.alert-title,
.store-title,
.wp-store-title,
.planName,
.memTitle,
.radarTitle,
.followTitle,
.briefTitle,
.sitrepTitle,
.sheetHead h2,
.promoTitle {
  font-family: var(--fb);
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.alert-card {
  padding: 14px !important;
}

.alert-header {
  align-items: flex-start !important;
}

.quick-grid,
.store-grid {
  gap: 10px !important;
}

.quick-btn,
.quick-btn-locked {
  justify-content: flex-start !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

.quick-emoji,
.nav-icon {
  filter: saturate(0.95);
}

.store-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.store-grid > * {
  padding: 14px;
}

.bottom-nav {
  position: fixed !important;
  z-index: 1190 !important;
  left: 50% !important;
  bottom: calc(12px + var(--safeB)) !important;
  transform: translateX(-50%);
  width: calc(100% - 16px) !important;
  max-width: 720px !important;
  min-height: 68px;
  padding: 7px !important;
  border-radius: 22px !important;
  background: rgba(7, 9, 15, 0.86) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.48) !important;
  gap: 2px !important;
}

.nav-item {
  min-width: 0;
  gap: 4px !important;
  padding: 8px 2px !important;
  border-radius: 16px !important;
  color: var(--text-soft) !important;
  transition: background 130ms ease, color 130ms ease, transform 130ms ease;
}

.nav-item-active,
.nav-item[aria-current="page"] {
  background: linear-gradient(180deg, rgba(59,130,246,0.20), rgba(34,211,238,0.12)) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.16) !important;
}

.nav-item:active {
  transform: scale(0.98);
}

.nav-icon {
  font-size: 1rem !important;
}

.nav-label {
  font-size: 0.62rem !important;
  letter-spacing: 0.04em !important;
}

.wp-modal-backdrop,
.sheetBack,
.sideOverlay,
.promoBack,
.billingBack {
  background: rgba(0,0,0,0.68) !important;
  backdrop-filter: blur(12px);
}

.wp-modal-sheet,
.wp-sheet,
.sheet,
.promoModal,
.billingSheet {
  background: linear-gradient(180deg, rgba(15,20,28,0.98), rgba(10,14,22,1)) !important;
  border: 1px solid rgba(96,165,250,0.18) !important;
  box-shadow: var(--shadow-hard) !important;
}

.wp-radar-shell,
.radar-frame-wrap,
#wpMap,
#radar-frame {
  border-radius: 18px !important;
  overflow: hidden;
}

.wp-topbar,
.wp-probar {
  gap: 8px !important;
}

.wp-chip,
.wp-iconbtn,
.wp-warnfab,
.wp-place-icon,
.wp-place-ico,
.wp-btn,
.wp-mini-btn {
  border-radius: 12px !important;
}

.wp-chip,
.wp-warnfab,
.wp-place-icon,
.wp-place-ico {
  border: 1px solid rgba(96,165,250,0.18) !important;
  background: rgba(7,9,15,0.76) !important;
  color: var(--text-main) !important;
  backdrop-filter: blur(16px);
}

.wp-row,
.checkboxRow,
.accountRow,
.planOptionTop,
.sRow {
  align-items: center;
}

.wp-switch {
  accent-color: var(--accent);
}

.wp-range {
  accent-color: var(--accent);
}

a {
  color: var(--accent);
}



/* Radar layout protection */
body.app-radar #main-content {
  width: 100% !important;
  max-width: none !important;
  padding: var(--wp-header-h) 0 calc(var(--wp-nav-h) + 10px + var(--safeB)) !important;
}

body.app-radar .wp-radar-shell {
  height: calc(100dvh - var(--wp-header-h) - var(--wp-nav-h) - var(--safeB)) !important;
  height: calc(100vh - var(--wp-header-h) - var(--wp-nav-h) - var(--safeB)) !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

body.app-radar #wpMap,
body.app-radar #radar-frame,
body.app-radar .radar-frame-wrap {
  border-radius: 0 !important;
}

body.app-radar .wp-panel,
body.app-radar .wp-warnlist {
  position: fixed !important;
  top: calc(var(--wp-header-h) + 10px) !important;
  bottom: calc(var(--wp-nav-h) + 14px + var(--safeB)) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
  z-index: 1210 !important;
}

body.app-radar .wp-panel {
  right: 10px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 20px)) !important;
}

body.app-radar .wp-warnlist {
  left: 10px !important;
  right: auto !important;
  width: min(420px, calc(100vw - 20px)) !important;
}

body.app-radar .wp-sheet {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: calc(var(--wp-nav-h) + 12px + var(--safeB)) !important;
  max-height: 56vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y !important;
  z-index: 1220 !important;
}

body.app-radar .wp-ticker {
  bottom: calc(var(--wp-nav-h) + 12px + var(--safeB)) !important;
}

@media (max-width: 420px) {
  .brand-title { font-size: 1rem !important; }
  .current-temp { font-size: clamp(3.2rem, 15vw, 4.2rem) !important; }
  .metric-value { font-size: 1.32rem !important; }
  .card { padding: 14px !important; }
  .bottom-nav { width: calc(100% - 12px) !important; padding: 6px !important; }
  .nav-label { font-size: 0.58rem !important; }
}


/* Account balance button */
#account-btn {
  width: auto !important;
  min-width: 36px;
  max-width: min(52vw, 210px);
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  overflow: hidden;
}

#account-btn.account-has-balances {
  justify-content: flex-start;
}

#account-btn .account-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}

#account-btn .mini-pill {
  margin-left: 0;
  min-width: 0;
  min-height: 20px;
  height: 20px;
  padding: 0 7px !important;
  font-size: 0.61rem !important;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.03em;
  flex: 0 1 auto;
}

#account-btn #header-stars {
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.34) !important;
}

#account-btn #header-points {
  color: #bfdbfe !important;
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(59, 130, 246, 0.30) !important;
}

@media (max-width: 420px) {
  #account-btn {
    max-width: 48vw;
    padding: 0 6px !important;
    gap: 3px;
  }

  #account-btn .mini-pill {
    padding: 0 6px !important;
    font-size: 0.58rem !important;
  }
}