/* PANSE app surfaces. Keep data, form validation and established layouts intact. */
:root { --panse:#033488; --app-ink:#15243d; --app-muted:#718096; --app-line:#e8edf5; }
body { color:var(--app-ink); background:#f3f5fa; -webkit-font-smoothing:antialiased; }
.ui-icon { flex-shrink:0; vertical-align:middle; }
h1 { font-weight:750; letter-spacing:-.035em; }
h2 { color:var(--app-ink); }
.card { border-color:var(--app-line); border-radius:18px; box-shadow:0 3px 12px #1c355b04; }
.card-title { align-items:center; margin-bottom:14px; }
.card-title > strong { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.card-title > strong > .ui-icon { color:var(--panse); }
.card-title > .muted { font-size:11px; }
.button { min-height:46px; border-radius:12px; gap:8px; }
.button.primary { color:#fff; background:var(--panse); border-color:var(--panse); box-shadow:0 4px 10px #03348814; }
.button.primary:hover { background:#0647aa; border-color:#0647aa; }
.button.ghost { background:#fff; border-color:#e0e7f0; color:#43516a; }
.button.ghost:hover { color:var(--panse); background:#f5f8fd; border-color:#cbd9ee; }
.button.small { min-height:38px; border-radius:10px; }
input,select,textarea { border-color:#dce4ef; border-radius:11px; background:#fafbfd; }
input:focus,select:focus,textarea:focus { background:#fff; border-color:#7193c8; box-shadow:0 0 0 3px #0334880b; }
input::placeholder,textarea::placeholder { color:#9aa6b8; }
.badge { border-radius:6px; }
.flash { border-radius:14px; }
.ledger-row { border-color:var(--app-line); border-radius:16px; padding:18px 20px; }
.ledger-meta { color:#7b879a; font-size:12px; }
.ledger-main { font-size:14px; }
th { background:#f8fafd; border-color:var(--app-line); font-size:11px; color:#7b879a; }
td { border-color:#eef2f7; }
td a { text-decoration:none; font-weight:600; }
table .badge { background:#edf6f3; color:#26725c; border:0; }
.badge.warn { color:#9f7426; background:#fff5df; }
.admin-app .site-header { position:fixed; inset:0 auto 0 0; width:232px; height:100dvh; border:0; border-right:1px solid var(--app-line); background:#fff; backdrop-filter:none; }
.admin-app .header-inner { display:flex; flex-direction:column; width:100%; height:100%; padding:28px 18px 18px; }
.admin-app .header-top { flex-shrink:0; justify-content:space-between; padding:2px 10px 22px; }
.admin-app .admin-logo { width:154px; }
.admin-mobile-title,.admin-nav-toggle { display:none; }
.admin-app .site-header nav { flex:1; display:flex; flex-direction:column; gap:6px; margin:0; overflow-y:auto; overflow-x:hidden; }
.admin-app .site-header nav > a { display:flex; align-items:center; gap:12px; min-height:46px; padding:12px 14px; border:0; border-radius:12px; font-size:13px; font-weight:500; color:#6f7c92; }
.admin-app .site-header nav > a.active { background:var(--panse); color:#fff; font-weight:650; box-shadow:0 5px 12px #03348812; }
.admin-app .site-header nav > a:not(.active):hover { background:#f2f5fa; color:var(--panse); }
.admin-app .site-header .nav-logout { flex-shrink:0; margin-top:12px; padding-top:12px; border-top:1px solid var(--app-line); }
.admin-app .nav-logout button { display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:12px; padding:12px 14px; font-size:13px; color:#7b879a; }
.admin-profile { display:flex; align-items:center; flex-shrink:0; gap:10px; margin-top:18px; padding:14px 12px; border-radius:14px; background:#f5f7fb; }
.profile-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#e2ebfb; color:var(--panse); font-weight:700; font-size:13px; }
.admin-profile strong { display:block; font-size:12px; }
.admin-profile small { margin-top:2px; font-size:10px; }
.admin-appbar { position:fixed; z-index:18; inset:0 0 auto 232px; display:flex; justify-content:space-between; align-items:center; height:72px; padding:0 32px; border-bottom:1px solid var(--app-line); background:#ffffffef; backdrop-filter:blur(14px); }
.workspace-crumb { display:flex; gap:12px; align-items:center; font-size:12px; color:#9aa6b8; }
.workspace-crumb > span:first-child { font-weight:700; letter-spacing:.1em; font-size:11px; color:var(--panse); }
.workspace-crumb strong { color:#4d5d75; font-weight:600; }
.workspace-date { display:flex; align-items:center; gap:8px; color:#8591a5; font-size:11px; font-variant-numeric:tabular-nums; }
.workspace-date .ui-icon { width:16px; height:16px; }
.admin-app > .container { width:calc(100% - 296px); max-width:1280px; margin:0 32px 0 264px; padding:104px 0 48px; }
.admin-app > .container.compact { max-width:760px; padding-top:104px; }
.admin-app h1 { font-size:25px; }
.admin-app .page-title { margin-bottom:26px; }
.admin-app .page-title > .muted { padding:6px 10px; border:1px solid #e4eaf3; border-radius:8px; background:#fff; font-size:11px; }
.admin-app .stats { gap:16px; }
.admin-app .stat { padding:22px; }
.admin-app .stat > .eyebrow { color:#7b879a; font-size:11px; letter-spacing:0; }
.admin-app .stat > strong { margin-top:12px; font-size:32px; font-weight:700; letter-spacing:-.025em; }
.admin-app .stat > small { margin-top:6px; font-size:11px; }
.admin-app .dashboard-balance { margin-bottom:0; padding:22px; border:0; background:var(--panse); color:#fff; }
.admin-app .dashboard-balance > .eyebrow,.admin-app .dashboard-balance > small { color:#d5e2f7; }
.admin-app .dashboard-balance > strong { font-size:25px; font-weight:650; }
.admin-app .section-title { margin:28px 0 14px; font-size:14px; color:#4a5870; }
.admin-nav-scrim { display:none; }
.customer-app { background:#eff3fa; }
.customer-app > .container.compact { width:min(100% - 32px,500px); padding-top:0; padding-bottom:28px; }
.customer-app .my-header { position:sticky; top:0; z-index:15; width:calc(100% + 32px); margin:0 -16px 22px; padding:18px 16px; background:#f7f9fcf0; border-bottom:1px solid #e8edf5; backdrop-filter:blur(16px); }
.customer-app .member-header-actions { gap:3px; }
.customer-app .member-header-actions > span { font-size:11px; color:#77849a; }
.customer-app .member-header-name { font-weight:650; color:#43516a; }
.customer-app .card { padding:22px; margin-bottom:18px; border:1px solid #e5ebf4; border-radius:20px; box-shadow:0 4px 12px #03348804; }
.customer-app .member-page-name { font-size:23px; margin:24px 2px; }
.customer-app .checkin-card { background:#fff; }
.checkin-card > .positive { display:inline-flex; align-items:center; gap:6px; margin:0 0 4px; padding:6px 10px; border-radius:8px; background:#edf5fc; font-size:12px; }
.checkin-card > .positive::before { content:""; width:6px; height:6px; border-radius:50%; background:#1769e0; }
.checkin-card > p.muted { margin:4px 0 12px; font-size:12px; }
.checkin-card > small { font-size:10px; line-height:1.7; }
.customer-app .balance-card { position:relative; overflow:hidden; gap:16px; min-height:158px; padding:26px 24px; border:0; background:linear-gradient(125deg,#033488,#08459e); color:#fff; box-shadow:0 10px 25px #0334881b; }
.customer-app .balance-card::before { content:""; position:absolute; width:230px; height:230px; right:-100px; top:-110px; border:1px solid #ffffff12; border-radius:50%; box-shadow:0 0 0 35px #ffffff04,0 0 0 70px #ffffff03; pointer-events:none; }
.customer-app .balance-card > div { position:relative; }
.customer-app .balance-card .eyebrow { display:flex; align-items:center; gap:8px; color:#c1d5f4; font-size:10px; letter-spacing:0; }
.customer-app .balance-card .ui-icon { width:16px; height:16px; }
.customer-app .balance { margin-top:14px; font-size:48px; font-weight:700; line-height:1; letter-spacing:-.025em; }
.customer-app .balance small { margin-top:10px; color:#d5e4fc; font-size:11px; letter-spacing:0; }
.customer-app .balance-card > div:last-child { align-self:flex-end; text-align:right; }
.customer-app .balance-card > div:last-child .eyebrow { justify-content:flex-end; }
.customer-app .balance-card > div:last-child p { margin-top:8px; font-size:11px; color:#e3ecfc; white-space:nowrap; }
.customer-app .member-feed .card-title { margin-bottom:12px; }
.customer-app .member-feed-list li { padding:14px 0; }
.customer-app .member-feed-list li:first-child { padding-top:0; }
.customer-app .feed-title { font-size:14px; font-weight:550; line-height:1.75; }
.customer-app .feed-meta .badge { border:0; border-radius:5px; padding:2px 7px; background:#eff4fc; color:#46699e; font-size:9px; line-height:1.7; }
.customer-app .feed-meta .coupon-state.used,.customer-app .feed-meta .coupon-state.expired { color:#8993a4; background:#f0f2f6; }
.customer-app .member-more { color:#5676a7; font-size:12px; }
.my-period-tabs { border-radius:12px; background:#f0f3f9; padding:4px; gap:4px; margin:16px 0; }
.my-period-tabs a { min-height:38px; display:flex; align-items:center; justify-content:center; border:0; border-radius:9px; color:#7b879a; background:transparent; padding:8px 6px; font-size:11px; }
.my-period-tabs a:hover { background:#e7edf7; }
.my-period-tabs a.is-active,.my-period-tabs a.is-active:hover { background:var(--panse); border-color:transparent; box-shadow:0 3px 7px #03348812; }
.member-ranking li { padding:14px 0; gap:10px; border-color:#edf1f7; }
.member-ranking .ranking-place { display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; border-radius:8px; background:#edf3fd; font-size:10px; color:#5e7ba7; }
.member-ranking li:first-child .ranking-place { color:#9b7127; background:#fff3d4; }
.member-ranking .ranking-name { font-weight:550; }
.member-ranking li > strong { font-size:11px; font-weight:650; color:#344e74; }
.customer-app #my-ranking > p.small-text { font-size:10px; line-height:1.8; color:#929db0; }
.member-menu-toggle { width:62px; height:62px; border:4px solid #ffffff; box-shadow:0 7px 20px #03348822; }
.member-menu nav a,.member-menu-logout { display:flex; align-items:center; gap:14px; }
.member-menu nav .ui-icon,.member-menu-logout .ui-icon { opacity:.8; }
.member-menu nav a[aria-current="page"] { background:#ffffff0a; }
.member-detail-dialog { border:0; border-radius:22px; box-shadow:0 24px 80px #03348838; }
.detail-close { border-radius:10px; }
.coupon-use-note { border-radius:12px; background:#f4f7fc; color:#64748b; }
.footer-note { font-size:10px; line-height:1.9; color:#94a0b4; padding:8px 12px; }
.auth-app > .container.compact { padding-top:52px; }
.auth-app .customer-brand { margin-bottom:26px; }
.auth-app .card { border-radius:22px; padding:28px; }
.auth-app .login-title { margin-bottom:24px; }
.auth-app .login-title h1 { font-size:24px; }
@media (max-width:1023px) {
  .admin-app .site-header { position:sticky; inset:auto; top:0; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--app-line); z-index:25; }
  .admin-app .header-inner { padding:12px 20px; }
  .admin-app .header-top { padding:0; gap:16px; min-height:44px; }
  .admin-app .admin-logo { width:130px; }
  .admin-mobile-title { display:block; margin-left:auto; color:#718096; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .admin-nav-toggle { display:flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; padding:0; border:1px solid #e8edf5; border-radius:12px; background:#f5f7fb; color:var(--panse); cursor:pointer; }
  .admin-app .site-header nav { margin-top:14px; }
  .app-ready .admin-app .site-header nav { display:none; }
  .app-ready .admin-app.admin-nav-open .site-header nav { display:flex; position:absolute; top:calc(100% + 8px); left:16px; right:16px; margin:0; padding:12px; max-height:calc(100dvh - 104px); border:1px solid var(--app-line); border-radius:18px; background:#fff; box-shadow:0 16px 40px #03348820; }
  .admin-profile,.admin-appbar { display:none; }
  .admin-app > .container,.admin-app > .container.compact { width:calc(100% - 40px); margin:0 auto; padding:28px 0 48px; }
  .admin-app h1 { font-size:22px; }
  .admin-app .page-title { margin-bottom:22px; }
  .admin-app.admin-nav-open { overflow:hidden; }
  .admin-nav-open .admin-nav-scrim { display:block; position:fixed; inset:0; z-index:24; border:0; background:#03348833; }
  .admin-app .site-header .nav-logout { margin-top:6px; }
}
@media (max-width:760px) {
  .admin-app .stat { padding:18px; }
  .admin-app .stat > strong { font-size:28px; }
  .customer-app .my-header { padding:16px; margin-bottom:18px; }
  .customer-app .card { padding:20px; }
  .customer-app .balance-card { padding:24px 20px; }
  .admin-app .dashboard-balance { gap:16px; padding:18px; }
  .admin-app .dashboard-balance > strong { font-size:20px; }
}
@media (max-width:480px) {
  .calendar-dialog .calendar-navigation,.calendar-dialog .calendar-month { gap:4px; }
  .calendar-dialog .calendar-month select { padding:0 4px; }
  .calendar-dialog .calendar-month select[aria-label="年"] { width:90px; }
  .calendar-dialog .calendar-month select[aria-label="月"] { width:80px; }
  .admin-app .header-inner { padding:12px 16px; }
  .admin-app > .container,.admin-app > .container.compact { width:calc(100% - 32px); padding-top:24px; }
  .admin-mobile-title { max-width:calc(100% - 195px); }
  .customer-app .balance { font-size:42px; }
  .customer-app .balance-card { min-height:152px; gap:12px; }
  .customer-app .balance-card > div:last-child { position:absolute; right:18px; bottom:24px; }
  .customer-app .balance-card .balance-long { font-size:28px; }
  .customer-app .card { border-radius:18px; padding:18px; }
  .customer-app .balance-card { padding:24px 18px; }
  .member-ranking li { gap:6px; grid-template-columns:26px minmax(0,1fr) auto; }
  .member-ranking .ranking-place { width:25px; height:25px; border-radius:7px; font-size:9px; }
  .member-ranking .ranking-name { font-size:12px; }
  .member-ranking li > strong { font-size:10px; grid-column:auto; }
  .customer-app .member-header-actions > span { font-size:11px; }
}
.calendar-dialog::backdrop { background:#03348855; }
@media (hover:hover) and (pointer:fine) {
  .button { transition:background .16s,border-color .16s,transform .16s,box-shadow .16s; }
  .button:hover { transform:translateY(-1px); }
  .button:active { transform:translateY(0); }
  .member-feed-list button:hover .feed-title { color:var(--panse); }
}
@media (prefers-reduced-motion:reduce) { .button { transition:none; } }

/* Readability and responsive overview. */
body { font-size:16px; }
.admin-app .dashboard-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-app .dashboard-stats > :last-child { grid-column:auto; }
.admin-app .stat { padding:20px; min-height:160px; }
.admin-app .stat > .eyebrow { font-size:13px; }
.admin-app .stat > strong { font-size:30px; }
.admin-app .stat > small { font-size:13px; }
.admin-app .stat-total { background:var(--panse); color:#fff; border-color:var(--panse); }
.admin-app .stat-total > strong { font-size:28px; white-space:nowrap; }
.admin-app .stat-total > .eyebrow,.admin-app .stat-total > small { color:#d5e2f7; }
.admin-app .stat-total > .stat-note { font-size:12px; }
.admin-app .site-header nav > a,.admin-app .nav-logout button { font-size:14px; font-weight:700; }
.admin-app .site-header nav > a.active { font-weight:700; }
.admin-mobile-title { font-size:14px; font-weight:600; }
.admin-profile strong { font-size:13px; }
.admin-profile small,.workspace-date,.workspace-crumb > span:first-child { font-size:12px; }
.workspace-crumb { font-size:13px; }
.admin-app .page-title > .muted { font-size:12px; }
label,.eyebrow { font-size:13px; }
.small-text,small { font-size:12px; }
.ledger-meta,th { font-size:13px; }
.badge { font-size:12px; }
.customer-app .card-title > strong { font-size:16px; }
.customer-app .card-title > .muted { font-size:12px; }
.customer-app .member-header-actions > span { font-size:12px; }
.checkin-card > .positive { font-size:13px; }
.checkin-card > p.muted { font-size:14px; }
.checkin-card > small { font-size:12px; }
.customer-app .balance-card .eyebrow,.customer-app .balance-card > div:last-child p { font-size:12px; }
.customer-app .balance small { font-size:13px; }
.member-feed-list time { font-size:12px; }
.customer-app .feed-title { font-size:15px; font-weight:600; }
.customer-app .feed-meta .badge { font-size:12px; }
.customer-app .member-more { font-size:14px; }
.my-period-tabs a { font-size:13px; font-weight:600; }
.member-ranking .ranking-name { font-size:14px; }
.member-ranking li > strong { font-size:13px; }
.customer-app #my-ranking > p.small-text { font-size:12px; }
.member-menu nav a,.member-menu-logout { font-size:17px; font-weight:700; }
.member-detail-body { font-size:15px; }
.member-detail-dialog .detail-heading { position:sticky; top:0; z-index:2; background:#fff; padding-bottom:12px; }
.footer-note { font-size:12px; }
@media (max-width:1023px), (pointer:coarse) {
  .admin-app .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:480px) {
  .admin-app .stat { padding:16px; min-height:154px; }
  .admin-app .stat > .eyebrow { font-size:12px; }
  .admin-app .stat > strong { font-size:27px; }
  .admin-app .stat-total > strong { font-size:24px; }
  .admin-app .stat > small { font-size:12px; }
  .customer-app .member-header-actions > span { font-size:12px; }
  .my-period-tabs a { font-size:12px; }
  .member-ranking .ranking-place { font-size:11px; }
  .member-ranking .ranking-name { font-size:13px; }
  .member-ranking li > strong { font-size:12px; }
  .customer-app .balance-long small { max-width:calc(100% - 120px); font-size:11px; }
}

/* Independent chip and point wallets. */
.keep-balance-card .card-title { margin-bottom:20px; }
.keep-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; margin:0; }
.keep-metrics > div { min-width:0; }
.keep-metrics .chip-total { grid-column:1/-1; }
.keep-metrics dt { color:#728095; font-size:13px; margin-bottom:6px; }
.keep-metrics dd { margin:0; color:#16233b; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.keep-metrics .chip-total dd { font-size:38px; overflow-wrap:anywhere; }
.keep-visit { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding-top:18px; margin:18px 0 0; border-top:1px solid #e8edf5; color:#728095; font-size:12px; }
.customer-app .keep-balance-card { background:linear-gradient(125deg,#033488,#08459e); border:0; color:#fff; box-shadow:0 10px 25px #0334881b; }
.customer-app .keep-balance-card .card-title > strong,.customer-app .keep-metrics dd { color:#fff; }
.customer-app .keep-metrics dt,.customer-app .keep-visit { color:#d1dff5; }
.customer-app .keep-visit { border-color:#ffffff25; }
.point-balance-card { border-left:4px solid #168775; }
.point-balance-card .card-title { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.point-balance-card .card-title > strong { display:flex; align-items:center; gap:8px; font-size:16px; }
.point-balance-card .card-title > a { margin-left:auto; font-size:13px; color:#168775; text-decoration:none; }
.point-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:0; color:#127363; font-size:36px; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.point-total small { font-size:13px; font-weight:500; }
#point-records { scroll-margin-top:100px; }
@media(max-width:480px) {
  .keep-metrics { gap:16px; }
  .keep-metrics .chip-total dd { font-size:34px; }
  .keep-metrics dd { font-size:24px; }
  .point-total { font-size:32px; }
}
.customer-app .keep-balance-card .card-title > strong > .ui-icon { color:#d1dff5; }