:root {
  --ink: #071a42;
  --ink-2: #22355f;
  --muted: #6c7b9d;
  --muted-2: #94a0ba;
  --line: #dfe6f2;
  --line-soft: #edf1f7;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --primary: #2463eb;
  --primary-2: #164ed0;
  --primary-soft: #eaf1ff;
  --success: #168a58;
  --success-soft: #e8f8f0;
  --warning: #d56719;
  --warning-soft: #fff3e8;
  --danger: #d9414b;
  --danger-soft: #ffedef;
  --violet: #6d5ce8;
  --club-primary: #5c4cf3;
  --club-primary-2: #7968f5;
  --club-accent: #ff7857;
  --club-on-primary: #ffffff;
  --club-soft: #eeecff;
  --club-soft-2: #f5f3ff;
  --club-border: #cfcbff;
  --club-shadow: rgba(92, 76, 243, .26);
  --shadow-sm: 0 8px 24px rgba(23, 45, 91, 0.08);
  --shadow-md: 0 20px 55px rgba(10, 30, 72, 0.14);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% -10%, rgba(72, 127, 255, 0.14), transparent 27rem),
    radial-gradient(circle at 92% 2%, rgba(135, 98, 255, 0.11), transparent 28rem),
    #eef3fa;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
body.prototype-open { overflow: hidden; }

html.prototype-mode,
html.prototype-mode body { height: 100%; overflow: hidden; background: #07142f; }
html.prototype-mode body > .gallery-hero,
html.prototype-mode body > .usage-panel,
html.prototype-mode body > .filter-bar,
html.prototype-mode body > main,
html.prototype-mode body > .gallery-footer,
html.prototype-mode body > .screen-dialog,
html.prototype-mode body > .docs-dialog { display: none !important; }
html.prototype-mode .prototype-close { display: none !important; }

button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: var(--primary); }

.gallery-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 280px;
  gap: 26px;
  align-items: center;
  min-height: 230px;
  margin: 20px;
  padding: 34px 40px;
  overflow: hidden;
  color: white;
  border-radius: 34px;
  background:
    linear-gradient(105deg, rgba(4, 32, 93, 0.98), rgba(20, 84, 220, 0.96) 61%, rgba(89, 76, 243, 0.94)),
    #0a3ead;
  box-shadow: 0 25px 70px rgba(22, 74, 175, 0.27);
}

.gallery-hero::before,
.gallery-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.gallery-hero::before {
  width: 360px;
  height: 360px;
  right: 17%;
  top: -250px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018);
}

.gallery-hero::after {
  width: 260px;
  height: 260px;
  left: -100px;
  bottom: -210px;
  background: rgba(255, 255, 255, 0.08);
}

.hero-mark {
  z-index: 1;
  width: 92px;
  height: 92px;
  padding: 8px;
  border-radius: 25px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.hero-mark img { width: 100%; height: 100%; border-radius: 19px; display: block; }
.hero-copy { z-index: 1; }
.hero-copy h1 { margin: 5px 0 8px; font-size: clamp(34px, 4vw, 62px); line-height: 1; letter-spacing: -0.045em; }
.hero-copy p { max-width: 760px; margin: 0; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.55; }
.eyebrow { color: #aecaFF; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-meta span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.9); font-size: 12px; font-weight: 650; }

.hero-principles {
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 20px;
  background: rgba(4, 22, 65, .25);
  backdrop-filter: blur(10px);
}
.hero-principles strong { margin-bottom: 4px; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.hero-principles span { position: relative; padding-left: 17px; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.4; }
.hero-principles span::before { content: ""; position: absolute; top: 6px; left: 0; width: 6px; height: 6px; border-radius: 99px; background: #facc15; }

.usage-panel {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(520px, 1.5fr) minmax(170px, .55fr);
  gap: 24px;
  align-items: center;
  margin: 0 20px 18px;
  padding: 22px 24px;
  border: 1px solid #d7e2f1;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 40px rgba(30,55,104,.08);
}
.usage-copy .eyebrow { color: var(--primary); font-size: 10px; }
.usage-copy h2 { margin: 5px 0 6px; font-size: 22px; letter-spacing: -.035em; }
.usage-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.usage-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.usage-steps li { display: flex; gap: 10px; min-width: 0; padding: 12px; border-radius: 16px; background: #f5f8fd; }
.usage-steps li > span { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 9px; color: #fff; background: var(--primary); font-size: 11px; font-weight: 850; }
.usage-steps strong, .usage-steps small { display: block; }
.usage-steps strong { color: var(--ink); font-size: 12px; line-height: 1.3; }
.usage-steps small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.usage-links { display: grid; gap: 7px; }
.usage-links a, .prototype-launch { padding: 8px 11px; border: 1px solid #dbe5f3; border-radius: 11px; color: var(--ink-2); background: #fff; font-size: 11px; font-weight: 750; text-align: left; text-decoration: none; transition: .18s ease; }
.usage-links a:hover { border-color: #9db9f0; color: var(--primary); transform: translateX(2px); }
.prototype-launch { display: flex; align-items: center; gap: 8px; border-color: var(--primary); color: #fff; background: linear-gradient(135deg, var(--primary), var(--violet)); box-shadow: 0 8px 20px rgba(36,99,235,.22); cursor: pointer; }
.prototype-launch span { display: grid; place-items: center; width: 19px; height: 19px; padding-left: 1px; border-radius: 99px; color: var(--primary); background: #fff; font-size: 8px; }
.prototype-launch:hover { transform: translateX(2px); box-shadow: 0 10px 25px rgba(36,99,235,.3); }

.filter-bar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(197, 208, 226, .75);
  background: rgba(239, 244, 251, .88);
  backdrop-filter: blur(18px);
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { cursor: pointer; padding: 9px 14px; border: 1px solid #d7e0ef; border-radius: 99px; background: rgba(255,255,255,.8); color: #455579; font-size: 13px; font-weight: 700; transition: .18s ease; }
.filter-chip:hover { border-color: #a9c0f2; color: var(--primary); transform: translateY(-1px); }
.filter-chip.active { border-color: var(--primary); color: #fff; background: var(--primary); box-shadow: 0 7px 18px rgba(36,99,235,.24); }
.gallery-search { display: flex; align-items: center; gap: 8px; min-width: 270px; padding: 8px 12px; border: 1px solid #d7e0ef; border-radius: 12px; background: #fff; color: var(--muted); }
.gallery-search input { width: 100%; border: 0; outline: none; color: var(--ink); background: transparent; font-size: 13px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 30px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 42px 24px 72px;
}

.screen-card {
  display: grid;
  justify-items: center;
  padding: 26px 18px 22px;
  overflow: hidden;
  border: 1px solid rgba(209, 220, 236, .85);
  border-radius: 30px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 50px rgba(30, 55, 104, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.screen-card:hover { transform: translateY(-3px); box-shadow: 0 24px 65px rgba(30,55,104,.13); }
.screen-card[hidden] { display: none; }
.screen-card-header { width: min(100%, 390px); margin-bottom: 16px; }
.screen-card-kicker { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.screen-card-kicker span:last-child { color: var(--muted-2); }
.screen-card h2 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }
.screen-card-description { width: min(100%, 390px); margin: 16px 0 0; color: #6d7a98; font-size: 13px; line-height: 1.5; }
.screen-tags { display: flex; flex-wrap: wrap; gap: 6px; width: min(100%, 390px); margin-top: 12px; }
.screen-tags span { padding: 5px 8px; border-radius: 99px; background: #eaf0fa; color: #536380; font-size: 10px; font-weight: 700; }

.phone-button {
  cursor: zoom-in;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 53px;
  background: transparent;
  text-align: left;
}

.phone {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border: 8px solid #07142f;
  border-radius: 52px;
  background: var(--canvas);
  box-shadow: 0 25px 60px rgba(5, 22, 55, .22), inset 0 0 0 1px rgba(255,255,255,.32);
  isolation: isolate;
}

.phone::after { content: ""; position: absolute; z-index: 80; inset: 0; border-radius: 43px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); pointer-events: none; }
.status-bar { position: absolute; z-index: 70; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 21px; color: var(--ink); font-size: 12px; font-weight: 800; pointer-events: none; }
.status-icons { display: flex; align-items: center; gap: 5px; }
.status-icons svg { width: 14px; height: 14px; stroke-width: 2.2; }
.dynamic-island { position: absolute; z-index: 75; top: 8px; left: 50%; width: 116px; height: 27px; transform: translateX(-50%); border-radius: 99px; background: #02050c; }
.app-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 38px; color: var(--ink); background: var(--canvas); }
.screen-scroll { flex: 1; overflow: hidden; padding: 0 18px 104px; }
.screen-scroll.no-nav { padding-bottom: 28px; }
.screen-scroll.membership-detail-scroll { overflow-y: auto; padding-bottom: 108px; scrollbar-width: none; }
.screen-scroll.membership-detail-scroll::-webkit-scrollbar { display: none; }
.membership-detail-scroll .membership-detail-artwork { height: 95px; }
.membership-detail-scroll .section-title { margin: 12px 0 7px; }
.membership-detail-scroll .detail-row { padding: 10px 13px; }
.screen-scroll.edge { padding-left: 0; padding-right: 0; }
.screen-scroll.auth-scroll { padding: 0 24px 24px; }

.topbar { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 18px; }
.topbar.spread { justify-content: space-between; }
.topbar-title { min-width: 0; flex: 1; }
.topbar-title strong { display: block; overflow: hidden; color: var(--ink); font-size: 17px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.icon-btn { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; color: var(--ink-2); box-shadow: 0 5px 16px rgba(18,41,82,.05); }
.icon-btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.icon-btn.primary-soft { color: var(--primary); background: var(--primary-soft); }
.icon-btn svg { width: 20px; height: 20px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--club-on-primary); background: linear-gradient(145deg, var(--club-primary), var(--club-primary-2)); font-size: 13px; font-weight: 850; box-shadow: 0 8px 20px var(--club-shadow); }
.branch-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 10px; border: 1px solid #e0e6f1; border-radius: 99px; background: rgba(255,255,255,.9); color: #435477; font-size: 11px; font-weight: 720; }
.branch-pill svg { width: 14px; height: 14px; color: var(--primary); }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.section-title h3 { margin: 0; color: var(--ink); font-size: 18px; letter-spacing: -.025em; }
.section-title button, .text-action { padding: 0; border: 0; background: transparent; color: var(--primary); font-size: 12px; font-weight: 750; }
.screen-heading { margin: 10px 0 5px; font-size: 28px; line-height: 1.08; letter-spacing: -.045em; }
.screen-subtitle { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.surface-card { border: 1px solid rgba(221,228,240,.9); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.soft-card { border: 1px solid #e1e8f5; border-radius: 18px; background: #f8faff; }
.divider { height: 1px; background: var(--line-soft); }
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.spread { justify-content: space-between; }
.grow { min-width: 0; flex: 1; }
.muted { color: var(--muted); }
.tiny { font-size: 10px; }
.small { font-size: 12px; }
.strong { font-weight: 780; }

.primary-btn, .secondary-btn, .danger-btn, .google-btn, .apple-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 790;
}
.primary-btn { border: 1px solid var(--primary); color: #fff; background: linear-gradient(135deg, #2b6cf3, #1e55db); box-shadow: 0 11px 24px rgba(36,99,235,.26); }
.primary-btn.club { border-color: var(--club-primary); color: var(--club-on-primary); background: linear-gradient(135deg, var(--club-primary), var(--club-primary-2)); box-shadow: 0 11px 24px var(--club-shadow); }
.secondary-btn { border: 1px solid #dce4f1; color: var(--ink-2); background: #fff; }
.danger-btn { border: 1px solid #ffd1d5; color: var(--danger); background: var(--danger-soft); }
.google-btn { border: 1px solid #dce2ec; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.apple-btn { border: 1px solid #070b13; color: #fff; background: #070b13; }
.apple-btn .brand-icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.primary-btn.compact, .secondary-btn.compact { width: auto; min-height: 38px; padding: 8px 12px; border-radius: 12px; font-size: 12px; }
.btn-icon { width: 19px; height: 19px; }
.disabled-btn { opacity: .48; box-shadow: none; }

.field { display: grid; gap: 7px; }
.field label { color: var(--ink-2); font-size: 12px; font-weight: 750; }
.input-shell { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 14px; border: 1px solid #dce4f0; border-radius: 14px; background: #fff; color: var(--muted); }
.input-shell.focus { border-color: #83a9ff; box-shadow: 0 0 0 3px rgba(36,99,235,.09); }
.input-shell.error { border-color: #f1949b; box-shadow: 0 0 0 3px rgba(217,65,75,.07); }
.input-shell span.value { color: var(--ink); font-size: 14px; font-weight: 620; }
.input-shell svg { flex: 0 0 auto; width: 18px; height: 18px; }
.field-help { color: var(--muted); font-size: 10px; line-height: 1.4; }
.field-error { color: var(--danger); font-size: 10px; line-height: 1.4; }
.form-stack { display: grid; gap: 14px; margin-top: 20px; }

.auth-brand { display: grid; justify-items: center; padding: 38px 0 26px; text-align: center; }
.auth-brand .logo { width: 74px; height: 74px; border-radius: 22px; box-shadow: 0 16px 36px rgba(7,26,66,.18); }
.auth-brand h1 { margin: 18px 0 7px; font-size: 28px; letter-spacing: -.04em; }
.auth-brand p { max-width: 285px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-actions { display: grid; gap: 10px; }
.legal-copy { margin: 18px auto 0; max-width: 310px; color: var(--muted-2); font-size: 9px; line-height: 1.5; text-align: center; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted-2); font-size: 10px; }
.auth-or::before, .auth-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-bg { background: radial-gradient(circle at 85% 5%, rgba(89,76,243,.14), transparent 220px), radial-gradient(circle at 0 85%, rgba(36,99,235,.12), transparent 250px), #f7f9fd; }

.progress-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 4px; }
.progress-dots span { width: 6px; height: 6px; border-radius: 99px; background: #dce4f1; }
.progress-dots span.active { width: 20px; background: var(--primary); }
.country-code { display: flex; align-items: center; gap: 6px; padding-right: 9px; border-right: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.country-code > svg { width: 13px; height: 13px; color: var(--muted); }
.country-flag { display: block; flex: 0 0 auto; width: 23px; height: 15px; overflow: hidden; border: 1px solid rgba(7,26,66,.12); border-radius: 3px; background: linear-gradient(to bottom, #ce2939 0 33.333%, #fff 33.333% 66.666%, #477050 66.666%); box-shadow: 0 1px 2px rgba(7,26,66,.08); }
.onboarding-illustration { display: grid; place-items: center; width: 96px; height: 96px; margin: 24px auto 18px; border-radius: 28px; color: var(--primary); background: linear-gradient(145deg, #edf3ff, #dce8ff); }
.onboarding-illustration svg { width: 44px; height: 44px; }
.sticky-actions { position: absolute; z-index: 10; left: 18px; right: 18px; bottom: 20px; display: grid; gap: 9px; padding-top: 18px; background: linear-gradient(transparent, var(--canvas) 28%); }

.search-box { display: flex; align-items: center; gap: 9px; height: 46px; margin: 7px 18px 13px; padding: 0 13px; border: 1px solid #dfe6f1; border-radius: 14px; background: #fff; color: var(--muted); box-shadow: 0 5px 16px rgba(18,41,82,.04); }
.search-box svg { width: 18px; height: 18px; }
.search-box span { font-size: 12px; }
.club-list { display: grid; gap: 10px; }
.club-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e0e7f2; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(21,47,95,.06); }
.club-logo { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border-radius: 17px; color: var(--club-on-primary); background: linear-gradient(145deg, var(--club-primary), var(--club-primary-2)); font-size: 21px; font-weight: 880; }
.club-logo.has-image { border: 1px solid rgba(7,26,66,.08); background: #fff; box-shadow: 0 3px 10px rgba(18,41,82,.08); }
.club-logo.has-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.club-logo.orange { background: linear-gradient(145deg, #ff7a4d, #ffb35c); }
.club-logo.blue { background: linear-gradient(145deg, #1767e8, #42a5ff); }
.club-logo.dark { background: linear-gradient(145deg, #0b1837, #263c6d); }
.club-meta strong { display: block; font-size: 14px; }
.club-meta span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.club-meta .status-line { color: var(--success); font-weight: 700; }
.club-row > svg { width: 19px; height: 19px; color: var(--primary); }

.branch-list { display: grid; gap: 11px; margin-top: 17px; }
.branch-card { position: relative; padding: 15px; border: 1px solid #e0e7f2; border-radius: 19px; background: #fff; box-shadow: var(--shadow-sm); }
.branch-card.selected { border-color: var(--club-primary); box-shadow: 0 0 0 2px rgba(92,76,243,.08), var(--shadow-sm); }
.branch-card .check-corner { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--club-primary); }
.branch-card .check-corner svg { width: 14px; height: 14px; }
.branch-card h4 { margin: 0 32px 5px 0; font-size: 15px; }
.branch-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.branch-details { display: flex; gap: 12px; margin-top: 12px; color: #556582; font-size: 10px; }
.branch-details span { display: flex; align-items: center; gap: 4px; }
.branch-details svg { width: 13px; height: 13px; color: var(--club-primary); }

.choice-grid { display: grid; gap: 11px; margin-top: 22px; }
.choice-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e0e7f2; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.choice-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--primary); background: var(--primary-soft); }
.choice-icon.orange { color: var(--warning); background: var(--warning-soft); }
.choice-icon.violet { color: var(--violet); background: #f0edff; }
.choice-icon svg { width: 23px; height: 23px; }
.choice-card strong { display: block; font-size: 13px; }
.choice-card p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
.choice-card > svg { width: 18px; height: 18px; color: var(--muted-2); }

.code-input { display: flex; justify-content: center; gap: 8px; margin: 26px 0; }
.code-input span { display: grid; place-items: center; width: 43px; height: 52px; border: 1px solid #d9e2ef; border-radius: 13px; background: #fff; color: var(--ink); font-size: 20px; font-weight: 800; }
.code-input span.filled { border-color: #91b0f5; box-shadow: 0 0 0 3px rgba(36,99,235,.08); }
.scan-link { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--primary); font-size: 12px; font-weight: 750; }
.scan-link svg { width: 17px; height: 17px; }

.qr-scanner { position: relative; display: grid; place-items: center; height: 470px; overflow: hidden; color: #fff; background: radial-gradient(circle at 66% 28%, rgba(92,76,243,.38), transparent 24%), linear-gradient(145deg, #07142f, #10285a 58%, #050b19); }
.scanner-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; }
.scan-frame { position: relative; width: 238px; height: 238px; }
.scan-frame i { position: absolute; width: 48px; height: 48px; border-color: #fff; border-style: solid; filter: drop-shadow(0 0 9px rgba(92,76,243,.65)); }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 18px 0 0; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 18px 0 0; }
.scan-frame i:nth-child(3) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 18px; }
.scan-frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 18px; }
.scan-frame span { position: absolute; top: 50%; right: 12px; left: 12px; height: 2px; background: linear-gradient(90deg, transparent, #78a5ff 18%, #fff 50%, #78a5ff 82%, transparent); box-shadow: 0 0 14px rgba(120,165,255,.9); }
.scanner-caption { position: absolute; right: 38px; bottom: 36px; left: 38px; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.45; text-align: center; }

.success-hero { display: grid; justify-items: center; padding: 30px 18px 20px; text-align: center; }
.success-icon { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 28px; color: #fff; background: linear-gradient(145deg, #22a86f, #0f8c59); box-shadow: 0 18px 34px rgba(22,138,88,.24); }
.success-icon svg { width: 42px; height: 42px; }
.success-hero h2 { margin: 20px 0 8px; font-size: 25px; letter-spacing: -.035em; }
.success-hero p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.success-summary { padding: 15px; }
.summary-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.summary-row + .summary-row { border-top: 1px solid var(--line-soft); }
.summary-row svg { width: 18px; height: 18px; color: var(--club-primary); }
.summary-row span { color: var(--muted); font-size: 10px; }
.summary-row strong { display: block; margin-top: 2px; font-size: 12px; }

.home-hero { position: relative; min-height: 180px; padding: 20px; overflow: hidden; color: #fff; border-radius: 25px; background-image: linear-gradient(120deg, rgba(5,16,38,.92), rgba(8,28,67,.64) 62%, rgba(11,33,76,.46)), url("./assets/sample-club-cover-web.webp"); background-position: center; background-size: cover; box-shadow: 0 18px 34px var(--club-shadow); }
.home-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(3,12,31,.2)); }
.home-hero > * { position: relative; z-index: 1; }
.home-hero .overline { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; }
.home-hero h2 { margin: 7px 0 4px; color: #fff; font-size: 24px; letter-spacing: -.04em; text-shadow: 0 1px 10px rgba(0,0,0,.28); }
.home-hero p { margin: 0; color: rgba(255,255,255,.76); font-size: 11px; }
.hero-next { position: absolute; left: 20px; right: 20px; bottom: 17px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(10,11,59,.18); backdrop-filter: blur(6px); }
.hero-next .date-tile { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--club-primary); background: #fff; font-size: 12px; font-weight: 850; }
.hero-next strong { display: block; font-size: 11px; }
.hero-next span { color: rgba(255,255,255,.7); font-size: 9px; }
.hero-next > svg { margin-left: auto; width: 17px; height: 17px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-card { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #e2e8f2; border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.quick-card .quick-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }
.quick-card .quick-icon.orange { color: var(--warning); background: var(--warning-soft); }
.quick-card svg { width: 19px; height: 19px; }
.quick-card strong { display: block; font-size: 11px; }
.quick-card span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }

.membership-card { padding: 15px; }
.membership-card + .membership-card { margin-top: 10px; }
.membership-artwork { position: relative; height: 76px; margin: -15px -15px 14px; overflow: hidden; border-radius: 19px 19px 13px 13px; background: var(--club-soft); }
.membership-artwork::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,12,29,.78), rgba(3,12,29,.08)); }
.membership-artwork img, .membership-detail-artwork img { width: 100%; height: 100%; object-fit: cover; }
.membership-artwork span { position: absolute; left: 14px; bottom: 11px; z-index: 1; color: rgba(255,255,255,.86); font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.membership-detail-artwork { position: relative; height: 126px; margin-bottom: 12px; overflow: hidden; border-radius: 22px; background: var(--club-soft); box-shadow: var(--shadow-sm); }
.membership-detail-artwork::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,11,28,.78), rgba(2,11,28,.08)); }
.membership-detail-artwork span { position: absolute; left: 17px; right: 17px; bottom: 15px; z-index: 1; color: #fff; font-size: 17px; font-weight: 850; letter-spacing: -.025em; }
.membership-head { display: flex; align-items: flex-start; gap: 11px; }
.membership-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; color: var(--club-primary); background: var(--club-soft); }
.membership-icon svg { width: 21px; height: 21px; }
.membership-head h4 { margin: 1px 0 4px; font-size: 14px; line-height: 1.25; }
.membership-head p { margin: 0; color: var(--muted); font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 99px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-badge.success { color: var(--success); background: var(--success-soft); }
.status-badge.warning { color: var(--warning); background: var(--warning-soft); }
.status-badge.neutral { color: #687792; background: #eef2f7; }
.status-badge.danger { color: var(--danger); background: var(--danger-soft); }
.membership-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 13px; }
.membership-stat { padding: 8px; border-radius: 11px; background: #f7f9fc; }
.membership-stat span { display: block; color: var(--muted); font-size: 8px; }
.membership-stat strong { display: block; margin-top: 3px; font-size: 11px; }
.membership-action { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); color: var(--primary); font-size: 10px; font-weight: 750; }
.membership-action.disabled { color: var(--muted-2); }
.membership-action svg { width: 15px; height: 15px; }
.tab-segment { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 13px; background: #e9eef6; }
.tab-segment span { padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 10px; font-weight: 750; text-align: center; }
.tab-segment span.active { color: var(--ink); background: #fff; box-shadow: 0 4px 11px rgba(25,45,82,.08); }
.progress-bar { height: 7px; overflow: hidden; border-radius: 99px; background: #e8edf5; }
.progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--club-primary), var(--club-primary-2)); }

.availability-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: var(--club-soft-2); }
.availability-summary span:not(.status-badge) { display: block; color: var(--muted); font-size: 9px; }
.availability-summary strong { display: block; margin-top: 3px; font-size: 12px; }
.availability-calendar { padding: 13px; }
.availability-month { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: 8px; text-align: center; }
.availability-month > div strong { display: block; font-size: 15px; }
.availability-month > div span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.availability-month .icon-btn { width: 36px; height: 36px; }
.availability-month .icon-btn:last-child { justify-self: end; }
.availability-weekdays, .availability-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.availability-weekdays { margin-bottom: 5px; color: var(--muted-2); font-size: 8px; font-weight: 750; text-align: center; }
.availability-weekdays span { padding: 3px 0; }
.availability-day { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; color: var(--muted); background: #f1f4f8; font-size: 10px; font-weight: 750; }
.availability-day.available { color: #17643a; background: #e1f6e9; }
.availability-day.frozen { color: #985617; background: #fff0d6; }
.availability-day.unavailable { color: #98a3b5; background: #f1f4f8; }
.availability-day.empty { background: transparent; }
.availability-day.selected { outline: 2px solid var(--ink); outline-offset: 1px; }
.availability-legend { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: 8px; }
.availability-legend span { display: inline-flex; align-items: center; gap: 5px; }
.availability-legend i { width: 8px; height: 8px; border-radius: 3px; }
.availability-legend i.available { background: #b8ebca; }
.availability-legend i.frozen { background: #ffd999; }
.availability-legend i.unavailable { background: #dfe4ec; }
.availability-selected { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 15px; background: #fff; }
.availability-selected-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; font-size: 11px; font-weight: 850; }
.availability-selected-icon.frozen { color: #985617; background: #fff0d6; }
.availability-selected strong, .availability-selected span { display: block; }
.availability-selected strong { font-size: 11px; }
.availability-selected span { margin-top: 3px; color: var(--muted); font-size: 9px; }

.barcode-card { position: relative; padding: 20px; overflow: hidden; border: 0; border-radius: 25px; color: #fff; background-image: linear-gradient(145deg, rgba(5,14,36,.9), rgba(16,41,85,.66)), url("./assets/sample-client-card-artwork-web.webp"); background-position: center; background-size: cover; box-shadow: 0 20px 40px rgba(6,19,50,.28); }
.barcode-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(1,8,24,.18)); }
.barcode-card > * { position: relative; z-index: 1; }
.barcode-head { display: flex; align-items: center; justify-content: space-between; }
.barcode-head .mini-logo { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: var(--club-on-primary); background: linear-gradient(145deg, var(--club-primary), var(--club-primary-2)); font-weight: 900; }
.barcode-head span { color: rgba(255,255,255,.62); font-size: 9px; }
.barcode-owner { margin: 25px 0 16px; }
.barcode-owner span { color: rgba(255,255,255,.58); font-size: 9px; }
.barcode-owner strong { display: block; margin-top: 4px; font-size: 17px; }
.barcode-visual { padding: 14px 12px 10px; border-radius: 16px; color: var(--ink); background: #fff; text-align: center; }
.bars { height: 70px; background: repeating-linear-gradient(90deg, #071020 0 2px, transparent 2px 4px, #071020 4px 7px, transparent 7px 9px, #071020 9px 10px, transparent 10px 14px); }
.barcode-number { margin-top: 7px; color: #283653; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; letter-spacing: .14em; }
.barcode-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: rgba(255,255,255,.68); font-size: 9px; }
.brightness-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; color: var(--muted); font-size: 9px; }
.brightness-note svg { width: 14px; height: 14px; }
.soft-card .row > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--club-primary); }
.card-selector { display: flex; align-items: center; gap: 9px; margin: 12px 0; padding: 11px 12px; border: 1px solid #e0e6f1; border-radius: 14px; background: #fff; }
.card-selector .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.card-selector strong { display: block; font-size: 11px; }
.card-selector span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.card-selector > svg { margin-left: auto; width: 16px; height: 16px; }

.qr-box { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 184px; height: 184px; padding: 13px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.qr-box i { display: block; border-radius: 1px; background: #10214a; }
.qr-box i.blank { background: transparent; }

.date-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 6px 0 16px; }
.date-chip { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 13px; color: var(--muted); background: #fff; border: 1px solid #e2e8f1; }
.date-chip span { font-size: 8px; text-transform: uppercase; }
.date-chip strong { font-size: 14px; }
.date-chip.active { border-color: var(--club-primary); color: var(--club-on-primary); background: var(--club-primary); box-shadow: 0 8px 18px var(--club-shadow); }
.filter-pills { display: flex; gap: 7px; overflow: hidden; margin-bottom: 15px; }
.filter-pills span { padding: 7px 10px; border: 1px solid #dfe6f1; border-radius: 99px; background: #fff; color: #556582; font-size: 9px; font-weight: 720; white-space: nowrap; }
.filter-pills span.active { border-color: var(--club-border); color: var(--club-primary); background: var(--club-soft); }
.session-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 11px; align-items: center; padding: 13px; border: 1px solid #e2e8f2; border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.session-card + .session-card { margin-top: 9px; }
.session-time { padding-right: 10px; border-right: 1px solid var(--line-soft); text-align: center; }
.session-time strong { display: block; font-size: 13px; }
.session-time span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.session-info strong { display: block; font-size: 12px; }
.session-info span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.session-spots { text-align: right; }
.session-spots strong { display: block; color: var(--success); font-size: 9px; }
.session-spots span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.session-spots.full strong { color: var(--warning); }

.coach-card { display: flex; align-items: center; gap: 12px; padding: 13px; }
.coach-photo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #ff8b68, #6f5beb); font-size: 15px; font-weight: 850; }
.coach-card strong { display: block; font-size: 13px; }
.coach-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.detail-list { display: grid; gap: 1px; overflow: hidden; border-radius: 18px; background: var(--line-soft); }
.detail-row { display: flex; align-items: center; gap: 11px; padding: 13px; background: #fff; }
.detail-row > svg { width: 19px; height: 19px; color: var(--club-primary); }
.detail-row strong { display: block; font-size: 11px; }
.detail-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.coach-card > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted-2); }
.detail-row .right { margin-left: auto; color: var(--muted); font-size: 10px; }
.booking-summary { padding: 15px; }
.booking-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.booking-total span { color: var(--muted); font-size: 10px; }
.booking-total strong { font-size: 14px; }
.notice { display: flex; gap: 9px; padding: 11px 12px; border-radius: 14px; font-size: 9px; line-height: 1.45; }
.notice svg { flex: 0 0 auto; width: 17px; height: 17px; }
.notice.info { color: #315fae; background: #eaf2ff; }
.notice.warning { color: #9d541c; background: var(--warning-soft); }
.notice.danger { color: #a73039; background: var(--danger-soft); }
.notice.success { color: #16774e; background: var(--success-soft); }

.booking-card { padding: 14px; }
.booking-card + .booking-card { margin-top: 10px; }
.booking-date { display: grid; place-items: center; flex: 0 0 auto; width: 45px; height: 47px; border-radius: 13px; color: var(--club-primary); background: var(--club-soft); }
.booking-date strong { font-size: 14px; }
.booking-date span { font-size: 8px; text-transform: uppercase; }
.booking-card h4 { margin: 0; font-size: 12px; }
.booking-card p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }

.profile-hero { display: grid; justify-items: center; padding: 18px 0 20px; text-align: center; }
.profile-avatar { display: grid; place-items: center; width: 78px; height: 78px; border: 4px solid #fff; border-radius: 26px; color: var(--club-on-primary); background: linear-gradient(145deg, var(--club-primary), var(--club-accent)); box-shadow: 0 13px 28px var(--club-shadow); font-size: 22px; font-weight: 850; }
.profile-hero h2 { margin: 13px 0 3px; font-size: 21px; }
.profile-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.menu-list { overflow: hidden; border: 1px solid #e0e7f2; border-radius: 19px; background: #fff; box-shadow: var(--shadow-sm); }
.menu-item { display: flex; align-items: center; gap: 11px; min-height: 51px; padding: 0 13px; }
.menu-item + .menu-item { border-top: 1px solid var(--line-soft); }
.menu-item .menu-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); }
.menu-item .menu-icon.red { color: var(--danger); background: var(--danger-soft); }
.menu-item svg { width: 16px; height: 16px; }
.menu-item strong { display: block; font-size: 11px; }
.menu-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.menu-item > svg:last-child { margin-left: auto; color: var(--muted-2); }

.empty-state { display: grid; justify-items: center; padding: 58px 20px 24px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 27px; color: var(--primary); background: var(--primary-soft); }
.empty-icon.warning { color: var(--warning); background: var(--warning-soft); }
.empty-icon.danger { color: var(--danger); background: var(--danger-soft); }
.empty-icon svg { width: 38px; height: 38px; }
.empty-state h3 { margin: 19px 0 7px; font-size: 19px; letter-spacing: -.025em; }
.empty-state p { max-width: 275px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.empty-state .primary-btn, .empty-state .secondary-btn { margin-top: 20px; }

.bottom-nav { position: absolute; z-index: 55; left: 10px; right: 10px; bottom: 8px; display: grid; grid-template-columns: repeat(5, 1fr); height: 72px; padding: 7px 3px 5px; border: 1px solid rgba(221,228,240,.94); border-radius: 23px 23px 34px 34px; background: rgba(255,255,255,.95); box-shadow: 0 -8px 25px rgba(22,43,83,.08); backdrop-filter: blur(16px); }
.nav-item { display: grid; justify-items: center; align-content: center; gap: 4px; color: #8a96ae; font-size: 8px; font-weight: 690; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item.active { color: var(--club-primary); }
.nav-item.card-tab { position: relative; }
.nav-item.card-tab .raised { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 5px solid var(--canvas); border-radius: 16px; color: var(--club-on-primary); background: linear-gradient(145deg, var(--club-primary), var(--club-primary-2)); box-shadow: 0 10px 22px var(--club-shadow); }
.nav-item.card-tab .raised svg { width: 21px; height: 21px; }

.bottom-sheet-backdrop { position: absolute; z-index: 85; inset: 0; background: rgba(5,17,43,.46); backdrop-filter: blur(2px); }
.bottom-sheet { position: absolute; z-index: 90; left: 0; right: 0; bottom: 0; padding: 10px 18px 26px; border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -25px 65px rgba(5,17,43,.22); }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 18px; border-radius: 99px; background: #d9e0eb; }
.bottom-sheet h3 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.bottom-sheet > p { margin: 6px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.sheet-option { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e1e7f1; border-radius: 15px; }
.sheet-option + .sheet-option { margin-top: 8px; }
.sheet-option.selected { border-color: var(--club-primary); background: var(--club-soft-2); }
.sheet-option .radio { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #cdd6e4; border-radius: 50%; }
.sheet-option.selected .radio { border: 6px solid var(--club-primary); }
.sheet-option strong { display: block; font-size: 11px; }
.sheet-option span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }

.offline-banner { display: flex; align-items: center; gap: 8px; margin: 0 18px 10px; padding: 9px 11px; border-radius: 12px; color: #82511f; background: #fff0db; font-size: 9px; font-weight: 680; }
.offline-banner svg { width: 15px; height: 15px; }
.skeleton { position: relative; overflow: hidden; border-radius: 9px; background: #e8edf4; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton.line { height: 11px; }
.skeleton.line.sm { width: 55%; }
.skeleton.block { height: 112px; border-radius: 18px; }

.rate-box { display: grid; gap: 12px; padding: 15px; }
.attempt-meter { display: flex; gap: 5px; }
.attempt-meter i { flex: 1; height: 6px; border-radius: 99px; background: #f0bcc0; }
.attempt-meter i.used { background: var(--danger); }
.timer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0; color: var(--danger); font-size: 22px; font-weight: 850; }
.timer svg { width: 24px; height: 24px; }

.destructive-panel { padding: 15px; border: 1px solid #ffd5d8; border-radius: 18px; background: #fff7f7; }
.destructive-panel h4 { margin: 0 0 7px; color: #9f2c35; font-size: 13px; }
.destructive-panel p { margin: 0; color: #805158; font-size: 9px; line-height: 1.5; }
.check-list { display: grid; gap: 9px; margin: 14px 0; }
.check-line { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 9px; line-height: 1.4; }
.check-line svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--success); }

.gallery-empty { margin: 60px; color: var(--muted); text-align: center; }
.gallery-footer { display: grid; grid-template-columns: 1fr minmax(280px, 500px); gap: 30px; margin: 0 20px 20px; padding: 26px 30px; border: 1px solid #dae3ef; border-radius: 24px; background: rgba(255,255,255,.7); color: var(--muted); font-size: 13px; line-height: 1.5; }
.gallery-footer strong { color: var(--ink); }
.gallery-footer p { margin: 4px 0 0; }
.footer-note { padding: 13px 16px; border-radius: 15px; background: #edf2fa; }

.screen-dialog { width: min(960px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 28px; overflow: auto; border: 0; border-radius: 28px; background: #eef3fa; box-shadow: 0 35px 100px rgba(3,15,43,.35); }
.screen-dialog::backdrop { background: rgba(3, 12, 32, .7); backdrop-filter: blur(8px); }
.dialog-close { position: sticky; z-index: 100; top: 0; float: right; display: grid; place-items: center; width: 42px; height: 42px; margin: -12px -12px 0 0; border: 0; border-radius: 14px; color: #fff; background: var(--ink); font-size: 25px; line-height: 1; box-shadow: var(--shadow-sm); }
.dialog-layout { display: grid; grid-template-columns: 390px 1fr; gap: 34px; align-items: start; }
.dialog-copy { padding-top: 34px; }
.dialog-copy .eyebrow { color: var(--primary); }
.dialog-copy h2 { margin: 8px 0 10px; font-size: 32px; letter-spacing: -.04em; }
.dialog-copy p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.dialog-copy h3 { margin: 24px 0 8px; font-size: 14px; }
.dialog-copy ul { margin: 0; padding-left: 18px; color: #53627f; font-size: 13px; line-height: 1.6; }
.dialog-prototype-button { width: min(100%, 390px); margin-top: 22px; padding: 12px 16px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--violet)); font-size: 13px; font-weight: 800; box-shadow: 0 10px 24px rgba(36,99,235,.24); cursor: pointer; }

.prototype-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #fff;
  background: #07142f;
}
.prototype-dialog[open] { display: block; }
.prototype-dialog::backdrop { background: #030916; }
.prototype-fullscreen-root { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; overflow: hidden; background: #07142f; }
.prototype-fullscreen-root:fullscreen { grid-template-rows: minmax(0, 1fr); width: 100vw; height: 100vh; background: #02050c; }
.prototype-fullscreen-root:fullscreen .prototype-toolbar,
.prototype-fullscreen-root:fullscreen .prototype-controls { display: none; }
.prototype-fullscreen-root:fullscreen .prototype-stage { background: #02050c; background-image: none; }
.prototype-fullscreen-root:fullscreen .prototype-stage::before { display: none; }
.prototype-fullscreen-root:fullscreen .prototype-phone-slot { filter: none; }
.prototype-fullscreen-root:fullscreen .prototype-toast { display: none; }
.prototype-fullscreen-root:fullscreen .prototype-target { outline: 0 !important; box-shadow: none !important; animation: none !important; }
.prototype-toolbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto auto minmax(210px, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 72px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(8,23,52,.94);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.prototype-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prototype-brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 7px 18px rgba(0,0,0,.25); }
.prototype-brand strong, .prototype-brand span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prototype-brand strong { font-size: 13px; }
.prototype-brand span { max-width: 42vw; margin-top: 3px; color: #93a6cd; font-size: 10px; }
.prototype-scenario-control { display: flex; align-items: center; gap: 9px; padding: 6px 7px 6px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #91a5cd; background: rgba(255,255,255,.05); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.prototype-scenario-control select { min-width: 190px; padding: 8px 32px 8px 10px; border: 0; border-radius: 9px; outline: 0; color: #fff; background: #122953; font-size: 12px; font-weight: 750; text-transform: none; }
.prototype-scenario-control option { color: #fff; background: #122953; }
.prototype-language { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); }
.prototype-language button { min-width: 35px; padding: 7px 8px; border: 0; border-radius: 8px; color: #91a5cd; background: transparent; font-size: 10px; font-weight: 850; letter-spacing: .04em; cursor: pointer; transition: .18s ease; }
.prototype-language button:hover { color: #fff; background: rgba(68,119,237,.18); }
.prototype-language button[aria-pressed="true"] { color: #fff; background: #2459cb; box-shadow: 0 5px 14px rgba(20,67,173,.35); }
.prototype-toolbar-actions { display: flex; justify-content: flex-end; gap: 7px; }
.prototype-toolbar-actions button, .prototype-controls button { padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; color: #dfe8fb; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 750; cursor: pointer; transition: .18s ease; }
.prototype-toolbar-actions button:hover, .prototype-controls button:hover { border-color: rgba(126,167,255,.75); color: #fff; background: rgba(68,119,237,.18); }
.prototype-toolbar-actions button[aria-pressed="true"] { border-color: #75a0ff; color: #fff; background: #2459cb; }
.prototype-toolbar-actions .prototype-close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: #fff; background: rgba(255,255,255,.1); font-size: 23px; line-height: 1; }
.prototype-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background-color: #0a1935;
  background-image: radial-gradient(rgba(143,169,218,.19) 1px, transparent 1px), radial-gradient(circle at 50% 44%, rgba(37,99,235,.17), transparent 28rem);
  background-position: 0 0, center;
  background-size: 22px 22px, auto;
}
.prototype-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,9,22,.5), transparent 22%, transparent 78%, rgba(3,9,22,.5)); }
.prototype-phone-slot { position: relative; z-index: 2; flex: 0 0 auto; filter: drop-shadow(0 32px 50px rgba(0,0,0,.42)); }
.prototype-phone-slot .phone { position: absolute; top: 0; left: 0; margin: 0; transform: scale(var(--prototype-scale, 1)); transform-origin: top left; }
.prototype-phone-slot.is-entering { animation: prototype-screen-in .24s cubic-bezier(.2,.8,.2,1); }
@keyframes prototype-screen-in { from { opacity: .2; transform: translateX(16px) scale(.985); } to { opacity: 1; transform: none; } }
.prototype-target { position: relative; cursor: pointer !important; }
.prototype-dialog.show-hotspots .prototype-target, .prototype-dialog.flash-hotspots .prototype-target { outline: 3px solid rgba(75,135,255,.92); outline-offset: -2px; box-shadow: 0 0 0 5px rgba(75,135,255,.18), 0 0 24px rgba(75,135,255,.28); animation: prototype-hotspot-pulse .75s ease-in-out infinite alternate; }
@keyframes prototype-hotspot-pulse { to { outline-color: rgba(145,181,255,1); box-shadow: 0 0 0 7px rgba(75,135,255,.12), 0 0 30px rgba(75,135,255,.38); } }
.prototype-toast { position: absolute; z-index: 8; left: 50%; bottom: 20px; max-width: min(420px, calc(100vw - 36px)); padding: 10px 14px; transform: translate(-50%, 12px); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #f5f8ff; background: rgba(5,17,40,.92); box-shadow: 0 12px 32px rgba(0,0,0,.3); font-size: 11px; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: .2s ease; }
.prototype-toast.visible { transform: translate(-50%, 0); opacity: 1; }
.prototype-controls { position: relative; z-index: 20; display: grid; grid-template-columns: 150px minmax(0,1fr) 150px; gap: 16px; align-items: center; min-height: 68px; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.1); background: #081734; }
.prototype-controls button:disabled { opacity: .38; cursor: default; }
.prototype-progress { min-width: 0; text-align: center; }
.prototype-progress strong, .prototype-progress span { display: block; }
.prototype-progress strong { color: #fff; font-size: 12px; }
.prototype-progress span { overflow: hidden; margin-top: 3px; color: #91a5cd; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.docs-dialog { width: min(1240px, calc(100vw - 28px)); height: min(900px, calc(100vh - 28px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 28px; color: var(--ink); background: #f5f7fb; box-shadow: 0 35px 100px rgba(3,15,43,.36); }
.docs-dialog::backdrop { background: rgba(3,12,32,.72); backdrop-filter: blur(8px); }
.docs-dialog-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 88px; padding: 19px 24px 17px 30px; border-bottom: 1px solid #dce4ef; background: rgba(255,255,255,.96); box-shadow: 0 6px 22px rgba(23,45,91,.05); }
.docs-dialog-header .eyebrow { color: var(--primary); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.docs-dialog-header h2 { margin: 5px 0 0; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.docs-dialog-close { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 15px; color: #fff; background: var(--ink); font-size: 27px; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; }
.docs-dialog-status { display: grid; place-items: center; height: calc(100% - 88px); padding: 40px; color: var(--muted); font-size: 14px; text-align: center; }
.docs-dialog-status[hidden] { display: none; }
.docs-dialog-status.error { color: var(--danger); }
.docs-dialog-layout { grid-template-columns: 230px minmax(0, 1fr); height: calc(100% - 88px); overflow: hidden; }
.docs-dialog-layout:not([hidden]) { display: grid; }
.docs-toc { overflow: auto; padding: 28px 20px 50px 28px; border-right: 1px solid #dce4ef; background: #f0f4fa; }
.docs-toc-title { display: block; margin-bottom: 13px; color: var(--muted-2); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.docs-toc a { display: block; margin: 3px 0; padding: 7px 9px; border-radius: 9px; color: #52617e; font-size: 12px; line-height: 1.35; text-decoration: none; }
.docs-toc a:hover { color: var(--primary); background: #e4ecfa; }
.docs-toc a.level-3 { padding-left: 20px; color: #74809a; font-size: 11px; }

.markdown-body { overflow: auto; padding: 34px clamp(28px, 5vw, 74px) 80px; background: #fff; font-size: 15px; line-height: 1.7; scroll-behavior: smooth; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: var(--ink); line-height: 1.25; letter-spacing: -.025em; scroll-margin-top: 24px; }
.markdown-body h1 { margin: 0 0 24px; font-size: 34px; letter-spacing: -.045em; }
.markdown-body h2 { margin: 42px 0 16px; padding-bottom: 9px; border-bottom: 1px solid #e2e8f2; font-size: 24px; }
.markdown-body h3 { margin: 30px 0 12px; font-size: 18px; }
.markdown-body h4 { margin: 24px 0 10px; font-size: 15px; }
.markdown-body p { margin: 12px 0; color: #4f5e79; }
.markdown-body strong { color: var(--ink-2); }
.markdown-body a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.markdown-body ul, .markdown-body ol { margin: 12px 0; padding-left: 24px; color: #4f5e79; }
.markdown-body li { margin: 6px 0; padding-left: 3px; }
.markdown-body blockquote { margin: 20px 0; padding: 13px 18px; border-left: 4px solid var(--primary); border-radius: 0 12px 12px 0; color: #53627f; background: #eef4ff; }
.markdown-body blockquote p { margin: 0; }
.markdown-body hr { margin: 36px 0; border: 0; border-top: 1px solid #dfe6f1; }
.markdown-body :not(pre) > code { padding: 2px 6px; border: 1px solid #dfe6f1; border-radius: 6px; color: #325491; background: #f1f5fb; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.markdown-body pre { margin: 18px 0; padding: 18px 20px; overflow: auto; border-radius: 15px; color: #dce7ff; background: #0c1832; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.markdown-body pre code { font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.markdown-body table { width: 100%; margin: 20px 0; overflow: hidden; border-spacing: 0; border: 1px solid #dce4ef; border-radius: 14px; font-size: 12px; line-height: 1.45; }
.markdown-body th { padding: 11px 13px; color: var(--ink); background: #edf2fa; text-align: left; }
.markdown-body td { padding: 10px 13px; border-top: 1px solid #e6ebf3; color: #53617b; vertical-align: top; }
.markdown-body tbody tr:nth-child(even) { background: #fafbfd; }
.markdown-body .mermaid { margin: 22px 0; padding: 24px; overflow: hidden; border: 1px solid #dfe6f1; border-radius: 18px; background: #f8faff; text-align: center; }
.markdown-body .mermaid svg { display: block; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 auto; overflow: visible; }
.markdown-body .mermaid-error { margin: 18px 0; padding: 16px; border: 1px solid #ffc9ce; border-radius: 13px; color: #a73039; background: #fff1f2; font-size: 12px; }

@media (max-width: 1100px) {
  .gallery-hero { grid-template-columns: auto 1fr; }
  .hero-principles { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .hero-principles strong { grid-column: 1 / -1; }
  .usage-panel { grid-template-columns: 1fr 2fr; }
  .usage-links { grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); }
  .prototype-toolbar { grid-template-columns: minmax(180px, 1fr) auto auto auto; gap: 10px; }
  .prototype-toolbar-actions button:not(.prototype-close) { font-size: 0; }
  .prototype-toolbar-actions button:not(.prototype-close)::before { font-size: 16px; }
  #prototype-show-hotspots::before { content: "◉"; }
  #prototype-fullscreen::before { content: "⛶"; }
}

@media (max-width: 760px) {
  .gallery-hero { grid-template-columns: 1fr; margin: 8px; padding: 28px 22px; border-radius: 24px; }
    .hero-mark { width: 68px; height: 68px; }
    .hero-principles { grid-template-columns: 1fr; }
    .hero-principles strong { grid-column: auto; }
    .usage-panel { grid-template-columns: 1fr; margin: 0 8px 12px; padding: 18px; border-radius: 20px; }
    .usage-steps { grid-template-columns: 1fr; }
    .usage-links { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
    .filter-bar { align-items: stretch; flex-direction: column; }
  .gallery-search { min-width: 0; }
  .gallery { grid-template-columns: 1fr; padding: 24px 4px 50px; }
  .screen-card { padding-left: 0; padding-right: 0; border-radius: 0; }
  .screen-card-header, .screen-card-description, .screen-tags { padding-left: 14px; padding-right: 14px; }
  .phone { transform: scale(.9); margin: -42px 0; }
  .gallery-footer { grid-template-columns: 1fr; margin: 8px; }
  .dialog-layout { grid-template-columns: 1fr; justify-items: center; }
  .dialog-copy { padding-top: 0; }
  .docs-dialog { width: calc(100vw - 12px); height: calc(100vh - 12px); border-radius: 20px; }
  .docs-dialog-header { min-height: 78px; padding: 15px 16px 14px 20px; }
  .docs-dialog-header h2 { font-size: 18px; }
  .docs-dialog-layout { grid-template-columns: 1fr; height: calc(100% - 78px); }
  .docs-toc { display: none; }
  .markdown-body { padding: 26px 20px 60px; }
  .markdown-body h1 { font-size: 28px; }
  .markdown-body h2 { font-size: 21px; }
  .markdown-body .mermaid { padding: 12px; }
  .markdown-body table { display: block; overflow-x: auto; white-space: nowrap; }
  .prototype-toolbar { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; min-height: 64px; padding: 8px; }
  .prototype-brand img { width: 36px; height: 36px; }
  .prototype-brand strong { font-size: 11px; }
  .prototype-brand span { display: none; }
  .prototype-scenario-control { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .prototype-scenario-control select { min-width: 0; flex: 1; }
  .prototype-language { grid-column: 2; grid-row: 1; }
  .prototype-language button { min-width: 31px; padding-inline: 6px; }
  .prototype-toolbar-actions { grid-column: 3; grid-row: 1; }
  .prototype-controls { grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; min-height: 58px; padding: 7px 9px; }
  .prototype-controls button { padding: 8px; font-size: 0; }
  #prototype-back::before { content: "←"; font-size: 18px; }
  #prototype-restart::before { content: "↻"; font-size: 18px; }
  .prototype-progress span { max-width: 44vw; margin-inline: auto; }
}

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