:root {
  color-scheme: dark;
  background: #061223;
  color: #f5f9ff;
  font-family: Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at top, #0f2e5e 0%, #061223 45%);
  color: #e6f0ff;
}

/* Mobile-map parity */
.mobile-map-shell { position: relative; height: calc(100vh - 190px); min-height: 620px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 24px 80px rgba(0,0,0,.24); background: #102338; }
.mobile-map-canvas { width: 100%; height: 100%; }
.map-top-controls { position: absolute; z-index: 3; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); }
.map-location-button { min-height: 48px; border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.26); white-space: nowrap; }
.map-location-status { padding: 9px 12px; border-radius: 12px; color: #e9f5ff; background: rgba(7,27,51,.9); box-shadow: 0 8px 26px rgba(0,0,0,.2); font-size: .78rem; backdrop-filter: blur(8px); }
.mobile-map-details { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 16px; padding: 18px; border-radius: 16px; color: #e6f0ff; background: rgba(8,19,43,.96); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 46px rgba(0,0,0,.38); backdrop-filter: blur(14px); }
.mobile-map-details[hidden] { display: none; }
.map-details-copy h1 { margin: 0 36px 4px 0; font-size: 1.08rem; }
.map-details-copy p, .map-coordinate-line { margin: 0; color: rgba(230,240,255,.68); font-size: .78rem; }
.map-details-close { position: absolute; right: 12px; top: 9px; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.65rem; }
.map-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 10px; }
.map-stats > div:last-child { text-align: right; }
.map-stats span { display: block; margin-bottom: 3px; color: rgba(230,240,255,.68); font-size: .78rem; }
.map-stats strong { font-size: 1rem; }
.map-area-image { width: 100%; height: 120px; margin-top: 12px; object-fit: cover; border-radius: 14px; }
.map-details-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: rgba(230,240,255,.68); font-size: .78rem; }
.map-details-footer a { color: #82d7ff; white-space: nowrap; }
body.theme-light .mobile-map-details { color: #10253b; background: rgba(255,255,255,.96); border-color: rgba(7,27,51,.13); }
body.theme-light .map-details-copy p, body.theme-light .map-coordinate-line, body.theme-light .map-stats span, body.theme-light .map-details-footer { color: rgba(16,37,59,.68); }

@media (max-width: 820px) {
  .mobile-map-shell { height: calc(100vh - 170px); min-height: 520px; border-radius: 18px; }
  .map-top-controls { align-items: flex-start; flex-direction: column; }
  .map-location-status { max-width: 250px; }
  .mobile-map-details { left: 10px; right: 10px; bottom: 10px; }
}

body.theme-light {
  color-scheme: light;
  background: radial-gradient(circle at top, #d9f1ff 0%, #f3f8fc 48%);
  color: #10253b;
}

body.theme-light .site-header { background: rgba(243, 249, 253, 0.96); border-color: rgba(7, 27, 51, 0.12); }
body.theme-light .brand a, body.theme-light .site-nav a, body.theme-light label { color: #12324d; }
body.theme-light .page-card, body.theme-light .dashboard-card, body.theme-light .panel-card { background: rgba(255, 255, 255, 0.94); border-color: rgba(7, 27, 51, 0.12); }
body.theme-light input, body.theme-light textarea, body.theme-light select { background: #f3f8fc; color: #10253b; border-color: rgba(7, 27, 51, 0.16); }
body.theme-light .button-secondary { background: #e1eef7; color: #12324d; }
body.theme-light .muted, body.theme-light .panel-meta, body.theme-light .panel-footer { color: rgba(16, 37, 59, 0.68); }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  background: rgba(8, 26, 55, 0.94);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand a {
  color: #d1e8ff;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 700;
}

.site-nav a {
  color: #c1d9ff;
  text-decoration: none;
  margin-left: 18px;
  font-size: 0.95rem;
}

.page-container {
  padding: 32px 28px 54px;
  max-width: 1120px;
  margin: 0 auto;
}

.page-card {
  background: rgba(8, 19, 43, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  padding: 28px;
  margin-bottom: 24px;
}

.page-card.large {
  padding: 32px;
}

.page-card.narrow { max-width: 620px; margin-inline: auto; }
.muted { color: rgba(255, 255, 255, 0.65); }
.split-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.item-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.status-pill { border-radius: 999px; padding: 6px 11px; background: rgba(89, 220, 168, 0.16); color: #79e8bd; font-size: 0.8rem; font-weight: 700; }
.empty-state { text-align: center; padding: 48px 20px; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 18px; }
.success-message { padding: 13px 15px; border-radius: 14px; background: rgba(89, 220, 168, 0.14); color: #9cf0d0; }
.profile-summary { display: flex; align-items: center; gap: 18px; }
.profile-summary h2, .profile-summary p { margin: 4px 0; }
.avatar { width: 82px; height: 82px; object-fit: cover; border-radius: 50%; }
.avatar-fallback { display: grid; place-items: center; background: #55c4ff; color: #04172c; font-size: 1.4rem; font-weight: 800; }
.device-photo { width: 100%; max-height: 280px; object-fit: cover; border-radius: 18px; margin-bottom: 20px; }
.detail-list { display: grid; grid-template-columns: minmax(130px, 0.7fr) 1.3fr; gap: 11px 18px; }
.detail-list dt { color: rgba(255,255,255,.62); }
.detail-list dd { margin: 0; font-weight: 600; }
.tracking-placeholder { min-height: 240px; display: grid; place-items: center; align-content: center; text-align: center; border-radius: 18px; background: linear-gradient(150deg, #0e3856, #071b33); margin-bottom: 18px; padding: 24px; }
.tracking-dot { width: 20px; height: 20px; border-radius: 50%; background: #55c4ff; box-shadow: 0 0 0 10px rgba(85,196,255,.16); margin-bottom: 20px; }
.settings-section { margin: 28px 0; }
.settings-section h2, .danger-zone h2 { font-size: 1rem; }
.settings-link { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); color: inherit; text-decoration: none; }
.settings-link small { display: block; margin-top: 5px; color: rgba(255,255,255,.62); }
.settings-form { padding: 20px; border-radius: 18px; background: rgba(255,255,255,.035); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-grid > div { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); }
.danger-zone { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,80,80,.2); }
.danger-zone h2 { color: #ff8989; }
.button-danger { background: #c53d4b; color: white; }
.terms { max-width: 820px; margin-inline: auto; line-height: 1.65; }
input[type='file'] { display: block; margin: 8px 0 18px; }
details summary { color: #83d5ff; cursor: pointer; font-weight: 700; }

.full-width {
  width: 100%;
}

.button-row,
.form-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.button,
.button-secondary {
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button {
  background: #55c4ff;
  color: #04172c;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #d1e8ff;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list li {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.item-list li strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.flash-messages {
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}

.flash-messages li {
  background: rgba(85, 196, 255, 0.14);
  border: 1px solid rgba(85, 196, 255, 0.24);
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.dashboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.dashboard-heading h1 { margin: 4px 0 0; }

.dashboard-kicker,
.dashboard-clock-label {
  color: #55dff1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dashboard-clock {
  display: grid;
  min-width: 260px;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid rgba(85, 223, 241, 0.18);
  border-radius: 18px;
  background: rgba(85, 223, 241, 0.07);
  text-align: right;
}

.dashboard-clock time { color: rgba(229, 242, 255, 0.72); font-size: 0.9rem; }
.dashboard-clock strong { color: #f2fbff; font-size: 1.35rem; letter-spacing: -0.025em; }
body.theme-light .dashboard-clock time { color: rgba(16, 37, 59, 0.72); }
body.theme-light .dashboard-clock strong { color: #10253b; }

.conditions-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 22px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(190, 229, 255, 0.18);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(165, 190, 208, 0.72), rgba(31, 69, 91, 0.84)),
    radial-gradient(circle at 15% 12%, #d8e3ea 0, #89a8bb 35%, #163a52 100%);
  box-shadow: 0 28px 70px rgba(0, 6, 18, 0.34);
}

.conditions-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.38;
  background:
    radial-gradient(ellipse at 30% 82%, rgba(4, 43, 63, 0.78) 0 18%, transparent 19%),
    linear-gradient(174deg, transparent 0 56%, rgba(180, 216, 227, 0.18) 57% 59%, transparent 60%),
    repeating-linear-gradient(178deg, transparent 0 56px, rgba(235, 249, 255, 0.06) 57px 59px);
}

.conditions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.conditions-kicker {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.conditions-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.conditions-title-row h2 { margin: 0; color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -0.045em; }
.conditions-title-row a { padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; font-size: .78rem; font-weight: 750; }
.conditions-heading-copy > p { margin: 9px 0 0; color: rgba(255, 255, 255, 0.8); font-size: clamp(1rem, 2vw, 1.2rem); }

.conditions-weather-icon {
  display: grid;
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(230, 243, 250, 0.16);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

.conditions-weather-icon img { width: 100px; height: 100px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 8px 14px rgba(0,0,0,.12)); }

.conditions-status {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 24px;
  background: rgba(94, 224, 173, 0.2);
  border: 1px solid rgba(134, 246, 201, 0.1);
}

.conditions-status-caution { background: rgba(255, 201, 91, 0.2); }
.conditions-status-danger { background: rgba(255, 105, 105, 0.2); }
.condition-symbol { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border-radius: 16px; background: rgba(76, 235, 168, 0.2); color: #6ff2b8; font-size: 1.8rem; }
.conditions-status-caution .condition-symbol { color: #ffe08a; background: rgba(255, 205, 89, .18); }
.conditions-status-danger .condition-symbol { color: #ffabab; background: rgba(255, 109, 109, .18); }
.conditions-status strong { display: block; color: #fff; font-size: 1.25rem; }
.conditions-status p { margin: 5px 0 0; color: rgba(255, 255, 255, 0.72); }

.conditions-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.condition-metric { min-width: 0; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 25px; background: rgba(222, 235, 243, 0.16); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.metric-label { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.88); }
.metric-label > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: rgba(61, 211, 245, .16); color: #65e4fa; font-size: 1.25rem; font-weight: 900; }
.metric-temp .metric-label > span { color: #ffe170; background: rgba(255, 216, 90, .15); }
.metric-gust .metric-label > span { color: #9dbfff; background: rgba(123, 165, 255, .14); }
.metric-alerts .metric-label > span { color: #ff9a91; background: rgba(255, 126, 117, .15); }
.metric-devices .metric-label > span { color: #70edbd; background: rgba(87, 224, 171, .15); }
.condition-metric p { margin: 13px 0 5px; color: #fff; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 780; letter-spacing: -0.04em; }
.condition-metric small { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; }

.dashboard-card {
  background: linear-gradient(180deg, rgba(8, 20, 44, 0.95), rgba(5, 13, 34, 0.95));
  border-radius: 24px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.page-header-row h2 {
  margin: 0;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
  gap: 16px;
}

.panel-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
  min-height: 150px;
}

.panel-card strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.panel-meta {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.panel-footer {
  margin-top: 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.67);
}

.severity-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.severity-medium {
  background: rgba(255, 209, 102, 0.16);
  color: #ffda7a;
}

.severity-high {
  background: rgba(255, 121, 121, 0.18);
  color: #ffc1c1;
}

.severity-low {
  background: rgba(119, 204, 255, 0.16);
  color: #a7e2ff;
}

.weather-summary {
  display: grid;
  gap: 14px;
}

.current-weather-main { display: flex; align-items: center; gap: 14px; }
.current-weather-main p { margin: 3px 0; }
.openweather-icon { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22)); }
.openweather-icon-current { width: 100px; height: 100px; margin: -8px 0 -8px -9px; }
.forecast-card-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.forecast-card-top strong { margin: 0; }
.forecast-temperature { margin: 6px 0 0; color: #f0f8ff; font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; }
body.theme-light .forecast-temperature { color: #10253b; }

.section-helper {
  margin: 5px 0 0;
  color: rgba(214, 233, 250, 0.62);
  font-size: 0.86rem;
}

body.theme-light .section-helper { color: rgba(16, 37, 59, 0.65); }

.forecast-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 240px);
  gap: 16px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 16px;
  scroll-snap-type: inline proximity;
  scrollbar-color: #3cbde7 rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
}

.forecast-scroll:focus-visible { outline: 2px solid #55dff1; outline-offset: 5px; }
.forecast-scroll::-webkit-scrollbar { height: 10px; }
.forecast-scroll::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.forecast-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(90deg, #55dff1, #31a9ff); }
.forecast-card { min-height: 170px; scroll-snap-align: start; }

.map-card {
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(7, 27, 51, 0.95), rgba(3, 14, 34, 0.95));
  display: grid;
  gap: 24px;
}

.map-grid {
  grid-template-columns: 2fr 1fr;
}

.map-frame {
  min-height: 420px;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #081a31;
}

.map-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.map-label {
  margin: 0;
  color: #88c5ff;
  font-size: 0.95rem;
}

.warning-card {
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 147, 147, 0.14);
  border: 1px solid rgba(255, 121, 121, 0.24);
  color: #ffd0d0;
}

.weather-temp {
  font-size: 3rem;
  margin: 0;
}

.weather-pill {
  display: inline-block;
  margin-right: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(85, 196, 255, 0.14);
  color: #d1e8ff;
  font-size: 0.9rem;
}

.map-card {
  border-radius: 20px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.04);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
textarea,
select {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: #eef4ff;
}

label {
  font-weight: 600;
  color: #d8ecff;
}

.site-footer {
  text-align: center;
  padding: 18px;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 820px) {
  .site-header { align-items: flex-start; flex-direction: column; padding: 16px 18px; }
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-heading { align-items: stretch; flex-direction: column; }
  .dashboard-clock { min-width: 0; text-align: left; }
  .forecast-scroll { grid-auto-columns: minmax(190px, 78vw); }
  .conditions-card { padding: 24px 18px; border-radius: 24px; }
  .conditions-weather-icon { width: 82px; height: 82px; flex-basis: 82px; border-radius: 22px; }
  .conditions-weather-icon img { width: 78px; height: 78px; }
  .conditions-status { align-items: flex-start; padding: 18px; }
  .conditions-metrics { gap: 12px; }
  .condition-metric { padding: 17px 15px; border-radius: 20px; }
  .metric-label { gap: 8px; }
  .metric-label > span { width: 36px; height: 36px; flex-basis: 36px; }
  .condition-metric p { font-size: clamp(1.45rem, 7vw, 2rem); }

  .page-container { padding: 22px 14px 42px; }
  .page-card { padding: 20px; border-radius: 18px; }
  .split-layout, .info-grid { grid-template-columns: 1fr; }
  .detail-list { grid-template-columns: 1fr; gap: 4px; }
  .detail-list dd { margin-bottom: 10px; }
}

/* AquaWatch brand and public homepage */
.brand a { display: inline-flex; align-items: center; gap: 10px; font-size: 1.18rem; letter-spacing: -.02em; }
.brand a > img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; box-shadow: 0 6px 20px rgba(0,170,255,.18); }
.brand a > span > span { color: #47d4f3; }
.site-nav .nav-cta { margin-left: 14px; padding: 10px 16px; border-radius: 999px; color: #03172c; background: linear-gradient(135deg,#55e6ef,#31a9ff); font-weight: 800; }
.landing-page { margin-top: -6px; }
.landing-hero { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; min-height: 650px; overflow: hidden; border: 1px solid rgba(102,214,255,.12); border-radius: 32px; background: radial-gradient(circle at 78% 35%,rgba(0,174,255,.17),transparent 35%),linear-gradient(145deg,#06172e 0%,#071e3d 55%,#031126 100%); box-shadow: 0 34px 110px rgba(0,0,0,.3); }
.landing-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(89,209,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(89,209,255,.08) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,#000,transparent 72%); }
.hero-copy { position:relative; z-index:2; align-self:center; padding:70px 20px 70px 62px; }
.eyebrow,.section-kicker { color:#55dff1; font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:9px; }
.eyebrow > span { width:8px; height:8px; border-radius:50%; background:#54e3ef; box-shadow:0 0 0 6px rgba(84,227,239,.1),0 0 20px #54e3ef; }
.hero-copy h1 { margin:23px 0 22px; color:#f4faff; font-size:clamp(3.3rem,5.3vw,5.6rem); line-height:.94; letter-spacing:-.065em; }
.hero-copy h1 em { color:#55dff1; font-style:normal; }
.hero-copy > p { max-width:590px; margin:0; color:rgba(228,241,255,.7); font-size:1.08rem; line-height:1.75; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:31px; }
.hero-primary { gap:20px; min-height:52px; padding-inline:23px; background:linear-gradient(135deg,#58e5ed,#35a9ff); box-shadow:0 14px 34px rgba(44,179,255,.2); }
.hero-secondary { min-height:52px; border:1px solid rgba(255,255,255,.1); }
.hero-trust { display:flex; gap:24px; margin-top:44px; color:rgba(220,236,255,.55); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }
.hero-trust span { display:grid; gap:3px; }
.hero-trust strong { color:#eaf8ff; font-size:.97rem; text-transform:none; }
.hero-visual { position:relative; display:grid; place-items:center; min-height:560px; overflow:hidden; }
.hero-visual::after { content:""; position:absolute; width:72%; height:14%; bottom:14%; border-radius:50%; background:rgba(0,0,0,.42); filter:blur(28px); }
.hero-visual > img { position:relative; z-index:1; width:min(92%,620px); aspect-ratio:1; object-fit:cover; border-radius:44px; filter:drop-shadow(0 28px 50px rgba(0,0,0,.28)); }
.hero-orbit { position:absolute; border:1px solid rgba(66,210,255,.15); border-radius:50%; }
.orbit-one { width:520px; height:520px; }
.orbit-two { width:670px; height:670px; }
.hero-float-card { position:absolute; z-index:3; display:flex; align-items:center; gap:11px; padding:12px 15px; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:#eef9ff; background:rgba(7,25,51,.78); box-shadow:0 14px 38px rgba(0,0,0,.26); backdrop-filter:blur(12px); }
.hero-float-card small,.hero-float-card strong { display:block; }
.hero-float-card small { margin-bottom:2px; color:rgba(226,241,255,.56); font-size:.67rem; text-transform:uppercase; letter-spacing:.06em; }
.hero-float-card strong { font-size:.83rem; }
.hero-float-top { top:20%; left:2%; }
.hero-float-bottom { right:3%; bottom:22%; }
.live-dot { width:10px; height:10px; border-radius:50%; background:#4ee8ae; box-shadow:0 0 0 6px rgba(78,232,174,.11); }
.wave-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#48d9ef; background:rgba(72,217,239,.1); font-size:1.3rem; }
.landing-section { padding:105px 8px 90px; }
.section-intro { max-width:780px; margin-bottom:42px; }
.section-intro h2,.mission-panel h2,.landing-cta h2 { margin:13px 0 0; color:#f0f8ff; font-size:clamp(2rem,3.5vw,3.4rem); line-height:1.08; letter-spacing:-.045em; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.feature-card { position:relative; min-height:300px; padding:26px; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:22px; background:linear-gradient(165deg,rgba(15,44,78,.78),rgba(5,19,40,.92)); transition:transform .22s,border-color .22s; }
.feature-card:hover { transform:translateY(-5px); border-color:rgba(72,216,239,.35); }
.feature-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(72,216,239,.18); border-radius:13px; color:#50dbed; background:rgba(72,216,239,.09); font-size:1.35rem; font-weight:900; }
.feature-card h3 { margin:48px 0 11px; color:#edf8ff; font-size:1.13rem; }
.feature-card p { margin:0; color:rgba(220,236,252,.6); font-size:.88rem; line-height:1.65; }
.feature-card a { display:inline-flex; gap:8px; margin-top:20px; color:#55dbef; text-decoration:none; font-size:.84rem; font-weight:800; }
.feature-map { background:radial-gradient(circle at 80% 15%,rgba(18,171,229,.19),transparent 40%),linear-gradient(165deg,rgba(15,44,78,.9),rgba(5,19,40,.95)); }
.mission-panel { display:grid; grid-template-columns:1fr .9fr; gap:70px; padding:62px; border:1px solid rgba(85,219,239,.12); border-radius:28px; background:radial-gradient(circle at 10% 100%,rgba(0,163,218,.13),transparent 34%),#071a35; }
.mission-panel > div > p { max-width:570px; color:rgba(220,236,252,.62); line-height:1.75; }
.mission-steps { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.mission-steps li { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.mission-steps li:last-child { border:0; }
.mission-steps li > span { color:#48d9ed; font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.mission-steps strong { color:#edf8ff; }
.mission-steps p { margin:5px 0 0; color:rgba(220,236,252,.55); font-size:.84rem; }
.landing-cta { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px; margin:80px 0 32px; padding:34px 40px; overflow:hidden; border:1px solid rgba(85,219,239,.15); border-radius:24px; background:linear-gradient(120deg,#09234a,#062d4d); }
.landing-cta > img { width:76px; height:76px; object-fit:cover; border-radius:18px; }
.landing-cta h2 { font-size:1.75rem; }
body.theme-light .landing-hero,body.theme-light .mission-panel,body.theme-light .landing-cta { color:#eef8ff; }

@media (max-width: 980px) {
  .landing-hero { grid-template-columns:1fr; }
  .hero-copy { padding:58px 42px 20px; }
  .hero-visual { min-height:470px; }
  .hero-visual > img { width:min(76%,520px); }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .mission-panel { grid-template-columns:1fr; gap:30px; }
}

@media (max-width: 620px) {
  .site-nav .nav-cta { margin-left:0; }
  .landing-hero { min-height:auto; border-radius:22px; }
  .hero-copy { padding:44px 24px 10px; }
  .hero-copy h1 { font-size:3.15rem; }
  .hero-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .hero-visual { min-height:390px; }
  .hero-visual > img { width:92%; border-radius:28px; }
  .hero-float-top { top:15%; left:4%; }
  .hero-float-bottom { right:4%; bottom:15%; }
  .feature-grid { grid-template-columns:1fr; }
  .landing-section { padding:72px 2px 62px; }
  .feature-card { min-height:250px; }
  .feature-card h3 { margin-top:32px; }
  .mission-panel { padding:30px 24px; }
  .landing-cta { grid-template-columns:1fr; padding:30px 24px; }
}

/* Abstract geometric site background */
body::before { content:""; position:fixed; z-index:0; inset:0; pointer-events:none; background:radial-gradient(circle at 12% 14%,rgba(15,181,231,.14) 0 8%,transparent 28%),radial-gradient(circle at 88% 28%,rgba(29,98,223,.12) 0 7%,transparent 25%),linear-gradient(125deg,transparent 0 62%,rgba(38,194,232,.055) 62% 72%,transparent 72%),linear-gradient(32deg,transparent 0 74%,rgba(29,98,223,.07) 74% 84%,transparent 84%); }
body::after { content:""; position:fixed; z-index:0; inset:0; pointer-events:none; opacity:.42; background-image:linear-gradient(rgba(116,214,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(116,214,255,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(135deg,#000 0%,transparent 66%); }
body.theme-light::before { background:radial-gradient(circle at 12% 14%,rgba(15,181,231,.13) 0 8%,transparent 28%),radial-gradient(circle at 88% 28%,rgba(29,98,223,.1) 0 7%,transparent 25%),linear-gradient(125deg,transparent 0 62%,rgba(38,194,232,.08) 62% 72%,transparent 72%),linear-gradient(32deg,transparent 0 74%,rgba(29,98,223,.07) 74% 84%,transparent 84%); }
body.theme-light::after { background-image:linear-gradient(rgba(14,88,130,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(14,88,130,.055) 1px,transparent 1px); }
.page-container,.site-footer { position:relative; z-index:1; }

/* Two-step registration */
.signup-layout { display:grid; grid-template-columns:.82fr 1.18fr; max-width:1050px; min-height:670px; margin:18px auto 40px; overflow:hidden; border:1px solid rgba(91,216,250,.12); border-radius:30px; box-shadow:0 32px 100px rgba(0,0,0,.28); }
.signup-intro { position:relative; padding:62px 48px; overflow:hidden; background:radial-gradient(circle at 10% 90%,rgba(27,201,235,.19),transparent 34%),linear-gradient(150deg,#09274b,#06172f); }
.signup-intro::before { content:""; position:absolute; width:360px; height:360px; right:-190px; top:-150px; border:58px solid rgba(69,213,242,.07); transform:rotate(35deg); }
.signup-intro h1 { position:relative; margin:18px 0; color:#f2f9ff; font-size:clamp(2.2rem,3.5vw,3.4rem); line-height:1.02; letter-spacing:-.055em; }
.signup-intro > p { position:relative; color:rgba(225,240,255,.66); line-height:1.7; }
.signup-benefits { position:relative; display:grid; gap:4px; margin-top:62px; }
.signup-benefits > div { display:flex; gap:15px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.signup-benefits > div:last-child { border:0; }
.signup-benefits span { padding-top:2px; color:#50dff1; font-size:.72rem; font-weight:900; }
.signup-benefits p { margin:0; color:rgba(225,240,255,.55); font-size:.8rem; line-height:1.5; }
.signup-benefits strong { display:block; margin-bottom:3px; color:#ecf8ff; font-size:.9rem; }
.signup-card { padding:45px 52px 30px; background:rgba(7,19,42,.96); }
.signup-progress { display:flex; align-items:center; margin-bottom:43px; }
.signup-progress-item { display:flex; align-items:center; gap:10px; min-width:135px; opacity:.42; transition:opacity .2s; }
.signup-progress-item.active { opacity:1; }
.signup-progress-item > span { display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; border:1px solid rgba(104,215,245,.38); border-radius:50%; color:#91eafa; font-size:.75rem; font-weight:900; }
.signup-progress-item.active > span { color:#04182d; background:#53dcea; border-color:#53dcea; }
.signup-progress-item strong,.signup-progress-item small { display:block; }
.signup-progress-item strong { color:#eef8ff; font-size:.8rem; }
.signup-progress-item small { margin-top:2px; color:rgba(224,238,252,.5); font-size:.65rem; }
.signup-progress-line { position:relative; width:70px; height:1px; margin:0 13px; overflow:hidden; background:rgba(255,255,255,.12); }
.signup-progress-line i { display:block; width:0; height:100%; background:#53dcea; transition:width .25s; }
.signup-step { min-width:0; margin:0; padding:0; border:0; }
.signup-step[hidden] { display:none; }
.step-heading { margin-bottom:27px; }
.step-heading > span { color:#53dcea; font-size:.69rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.step-heading h2 { margin:7px 0 5px; color:#f0f8ff; font-size:1.75rem; letter-spacing:-.035em; }
.step-heading p { margin:0; color:rgba(224,238,252,.56); font-size:.82rem; }
.form-grid.two-column { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field-group { margin-bottom:13px; }
.field-group label { display:block; margin-bottom:5px; font-size:.77rem; }
.field-group input { margin:0; }
.field-group > small { display:block; margin-top:6px; color:rgba(223,237,251,.48); font-size:.68rem; line-height:1.45; }
.field-group > small ul { margin:5px 0; padding-left:18px; }
.errorlist { margin:6px 0 0; padding:0; color:#ff9797; font-size:.72rem; list-style:none; }
.form-errors { margin-bottom:16px; padding:12px; border-radius:12px; background:rgba(255,86,86,.1); color:#ffaaaa; }
.terms-check { display:flex; align-items:flex-start; gap:9px; padding:13px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); }
.terms-check input { width:auto; margin:2px 0 0; }
.terms-check label { font-size:.78rem; line-height:1.45; }
.terms-check a,.signup-login a { color:#57dceb; }
.signup-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.signup-actions .button { min-height:47px; gap:16px; }
.signup-login { margin:25px 0 0; text-align:center; color:rgba(224,238,252,.55); font-size:.78rem; }
body.theme-light .signup-card { background:rgba(255,255,255,.96); }
body.theme-light .signup-progress-item strong,body.theme-light .step-heading h2 { color:#10253b; }
body.theme-light .signup-progress-item small,body.theme-light .step-heading p,body.theme-light .field-group > small,body.theme-light .signup-login { color:rgba(16,37,59,.58); }
body.theme-light .terms-check { border-color:rgba(16,37,59,.1); background:rgba(16,37,59,.025); }

@media (max-width: 880px) {
  .signup-layout { grid-template-columns:1fr; }
  .signup-intro { padding:42px; }
  .signup-intro h1 { max-width:620px; }
  .signup-benefits { grid-template-columns:repeat(3,1fr); gap:15px; margin-top:30px; }
  .signup-benefits > div { border-bottom:0; }
}

@media (max-width: 620px) {
  .signup-layout { margin-top:0; border-radius:20px; }
  .signup-intro { padding:34px 24px; }
  .signup-benefits { grid-template-columns:1fr; }
  .signup-benefits > div { padding:9px 0; }
  .signup-card { padding:32px 22px 26px; }
  .signup-progress-item div { display:none; }
  .signup-progress-item { min-width:auto; }
  .signup-progress-line { flex:1; }
  .form-grid.two-column { grid-template-columns:1fr; gap:0; }
}

/* Refined login */
.login-layout { display:grid; grid-template-columns:1.05fr .95fr; max-width:1030px; min-height:650px; margin:20px auto 44px; overflow:hidden; border:1px solid rgba(91,216,250,.12); border-radius:30px; box-shadow:0 32px 100px rgba(0,0,0,.3); }
.login-visual { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:650px; padding:52px; overflow:hidden; background:radial-gradient(circle at 60% 60%,rgba(0,183,238,.2),transparent 36%),linear-gradient(145deg,#071d3c,#04142b); }
.login-visual::before { content:""; position:absolute; inset:0; opacity:.23; background-image:linear-gradient(rgba(91,213,250,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(91,213,250,.09) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(145deg,#000,transparent 76%); }
.login-visual-copy { position:relative; z-index:3; max-width:430px; }
.login-visual-copy h1 { margin:15px 0; color:#f2f9ff; font-size:clamp(2.5rem,4.3vw,4rem); line-height:.98; letter-spacing:-.06em; }
.login-visual-copy p { color:rgba(225,240,255,.64); font-size:.9rem; line-height:1.7; }
.login-logo-stage { position:absolute; z-index:1; inset:160px -30px 25px 50px; display:grid; place-items:center; }
.login-logo-stage img { position:relative; z-index:2; width:min(90%,480px); aspect-ratio:1; object-fit:cover; border-radius:38px; filter:drop-shadow(0 28px 45px rgba(0,0,0,.28)); }
.login-ring { position:absolute; border:1px solid rgba(67,214,246,.13); border-radius:50%; }
.login-ring.ring-one { width:430px; height:430px; }
.login-ring.ring-two { width:550px; height:550px; }
.login-status { position:relative; z-index:4; display:flex; align-items:center; gap:12px; width:max-content; padding:12px 15px; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:#edf9ff; background:rgba(5,20,43,.8); backdrop-filter:blur(12px); }
.login-status small,.login-status strong { display:block; }
.login-status small { margin-bottom:2px; color:rgba(225,240,255,.5); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; }
.login-status strong { font-size:.82rem; }
.login-card { display:flex; flex-direction:column; justify-content:center; padding:54px 58px; background:rgba(7,19,42,.97); }
.login-heading { display:flex; align-items:flex-start; gap:15px; margin-bottom:32px; }
.login-mark { display:none; }
.login-heading h2 { margin:6px 0 5px; color:#f1f9ff; font-size:2rem; letter-spacing:-.04em; }
.login-heading p { margin:0; color:rgba(224,238,252,.55); font-size:.82rem; }
.login-field { margin-bottom:18px; }
.field-label-row { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:5px; }
.field-label-row label { margin:0; }
.field-label-row a { color:#55dbea; font-size:.72rem; text-decoration:none; }
.input-with-icon { position:relative; }
.input-with-icon > span { position:absolute; z-index:2; left:14px; top:50%; color:#5ddbec; transform:translateY(-50%); }
.input-with-icon input { min-height:50px; margin:0; padding-left:42px; padding-right:58px; border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.045); }
.input-with-icon input:focus { outline:2px solid rgba(82,218,236,.24); border-color:#51d9e9; }
.input-with-icon button { position:absolute; z-index:2; right:11px; top:50%; padding:5px; border:0; color:#71ddea; background:transparent; cursor:pointer; font-size:.7rem; font-weight:800; transform:translateY(-50%); }
.login-submit { width:100%; min-height:51px; justify-content:space-between; margin-top:7px; padding-inline:21px; background:linear-gradient(135deg,#58e5ed,#35a9ff); }
.login-divider { display:flex; align-items:center; gap:12px; margin:27px 0 18px; color:rgba(224,238,252,.42); font-size:.69rem; }
.login-divider::before,.login-divider::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.08); }
.login-create { width:100%; min-height:48px; border:1px solid rgba(255,255,255,.09); }
.login-help { margin:24px 0 0; text-align:center; color:rgba(224,238,252,.4); font-size:.69rem; }
.login-help a { color:#56dbea; }
.login-error { margin-bottom:20px; padding:13px 14px; border:1px solid rgba(255,105,105,.18); border-radius:13px; color:#ffabab; background:rgba(255,83,83,.09); font-size:.76rem; }
.login-error strong { display:block; margin-bottom:4px; }
.login-error .errorlist { margin:0; }
body.theme-light .login-card { background:rgba(255,255,255,.97); }
body.theme-light .login-heading h2 { color:#10253b; }
body.theme-light .login-heading p,body.theme-light .login-divider,body.theme-light .login-help { color:rgba(16,37,59,.55); }
body.theme-light .input-with-icon input { border-color:rgba(16,37,59,.12); background:rgba(16,37,59,.035); }
body.theme-light .login-divider::before,body.theme-light .login-divider::after { background:rgba(16,37,59,.1); }

@media (max-width: 840px) {
  .login-layout { grid-template-columns:1fr; max-width:610px; }
  .login-visual { min-height:280px; padding:35px; }
  .login-logo-stage { inset:10px -210px -110px 48%; opacity:.72; }
  .login-logo-stage img { width:370px; }
  .login-ring.ring-one { width:340px; height:340px; }
  .login-ring.ring-two { width:450px; height:450px; }
  .login-status { margin-top:35px; }
}

@media (max-width: 520px) {
  .login-layout { margin-top:0; border-radius:20px; }
  .login-visual { min-height:235px; padding:30px 24px; }
  .login-visual-copy h1 { font-size:2.5rem; }
  .login-visual-copy p { max-width:300px; }
  .login-status { display:none; }
  .login-card { padding:38px 24px 30px; }
  .login-heading { align-items:center; }
  .login-mark { display:block; flex:0 0 auto; }
  .login-mark img { width:46px; height:46px; border-radius:12px; object-fit:cover; }
}