:root {
  --fc-red: #e3262e;
  --fc-red-dark: #b7131b;
  --fc-yellow: #f4c63d;
  --fc-green: #1f9d69;
  --fc-blue: #2486c7;
  --fc-purple: #7357c8;
  --fc-ink: #102326;
  --fc-muted: #607579;
  --fc-line: rgba(16, 35, 38, 0.14);
  --fc-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
  --page-bg: radial-gradient(circle at 18% 12%, rgba(143, 220, 231, 0.22), transparent 32%), linear-gradient(135deg, #071f22, #0f3438 55%, #09252a) fixed;
  --panel: rgba(255, 255, 255, 0.86);
  --panelSolid: #fff;
  --cardText: #102326;
  --cardMuted: #607579;
  --border: rgba(16, 35, 38, 0.16);
  --text: #102326;
  --muted: #607579;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body.friendscamp-page {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page-bg);
  color: var(--text);
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.fc-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 2vw, 32px);
  padding-bottom: calc(clamp(32px, 5vw, 70px) + env(safe-area-inset-bottom, 0px));
}

.fc-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  min-height: 360px;
  padding: clamp(28px, 5vw, 76px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(100deg, rgba(5, 20, 23, 0.98) 0%, rgba(8, 41, 45, 0.9) 58%, rgba(10, 62, 65, 0.76) 100%),
    repeating-linear-gradient(125deg, transparent 0 42px, rgba(255, 255, 255, 0.035) 43px 45px);
  color: #fff;
  box-shadow: var(--fc-shadow);
}

.fc-hero::before,
.fc-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.fc-hero::before {
  width: 420px;
  height: 420px;
  right: -150px;
  top: -180px;
  border-radius: 50%;
  border: 58px solid rgba(227, 38, 46, 0.3);
  box-shadow: 0 0 0 45px rgba(244, 198, 61, 0.08);
}

.fc-hero::after {
  left: 0;
  bottom: 0;
  width: min(760px, 78%);
  height: 5px;
  background: linear-gradient(90deg, var(--fc-red), var(--fc-yellow), transparent);
}

.fc-hero__copy { max-width: 920px; }

.fc-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 12px;
  color: var(--fc-red);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fc-hero .fc-kicker { color: #ff8086; }

.fc-hero h1 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 5.45rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.fc-hero__copy > p {
  max-width: 760px;
  margin: 22px 0 0;
  color: #dcebed;
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.65;
}

.fc-hero__actions,
.fc-appbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.fc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panelSolid);
  color: var(--cardText);
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.fc-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); }
.fc-button:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }
.fc-button--primary { border-color: var(--fc-red-dark); background: var(--fc-red); color: #fff; }
.fc-button--primary:hover { background: var(--fc-red-dark); }
.fc-button--secondary { background: color-mix(in srgb, var(--panelSolid) 90%, var(--fc-blue) 10%); }
.fc-hero .fc-button--secondary { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.09); color: #fff; }
.fc-button--small { min-height: 35px; padding: 7px 11px; font-size: 0.78rem; }

.fc-hero__signal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(3, 18, 20, 0.5);
  backdrop-filter: blur(14px);
}

.fc-hero__signal div { display: grid; gap: 3px; min-width: 0; }
.fc-hero__signal small, .fc-room-identity small { color: #9eb8bc; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.1em; }
.fc-hero__signal strong { color: #fff; overflow-wrap: anywhere; }
.fc-hero__signal span:last-child { color: #bfd1d4; font-size: 0.83rem; }

.fc-live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #40d98d;
  box-shadow: 0 0 0 5px rgba(64, 217, 141, 0.14);
  animation: fc-pulse 2.2s infinite;
}

@keyframes fc-pulse { 50% { box-shadow: 0 0 0 9px rgba(64, 217, 141, 0.02); } }

.fc-notice,
.fc-gate,
.fc-room-gate,
.fc-app {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--fc-shadow);
  backdrop-filter: blur(10px);
}

.fc-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px;
}

.fc-notice div { display: grid; gap: 2px; }
.fc-notice span:last-child { color: var(--muted); }

.fc-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid color-mix(in srgb, var(--fc-red) 22%, transparent);
  border-top-color: var(--fc-red);
  border-radius: 50%;
  animation: fc-spin 0.8s linear infinite;
}

@keyframes fc-spin { to { transform: rotate(360deg); } }

.fc-gate {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
}

.fc-gate > div { max-width: 760px; }
.fc-gate h2, .fc-section-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.65rem, 3vw, 2.7rem); letter-spacing: -0.035em; }
.fc-gate p, .fc-section-heading p { margin: 10px 0 0; color: var(--muted); line-height: 1.6; }

.fc-room-gate { padding: clamp(22px, 3.5vw, 46px); }
.fc-section-heading { margin-bottom: 22px; }
.fc-room-gate__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.fc-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panelSolid);
  color: var(--cardText);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

.fc-form { position: relative; display: grid; gap: 14px; padding: clamp(20px, 3vw, 30px); overflow: hidden; }
.fc-form h3 { margin: 0; padding-right: 45px; color: var(--cardText); font-size: 1.3rem; }
.fc-step { position: absolute; top: 20px; right: 20px; color: color-mix(in srgb, var(--cardMuted) 35%, transparent); font-size: 2rem; font-weight: 950; }

.fc-form label,
.fc-field {
  display: grid;
  gap: 7px;
  color: var(--cardText);
  font-size: 0.78rem;
  font-weight: 850;
}

.fc-form input,
.fc-form select,
.fc-field input,
.fc-field select,
.fc-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panelSolid);
  color: var(--cardText);
  outline: none;
}

.fc-form input:focus,
.fc-form select:focus,
.fc-field input:focus,
.fc-field select:focus,
.fc-search input:focus { border-color: var(--fc-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-blue) 17%, transparent); }

.fc-inline-status { min-height: 1.25em; margin: 15px 0 0; color: var(--muted); font-size: 0.88rem; }
.fc-inline-status[data-tone="error"] { color: #c62828; }
.fc-saved-rooms { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 15px; color: var(--muted); font-size: 0.82rem; }
.fc-saved-rooms button { border: 1px solid var(--border); border-radius: 999px; padding: 7px 11px; background: var(--panelSolid); color: var(--cardText); font-weight: 800; cursor: pointer; }

.fc-app { overflow: hidden; }

.fc-appbar {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  padding: 18px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panelSolid) 86%, transparent);
}

.fc-room-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.fc-room-identity > div { display: grid; gap: 2px; min-width: 0; }
.fc-room-identity small { color: var(--cardMuted); }
.fc-room-identity strong { color: var(--cardText); overflow-wrap: anywhere; }
.fc-room-identity span:last-child { color: var(--cardMuted); font-size: 0.8rem; }
.fc-appbar__actions { margin: 0; flex: 0 0 auto; }

.fc-tabs {
  display: flex;
  gap: 5px;
  padding: 9px clamp(12px, 2vw, 24px);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panelSolid) 94%, transparent);
  scrollbar-width: thin;
}

.fc-tabs button {
  flex: 0 0 auto;
  padding: 10px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cardMuted);
  font-weight: 850;
  cursor: pointer;
}

.fc-tabs button:hover { color: var(--cardText); background: color-mix(in srgb, var(--panelSolid) 80%, var(--fc-blue) 20%); }
.fc-tabs button.is-active { background: var(--fc-ink); color: #fff; }

.fc-view { min-height: 440px; padding: clamp(20px, 3.2vw, 46px); }
.fc-view-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 22px; }
.fc-view-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -0.04em; }
.fc-view-heading p { max-width: 700px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; }

.fc-grid { display: grid; gap: 14px; }
.fc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fc-panel { padding: clamp(18px, 2.4vw, 28px); }
.fc-panel h3 { margin: 0; color: var(--cardText); font-size: 1.22rem; }
.fc-panel p { color: var(--cardMuted); line-height: 1.55; }

.fc-readiness {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 0;
  background: linear-gradient(145deg, #9e1017, var(--fc-red) 55%, #f04b51);
  color: #fff;
}

.fc-readiness::after { content: ""; position: absolute; width: 220px; height: 220px; right: -100px; bottom: -115px; border: 34px solid rgba(255, 255, 255, 0.1); border-radius: 50%; }
.fc-readiness h3, .fc-readiness p { position: relative; z-index: 1; color: #fff; }
.fc-readiness__score { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-top: 30px; }
.fc-readiness__score strong { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.8; letter-spacing: -0.07em; }
.fc-readiness__score span { font-weight: 800; }
.fc-progress { height: 8px; margin-top: 24px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.22); }
.fc-progress i { display: block; height: 100%; border-radius: inherit; background: #fff; }

.fc-metric { display: grid; gap: 7px; min-height: 132px; padding: 20px; }
.fc-metric span { color: var(--cardMuted); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.fc-metric strong { color: var(--cardText); font-size: clamp(1.7rem, 3vw, 2.65rem); letter-spacing: -0.05em; }
.fc-metric small { color: var(--cardMuted); }

.fc-checklist { display: grid; gap: 2px; margin-top: 10px; }
.fc-check-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--border); }
.fc-check-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--border); border-radius: 50%; color: #fff; font-size: 0.72rem; font-weight: 950; }
.fc-check-mark.is-done { border-color: var(--fc-green); background: var(--fc-green); }
.fc-check-item div { display: grid; gap: 2px; }
.fc-check-item strong { color: var(--cardText); font-size: 0.89rem; }
.fc-check-item small, .fc-check-item > span:last-child { color: var(--cardMuted); font-size: 0.77rem; }

.fc-member-row,
.fc-payment-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(4, minmax(120px, 0.8fr));
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  color: var(--cardText);
}

.fc-member-row--head { padding-top: 0; border: 0; color: var(--cardMuted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.fc-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.fc-person > div { display: grid; gap: 2px; min-width: 0; }
.fc-person strong, .fc-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-person small { color: var(--cardMuted); }
.fc-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 3px solid color-mix(in srgb, var(--panelSolid) 80%, transparent); border-radius: 50%; color: #fff; font-size: 0.73rem; font-weight: 950; box-shadow: 0 0 0 1px var(--border); }
.fc-row-label { display: none; }

.fc-status-pill { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 6px 9px; border-radius: 99px; background: color-mix(in srgb, var(--fc-red) 12%, var(--panelSolid)); color: #a0141a; font-size: 0.72rem; font-weight: 900; }
.fc-status-pill.is-paid { background: color-mix(in srgb, var(--fc-green) 14%, var(--panelSolid)); color: #16754f; }

.fc-search { position: relative; margin-bottom: 16px; }
.fc-search input { max-width: 460px; }

.fc-ticket-grid,
.fc-parking-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fc-choice { position: relative; display: grid; gap: 8px; min-height: 165px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panelSolid); color: var(--cardText); cursor: pointer; }
.fc-choice:hover { border-color: color-mix(in srgb, var(--fc-red) 55%, var(--border)); }
.fc-choice.is-selected { border-color: var(--fc-red); box-shadow: inset 0 0 0 2px var(--fc-red); }
.fc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fc-choice small, .fc-choice p { color: var(--cardMuted); }
.fc-choice strong { font-size: 0.95rem; }
.fc-choice p { margin: 0; font-size: 0.75rem; line-height: 1.4; }
.fc-choice b { align-self: end; color: var(--fc-red); }

.fc-plan-section + .fc-plan-section { margin-top: 26px; }
.fc-plan-section > h3 { margin: 0 0 4px; color: var(--text); }
.fc-plan-section > p { margin: 0 0 13px; color: var(--muted); }
.fc-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; }
.fc-plan-actions { position: sticky; bottom: 12px; display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 20px; padding: 15px 18px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--panelSolid) 93%, transparent); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); backdrop-filter: blur(12px); }
.fc-plan-total { display: grid; }
.fc-plan-total span { color: var(--cardMuted); font-size: 0.72rem; font-weight: 800; }
.fc-plan-total strong { color: var(--cardText); font-size: 1.35rem; }

.fc-timetable-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--panelSolid) 88%, var(--fc-blue) 12%), var(--panelSolid));
}
.fc-timetable-callout h3 { margin: 0; color: var(--cardText); font-size: clamp(1.45rem, 3vw, 2.4rem); }
.fc-timetable-callout p { max-width: 720px; color: var(--cardMuted); line-height: 1.6; }
.fc-member-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fc-member-chip { display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--panelSolid); color: var(--cardText); font-size: 0.78rem; font-weight: 800; }
.fc-member-chip i { width: 10px; height: 10px; border-radius: 50%; }

.fc-payment-row { grid-template-columns: minmax(210px, 1fr) auto auto auto; }
.fc-payment-row > strong { color: var(--cardText); font-size: 1rem; }
.fc-empty { padding: 34px 18px; text-align: center; color: var(--cardMuted); }
.fc-warning { margin-top: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #d99b20 40%, var(--border)); border-radius: 11px; background: color-mix(in srgb, #f7c75d 13%, var(--panelSolid)); color: var(--cardText); font-size: 0.83rem; }

.fc-toast {
  position: fixed;
  z-index: 10000;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  max-width: min(420px, calc(100vw - 36px));
  padding: 13px 16px;
  border-radius: 12px;
  background: #102326;
  color: #fff;
  font-weight: 750;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.fc-footer { margin: 22px 4px 0; color: color-mix(in srgb, var(--muted) 86%, transparent); text-align: center; font-size: 0.78rem; }
[hidden] { display: none !important; }

html[data-bc-theme="dark"] .fc-status-pill { color: #ffb9bc; }
html[data-bc-theme="dark"] .fc-status-pill.is-paid { color: #a9eccf; }
html[data-bc-theme="dark"] .fc-tabs button.is-active { background: #8fdce7; color: #102326; }
html[data-bc-theme="dark"] .fc-button--secondary { background: #1d3b45; color: #f4fbfc; }

@media (max-width: 1100px) {
  .fc-ticket-grid, .fc-parking-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .fc-hero { grid-template-columns: 1fr; min-height: 0; }
  .fc-hero__signal { max-width: 520px; }
  .fc-room-gate__grid, .fc-grid--2, .fc-grid--3 { grid-template-columns: 1fr; }
  .fc-appbar { align-items: flex-start; }
  .fc-appbar, .fc-view-heading, .fc-gate { display: grid; }
  .fc-appbar__actions { width: 100%; }
  .fc-appbar__actions .fc-button { flex: 1 1 180px; }
  .fc-member-row, .fc-payment-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fc-member-row--head { display: none; }
  .fc-member-row > span, .fc-payment-row > span, .fc-payment-row > strong { display: grid; gap: 2px; }
  .fc-person { grid-column: 1 / -1; }
  .fc-row-label { display: block; color: var(--cardMuted); font-size: 0.63rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
  .fc-timetable-callout { grid-template-columns: 1fr; }
  .fc-timetable-callout .fc-button { width: 100%; }
}

@media (max-width: 620px) {
  .fc-wrap { padding: 12px; padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
  .fc-hero { padding: 24px 20px 28px; border-radius: 20px; }
  .fc-hero h1 { font-size: clamp(2.15rem, 12vw, 3.6rem); }
  .fc-hero__actions .fc-button { width: 100%; }
  .fc-notice, .fc-gate, .fc-room-gate, .fc-app { border-radius: 18px; }
  .fc-room-gate { padding: 17px; }
  .fc-view { padding: 18px 14px 26px; }
  .fc-ticket-grid, .fc-parking-grid, .fc-grid--4, .fc-detail-grid { grid-template-columns: 1fr; }
  .fc-choice { min-height: 0; }
  .fc-plan-actions { position: static; display: grid; }
  .fc-plan-actions .fc-button { width: 100%; }
  .fc-appbar__actions { display: grid; }
  .fc-member-row, .fc-payment-row { grid-template-columns: 1fr; }
  .fc-person { grid-column: auto; }
  .fc-status-pill { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}