/* Login visual layer only. Account, consent, routing, and profile behaviour stay in login.html. */

:root { --navy: #052c64; }

html { background: #043b5b; }

body,
body[data-room-theme],
body[data-room-theme="calm"],
body[data-room-theme="ocean"],
body[data-room-theme="forest"],
body[data-room-theme="bright"],
body[data-room-theme="creative"] {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(234, 249, 255, .16) 0%, rgba(5, 61, 85, .04) 42%, rgba(0, 41, 67, .2) 100%),
    url("assets/img/wayfinder-ocean-desktop.png") center top / cover fixed no-repeat !important;
  color: #123047 !important;
}

body::before {
  display: none;
}

.wrap {
  width: min(1120px, calc(100% - 38px));
  padding: clamp(22px, 4vw, 58px) 0 70px;
}

.card {
  border: 1px solid rgba(218, 244, 248, .73) !important;
  border-radius: 30px;
  padding: clamp(24px, 4vw, 46px);
  background: linear-gradient(145deg, rgba(250, 254, 255, .9), rgba(237, 249, 249, .86)) !important;
  box-shadow: 0 28px 72px rgba(0, 29, 50, .28) !important;
  backdrop-filter: blur(13px);
}

.top {
  margin-bottom: clamp(26px, 4vw, 40px);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(12, 82, 107, .14);
}

.crumb {
  border-color: rgba(0, 117, 146, .27);
  background: rgba(231, 251, 251, .88);
  color: #006477;
}

.actions { gap: 9px; }

.btn,
.lang button,
.pill {
  min-height: 43px;
  border-color: rgba(11, 89, 116, .22);
  background: rgba(255, 255, 255, .82);
  color: #143b56;
  box-shadow: 0 8px 20px rgba(5, 54, 75, .09);
}

.btn.primary {
  background: linear-gradient(125deg, #075080, #008c98);
  color: #fff;
}

.btn.accent,
.lang button.active,
.pill.active {
  border-color: rgba(0, 128, 142, .36);
  background: linear-gradient(125deg, rgba(221, 250, 247, .96), rgba(226, 242, 255, .96));
  color: #07556b;
}

h1 {
  max-width: 720px;
  color: #062f53;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.lead {
  max-width: 720px;
  color: #365f72;
}

.mode-tabs {
  padding: 7px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(12, 100, 122, .17);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
}

.guest-pilot,
.destination {
  border-color: rgba(0, 128, 142, .28);
  box-shadow: 0 10px 26px rgba(0, 67, 84, .08);
}

.destination {
  background: linear-gradient(120deg, rgba(226, 250, 248, .9), rgba(230, 242, 255, .9));
}

.destination b { color: #007887; }

.step {
  margin-top: 28px;
  padding-top: 28px;
  border-top-color: rgba(12, 82, 107, .15);
}

.role-picker,
.role-page,
.setup-panel,
.panel,
.privacy {
  border-color: rgba(12, 96, 119, .18);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 28px rgba(0, 63, 81, .075);
}

.role-picker { background: linear-gradient(135deg, rgba(232, 251, 249, .92), rgba(248, 253, 255, .92)); }

.role-picker select,
input,
select,
textarea {
  border-color: rgba(12, 96, 119, .22);
  background: rgba(255, 255, 255, .95);
  color: #12384f;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: rgba(0, 139, 151, .22);
  border-color: rgba(0, 126, 142, .58);
}

.role-page.active {
  border-color: rgba(0, 133, 148, .35);
  background: linear-gradient(135deg, rgba(239, 254, 252, .95), rgba(255, 255, 255, .95));
}

.setup-panel summary { color: #123b55; }
.setup-panel summary::after { background: #e9fbf8; color: #007887; }

.check { background: rgba(252, 255, 255, .9); }
.privacy { background: linear-gradient(135deg, rgba(234, 253, 246, .95), rgba(255, 255, 255, .95)); }
.hint { background: rgba(255, 248, 222, .9); }

.legal-panel,
.legal-copy { background: rgba(255, 255, 255, .94); }

.footer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(12, 82, 107, .13);
}

.theme-dock { display: none; }

@media (max-width: 760px) {
  body,
  body[data-room-theme],
  body[data-room-theme="calm"],
  body[data-room-theme="ocean"],
  body[data-room-theme="forest"],
  body[data-room-theme="bright"],
  body[data-room-theme="creative"] {
    background:
      linear-gradient(180deg, rgba(231, 248, 255, .1), rgba(0, 43, 70, .22)),
      url("assets/img/wayfinder-ocean-mobile.png") center top / cover scroll no-repeat !important;
  }

  .wrap { width: min(100% - 22px, 640px); padding: 14px 0 38px; }
  .card { padding: 22px 17px; border-radius: 22px; }
  .top { align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .top .actions { justify-content: flex-start; }
  .crumb { font-size: 10px; padding: 8px 10px; }
  .mode-tabs { width: 100%; }
  .mode-tabs .pill { flex: 1 1 160px; }
  .guest-pilot { padding: 15px; }
  .footer .actions { width: 100%; }
  .footer .actions .btn { flex: 1 1 150px; }
}