@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  img, svg { max-width: 100%; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --canvas: #f7f2e8; --surface: #fff; --ink: #30252a; --muted: #6e6065;
    --accent: #682c3e; --accent-hover: #512031; --accent-soft: #f3eacf;
    --companion: #e9d8a6; --companion-ink: #634b29;
    --line: #ded4c7; --warning: #80551e; --warning-soft: #faf2e3;
    --danger: #963f39; --danger-soft: #fff0ed; --radius: 16px;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Georgia, "Times New Roman", serif;
    --shadow: 0 4px 22px rgb(48 37 42 / .035);
  }
  html { background: var(--canvas); color: var(--ink); font-family: var(--font-body); }
  body { min-width: 320px; font-size: 15px; line-height: 1.55; }
  button { color: inherit; }
  button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .52; }
  :focus-visible { outline: 3px solid #567aaf; outline-offset: 4px; }
  ::selection { background: #e9d8a6; }
  h1, h2, h3 { font-weight: 500; line-height: 1.2; }
  h1 { font-family: var(--font-display); }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }
  p + p { margin-top: 12px; }
  a { text-underline-offset: 4px; }
  ul { padding-left: 22px; }
  code { font-size: .87em; overflow-wrap: anywhere; }
  svg { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
  .skip-link { position: fixed; top: -80px; left: 16px; z-index: 99; padding: 12px 18px; background: var(--surface); border: 2px solid var(--accent); border-radius: 8px; }
  .skip-link:focus { top: 12px; }
  .muted { color: var(--muted); }
  .text-small { font-size: 13px; line-height: 1.5; }
  .text-right { text-align: right; }
  .text-center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@layer components {
  .app-shell { display: grid; grid-template-columns: 236px minmax(0,1fr); min-height: 100vh; }
  .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 36px 22px 22px; background: #f0e9dc; border-right: 1px solid var(--line); }
  .brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 38px; text-decoration: none; font-family: var(--font-display); font-size: 23px; line-height: 1.1; }
  .brand small { display: block; margin-top: 5px; font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .brand-mark { display: grid; place-items: center; width: 36px; height: 44px; border: 1px solid #c5b9a9; border-radius: 8px; background: #fff9; color: var(--accent); font-family: var(--font-display); font-size: 23px; flex: 0 0 auto; }
  .sidebar nav { display: grid; gap: 5px; }
  .nav-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); text-align: left; text-decoration: none; font-size: 14px; }
  .nav-link:hover { background: #e7e0d7; color: var(--ink); }
  .nav-link.active { background: var(--accent); color: white; }
  .nav-link .count { margin-left: auto; display: grid; place-items: center; min-width: 20px; padding: 0 5px; border-radius: 6px; font-size: 11px; background: #ffffff30; }
  .sidebar-footer { margin-top: auto; padding-top: 28px; }
  .sidebar-note { padding: 20px 12px; font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--muted); }
  .sidebar-footer .member-row { border-top: 1px solid var(--line); padding: 20px 6px 0; }
  .main-content { min-width: 0; padding: 0 48px 48px; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 92px; border-bottom: 1px solid var(--line); margin-bottom: 38px; }
  .topbar-actions { display: flex; align-items: center; gap: 12px; }
  .topbar > .muted { font-size: 13px; }
  .demo-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #cdc8b5; border-radius: 6px; background: #faf5e8; color: #6a5a32; font-size: 10px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; }
  .avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #e5ddd1; color: #625344; font-family: var(--font-display); font-size: 16px; flex: 0 0 auto; }
  .avatar.large { width: 60px; height: 60px; font-size: 24px; }
  .avatar.small { width: 30px; height: 30px; font-size: 13px; }
  .avatar-stack { display: flex; padding-left: 3px; }
  .avatar-stack .avatar { margin-left: -3px; border: 3px solid var(--surface); }
  .icon-button { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 42px; height: 42px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ink); }
  .icon-button:hover { background: var(--accent-soft); }
  .icon-button .status-dot { position: absolute; right: 8px; top: 8px; width: 6px; height: 6px; }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 550; font-size: 13px; line-height: 1.4; text-decoration: none; transition: background .15s, border-color .15s; }
  .button:hover { background: #f0ebe4; }
  .button.primary { background: var(--accent); border-color: var(--accent); color: white; }
  .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .button.secondary { background: var(--surface); border-color: #cec2b5; }
  .button.ghost { border-color: transparent; background: transparent; color: var(--accent); padding-inline: 8px; }
  .button.ghost:hover { background: var(--accent-soft); }
  .button.danger { color: var(--danger); background: var(--danger-soft); border-color: #eed5d0; }
  .button.small { min-height: 36px; padding: 7px 12px; font-size: 12px; }
  .button.full { width: 100%; }
  .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
  .eyebrow { margin-bottom: 9px; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
  .page-title { font-size: clamp(30px,3.3vw,45px); letter-spacing: -.035em; line-height: 1.13; }
  .page-subtitle { margin-top: 11px; color: var(--muted); max-width: 650px; font-size: 14px; }
  .section-title { font-size: 20px; letter-spacing: -.025em; }
  .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 30px 0 16px; }
  .section-heading:first-child { margin-top: 0; }
  .grid-two { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(270px,1fr); align-items: start; gap: 22px; }
  .grid-equal { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .stack { display: grid; gap: 18px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 24px 0; }
  .card-body { padding: 24px; }
  .card-header + .card-body { padding-top: 18px; }
  .hero { position: relative; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(230px,1fr); gap: 20px; padding: 16px 0 38px; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; overflow: hidden; }
  .hero-copy { position: relative; z-index: 1; align-self: center; }
  .hero-copy h1 { margin: 12px 0; font-family: var(--font-display); font-size: clamp(32px,3.6vw,48px); letter-spacing: -.045em; line-height: 1.08; max-width: 430px; }
  .hero-copy p { color: var(--muted); font-size: 13px; }
  .hero-copy .button { margin-top: 22px; }
  .hero-visual { display: grid; place-items: center; min-height: 230px; }
  .hero-visual .table-map { max-width: 280px; width: 100%; }
  .session-card { display: flex; align-items: center; gap: 24px; padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .session-card + .session-card { margin-top: 0; }
  .session-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; min-height: 74px; border-radius: 0; background: transparent; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; line-height: 1.3; color: var(--muted); }
  .session-date strong { font-family: var(--font-display); font-size: 42px; letter-spacing: -.06em; line-height: 1.15; color: var(--ink); font-weight: 400; }
  .session-info { flex: 1; min-width: 0; }
  .session-info h3 { font-size: 16px; margin-bottom: 7px; }
  .session-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
  .session-meta svg { width: 14px; height: 14px; }
  .session-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
  .session-price { font-size: 17px; font-weight: 550; font-variant-numeric: tabular-nums; }
  .session-price small { color: var(--muted); font-size: 11px; font-weight: 400; }
  .tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border-radius: 5px; background: #f3eacf; color: var(--accent); font-size: 10px; font-weight: 600; line-height: 1.4; }
  .tag.warning { background: var(--warning-soft); color: var(--warning); }
  .tag.success { background: var(--accent-soft); color: var(--accent); }
  .tag.error { background: var(--danger-soft); color: var(--danger); }
  .tag.founder, .tag.founder-tag { background: #e9d8a6; color: #634b29; }
  .table-map { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 12px; }
  .table-center { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 66px; height: 66px; border: 6px solid #eee9df; border-radius: 50%; background: #e2d5c4; color: var(--accent); font-family: var(--font-display); font-size: 20px; }
  .table-center svg { width: 25px; height: 25px; }
  .seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 8px; min-height: 112px; border: 1px solid #d8cec0; border-radius: 13px; background: #ffffffa8; text-align: center; font-size: 12px; }
  .seat-avatar { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 3px; border-radius: 50%; background: #e9e0d4; color: #6c5a46; font-family: var(--font-display); font-size: 15px; }
  .seat-status { font-size: 10px; line-height: 1.4; color: var(--muted); }
  .seat-paid { border-color: #c4a58b; }
  .seat-paid .seat-status { color: var(--accent); }
  .seat-pending { border-style: dashed; background: #ffffff70; }
  .seat-pending .seat-avatar { background: #ebe5dc; color: var(--muted); }
  .stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 20px 0; }
  .stat-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .stat-value { display: block; margin: 4px 0; font-family: var(--font-display); font-size: 30px; font-variant-numeric: tabular-nums; }
  .list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid #e7e0d6; }
  .list-row:last-child { border-bottom: 0; }
  .empty-state { display: grid; justify-items: center; gap: 12px; padding: 50px 24px; text-align: center; background: #fff9; border: 1px dashed #c9beaf; border-radius: var(--radius); }
  .empty-state p { max-width: 430px; color: var(--muted); font-size: 14px; }
  .empty-state svg { width: 32px; height: 32px; color: var(--accent); }
  .progress-track { height: 5px; border-radius: 8px; background: #e9e2d8; overflow: hidden; margin: 14px 0; }
  .progress-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .2s; }
  .tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
  .tab { padding: 9px 14px; min-height: 40px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; }
  .tab.active { background: var(--surface); border-color: var(--line); color: var(--accent); font-weight: 600; }
  .field { display: grid; align-content: start; gap: 7px; }
  .field > label, .field > span:first-child { color: var(--ink); font-size: 12px; font-weight: 600; }
  .field small { font-size: 11px; color: var(--muted); }
  .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .form-grid .full { grid-column: 1 / -1; }
  .input, .select, .textarea, input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea { width: 100%; min-height: 44px; border: 1px solid #cfc4b6; border-radius: 8px; background: #fff; color: var(--ink); padding: 10px 12px; font-size: 16px; }
  .textarea, textarea { min-height: 90px; resize: vertical; }
  .input[aria-invalid=true], input[aria-invalid=true] { border-color: var(--danger); }
  .checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
  input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
  .modal-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 28px; background: #30292166; backdrop-filter: blur(3px); }
  .modal { width: min(620px,100%); max-height: calc(100dvh - 56px); overflow: auto; border-radius: 20px; background: var(--canvas); box-shadow: 0 24px 90px #30251d30; }
  .modal.wide { width: min(800px,100%); }
  .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 28px 18px; border-bottom: 1px solid var(--line); }
  .modal-header h2 { font-family: var(--font-display); font-size: 28px; letter-spacing: -.035em; }
  .modal-body { padding: 24px 28px; }
  .modal-body > * + * { margin-top: 18px; }
  .modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 18px 28px 24px; border-top: 1px solid var(--line); }
  .close-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #ebe5dc; font-size: 22px; flex: 0 0 auto; }
  .choice-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 17px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
  .choice-card + .choice-card { margin-top: 10px; }
  .choice-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
  .choice-card strong { display: block; margin-bottom: 4px; font-size: 14px; }
  .choice-card p { font-size: 12px; color: var(--muted); }
  .notice { padding: 13px 15px; border-radius: 9px; border: 1px solid #e0d3c7; background: #f3ece3; color: #644d3e; font-size: 12px; line-height: 1.6; }
  .notice.warning { background: var(--warning-soft); border-color: #ebdfc7; color: var(--warning); }
  .notice.success { background: var(--accent-soft); color: var(--accent); }
  .notice.error { background: var(--danger-soft); border-color: #eed5d0; color: var(--danger); }
  .member-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
  .member-row + .member-row { border-top: 1px solid #e7e0d6; }
  .member-info { flex: 1; min-width: 0; }
  .member-name { font-size: 13px; font-weight: 600; }
  .member-info > p { font-size: 12px; color: var(--muted); }
  .invitation-link { padding: 12px 14px; border: 1px dashed #c9b7a4; border-radius: 8px; background: #f6f0e6; color: var(--accent); font-size: 12px; overflow-wrap: anywhere; }
  .wallet-card { padding: 22px; border: 1px solid #d5c6b4; border-radius: 13px; background: #f0e6cd; }
  .wallet-card .card-number { margin: 24px 0 18px; font-size: 21px; letter-spacing: .13em; font-variant-numeric: tabular-nums; }
  .table-scroll { width: 100%; overflow: auto; }
  .admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
  .admin-table th { padding: 14px 16px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; background: #f3efe7; border-bottom: 1px solid var(--line); }
  .admin-table td { padding: 16px; border-bottom: 1px solid #e6dfd5; vertical-align: middle; }
  .admin-table tbody tr:last-child td { border: 0; }
  .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
  .status-dot.warning { background: var(--warning); }
  .status-dot.error { background: var(--danger); }
  .demo-panel { margin-top: 34px; padding: 18px 20px; border: 1px dashed #cabdad; border-radius: 12px; background: #efebe1; }
  .demo-panel summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #655b4d; }
  .demo-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
  .demo-controls .field { min-width: 160px; flex: 1; }
  .demo-controls select { font-size: 13px; }
  .bottom-nav { display: none; }
  .trinket { display: inline-grid; place-items: center; width: 33px; height: 43px; border-radius: 7px; background: #e9d8a6; border: 1px solid #d6c5a0; color: #80673a; font-family: var(--font-display); font-size: 21px; box-shadow: 0 3px 0 #e2d3b2; }
  .trinkets-row { display: flex; align-items: center; gap: 7px; margin: 18px 0; }
  .activity-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #e7e0d6; font-size: 12px; }
  .activity-row:last-child { border-bottom: 0; }
  .activity-row time { color: var(--muted); font-size: 11px; margin-left: auto; }
  .activity-row .activity-value { margin-left: auto; font-weight: 600; color: var(--accent); }
  .auth-shell { display: grid; place-items: center; min-height: 100vh; padding: 30px; }
  .auth-card { width: min(480px,100%); padding: 42px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
  .auth-card h1 { margin: 22px 0 12px; font-size: 38px; letter-spacing: -.035em; }
  .auth-card .button { width: 100%; margin-top: 12px; }
  .tile-scene { position: relative; width: 100%; height: 250px; isolation: isolate; }
  .tile-scene::after { content: ""; position: absolute; width: 210px; height: 1px; right: 10%; bottom: 19px; background: #c8bba6; transform: rotate(-6deg); z-index: -1; }
  .mahjong-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 97px; height: 139px; border: 1px solid #d1c4ae; border-radius: 10px; background: #fbf6e8; color: var(--accent); box-shadow: 0 7px 0 #d6c9b5, 0 9px 0 #c0ad93, 5px 18px 21px #49382c16; transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms; }
  .mahjong-tile small { font-family: var(--font-display); font-size: 11px; font-style: italic; color: #766650; }
  .tile-one { top: 48px; left: 7%; transform: rotate(-13deg); z-index: 2; }
  .tile-two { top: 21px; left: 35%; transform: rotate(6deg); z-index: 3; }
  .tile-three { top: 76px; left: 61%; transform: rotate(17deg); z-index: 1; }
  .tile-dots { display: grid; grid-template-columns: repeat(2,14px); place-content: center; gap: 7px; min-height: 50px; width: 50px; }
  .tile-dots b { width: 13px; height: 13px; border: 3px solid currentColor; border-radius: 50%; }
  .tile-one .tile-dots { grid-template-columns: 17px; }
  .tile-one .tile-dots b { width: 17px; height: 17px; }
  .tile-three .tile-dots b:last-child { grid-column: 1 / -1; justify-self: center; }
  .hero-visual:hover .tile-one { transform: translateY(-7px) rotate(-17deg); }
  .hero-visual:hover .tile-two { transform: translateY(-11px) rotate(2deg); }
  .hero-visual:hover .tile-three { transform: translateY(-4px) rotate(21deg); }
  .page-header, .hero, .grid-two, .session-card, .auth-card { animation: arrive 220ms ease-out both; }
  .session-card:nth-child(2) { animation-delay: 35ms; }
  .session-card:nth-child(3) { animation-delay: 65ms; }
  .button:active:not(:disabled) { transform: translateY(1px); }
  .choice-card { transition: border-color 180ms, background 180ms, box-shadow 180ms; }
  @keyframes arrive { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; margin: 20px 0; }
  .divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
  #toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(520px,calc(100% - 32px)); border-radius: 10px; background: var(--ink); color: white; box-shadow: 0 7px 30px #30251d26; font-size: 13px; text-align: center; }
  #toast:not(:empty) { padding: 13px 20px; }
}

@layer components {
  body.modal-open { overflow: hidden; }
  .plain-fieldset { border: 0; padding: 0; margin: 0; }
  .invitation-strip { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-block: 1px solid var(--line); margin-bottom: 34px; }
  .invitation-strip > div:nth-child(2) { flex: 1; }
  .invitation-strip h3 { margin-bottom: 6px; }
  .home-grid { margin-top: 22px; }
  .trinket-note { padding: 26px 10px 26px 24px; border-left: 1px solid var(--line); }
  .trinket-total { font: 76px/.95 var(--font-display); color: var(--accent); letter-spacing: -.055em; margin: 18px 0 22px; }
  .trinket-total > span { font: italic 19px var(--font-display); letter-spacing: 0; margin-left: 12px; }
  .trinket-note .button { margin-top: 12px; }
  .agenda-footnote { padding-top: 22px; }
  .group-note { padding: 22px 0; border-block: 1px solid var(--line); }
  .group-note > p { margin-top: 10px; }
  .seat-avatar { position: relative; }
  .seat-check { display: grid; place-items: center; position: absolute; right: -6px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: white; }
  .seat-check svg { width: 10px; height: 10px; }
  .table-center { gap: 0; padding: 7px; }
  .table-center span { font: 9px var(--font-body); text-transform: uppercase; letter-spacing: .05em; }
  .table-center strong { font: 23px/1 var(--font-display); }
  .booking-caption { margin: 12px 0 18px; }
  .booking-caption > p + p { margin-top: 4px; }
  .friend-list { margin: 12px 0 20px; max-height: 270px; overflow-y: auto; }
  .friend-choice { padding-inline: 6px; cursor: pointer; }
  .friend-choice:hover { background: var(--accent-soft); }
  .checkout-summary { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0 16px; padding-block: 18px; border-block: 1px solid var(--line); font-size: 17px; }
  .demo-result { margin: 20px 0; }
  .modal-body form > .notice, .modal-body form > .button { margin-top: 18px; }
  .modal-body .stack { margin-top: 18px; }
  .referral-heading { margin-top: 24px; }
  .invitation-link + .button-row { margin: 12px 0 18px; }
  .card-body .invitation-link { margin-top: 18px; }
  .card-body > .notice:last-child { margin-top: 18px; }
  .demo-inline { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
  .demo-inline summary { font-size: 12px; color: var(--muted); cursor: pointer; }
  #toast { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
  #toast.visible { opacity: 1; }
  .stat-value { overflow-wrap: anywhere; }
}

@layer responsive {
  @media (max-width: 720px) {
    .invitation-strip { flex-wrap: wrap; gap: 14px; }
    .invitation-strip > .button { margin-left: auto; }
    .grid-equal { grid-template-columns: 1fr; }
    .trinket-note { padding: 22px 0; border-left: 0; border-block: 1px solid var(--line); }
    .home-grid { margin-top: 22px; }
    .list-row { flex-wrap: wrap; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-card:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .topbar > .muted { display: none; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .topbar-actions > .icon-button:last-child { display: none; }
  }
  @media (min-width: 1600px) {
    .main-content { padding-inline: max(48px,calc((100vw - 1450px)/2)); }
  }
  @media (max-width: 1180px) {
    .app-shell { grid-template-columns: 208px minmax(0,1fr); }
    .sidebar { padding-inline: 15px; }
    .brand { font-size: 21px; }
    .main-content { padding-inline: 30px; }
    .grid-two { grid-template-columns: minmax(0,1.2fr) minmax(240px,1fr); gap: 18px; }
    .hero { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .session-card { gap: 14px; padding: 18px; }
  }
  @media (max-width: 900px) {
    .grid-two { grid-template-columns: 1fr; }
    .hero { grid-template-columns: minmax(0,1fr) minmax(220px,1fr); }
    .hero-visual { display: grid; }
    .topbar { margin-bottom: 28px; }
    .stats-grid { gap: 10px; }
    .stat-card { padding: 16px; }
  }
  @media (max-width: 720px) {
    .app-shell { display: block; }
    .sidebar { display: none; }
    .main-content { padding: 0 20px calc(100px + env(safe-area-inset-bottom)); }
    .topbar { min-height: 76px; margin-bottom: 27px; }
    .topbar-actions { gap: 6px; }
    .topbar > .muted { max-width: 120px; font-size: 11px; }
    .topbar-actions .button.small { padding-inline: 8px; font-size: 11px; }
    .demo-badge { font-size: 9px; padding: 4px 6px; }
    .page-header { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 23px; }
    .page-title { font-size: 34px; }
    .page-subtitle { font-size: 13px; }
    .hero { grid-template-columns: minmax(0,1.1fr) minmax(140px,.8fr); gap: 12px; padding: 8px 0 28px; }
    .hero-copy h1 { font-size: 28px; }
    .hero-visual { min-height: 180px; }
    .hero-visual .table-map { gap: 7px; padding: 0; }
    .hero-visual .seat { padding: 12px 4px; min-height: 85px; font-size: 10px; }
    .hero-visual .seat-avatar { width: 26px; height: 26px; font-size: 12px; }
    .hero-visual .seat-status { font-size: 9px; }
    .hero-visual .table-center { width: 44px; height: 44px; border-width: 4px; font-size: 17px; }
    .tile-scene { height: 210px; transform: scale(.82); transform-origin: center right; }
    .mahjong-tile { width: 76px; height: 115px; }
    .tile-one { left: 0; }
    .tile-two { left: 32%; }
    .tile-three { left: 59%; }
    .mahjong-tile small { font-size: 9px; }
    .grid-equal { grid-template-columns: 1fr; }
    .card-body { padding: 20px; }
    .card-header { padding: 20px 20px 0; }
    .section-heading { margin-top: 26px; }
    .section-title { font-size: 19px; }
    .session-card { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 18px 16px; }
    .session-date { min-width: 50px; min-height: 66px; }
    .session-date strong { font-size: 27px; }
    .session-actions { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
    .session-info h3 { font-size: 15px; }
    .session-meta { font-size: 11px; }
    .session-price { font-size: 16px; }
    .session-price small { display: block; }
    .stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .stat-card { padding: 13px 10px; }
    .stat-card .muted { font-size: 11px; }
    .stat-value { font-size: 25px; }
    .form-grid { gap: 16px; }
    .modal-overlay { padding: 14px; align-items: end; }
    .modal { max-height: calc(100dvh - 28px); border-radius: 18px; }
    .modal-header { padding: 22px 20px 16px; }
    .modal-header h2 { font-size: 25px; }
    .modal-body { padding: 20px; }
    .modal-footer { padding: 16px 20px 20px; }
    .modal-footer .button.primary { flex: 1; }
    .bottom-nav { display: grid; position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; grid-template-columns: repeat(5,minmax(0,1fr)); min-height: 70px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: #faf5ebf5; backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
    .bottom-nav .nav-link { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; min-height: 52px; font-size: 10px; }
    .bottom-nav .nav-link.active { background: var(--accent-soft); color: var(--accent); }
    .bottom-nav svg { width: 20px; height: 20px; }
    #toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
    .auth-shell { padding: 20px; }
    .auth-card { padding: 28px; }
    .auth-card h1 { font-size: 34px; }
    .admin-table th, .admin-table td { padding: 12px; }
    .demo-panel { padding: 16px; }
  }
  @media (max-width: 420px) {
    .main-content { padding-inline: 16px; }
    .hero { grid-template-columns: 1fr; padding: 8px 0 26px; }
    .hero-visual { display: grid; min-height: 142px; margin: -4px 0 -6px; }
    .hero-visual .table-map { display: none; }
    .hero-visual .tile-scene { width: 270px; height: 190px; margin-top: -25px; transform: scale(.74); transform-origin: center center; }
    .hero-copy h1 { font-size: 30px; }
    .form-grid { grid-template-columns: 1fr; }
    .topbar .avatar { width: 32px; height: 32px; }
    .topbar-actions .icon-button { width: 34px; }
    .session-actions { gap: 8px; }
    .session-actions .button { font-size: 11px; padding-inline: 10px; }
    .page-title { font-size: 32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
  @media print {
    .sidebar, .topbar-actions, .bottom-nav, .demo-panel, .modal-overlay, #toast { display: none !important; }
    .app-shell { display: block; }
    .main-content { padding: 0; }
    .card { break-inside: avoid; box-shadow: none; }
    body { background: white; }
  }
}

@layer components { .circle-member { margin: 0; border-bottom: 1px solid var(--line); padding: 20px 0; } }

@layer components {
.avatar-wrap{position:relative;display:inline-flex;flex:0 0 auto;margin-right:3px}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-count{position:absolute;right:-6px;bottom:-5px;min-width:18px;height:18px;padding:1px 4px;background:var(--accent);color:white;border:2px solid var(--canvas);border-radius:10px;font-size:10px;text-align:center;line-height:12px}.ranking-panel{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.ranking-panel .tabs{margin:14px 0 8px;padding-bottom:8px}.ranking-list{list-style:none;padding:0;margin:12px 0}.ranking-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.rank-position{color:var(--muted);width:15px;font-variant-numeric:tabular-nums}.notification-table{margin-top:16px}.notification-table input{width:20px;height:20px;accent-color:var(--accent)}.notification-table th,.notification-table td{padding:12px 9px}.notification-table td:not(:first-child){text-align:center}.onboarding-card{width:min(600px,100%)}.profile-photo{width:88px;height:88px;object-fit:cover;border-radius:50%}.auth-card .checkbox{line-height:1.6}.auth-card input[type=file]{font-size:13px}.auth-card .stack{margin-top:22px}

/* Registro y acceso: una portada editorial, legible y propia del club. */
.access-layout{display:grid;grid-template-columns:minmax(310px, .78fr) minmax(0,1.22fr);min-height:100vh;background:#faf8f4;color:var(--ink)}
.access-aside{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;display:flex;flex-direction:column;padding:42px clamp(34px,5vw,82px);background:#682c3e;color:#fbf6ea}
.access-wordmark{display:flex;align-items:center;gap:13px;width:max-content;text-decoration:none;font-family:var(--font-display);font-size:24px;line-height:1.05;letter-spacing:-.03em}
.access-wordmark small{display:block;margin-top:5px;font:600 9px var(--font-body);letter-spacing:.19em;text-transform:uppercase;color:#e9d8a6}
.access-mark{display:grid;place-items:center;width:36px;height:42px;border:1px solid #e9d8a6;border-radius:8px;background:#f8f0df;color:#682c3e;transform:rotate(-4deg)}
.access-mark svg{width:23px;height:23px}
.access-aside-copy{position:relative;z-index:2;margin-top:clamp(85px,17vh,175px);max-width:390px}
.access-kicker{margin:0 0 14px;color:#805060;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.access-aside .access-kicker{color:#e8d2b3}
.access-quote{font:400 clamp(34px,4vw,56px)/1.08 var(--font-display);letter-spacing:-.045em}.access-quote em{color:#e9d8a6;font-weight:400}
.access-aside-note{max-width:300px;margin-top:20px;color:#f3e9dfc7;font-size:16px;line-height:1.65}
.access-table-art{position:relative;display:grid;place-items:center;width:min(430px,100%);height:min(42vh,380px);margin:auto auto 22px}
.access-table-art img{display:block;width:100%;height:100%;object-fit:contain;transition:transform 280ms cubic-bezier(.2,.7,.2,1)}
.access-table-line{position:absolute;left:0;right:5px;bottom:44px;height:1px;background:#e9d8a655;transform:rotate(-6deg)}
.access-tile{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:72px;height:105px;border:1px solid #e9d8a6a6;border-radius:8px;background:#f8f0df;color:#682c3e;box-shadow:0 4px 0 #d1bda1,0 8px 14px #17091142;transition:transform 260ms cubic-bezier(.2,.7,.2,1),box-shadow 260ms}
.access-tile svg{width:48px;height:62px;overflow:visible}.tile-dots svg{fill:#a54542}.tile-dots circle:nth-child(2){fill:#527864}.tile-dots circle:nth-child(4){fill:#c39047}.tile-bams svg{fill:none;stroke:#467555;stroke-width:2.5;stroke-linecap:round}
.access-tile b{font:33px/1 var(--font-display)}.access-tile i{font:12px/1 var(--font-display);color:#776655;font-style:normal}
.tile-dots{left:3%;top:46px;transform:rotate(-10deg)}.tile-bams{left:28%;top:19px;transform:rotate(-2deg)}.tile-craks{left:54%;top:40px;transform:rotate(8deg)}.tile-wind{right:2%;top:23px;transform:rotate(14deg)}.tile-wind b{color:#9a3d3c}.tile-wind svg{width:22px;height:22px;fill:none;stroke:#80674d;stroke-width:1.3}.access-table-art:hover img{transform:translateY(-4px) rotate(-1deg)}
.access-table-caption{position:absolute;right:7%;bottom:6px;color:#e9d8a6;font:italic 14px var(--font-display);transform:rotate(-5deg)}
.access-aside-foot{position:relative;z-index:2;color:#f3e9df9c;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.access-main{display:flex;justify-content:center;align-items:flex-start;padding:clamp(38px,7vh,76px) clamp(26px,7vw,104px) 54px}
.auth-card{width:min(100%,570px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;animation:arrive 260ms ease-out both}
.auth-card h1{margin:9px 0 10px;font:400 clamp(34px,3.3vw,45px)/1.1 var(--font-display);letter-spacing:-.04em;color:#34242a}
.auth-intro{max-width:470px;margin:0;color:#6f6264;font-size:16px;line-height:1.55}
.access-invite-line{display:flex;align-items:center;gap:10px;min-height:45px;margin-bottom:29px;padding:6px 12px 6px 7px;border:1px solid #e5ddd2;border-radius:9px;background:#fffdfa;color:#51464a;font-size:13px}
.access-invite-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9d8a6;color:#533744;font:500 16px var(--font-display)}
.invite-hero{display:flex;align-items:center;gap:22px;margin:2px 0 24px;padding:20px 0 23px;border-bottom:1px solid var(--line)}.invite-hero-photo{display:grid;place-items:center;width:112px;height:112px;flex:0 0 auto;overflow:hidden;border:4px solid #fff;border-radius:50%;background:#e9d8a6;color:#533744;box-shadow:0 3px 14px #35152218;font:500 42px var(--font-display)}.invite-hero-photo img{width:100%;height:100%;object-fit:cover}.invite-hero .access-kicker{margin:0 0 8px}.invite-hero h1{margin:0;font-size:clamp(30px,4vw,40px);line-height:1.08}
.access-founder{margin-left:auto;padding:5px 9px;border-radius:99px;background:#f2e9d6;color:#66522e;font-size:10px;font-weight:650;letter-spacing:.05em}
.access-form{display:grid;gap:17px;margin-top:31px!important}
.access-section-heading{display:flex;align-items:center;gap:12px;margin:0 0 1px;padding-bottom:11px;border-bottom:1px solid #e7dfd5}
.access-section-heading>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #d8cabe;border-radius:50%;color:#754b59;font:italic 13px var(--font-display)}
.access-section-heading strong{display:block;color:#44363a;font-size:15px;font-weight:650;line-height:1.3}
.access-section-heading small{display:block;margin-top:2px;color:#7a6d6d;font-size:12px}
.access-section-heading.access-account-heading{margin-top:6px}
.access-form .field{display:grid;gap:7px;min-width:0;margin:0;color:#493b3e;font-size:14px;font-weight:600}
.access-form .field>span:first-child{line-height:1.35}
.access-form input:not([type=checkbox]):not([type=file]){min-height:51px;padding:12px 14px;border:1px solid #d8cfc4;border-radius:8px;background:#fff;color:#30252a;font-size:16px;font-weight:400;box-shadow:0 1px 2px #34242a08;transition:border-color .16s,box-shadow .16s}
.access-form input::placeholder{color:#978c87;opacity:1}
.access-form input:focus{border-color:#865567;outline:0;box-shadow:0 0 0 3px #682c3e17}
.access-form input[readonly]{background:#f0ece5;color:#706568}
.access-contact-grid{grid-template-columns:.82fr 1.18fr;gap:13px}
.field-hint{display:block;margin-top:1px;color:#776b6b;font-size:12px;font-weight:400;line-height:1.5}
.photo-picker{position:relative;display:flex;align-items:center;gap:14px;min-height:87px;padding:12px 14px;border:1px dashed #cfc2b5;border-radius:10px;background:#fffdfa;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.photo-picker:hover,.photo-picker:focus-within{border-color:#805365;background:#fff;box-shadow:0 0 0 3px #682c3e10;outline:0}
.photo-picker.photo-selected{border-style:solid;border-color:#bdad9d}
.photo-avatar{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:0 0 auto;overflow:hidden;border:1px solid #e1d7ca;border-radius:50%;background:#f1eadf;color:#896d70}
.photo-avatar svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.35}.photo-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}.photo-avatar.has-photo svg{display:none}
.photo-picker-copy{display:grid;gap:4px;min-width:0}.photo-picker-copy strong{overflow:hidden;color:#403438;font-size:14px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.photo-picker-copy small{color:#796d6b;font-size:12px;font-weight:400}
.photo-picker-action{display:grid;place-items:center;min-height:38px;margin-left:auto;padding:0 13px;border:1px solid #d8cfc4;border-radius:7px;background:#fff;color:#583644;font-size:13px;font-weight:650;white-space:nowrap}
.photo-picker input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
.photo-picker:focus-within .photo-picker-action{outline:2px solid #567aaf;outline-offset:3px}
.access-consent{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:8px;background:#f1ede6;color:#55494b;font-size:13px;font-weight:400;line-height:1.55}
.access-consent input[type=checkbox]{width:19px;height:19px;margin:1px 0 0;accent-color:#682c3e;flex:0 0 auto}
.access-submit{display:flex!important;justify-content:space-between!important;min-height:54px!important;margin:0!important;padding:0 19px!important;border-radius:8px!important;font-size:15px!important;font-weight:650!important;letter-spacing:.005em}
.access-submit>span:last-child{font-size:20px;font-weight:400;transition:transform .18s}.access-submit:hover>span:last-child{transform:translateX(3px)}
.access-submit:disabled{opacity:.75;cursor:wait}
.access-privacy{display:block;margin:0!important;color:#73686a;font-size:12px;line-height:1.5;text-align:center}
.access-existing,.access-footnote{margin:24px 0 0!important;color:#716568;font-size:14px;text-align:center}.access-existing a{margin-left:4px;color:#682c3e;font-weight:650}.access-footnote{font-size:13px}
.access-login .access-main{align-items:center}.access-login .auth-card{max-width:460px}.access-login .access-form{gap:19px;margin-top:27px!important}.access-login .access-submit{margin-top:5px!important}
.password-control{position:relative;display:block}.access-form .password-control input{padding-right:83px!important}.password-toggle{position:absolute;top:50%;right:11px;min-height:34px;padding:4px 7px;transform:translateY(-50%);border:0;border-radius:5px;background:transparent;color:#682c3e;font-size:13px;font-weight:650}.password-toggle:hover{background:#f4eee9}
.access-error-card .access-submit{margin-top:24px!important}
@media(max-width:900px){.access-layout{grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr)}.access-aside{padding-inline:30px}.access-main{padding-inline:34px}.access-quote{font-size:38px}.access-contact-grid{grid-template-columns:1fr}}
@media(max-width:650px){.access-layout{display:flex;flex-direction:column}.access-aside{position:relative;top:auto;height:auto;min-height:0;padding:22px 24px 19px}.access-wordmark{font-size:21px}.access-mark{width:30px;height:36px}.access-aside-copy{margin-top:25px}.access-aside-copy .access-kicker{margin-bottom:7px;font-size:10px}.access-quote{max-width:340px;font-size:32px}.access-aside-note{max-width:380px;margin-top:9px;font-size:14px;line-height:1.45}.access-table-art{position:relative;width:min(290px,100%);height:150px;right:auto;bottom:auto;margin:12px auto 0;opacity:1;transform:none}.access-table-line{left:0;right:0;bottom:20px}.access-tile{width:52px;height:76px;gap:3px;border-radius:6px}.access-tile svg{width:36px;height:48px}.access-tile b{font-size:25px}.access-tile i{font-size:9px}.tile-dots{left:2%;top:26px}.tile-bams{left:27%;top:8px}.tile-craks{left:53%;top:21px}.tile-wind{right:2%;top:10px}.tile-wind svg{width:16px;height:16px}.access-main{padding:29px 22px 40px}.auth-card{max-width:560px}.access-invite-line{margin-bottom:23px}.auth-card h1{font-size:36px}.access-form{gap:16px;margin-top:25px!important}.access-contact-grid{grid-template-columns:1fr}.access-login .access-main{align-items:flex-start}}
@media(max-width:380px){.access-aside{padding-inline:18px}.access-main{padding-inline:18px}.access-table-art{width:258px;height:145px}.access-tile{width:48px;height:72px}.tile-dots{left:1%}.tile-bams{left:26%}.tile-craks{left:52%}.tile-wind{right:1%}.photo-picker{gap:9px;padding-inline:10px}.photo-avatar{width:49px;height:49px}.photo-picker-action{padding-inline:9px;font-size:12px}.photo-picker-copy strong{font-size:13px}.photo-picker-copy small{font-size:11px}}
@media(max-width:650px){.invite-hero{gap:17px;margin:0 0 20px;padding:8px 0 20px}.invite-hero-photo{width:88px;height:88px;font-size:34px}.invite-hero h1{font-size:31px}}

/* Recorrido guiado anclado a los controles reales. */
.guided-tour{position:fixed;inset:0;z-index:100;pointer-events:none}
.guide-mask{position:fixed;background:rgb(32 23 27 / .70);pointer-events:auto;touch-action:pan-y}
.guide-spotlight{position:fixed;z-index:1;border:2px solid #e9d8a6;border-radius:12px;box-shadow:0 0 0 1px #682c3e88,0 8px 24px #21171a38;pointer-events:none;transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}
.guide-card{position:fixed;z-index:2;width:min(360px,calc(100vw - 32px));padding:19px 20px 15px;border:1px solid #e1d6c8;border-radius:12px;background:#fffdf8;color:#30252a;box-shadow:0 16px 48px #1c121e38;pointer-events:auto;animation:guide-arrive .2s cubic-bezier(.2,.7,.2,1) both}
.guide-progress{margin:0 0 7px;color:#765561;font-size:10px;font-weight:700;letter-spacing:.12em}
.guide-card h2{margin:0 0 7px;font:500 23px/1.2 var(--font-display);letter-spacing:-.025em}
.guide-card>p:not(.guide-progress){margin:0;color:#62575a;font-size:15px;line-height:1.5}
.guide-actions{display:flex;align-items:center;gap:10px;margin-top:16px}
.guide-actions .button.primary{flex:1;justify-content:space-between;min-height:46px;padding-inline:14px;font-size:14px}
.guide-actions .button.ghost{min-height:40px;margin:0;padding-inline:8px;color:#75696b;font-size:12px}
@keyframes guide-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.guide-card{padding:16px 16px 13px;border-radius:11px}.guide-card h2{font-size:21px}.guide-card>p:not(.guide-progress){font-size:14px}.guide-actions{margin-top:12px}.guide-spotlight{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.guide-spotlight{transition:none}.guide-card{animation:none}}

.circle-welcome{display:grid;grid-template-columns:minmax(300px,1.15fr) minmax(300px,.85fr);align-items:center;gap:clamp(22px,5vw,72px);min-height:310px;margin:6px 0 34px;padding:30px clamp(22px,4vw,54px);overflow:hidden;border-radius:17px;background:#efe8dc}
.circle-welcome-art{min-width:0}.circle-welcome-art svg{display:block;width:min(100%,440px);height:auto;margin:auto;overflow:visible}.circle-seat{transition:transform .24s cubic-bezier(.2,.7,.2,1)}.circle-seat rect{fill:#f8f0df;stroke:#bfb19f;stroke-width:1.2}.circle-seat circle{fill:#682c3e}.circle-welcome-art svg>rect{filter:drop-shadow(0 2px 0 #d1c3b0)}
.circle-welcome-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;transition:transform 280ms cubic-bezier(.2,.7,.2,1)}
.circle-welcome:hover .circle-welcome-art img{transform:translateY(-3px) rotate(-1deg)}
.circle-welcome:hover .seat-top{transform:translateY(-3px)}.circle-welcome:hover .seat-right{transform:translateX(3px)}.circle-welcome:hover .seat-bottom{transform:translateY(3px)}.circle-welcome:hover .seat-left{transform:translateX(-3px)}
.circle-welcome-copy{max-width:350px;padding:12px 0}.circle-welcome-copy .eyebrow{margin-bottom:10px}.circle-welcome-copy h2{max-width:330px;font:400 clamp(29px,3.1vw,38px)/1.08 var(--font-display);letter-spacing:-.035em}.circle-welcome-copy>p:not(.eyebrow){margin-top:12px;color:#6f6264;font-size:15px;line-height:1.55}.circle-welcome-copy .button-row{margin-top:23px}.circle-welcome-copy .button-row .button.primary{min-height:48px}.group-empty{display:flex;align-items:center;gap:14px;max-width:620px;margin:0 0 16px;padding:16px 0;border-top:1px solid #dfd6c9;border-bottom:1px solid #dfd6c9;color:#75696b}.group-empty>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d5c9b8;border-radius:50%;color:#765161}.group-empty p{margin:0;font-size:14px;line-height:1.5}.group-empty strong{margin-right:5px;color:#44383b;font-weight:600}.circle-groups-heading{margin-top:28px}
@media(max-width:760px){.circle-welcome{grid-template-columns:1fr;gap:0;min-height:0;padding:25px 22px 28px}.circle-welcome-art svg{width:min(100%,390px);max-height:215px}.circle-welcome-copy{max-width:500px;margin:0 auto;padding:8px 0 0}.circle-welcome-copy h2{max-width:390px;font-size:32px}.circle-welcome-copy .button-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.circle-seat{transition:none}}
.hero-tiles-image{display:block;width:min(100%,420px);height:245px;object-fit:contain;object-position:center;transition:transform 280ms cubic-bezier(.2,.7,.2,1)}.hero-visual:hover .hero-tiles-image{transform:translateY(-4px) rotate(-1deg)}
@media(max-width:650px){.access-table-art{width:min(290px,100%);height:112px}.hero-tiles-image{width:100%;height:150px}}
.home-grid{margin-top:22px}.home-grid .trinket-note{padding-top:3px;padding-bottom:5px}.home-trinket-note .trinket-total{margin:0 0 10px;font-size:62px;line-height:1}.home-trinket-note .button{margin-top:0}.home-next-none{padding:5px 0 0;color:var(--muted);font-size:15px;line-height:1.45}.home-upcoming-empty{padding:7px 0 12px}
.home-next-prompt{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:14px;margin:8px 0;padding:18px 17px;border-left:3px solid #b79a65;border-radius:0 11px 11px 0;background:#f0e9dc}.home-next-date{display:grid;justify-items:center;align-content:center;width:54px;height:66px;border-radius:8px;background:#fbf7ef;color:#682c3e}.home-next-date strong{font:32px/.95 var(--font-display)}.home-next-date span{margin-top:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.home-next-copy .eyebrow{margin:0 0 4px}.home-next-copy h3{font:500 18px/1.2 var(--font-display)}.home-next-copy p:last-child{margin-top:5px;color:#716568;font-size:12px;line-height:1.4}.home-next-prompt>.button{grid-column:2;width:max-content;margin-top:2px}.home-next-none{padding:7px 0 11px;color:var(--muted);font-size:14px}.home-upcoming-empty{display:flex;align-items:center;gap:14px;padding:10px 0 18px;color:var(--muted);font-size:14px}.home-upcoming-empty .button{margin:0}.home-grid+.section-heading{margin-top:22px}
.home-dashboard{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);grid-template-areas:"next trinkets" "available trinkets";align-items:start;column-gap:36px;row-gap:26px;margin-top:22px}.home-next-section{grid-area:next}.home-available-section{grid-area:available}.home-trinket-section{grid-area:trinkets;min-width:0}.home-dashboard .home-trinket-section .trinket-note{border-left:1px solid var(--line);padding:3px 0 18px 24px}.home-dashboard .home-trinket-section .section-heading{margin-bottom:12px}.home-dashboard .home-trinket-section .home-trinket-note .trinket-total{font-size:62px}
.home-next-prompt{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0;padding:18px 20px}.home-next-prompt h3{margin:0;font-size:18px}.home-next-prompt>.button{flex:0 0 auto;margin:0}
@media(max-width:720px){.home-dashboard{grid-template-columns:minmax(0,1fr);grid-template-areas:"next" "available" "trinkets";row-gap:24px;margin-top:22px}.home-dashboard .home-trinket-section .trinket-note{border-left:0;border-top:1px solid var(--line);padding:18px 0}.home-available-section .session-card{margin-bottom:10px}}
.table-scroll-hint{display:none}
.session-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 20px}.session-toolbar .tabs{margin:0;padding:0;border:0}.session-toolbar .button{flex:0 0 auto}.picked-date{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 18px}.picked-date h2{font:500 21px var(--font-display);text-transform:capitalize}
.calendar-panel{max-width:760px;margin:10px 0 30px;padding:22px 24px 18px;border:1px solid #ded4c7;border-radius:14px;background:#fbf8f1}.calendar-heading{display:flex;justify-content:center;align-items:center;gap:16px;margin-bottom:18px}.calendar-heading h2{min-width:185px;text-align:center;font:500 23px var(--font-display);text-transform:capitalize}.calendar-heading .icon-button{width:38px;height:38px;border:1px solid #ddd2c3;background:#fffdf9;font-size:23px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-grid>span:not(.calendar-blank){display:grid;place-items:center;min-height:34px;color:#76696a;font-size:12px;font-weight:650}.calendar-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:66px;padding:5px 3px;border:1px solid transparent;border-radius:9px;background:transparent;color:#44383b}.calendar-day[aria-disabled=true]{color:#b2a8a0}.calendar-day.has-sessions{border-color:#dfd2bf;background:#fffdf9;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}.calendar-day.has-sessions:hover{transform:translateY(-2px);border-color:#8b6371;background:#f6eee6}.calendar-day>span{font-size:15px;font-weight:650}.calendar-day small{color:#765161;font-size:10px;line-height:1.1}.calendar-panel>p{margin-top:14px}
@media(max-width:650px){.session-toolbar{align-items:flex-start;flex-direction:column}.session-toolbar .tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap}.session-toolbar .tabs .tab{white-space:nowrap}.calendar-panel{padding:17px 12px}.calendar-grid{gap:2px}.calendar-day{min-height:56px}.calendar-day small{font-size:9px}.calendar-heading h2{min-width:150px;font-size:21px}.picked-date{align-items:flex-start;flex-direction:column}.home-next-prompt{gap:10px;padding:14px 12px}.home-next-date{width:49px;height:60px}.home-next-copy h3{font-size:17px}}
@media(max-width:720px){
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .field input,.field select,.field textarea,.access-form input,.access-form select,.access-form textarea{min-height:48px;font-size:16px}
  .button.small,.bottom-nav .nav-link{min-height:44px}
  .session-toolbar .tabs,.adminPage .tabs{scrollbar-width:none}
  .tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{flex:0 0 auto;white-space:nowrap}
  .admin-table{min-width:650px}
  .table-scroll{overscroll-behavior-inline:contain}
  .circle-welcome{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px}
  .circle-welcome-art img{aspect-ratio:2/1;max-height:185px;object-position:center}
  .circle-welcome-copy{padding:0}
  .circle-welcome-copy .button-row{display:grid;grid-template-columns:1fr}
  .circle-welcome-copy .button-row .button{width:100%}
  .session-card{grid-template-columns:46px minmax(0,1fr);gap:10px;padding:15px 12px}
  .session-date{min-width:44px}
  .session-actions{min-width:0;grid-column:1/-1;gap:10px}
  .session-actions>p{min-width:0}
  .session-actions .button{min-width:130px}
  .modal-overlay{padding:0;align-items:end}
  .modal{width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - 8px);border-radius:20px 20px 0 0}
  .modal-body{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media(max-width:720px){
  .tabs{overflow:visible;flex-wrap:wrap;gap:5px}
  .tabs .tab{white-space:normal;min-height:42px}
  .session-toolbar .tabs{overflow:visible;flex-wrap:wrap}
  .session-toolbar .tabs .tab{white-space:normal}
  .admin-table{min-width:650px}
  .table-scroll-hint{display:block;margin:0;padding:10px 14px;background:#f3efe7;color:#62565a;font-size:12px}
  .bottom-nav .nav-link{font-size:10px}
  .bottom-nav .nav-link span{max-width:72px;text-align:center;line-height:1.15}
  .calendar-panel{overflow-x:auto}
  .calendar-grid{grid-template-columns:repeat(7,minmax(44px,1fr));min-width:326px;gap:3px}
  .calendar-day{min-width:44px;min-height:52px}
  .calendar-day small{font-size:10px}
  .calendar-heading .icon-button{width:44px;height:44px;flex:0 0 44px}
}
@media(max-width:360px){
  .bottom-nav .nav-link{font-size:10px;padding-inline:1px}
  .bottom-nav .nav-link span{max-width:66px;white-space:normal}
  .calendar-grid{min-width:326px}
}
@media(max-width:380px){
  .main-content{padding-inline:14px}
  .bottom-nav{padding-inline:4px}
  .bottom-nav .nav-link{font-size:9px}
  .session-actions{align-items:stretch;flex-direction:column}
  .session-actions .button{width:100%}
  .calendar-day{min-height:49px;padding:4px 1px;font-size:13px}
  .calendar-day small{font-size:8px}
  .circle-welcome{padding:15px}
}
}