.sns-referral-page { width: 100%; margin: 0 auto; padding: 0; display: grid; gap: 18px; color: var(--sns-theme-text); font-family: inherit; }
.sns-referral-page > .sns-page-heading { margin-bottom:0; }
.sns-referral-section-nav { --sns-theme-outline-surface:var(--sns-theme-surface-control); display:flex; flex-wrap:wrap; gap:8px; }
.sns-referral-page :is(#snsReferralInvite,#snsReferralOverview,#snsReferralTrend) { scroll-margin-top:90px; }
.sns-referral-page *, .sns-referral-page *::before, .sns-referral-page *::after { box-sizing: border-box; }
.sns-referral-page[data-sns-referral-admin] { display: block; }
.sns-referral-page[data-sns-referral-admin] > .sns-admin-page-head { flex-wrap: wrap; }
.sns-referral-page[data-sns-referral-admin] .sns-admin-page-heading { flex: 1 1 260px; }
.sns-referral-page[data-sns-referral-admin] .sns-admin-page-options { gap: 8px; }
.sns-referral-page[data-sns-referral-admin] .card-header { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sns-referral-page[data-sns-referral-admin] .card-header > .text-muted { font-size: 12px; line-height: 1.5; }
.sns-admin-referral-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 18px; font-size: 12px; color: var(--sns-theme-muted); }
.sns-admin-referral-status strong { margin-left: 4px; color: var(--sns-theme-brand); }
.sns-admin-referral-toolbar { margin-bottom: 18px; padding: 18px; border: 1px solid var(--sns-theme-line-card); border-radius: var(--sns-theme-radius-card); background: var(--sns-theme-surface-raised); }
.sns-admin-referral-toolbar .sns-referral-filter { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,240px) 96px; max-width: none; margin: 0; }
.sns-admin-referral-toolbar > .sns-referral-caption { text-align: left; }
.sns-admin-referral-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sns-admin-referral-member > .sns-referral-caption { flex-basis: 100%; margin-top: 0; }
.sns-admin-referral-table .sns-admin-referral-number { font-variant-numeric: tabular-nums; }
.sns-admin-referral-table tbody tr { height: 76px; }
.sns-admin-referral-table :is(th,td) { vertical-align: middle; text-align: center; }
.sns-admin-referral-table :is(th,td):first-child:not([colspan]) { text-align: left; }
.sns-admin-referral-table .sns-admin-user-stack { min-width: 140px; max-width: 260px; }
.sns-admin-referral-table .sns-admin-user-primary { overflow-wrap: anywhere; }
[data-sns-referral-admin] .sns-referral-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 18px; }
[data-sns-referral-admin] .sns-referral-metrics .sns-referral-card { min-height: 112px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
[data-sns-referral-admin] .sns-referral-metrics strong { margin-top: 0; }
:where(.sns-referral-page) p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--sns-theme-muted); word-break: keep-all; overflow-wrap: anywhere; }
.sns-referral-card, .sns-referral-notice { min-width: 0; padding: 22px; background: var(--sns-theme-surface-raised); border: 1px solid var(--sns-theme-line-card); border-radius: var(--sns-theme-radius-card); }
.sns-referral-notice { padding: 16px 20px; border-inline-start: 3px solid var(--sns-theme-brand); }
.sns-referral-notice strong { display: block; margin-bottom: 6px; font-size: 14px; }
.sns-referral-card h2 { margin: 0 0 12px; font-size: var(--sns-theme-section-title-size); font-weight: var(--sns-theme-section-title-weight); line-height: 1.5; color: var(--sns-theme-text-strong); }
.sns-referral-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding: 10px 0 18px; }
.sns-referral-benefits > div + div { border-inline-start: 1px solid var(--sns-theme-line); padding-inline-start: 24px; }
.sns-referral-benefits span { font-size: 14px; font-weight: 650; }
.sns-referral-benefits strong { display: block; font-size: 52px; line-height: 1.3; font-weight: 800; color: var(--sns-theme-brand); }
.sns-referral-benefits small { font-size: .5em; }
.sns-referral-page .sns-referral-caption { margin-top: 12px; font-size: 12px; }
.sns-referral-page a { color: var(--sns-theme-brand); text-underline-offset: 3px; }
.sns-referral-copy { display: flex; gap: 8px; margin-top: 14px; }
.sns-referral-share { margin-top: 12px; }
.sns-referral-card > form.sns-referral-filter { margin-top: 20px; }
.sns-referral-phone-guide { margin-top: 16px; }
.sns-referral-phone-guide[hidden] { display: none; }
.sns-referral-phone-guide > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-weight: 700; }
.sns-referral-info-trigger { display: flex; align-items: center; min-height: var(--sns-theme-touch-size,44px); margin: 8px 0 0; padding: 4px 0; border: 0; border-radius: 4px; text-decoration: underline; text-underline-offset: 3px; }
.sns-referral-info-dialog { display: none; width: min(460px, calc(100vw - 28px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--sns-theme-line); border-radius: var(--sns-theme-radius-overlay); background: var(--sns-theme-surface-raised); color: var(--sns-theme-text); }
.sns-referral-info-dialog[open] { display: flex; flex-direction: column; }
.sns-referral-info-dialog::backdrop { background: rgba(15,23,42,.58); }
.sns-referral-info-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--sns-theme-line); }
.sns-referral-info-head h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.sns-referral-info-head button { flex: 0 0 var(--sns-theme-touch-size,44px); min-height: var(--sns-theme-touch-size,44px); height: var(--sns-theme-touch-size,44px); padding: 0; border: 0; font-size: 26px; color: var(--sns-theme-muted); }
.sns-referral-info-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.sns-referral-info-body h3 { margin: 0 0 8px; font-size: 15px; font-weight: 750; line-height: 1.5; color: var(--sns-theme-text-strong); }
.sns-referral-info-body p + h3 { margin-top: 22px; }
.sns-referral-info-body p + p { margin-top: 14px; }
.sns-referral-info-note { padding-top: 16px; border-top: 1px solid var(--sns-theme-line); }
.sns-referral-info-foot { flex: 0 0 auto; padding: 0 20px 20px; }
.sns-referral-info-foot form { margin: 0; }
.sns-referral-info-foot button { width: 100%; border-color: var(--sns-theme-brand); background: var(--sns-theme-brand); color: var(--sns-theme-on-brand); }
:where(.sns-referral-page) input, :where(.sns-referral-page) button { min-height: 44px; min-width: 0; border: 1px solid var(--sns-theme-line-control); border-radius: var(--sns-theme-radius-control); padding: 10px 12px; background: var(--sns-theme-surface-control); color: var(--sns-theme-text); font: inherit; font-size: 13px; }
.sns-referral-copy input { flex: 1; width: 0; }
:where(.sns-referral-page) button { color: var(--sns-theme-brand); font-weight: 700; cursor: pointer; white-space: nowrap; }
.sns-referral-page button:disabled { color: var(--sns-theme-muted); cursor: default; opacity: .65; }
.sns-referral-page [data-referral-copy-status]:not(:empty) { margin-top: 10px; }
.sns-referral-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.sns-referral-metrics span { font-size: 12px; color: var(--sns-theme-muted); }
.sns-referral-trend { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:20px 0; }
.sns-referral-trend > div { display:flex; flex-direction:column; gap:8px; min-width:0; text-align:center; font-size:var(--sns-theme-helper-size,12px); overflow-wrap:anywhere; }
.sns-referral-trend strong { font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.sns-referral-trend-track { display:flex; align-items:flex-end; justify-content:center; height:96px; border-bottom:1px solid var(--sns-theme-line); }
.sns-referral-trend-track > span { display:block; width:min(32px,100%); border-radius:4px 4px 0 0; background:var(--sns-theme-brand); }
.sns-referral-metrics strong { display: block; margin-top: 8px; font-size: 23px; color: var(--sns-theme-text-strong); overflow-wrap: anywhere; }
.sns-referral-filter { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.sns-referral-filter label, .sns-referral-filter-field { display: grid; gap: 8px; font-size: 12px; flex: 1 1 140px; min-width: 0; }
.sns-referral-filter .sns-referral-control { width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 12px; line-height: 1.4; border: 1px solid var(--sns-theme-line-control); border-radius: var(--sns-theme-radius-control); background: var(--sns-theme-surface-raised); color: var(--sns-theme-text); font-size: 13px; font-weight: 650; box-sizing: border-box; }
.sns-referral-customer-filter { display:grid; grid-template-columns:minmax(0,1fr) 96px 96px; align-items:end; }
.sns-referral-filter .sns-referral-submit { display:inline-flex; align-items:center; justify-content:center; border-color: var(--sns-theme-brand); background: var(--sns-theme-brand); color: var(--sns-theme-on-brand); }
.sns-month-picker { position: relative; display: block; min-width: 0; }
.sns-month-picker > input, .sns-month-picker > button { width: 100%; }
.sns-month-picker > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.sns-month-picker [hidden] { display: none; }
.sns-month-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 280px; max-width: calc(100vw - 72px); max-height: calc(100dvh - 16px); padding: 12px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--sns-theme-line); border-radius: var(--sns-theme-radius-card); background: var(--sns-theme-surface-raised); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.sns-month-year { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sns-month-year button { padding: 4px 10px; }
.sns-month-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.sns-month-grid button { padding: 8px 4px; }
.sns-month-grid button[aria-pressed="true"] { border-color: var(--sns-theme-brand); color: var(--sns-theme-brand); font-weight: 800; }
.sns-referral-table-wrap { overflow-x: auto; margin: 16px 0 8px; }
.sns-referral-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sns-referral-table th, .sns-referral-table td { padding: 12px 8px; border-bottom: 1px solid var(--sns-theme-line); text-align: left; white-space: nowrap; background: transparent; }
.sns-referral-table th { color: var(--sns-theme-muted); font-weight: 650; }
.sns-referral-basis { table-layout: fixed; }
.sns-referral-basis th, .sns-referral-basis td { white-space: normal; overflow-wrap: anywhere; }
.sns-referral-basis td, .sns-referral-basis thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.sns-referral-basis tbody tr:last-child :is(th,td) { color: var(--sns-theme-text-strong); font-weight: 750; border-bottom: 0; }
.sns-referral-page .sns-referral-empty { padding: 32px 18px; text-align: center; white-space: normal; color: var(--sns-theme-muted); }
.sns-referral-page details:not(.sns-referral-share) { padding: 14px 0; border-top: 1px solid var(--sns-theme-line); }
.sns-referral-page details:last-child { padding-bottom: 0; }
.sns-referral-page summary { cursor: pointer; font-size: 14px; font-weight: 650; line-height: 1.6; }
.sns-referral-page details p, .sns-referral-page details > a { margin-top: 10px; font-size: 12px; }
.sns-referral-page .card-body > details:first-child { padding-top: 0; border-top: 0; }
@media (max-width: 1000px) {
  [data-sns-referral-admin] .sns-referral-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .sns-referral-page[data-sns-referral-admin] .sns-admin-page-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .sns-admin-referral-toolbar .sns-referral-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sns-admin-referral-toolbar .sns-referral-submit { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sns-referral-page { gap: 14px; }
  .sns-referral-section-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sns-referral-section-nav > .sns-page-heading-action { padding-inline:8px; }
  .sns-referral-customer-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sns-referral-customer-filter > .sns-referral-filter-field { grid-column:1/-1; }
  .sns-referral-card { padding: 18px; }
  .sns-referral-benefits { gap: 16px; }
  .sns-referral-benefits > div + div { padding-inline-start: 16px; }
  .sns-referral-benefits span { font-size: 12px; }
  .sns-referral-benefits strong { font-size: 44px; }
  .sns-referral-metrics { grid-template-columns: 1fr; gap: 10px; }
  .sns-referral-metrics .sns-referral-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sns-referral-metrics strong { margin: 0; font-size: 21px; }
  [data-sns-referral-admin] .sns-referral-metrics { grid-template-columns: 1fr; }
  [data-sns-referral-admin] .sns-referral-metrics .sns-referral-card { min-height: 76px; flex-direction: row; justify-content: space-between; }
  .sns-admin-referral-toolbar { padding: 16px; }
  .sns-admin-referral-table, .sns-admin-referral-table tbody { display: block; }
  .sns-admin-referral-table thead { display: none; }
  .sns-admin-referral-table tbody tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); height: auto; align-items: center; gap: 18px 12px; padding: 18px; border-bottom: 1px solid var(--sns-theme-line); }
  .sns-admin-referral-table tbody tr:last-child { border-bottom: 0; }
  .sns-admin-referral-table tbody td { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; min-width: 0; border: 0; overflow-wrap: anywhere; text-align: center; }
  .sns-admin-referral-table tbody td:first-child { grid-column: 1 / 3; align-items: flex-start; }
  .sns-admin-referral-table tbody td:nth-child(2) { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--sns-theme-line); }
  .sns-admin-referral-table tbody td:nth-child(6) { grid-column: 3; grid-row: 1; align-items: flex-end; }
  .sns-admin-referral-table tbody td:nth-child(7) { grid-column: 1 / -1; align-items: stretch; }
  .sns-admin-referral-table tbody td:nth-child(7) a { justify-content: center; min-height: 40px; }
  .sns-admin-referral-table td:is(:first-child,:nth-child(6),:nth-child(7))[data-label]::before { display: none; }
  .sns-admin-referral-table td[data-label]::before { content: attr(data-label); font-size: var(--sns-theme-helper-size,12px); color: var(--sns-theme-muted); }
  .sns-admin-referral-table td[colspan] { grid-column: 1 / -1; align-items: center; }
  .sns-admin-referral-table .sns-admin-user-stack { min-width: 0; max-width: 100%; }
}