/* =========================================================
   RDS Snapshot — snapshot.css (NO-DRIFT)
   Purpose: Snapshot UI keeps its layout, but inherits Bright Studio
   Source of truth for theme tokens: /assets/css/main.css
   Rules: no pink, crawl-safe, CSS-only
   ========================================================= */

/* Theme bridge: map Snapshot variables to main.css tokens (with fallbacks) */
:root{
  color-scheme: light;

  /* Core */
  --bg:      var(--bg, #F6F8FC);
  --text:    var(--text, #0B1730);
  --muted:   var(--text-2, #33415E);
  --border:  var(--border, rgba(11,23,48,.10));
  --shadow:  var(--shadow-soft, 0 14px 38px rgba(11,23,48,.10));

  /* Brand */
  --gold:    var(--gold, #D89F13);
  --cyan:    var(--cyan, #10CBF8);

  /* Snapshot surfaces */
  --card:    rgba(255,255,255,.78);
  --card-2:  rgba(255,255,255,.60);

  /* Controls */
  --line:    var(--border, rgba(11,23,48,.10));
  --btn:     linear-gradient(180deg, rgba(216,159,19,.16), rgba(216,159,19,.10));
  --btnText: #0B1730;

  /* Status */
  --ok:      #18D26E;
  --warn:    #D89F13; /* gold */
  --bad:     #D89F13; /* offline uses gold, not red */
}

/* Base reset */
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

/* Let main.css paint the atmosphere (mist + blobs) */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: transparent;
  color: var(--text);
}

a{ color: var(--text); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Top bar */
.top{
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
}

.nav{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.nav__brand{ font-weight: 700; letter-spacing: 0.2px; }
.nav__links{ display: flex; gap: 14px; flex-wrap: wrap; opacity: 0.92; }

.wrap{ max-width: 1100px; margin: 0 auto; padding: 22px 18px 40px; }

/* Hero */
.hero{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } }

.hero h1{ margin: 0 0 10px; font-size: 34px; }
.sub{ margin: 0 0 12px; color: var(--muted); }
.bullets{ margin: 0; padding-left: 18px; color: var(--muted); }
.bullets li{ margin: 6px 0; }

/* Cards (glass) */
.card, .statusCard{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.statusRow{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.statusLabel{ color: var(--muted); font-size: 14px; }
.statusNote{ margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }

/* Status pill */
.statusPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 12px;
  border: 1px solid var(--line);
  user-select: none;
  background: rgba(255,255,255,.40);
}

.statusPill .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: none;
}

.statusPill--checking{ color: var(--muted); }
.statusPill--checking .dot{ background: var(--muted); }

/* OFFLINE = gold (no pink) */
.statusPill--offline{
  color: var(--text);
  border-color: rgba(216,159,19,.45);
  background: rgba(216,159,19,.12);
}
.statusPill--offline .dot{
  background: var(--gold);
  box-shadow: 0 0 14px rgba(216,159,19,.18);
}

/* ONLINE can stay green */
.statusPill--online{ color: #0B1730; border-color: rgba(24,210,110,0.35); background: rgba(24,210,110,.10); }
.statusPill--online .dot{
  background: var(--ok);
  animation: glowPulse 1.35s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(24,210,110,0.55);
}

@keyframes glowPulse{
  0%{ transform: scale(1.0); box-shadow: 0 0 10px rgba(24,210,110,0.35); }
  50%{ transform: scale(1.25); box-shadow: 0 0 18px rgba(24,210,110,0.75); }
  100%{ transform: scale(1.0); box-shadow: 0 0 10px rgba(24,210,110,0.35); }
}

/* Form grid */
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px){ .grid{ grid-template-columns: 1fr; } }

.field label{ display: block; margin-bottom: 6px; font-weight: 650; }
.req{ color: var(--warn); }

.field input, .field select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  color: var(--text);
  outline: none;
  backdrop-filter: blur(10px);
}
.field input:focus, .field select:focus{
  border-color: rgba(216,159,19,.45);
  box-shadow: 0 0 0 4px rgba(216,159,19,.12);
}

.actions{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

button{
  background: var(--btn);
  border: 1px solid rgba(216,159,19,.35);
  color: var(--btnText);
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 750;
  cursor: pointer;
}
button:disabled{ opacity: 0.6; cursor: not-allowed; }

.msg{ min-height: 20px; color: var(--muted); }
.msg[data-kind="ok"]{ color: #0B1730; }
.msg[data-kind="err"]{ color: #0B1730; }

/* Notes */
.note, .fine{ color: var(--muted); }
.fine{ margin-top: 10px; font-size: 12px; }

.steps{ color: var(--muted); margin: 0; padding-left: 18px; }
.steps li{ margin: 6px 0; }

.foot{ margin-top: 18px; color: var(--muted); font-size: 13px; }
.foot a{ color: var(--muted); }

@media (prefers-reduced-motion: reduce){
  .statusPill--online .dot{ animation: none; }
}