/* Portana — web de enlaces. Misma paleta Rift que la app (app_theme.dart). */
:root {
  --ground: #0b0e1a;
  --surface: #141a2e;
  --surface-high: #1c2440;
  --line: #232c48;
  --cyan: #35e0e6;
  --gold: #f5c451;
  --text: #e8ecf8;
  --muted: #8a93b2;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(53, 224, 230, 0.12), transparent 60%),
    var(--ground);
  color: var(--text);
  font: 16px/1.5 "Inter", system-ui, sans-serif;
}

.card {
  width: 100%;
  max-width: 420px;
  padding: 32px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  /* El bisel hextech de la app: esquinas cortadas en diagonal. */
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
    calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  text-align: center;
}

.logo { width: 72px; height: 72px; }

h1 {
  margin: 16px 0 8px;
  font: 600 1.5rem/1.2 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

p { margin: 0 0 12px; color: var(--muted); }

.code {
  margin: 8px 0 16px;
  font: 600 1.75rem/1 "Chakra Petch", ui-monospace, monospace;
  letter-spacing: 0.25em;
  color: var(--gold);
}

.actions { display: grid; gap: 12px; margin-top: 24px; }

.btn {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  font: 600 1rem/1 "Inter", system-ui, sans-serif;
  text-decoration: none;
  border: 1px solid var(--cyan);
}

.btn-primary {
  background: var(--cyan);
  color: var(--ground);
  box-shadow: 0 0 24px rgba(53, 224, 230, 0.35);
}

.btn-secondary { color: var(--cyan); background: transparent; }

.note {
  margin-top: 20px;
  font-size: 0.875rem;
}

[hidden] { display: none !important; }