/* Tunda Island Stores — Spots portal.
   Mirrors the app's design_system.md: midnight navy, single periwinkle accent,
   master-language cards (same-bg fill + sharp shadow + hairline), glass only
   for the auth gate card, CTA pills, eyebrow labels. */

:root {
  --bg: #1E2E4B;
  --surface: #26395C;
  --surface-var: #2C426A;
  --peri: #C7D4EE;
  --peri-dim: #9FB1D6;
  --muted: #8899AA;
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.12);
  --error: #FF4C4C;
  --ok: #4CAF50;
}

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

body {
  background: var(--bg);
  color: #fff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 500;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ── Wordmark ── */
.wordmark {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #C7D4EE, #8AA0CC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wordmark span { font-weight: 600; }
.wordmark.small { font-size: 18px; }

/* ── Auth gate ── */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.glass-card {
  width: 100%;
  max-width: 420px;
  padding: 36px 28px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tagline { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 10px 0 24px; }

/* ── Fields ── */
.field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin: 14px 0 6px;
}
input, textarea {
  width: 100%;
  background: var(--surface-var);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  padding: 13px 14px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--peri); }
input::placeholder, textarea::placeholder { color: rgba(136, 153, 170, 0.7); }
textarea { resize: vertical; }

/* ── Buttons ── */
.cta {
  width: 100%;
  height: 48px;
  margin-top: 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #C7D4EE, #8AA0CC);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(199, 212, 238, 0.25);
}
.cta:disabled { opacity: 0.55; cursor: default; }
.link-btn {
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--peri);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ghost-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
}

/* ── Portal chrome ── */
.portal { max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 8px;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; }

.section {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.55);
  margin: 28px 0 10px;
}
.sub { font-size: 15px; font-weight: 700; margin: 22px 0 2px; color: var(--peri); }

/* Master-language card */
.card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  box-shadow: 0 10px 22px -2px rgba(0, 0, 0, 0.55);
  padding: 20px;
}

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spot-name { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }

.chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--peri);
  background: rgba(199, 212, 238, 0.12);
  border: 1px solid rgba(199, 212, 238, 0.40);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
.chip.pending { color: #FFD166; background: rgba(255, 209, 102, 0.10); border-color: rgba(255, 209, 102, 0.40); }
.chip.approved { color: var(--ok); background: rgba(76, 175, 80, 0.10); border-color: rgba(76, 175, 80, 0.40); }
.chip.rejected { color: var(--error); background: rgba(255, 76, 76, 0.10); border-color: rgba(255, 76, 76, 0.40); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1.2fr 0.6fr; gap: 0 14px; }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.claim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 10px 22px -2px rgba(0, 0, 0, 0.55);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.claim-row .name { font-size: 14px; font-weight: 600; }

.error { color: var(--error); font-size: 13px; margin-top: 12px; }
.ok { color: var(--ok); font-size: 13px; margin-top: 12px; }

.foot {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.foot a { color: var(--peri-dim); }