:root {
  --bg: #0e0d11;
  --surface: #17161c;
  --surface-2: #1e1c24;
  --raised: #27242e;
  --ink: #f2f1f4;
  --muted: #9a95a1;
  --line: rgba(242, 241, 244, 0.11);
  --red: #d0243d;
  --red-bright: #e14b5e;
  --red-soft: rgba(208, 36, 61, 0.14);
  --blue: #3e6df0;
  --blue-bright: #6b96ff;
  --blue-soft: rgba(62, 109, 240, 0.14);
  --primary: #d0243d;
  --primary-dark: #a01830;
  --primary-glow: rgba(208, 36, 61, 0.3);
  --danger: #e14b5e;
  --soft: rgba(208, 36, 61, 0.14);
  --shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(208, 36, 61, 0.09), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(62, 109, 240, 0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

h1,
h2,
h3,
h4,
.brand strong,
.metric strong,
.mobile-point strong,
.mobile-store-card strong {
  font-family: "Cinzel", "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  display: grid;
  grid-template-columns: 258px 1fr;
  min-height: 100vh;
}

body.player-mode {
  background:
    radial-gradient(700px 340px at 90% -5%, rgba(208, 36, 61, 0.1), transparent 60%),
    radial-gradient(600px 320px at 5% 105%, rgba(62, 109, 240, 0.09), transparent 60%),
    var(--bg);
}

html.player-mode-preload body {
  background: #0e0d11;
}

html.player-mode-preload .sidebar,
html.player-mode-preload .topbar,
html.player-mode-preload .login-backdrop {
  display: none;
}

body.player-mode .app {
  display: block;
}

body.player-mode .sidebar,
body.player-mode .topbar,
body.player-mode .login-backdrop,
body.player-mode #playerPage > .panel > .panel-head {
  display: none;
}

body.player-mode .main {
  min-height: 100vh;
  padding: 0;
}

body.player-mode .view.active {
  display: block;
}

body.player-mode .player-preview-panel {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.player-mode .my-page {
  margin: 0;
}

.sidebar {
  background: rgba(10, 9, 13, 0.94);
  border-right: 1px solid var(--line);
  color: #fff;
  padding: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: #f6f4ef;
  color: #14121a;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(242, 241, 244, 0.16), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.brand strong {
  letter-spacing: 0.04em;
}

.brand small {
  display: block;
  margin-top: 3px;
  color: rgba(242, 241, 244, 0.5);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav {
  display: grid;
  gap: 7px;
}

.nav-button {
  min-height: 42px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(242, 241, 244, 0.6);
  text-align: left;
  padding: 0 12px;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.nav-button.active,
.nav-button:hover {
  background: var(--red-soft);
  color: #fff;
}

.nav-button.active {
  box-shadow: inset 2px 0 0 var(--red);
}

.main {
  padding: 28px;
  overflow-x: hidden;
}

.topbar,
.panel-head,
.session,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar {
  margin-bottom: 22px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 4px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.02em;
}

h1 .gold,
.gold {
  color: var(--red-bright);
}

h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

h3 {
  font-size: 17px;
}

.eyebrow {
  color: var(--blue-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 18px;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.metric,
.panel,
.customer-card,
.player-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(242, 241, 244, 0.02), transparent 40%), var(--surface);
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
  border-top: 2px solid var(--red);
}

.metric:nth-child(even) {
  border-top-color: var(--blue);
}

.metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.panel {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.form-grid.single {
  grid-template-columns: 1fr;
}

.field {
  display: grid;
  gap: 7px;
}

.field.wide {
  grid-column: span 2;
}

.field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #100f14;
  color: var(--ink);
  padding: 0 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input::placeholder {
  color: rgba(154, 149, 161, 0.6);
}

input:focus,
select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(62, 109, 240, 0.22);
}

.search {
  max-width: 250px;
}

.primary,
.ghost,
.danger {
  min-height: 42px;
  border-radius: 4px;
  padding: 0 15px;
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.primary {
  border: 0;
  background: linear-gradient(135deg, #dd3049, #a01830);
  color: #fff;
  box-shadow: 0 8px 22px rgba(208, 36, 61, 0.3);
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(208, 36, 61, 0.4);
}

.ghost {
  border: 1px solid var(--line);
  background: rgba(242, 241, 244, 0.04);
  color: var(--ink);
}

.ghost:hover {
  border-color: var(--blue-bright);
  color: #fff;
}

.danger {
  border: 1px solid rgba(225, 75, 94, 0.45);
  background: rgba(225, 75, 94, 0.08);
  color: var(--danger);
}

#sessionBadge {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(208, 36, 61, 0.5);
  border-radius: 4px;
  letter-spacing: 0.08em;
  background: var(--red-soft);
  color: var(--red-bright);
  padding: 0 14px;
  font-weight: 800;
}

.list,
.customer-list,
.search-results,
.rule-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.scanner {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.scanner[hidden] {
  display: none;
}

.scanner video {
  width: min(520px, 100%);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #000;
  object-fit: cover;
}

.scanner-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.integration-actions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.list-item,
.candidate,
.rule-list p {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  padding: 12px;
}

.rule-list p {
  display: block;
  line-height: 1.7;
}

.muted,
.hint,
.body-text,
small {
  color: var(--muted);
}

.body-text,
.hint {
  margin-top: 10px;
  line-height: 1.7;
}

.customer-card {
  padding: 15px;
}

.customer-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.customer-head > strong {
  color: var(--red-bright);
}

.asset-grid,
.my-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.asset-box,
.stat-box {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  padding: 10px;
}

.asset-box span,
.stat-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.asset-box strong,
.stat-box strong {
  display: block;
  margin-top: 4px;
}

.qr-box {
  display: grid;
  place-items: center;
  min-height: 136px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  margin-top: 14px;
}

.qr-text {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}

.customer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.customer-actions .primary {
  min-width: 130px;
}

.my-page {
  margin-top: 16px;
}

.player-preview-panel {
  background: var(--surface);
}

.mobile-app {
  position: relative;
  width: min(430px, 100%);
  min-height: 760px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #121117;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  padding: 16px 14px 86px;
}

.mobile-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 116px);
  align-items: end;
  gap: 14px;
  border: 1px solid rgba(242, 241, 244, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(62, 109, 240, 0.18), transparent 55%),
    linear-gradient(135deg, #1b1a22 0%, #100f15 55%, #191420 100%);
  color: #fff;
  padding: 22px 18px;
  overflow: hidden;
}

.lang-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  min-height: 26px;
  border: 1px solid rgba(242, 241, 244, 0.3);
  border-radius: 4px;
  background: rgba(12, 11, 15, 0.55);
  color: rgba(242, 241, 244, 0.85);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.lang-toggle:hover {
  border-color: var(--blue-bright);
  color: #fff;
}

.mobile-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--blue));
}

.mobile-hero::after {
  content: "♠";
  position: absolute;
  top: -18px;
  right: -6px;
  color: rgba(242, 241, 244, 0.07);
  font-size: 110px;
  line-height: 1;
  pointer-events: none;
}

.mobile-member {
  min-width: 0;
}

.mobile-hero p,
.mobile-hero span,
.mobile-point span {
  color: var(--red-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mobile-hero h3 {
  margin-top: 8px;
  color: #fff;
  font-size: 27px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.mobile-hero span {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(242, 241, 244, 0.55);
  letter-spacing: 0.08em;
}

.mobile-point {
  min-width: 0;
  border: 1px solid rgba(62, 109, 240, 0.45);
  border-radius: 6px;
  background: rgba(62, 109, 240, 0.12);
  padding: 12px 10px;
  text-align: right;
  overflow: hidden;
}

.mobile-point span {
  color: var(--blue-bright);
}

.mobile-point strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: clamp(22px, 8vw, 30px);
  font-weight: 800;
  line-height: 1;
  overflow-wrap: anywhere;
}

.mobile-section {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.mobile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.mobile-section-head h3 {
  font-size: 17px;
}

.mobile-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mobile-qr-card {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.mobile-qr {
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(242, 241, 244, 0.25);
  border-radius: 8px;
  background: #fff;
}

.mobile-qr canvas,
.mobile-qr img,
.qr-box canvas,
.qr-box img {
  display: block;
  max-width: 100%;
  height: auto;
}

.mobile-qr-card p {
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
  text-align: center;
}

.mobile-store-grid,
.mobile-list,
.mobile-ranking-grid {
  display: grid;
  gap: 10px;
}

.mobile-store-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 12px;
}

.mobile-store-card span,
.mobile-store-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mobile-store-card strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  font-weight: 800;
}

.mobile-ranking-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 12px;
}

.mobile-ranking-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.store-SPADE {
  color: var(--blue-bright);
}

.store-HEART {
  color: var(--red-bright);
}

.mobile-ranking-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-ranking-columns > div > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 7px;
}

.mobile-rank-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  border-radius: 4px;
  padding: 7px 6px;
}

.mobile-rank-row.is-me {
  background: var(--red-soft);
}

.mobile-rank-row b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #f6f4ef;
  color: #14121a;
  font-size: 12px;
}

.mobile-rank-row strong,
.mobile-rank-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-rank-row strong {
  font-size: 12px;
}

.mobile-rank-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.mobile-chart {
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 12px;
}

.mobile-row small {
  display: block;
  margin-top: 4px;
}

.mobile-row b {
  color: var(--red-bright);
  white-space: nowrap;
}

.mobile-bottom-nav {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 11, 15, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.mobile-bottom-nav a {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-bottom-nav a:hover {
  color: #fff;
}

.mobile-bottom-nav a.nav-active {
  background: var(--red-soft);
  color: var(--red-bright);
}

.closing-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 12px;
}

.closing-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.closing-head .visitor-names {
  flex: 1;
  min-width: 0;
}

.closing-badge {
  flex: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.closing-badge.done {
  border: 1px solid rgba(41, 178, 135, 0.5);
  background: rgba(41, 178, 135, 0.12);
  color: #4fd6ab;
}

.closing-badge.todo {
  border: 1px solid rgba(208, 36, 61, 0.5);
  background: var(--red-soft);
  color: var(--red-bright);
}

.closing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.closing-stats > div {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 8px 10px;
}

.closing-stats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.closing-stats strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}

.day-history {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 8px 10px;
}

.day-history summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.day-history-row {
  display: grid;
  grid-template-columns: 48px 130px 90px 1fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
  font-size: 12px;
}

.day-history-row span:nth-child(3) {
  text-align: right;
  font-weight: 800;
}

.day-history-empty {
  margin-top: 10px;
  font-size: 12px;
}

.closing-card .visitor-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.closing-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 10px;
  margin-top: 10px;
}

.closing-form label {
  display: grid;
  gap: 5px;
}

.closing-form label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.closing-form input {
  min-height: 38px;
  padding: 0 10px;
}

.closing-save {
  min-height: 38px;
}

@media (max-width: 980px) {
  .closing-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .closing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-history-row {
    grid-template-columns: 44px 1fr 80px;
  }

  .day-history-row span:nth-child(4) {
    grid-column: 1 / -1;
    color: var(--muted);
  }
}

.ticket-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(216, 179, 108, 0.35);
  border-radius: 6px;
  background: rgba(216, 179, 108, 0.08);
  color: var(--ink);
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}

.ticket-strip b {
  font-size: 18px;
  color: #e8cd90;
}

.tour-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 12px;
  margin-bottom: 10px;
}

.tour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-state {
  flex: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.tour-state.on {
  border: 1px solid rgba(208, 36, 61, 0.5);
  background: var(--red-soft);
  color: var(--red-bright);
}

.tour-state.off {
  border: 1px solid var(--line);
  background: rgba(242, 241, 244, 0.06);
  color: var(--muted);
}

.tour-event {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.tour-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.tour-stats > div {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  padding: 8px 10px;
}

.tour-stats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.tour-stats strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
}

.mobile-auth {
  display: grid;
  align-content: center;
  gap: 14px;
}

.google-slot {
  display: grid;
  justify-content: center;
  margin-top: 12px;
  min-height: 0;
}

.google-slot:empty {
  display: none;
}

.mobile-full-button {
  width: 100%;
  margin-top: 14px;
}

.my-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}

.player-card {
  padding: 16px;
}

.chart {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.table-wrap {
  margin-top: 14px;
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.danger-zone {
  margin-top: 16px;
  border: 1px solid rgba(225, 75, 94, 0.4);
  border-radius: 4px;
  padding: 12px;
  background: rgba(225, 75, 94, 0.06);
}

.danger-zone summary {
  color: var(--danger);
  cursor: pointer;
  font-weight: 800;
}

.login-backdrop,
.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  background: rgba(5, 4, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 20px;
}

.login-backdrop.active,
.confirm-backdrop.active {
  display: grid;
}

.modal {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.modal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--blue));
}

.confirm-body {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.confirm-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.confirm-row span {
  color: var(--muted);
  font-weight: 700;
}

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--blue-soft);
  color: var(--blue-bright);
  font-size: 16px;
  padding: 0 8px;
  vertical-align: middle;
}

.balance-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.balance-item {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.balance-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.balance-item strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-field > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-amounts .ghost {
  min-height: 38px;
  padding: 0 12px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  border: 1px solid var(--red);
  border-radius: 4px;
  background: #131118;
  color: var(--ink);
  font-weight: 700;
  padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 24px var(--primary-glow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 48px));
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #f6f4ef;
  font-size: 20px;
  flex: none;
}

.avatar-img {
  object-fit: cover;
  border: 1px solid var(--line);
}

.avatar-initial {
  background: linear-gradient(135deg, #dd3049, #a01830);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.avatar-lg {
  width: 46px;
  height: 46px;
  font-size: 25px;
}

.avatar-guest {
  background: var(--raised);
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
}

.visitor-pages {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.visitor-pages::-webkit-scrollbar {
  display: none;
}

.visitor-page {
  flex: none;
  width: 100%;
  scroll-snap-align: start;
  display: grid;
  gap: 4px;
  align-content: start;
}

.page-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.history-row {
  grid-template-columns: 1fr;
}

.delta-plus {
  color: var(--primary);
}

.delta-minus {
  color: var(--blue-bright);
}

.visitor-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.visitor-names {
  min-width: 0;
}

.visitor-names strong,
.visitor-names small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visitor-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.small-btn {
  min-height: 34px;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 12px;
}

.checkout-btn {
  border-color: rgba(225, 75, 94, 0.5);
  color: var(--danger);
}

.checkout-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.left-badge {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mobile-member-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  min-width: 0;
}

.mobile-member-name .avatar {
  font-size: 25px;
  letter-spacing: 0;
  overflow: hidden;
}

.mobile-member-name .avatar-initial {
  background: rgba(242, 241, 244, 0.16);
  color: #fff;
  font-size: 18px;
}

.mobile-member-name h3 {
  margin-top: 0;
}

.mobile-visitor-grid {
  display: grid;
  gap: 10px;
}

.mobile-visitor-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 12px;
}

.mobile-visitor-card h4 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.1em;
}

.mobile-visitor-card h4 b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #f6f4ef;
  color: #14121a;
  font-size: 12px;
  padding: 0 6px;
  margin-left: 6px;
}

.mobile-visitor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  padding: 7px 8px;
}

.mobile-visitor-row.is-me {
  background: var(--red-soft);
}

.mobile-visitor-row .avatar {
  width: 32px;
  height: 32px;
  font-size: 17px;
}

.mobile-visitor-row .avatar-initial {
  background: linear-gradient(135deg, #dd3049, #a01830);
  color: #fff;
  font-size: 14px;
}

.mobile-refresh {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.upload-row input[type="file"] {
  max-width: 340px;
  padding: 8px 12px;
}

.event-calendar-preview {
  margin-top: 14px;
}

.calendar-admin-img {
  display: block;
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.promo-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.promo-admin-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 10px;
}

.promo-admin-item img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

.promo-admin-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.store-tabs {
  display: flex;
  gap: 6px;
}

.store-tab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.store-tab.tab-spade.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-bright);
}

.store-tab.tab-heart.active {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red-bright);
}

.calendar-img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.promo-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 6px;
}

.promo-carousel::-webkit-scrollbar {
  display: none;
}

.promo-carousel img {
  display: block;
  flex: none;
  width: min(300px, 84%);
  aspect-ratio: 210 / 297;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  scroll-snap-align: center;
}

.promo-carousel.single {
  justify-content: center;
}

.guide-preview {
  margin-top: 14px;
}

.guide-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.guide-row small {
  display: block;
  margin-top: 4px;
}

a.guide-open {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

a.guide-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.profile-field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.profile-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.icon-field {
  margin-top: 16px;
  margin-bottom: 0;
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f6f4ef;
  font-size: 22px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.icon-btn.selected {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

.icon-btn.icon-reset {
  width: auto;
  padding: 0 12px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(10, 9, 13, 0.96);
    padding: 14px;
  }

  .brand {
    margin-bottom: 12px;
  }

  .nav {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
  }

  .nav-button {
    text-align: center;
    padding: 0 8px;
  }

  .nav-button.active {
    box-shadow: none;
  }

  .main {
    padding: 18px;
  }

  .topbar,
  .panel-head,
  .session {
    align-items: stretch;
    flex-direction: column;
  }

  .grid.two,
  .metrics,
  .form-grid,
  .asset-grid,
  .my-stats,
  .my-layout {
    grid-template-columns: 1fr;
  }

  .field.wide {
    grid-column: auto;
  }

  .search {
    max-width: none;
  }

  .balance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== パネルモード(iPad分割画面・縦長コンパクト表示) ===== */
body.panel-mode .app {
  grid-template-columns: 1fr;
}

body.panel-mode .sidebar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 9, 13, 0.97);
  padding: 8px 10px;
}

body.panel-mode .brand {
  margin: 0;
  flex: none;
}

body.panel-mode .brand > div {
  display: none;
}

body.panel-mode .brand-mark {
  width: 32px;
  height: 32px;
  font-size: 16px;
  box-shadow: none;
}

body.panel-mode .nav {
  display: flex;
  flex: 1;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.panel-mode .nav::-webkit-scrollbar {
  display: none;
}

body.panel-mode .nav-button {
  flex: none;
  min-height: 38px;
  padding: 0 10px;
  font-size: 12px;
  text-align: center;
  box-shadow: none;
}

body.panel-mode .main {
  padding: 10px;
}

body.panel-mode .topbar {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

body.panel-mode .topbar > div:first-child {
  display: none;
}

body.panel-mode .session {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

body.panel-mode #sessionBadge,
body.panel-mode .session .ghost {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

body.panel-mode .view.active {
  gap: 10px;
}

body.panel-mode .panel {
  padding: 12px;
}

body.panel-mode h2 {
  font-size: 16px;
}

body.panel-mode .panel-head,
body.panel-mode .grid.two,
body.panel-mode .form-grid,
body.panel-mode .asset-grid,
body.panel-mode .my-stats,
body.panel-mode .my-layout {
  grid-template-columns: 1fr;
}

body.panel-mode .panel-head {
  flex-direction: column;
  align-items: stretch;
}

body.panel-mode .field.wide {
  grid-column: auto;
}

body.panel-mode .metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.panel-mode .metric {
  padding: 10px;
}

body.panel-mode .metric strong {
  font-size: 22px;
}

body.panel-mode .balance-strip,
body.panel-mode .closing-stats,
body.panel-mode .closing-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.panel-mode .search {
  max-width: none;
}

body.panel-mode table {
  min-width: 640px;
}

body.panel-mode .quick-amounts .ghost {
  min-height: 42px;
  padding: 0 14px;
}

body.panel-mode .visitor-actions .small-btn {
  min-height: 40px;
}

/* 来店スタンプ帳（月間来店バッジ） */
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.stamp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}
.stamp-cell small {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.stamp-cell span {
  font-size: 17px;
  line-height: 1.1;
}
.stamp-earned {
  border-color: rgba(214, 178, 85, 0.5);
  background: rgba(214, 178, 85, 0.09);
}
.stamp-now {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 1px var(--blue-soft) inset;
}
.stamp-dual {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
}
.stamp-progress {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* TPランキング1位のお祝い演出 */
.champ-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(214, 178, 85, 0.3), rgba(14, 13, 17, 0.92) 62%),
    rgba(14, 13, 17, 0.92);
  animation: champFadeIn 0.35s ease-out;
  cursor: pointer;
}
.champ-overlay.champ-out {
  animation: champFadeOut 0.45s ease-in forwards;
}
.champ-rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    rgba(214, 178, 85, 0.16) 0deg 14deg, transparent 14deg 40deg,
    rgba(214, 178, 85, 0.16) 40deg 54deg, transparent 54deg 80deg,
    rgba(214, 178, 85, 0.16) 80deg 94deg, transparent 94deg 120deg,
    rgba(214, 178, 85, 0.16) 120deg 134deg, transparent 134deg 160deg,
    rgba(214, 178, 85, 0.16) 160deg 174deg, transparent 174deg 200deg,
    rgba(214, 178, 85, 0.16) 200deg 214deg, transparent 214deg 240deg,
    rgba(214, 178, 85, 0.16) 240deg 254deg, transparent 254deg 280deg,
    rgba(214, 178, 85, 0.16) 280deg 294deg, transparent 294deg 320deg,
    rgba(214, 178, 85, 0.16) 320deg 334deg, transparent 334deg 360deg
  );
  animation: champSpin 14s linear infinite;
}
.champ-confetti {
  position: absolute;
  top: -8vh;
  font-style: normal;
  line-height: 1;
  animation-name: champFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.champ-confetti-gold { color: #d6b255; }
.champ-confetti-red { color: var(--red-bright); }
.champ-body {
  position: relative;
  text-align: center;
  padding: 26px 34px;
  animation: champPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.champ-crown {
  font-size: 64px;
  line-height: 1;
  animation: champBob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(214, 178, 85, 0.45));
}
.champ-eyebrow {
  margin: 14px 0 0;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.42em;
  color: var(--muted);
}
.champ-rank {
  margin: 2px 0 0;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 64px;
  line-height: 1.1;
  background: linear-gradient(120deg, #9a7a2e 0%, #f3dc8f 30%, #d6b255 50%, #f7e8b0 70%, #9a7a2e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: champShine 2.2s linear infinite;
}
.champ-stores {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.champ-store {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
}
.champ-line {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.champ-tap {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--muted);
}
@keyframes champFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes champFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes champSpin { to { transform: rotate(360deg); } }
@keyframes champFall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(120vh) rotate(420deg); }
}
@keyframes champPop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes champBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}
@keyframes champShine { to { background-position: 220% center; } }

/* トーナメント優勝演出（TP1位演出の亜種・赤金基調） */
.winner-overlay {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(208, 36, 61, 0.34), rgba(14, 13, 17, 0.93) 62%),
    rgba(14, 13, 17, 0.93);
}
.winner-rays {
  background: conic-gradient(
    from 8deg,
    rgba(225, 75, 94, 0.15) 0deg 14deg, transparent 14deg 40deg,
    rgba(214, 178, 85, 0.14) 40deg 54deg, transparent 54deg 80deg,
    rgba(225, 75, 94, 0.15) 80deg 94deg, transparent 94deg 120deg,
    rgba(214, 178, 85, 0.14) 120deg 134deg, transparent 134deg 160deg,
    rgba(225, 75, 94, 0.15) 160deg 174deg, transparent 174deg 200deg,
    rgba(214, 178, 85, 0.14) 200deg 214deg, transparent 214deg 240deg,
    rgba(225, 75, 94, 0.15) 240deg 254deg, transparent 254deg 280deg,
    rgba(214, 178, 85, 0.14) 280deg 294deg, transparent 294deg 320deg,
    rgba(225, 75, 94, 0.15) 320deg 334deg, transparent 334deg 360deg
  );
  animation-duration: 18s;
}
.winner-confetti-white { color: #f2f1f4; }
.winner-ring {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(214, 178, 85, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: winnerRing 1.8s ease-out infinite;
  pointer-events: none;
}
.winner-ring-2 {
  border-color: rgba(225, 75, 94, 0.7);
  animation-delay: 0.9s;
}
@keyframes winnerRing {
  from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(46); opacity: 0; }
}
.winner-trophy {
  font-size: 68px;
  line-height: 1;
  animation: winnerRaise 1s cubic-bezier(0.2, 1.7, 0.4, 1);
  filter: drop-shadow(0 6px 20px rgba(225, 75, 94, 0.45));
}
@keyframes winnerRaise {
  0% { transform: translateY(26px) scale(0.4); opacity: 0; }
  60% { transform: translateY(-10px) scale(1.12); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.winner-title {
  font-size: 46px;
  letter-spacing: 0.06em;
  background: linear-gradient(120deg, #8f1626 0%, #e14b5e 26%, #f3dc8f 50%, #e14b5e 74%, #8f1626 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.winner-tour {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.winner-date {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* 演出強化（フラッシュ・シェイク・スパーク・花火）＋2〜5位応援演出 */
.champ-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: champFlash 0.55s ease-out;
  pointer-events: none;
}
@keyframes champFlash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
.champ-shake {
  animation: champFadeIn 0.35s ease-out, champShake 0.7s ease-in-out 0.08s;
}
@keyframes champShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-8px, 5px); }
  30% { transform: translate(7px, -6px); }
  45% { transform: translate(-6px, -4px); }
  60% { transform: translate(6px, 5px); }
  75% { transform: translate(-4px, 2px); }
  90% { transform: translate(2px, -2px); }
}
.champ-spark {
  position: absolute;
  bottom: -6vh;
  color: #f7e8b0;
  font-style: normal;
  line-height: 1;
  animation-name: champRise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  text-shadow: 0 0 10px rgba(243, 220, 143, 0.8);
  pointer-events: none;
}
@keyframes champRise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-115vh) scale(1.3); opacity: 0; }
}
.champ-boom {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 5px solid rgba(243, 220, 143, 0.85);
  border-radius: 50%;
  transform: scale(0);
  animation: champBoom 1.15s ease-out infinite;
  pointer-events: none;
}
@keyframes champBoom {
  0% { transform: scale(0); opacity: 1; border-width: 6px; }
  80% { opacity: 0.35; }
  100% { transform: scale(24); opacity: 0; border-width: 1px; }
}
.champ-crown { font-size: 82px; }
.champ-rank {
  font-size: 86px;
  animation: champShine 2.2s linear infinite, champPulse 1.1s ease-in-out infinite;
}
@keyframes champPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(214, 178, 85, 0.35)); }
  50% { filter: drop-shadow(0 0 28px rgba(243, 220, 143, 0.95)); }
}
.winner-trophy { font-size: 88px; }
.winner-title {
  font-size: 58px;
  animation: champShine 2s linear infinite, winnerPulse 1s ease-in-out infinite;
}
@keyframes winnerPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(225, 75, 94, 0.35)); }
  50% { filter: drop-shadow(0 0 30px rgba(225, 75, 94, 0.95)); }
}
.cheer-overlay {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(62, 109, 240, 0.32), rgba(14, 13, 17, 0.9) 62%),
    rgba(14, 13, 17, 0.9);
}
.cheer-confetti-blue { color: #8fb0ff; }
.cheer-fire {
  font-size: 58px;
  line-height: 1;
  animation: cheerFlicker 0.45s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 16px rgba(225, 75, 94, 0.4));
}
@keyframes cheerFlicker {
  from { transform: scale(1) rotate(-4deg); }
  to { transform: scale(1.16) rotate(4deg); }
}
.cheer-rank {
  font-size: 64px;
  background: linear-gradient(120deg, #4a5d9e 0%, #cfd8f5 30%, #8fb0ff 50%, #e8eeff 70%, #4a5d9e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: champShine 2.2s linear infinite;
}
.cheer-gap {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.cheer-line {
  margin: 8px 0 0;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--red-bright);
  animation: cheerJump 0.65s ease-in-out infinite;
}
@keyframes cheerJump {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.1); }
}

/* 初来店店舗の選択モーダル */
.fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 13, 17, 0.9);
  animation: champFadeIn 0.3s ease-out;
}
.fs-modal {
  width: min(380px, 100%);
  padding: 26px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fs-modal h3 {
  margin: 10px 0 0;
  font-size: 18px;
}
.fs-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.fs-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.fs-btn {
  padding: 20px 8px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  border: 1px solid transparent;
}
.fs-btn-spade {
  background: linear-gradient(135deg, #2c4fb8, var(--blue));
  border-color: var(--blue-bright);
}
.fs-btn-heart {
  background: linear-gradient(135deg, #8f1626, var(--red));
  border-color: var(--red-bright);
}
.fs-btn:active { transform: scale(0.97); }

/* 顧客分析パネル（スタッフコンソール） */
.insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.insight-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.insight-row span {
  font-size: 12px;
  color: var(--muted);
}
.insight-row strong {
  font-size: 22px;
  font-family: "Cinzel", "Shippori Mincho B1", serif;
}
.insight-row small {
  font-size: 11px;
  color: var(--muted);
}

/* 顧客ノート（スタッフ専用） */
.customer-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.note-box {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.note-box summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.note-box textarea {
  width: 100%;
  margin-top: 8px;
  resize: vertical;
}
.note-box button {
  margin-top: 6px;
}

/* 顧客属性セレクト（スタッフ専用） */
.attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.attr-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.attr-grid span {
  font-size: 11px;
  color: var(--muted);
}
.insight-attr small {
  font-size: 12px;
  color: var(--ink);
}

/* 顧客ノート設定ビュー */
.notes-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.notes-controls input {
  flex: 1 1 220px;
}
#notesAttrFilters {
  display: contents;
}
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
@media (min-width: 1020px) {
  .note-row {
    grid-template-columns: 240px 1fr 280px;
    align-items: start;
  }
}
.note-row-done {
  border-color: rgba(214, 178, 85, 0.35);
}
.note-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.note-row-head strong {
  display: block;
  font-size: 14px;
}
.note-row-head small {
  color: var(--muted);
  font-size: 11px;
}
.note-attr-grid {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.note-row-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.note-row-note textarea {
  resize: vertical;
}
body.panel-mode .note-row {
  grid-template-columns: 1fr;
}

/* 管理者分析コンソール */
.admin-lock {
  max-width: 420px;
  margin: 20px auto;
  text-align: center;
  padding: 26px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.admin-lock-form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.admin-lock-form input {
  flex: 1;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.admin-kpis {
  margin-bottom: 6px;
}
.admin-section {
  margin-top: 20px;
}
.admin-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.trend-month {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.trend-month h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.hbar {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.hbar-label {
  font-size: 11px;
  color: var(--muted);
}
.hbar-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 3px;
}
.hbar b {
  font-size: 12px;
  text-align: right;
}
.table-scroll {
  overflow-x: auto;
}
.cohort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 460px;
}
.cohort-table th,
.cohort-table td {
  border: 1px solid var(--line);
  padding: 7px 9px;
  text-align: center;
}
.cohort-table tbody th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
}
.cohort-na {
  color: var(--muted);
}
.admin-attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.admin-attr-table {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.admin-attr-table h4 {
  margin: 0 0 8px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.admin-attr-table h4 small {
  color: var(--muted);
  font-weight: 400;
}
.admin-attr-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-attr-table th,
.admin-attr-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.admin-attr-table tbody th,
.admin-attr-table thead th:first-child {
  text-align: left;
  font-weight: 500;
}
.admin-attr-table thead th {
  color: var(--muted);
  font-weight: 500;
}

/* 初来店演出・バッジ */
.first-overlay {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(243, 220, 143, 0.26), rgba(14, 13, 17, 0.92) 62%),
    rgba(14, 13, 17, 0.92);
}
.first-emoji {
  font-size: 80px;
  line-height: 1;
  animation: winnerRaise 0.9s cubic-bezier(0.2, 1.7, 0.4, 1), champBob 1.6s ease-in-out 1s infinite;
  filter: drop-shadow(0 6px 20px rgba(243, 220, 143, 0.5));
}
.first-title {
  font-size: 52px;
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, #9a7a2e 0%, #ffffff 30%, #f3dc8f 55%, #ffffff 75%, #9a7a2e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.first-badge {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(214, 178, 85, 0.1);
  border: 1px solid rgba(214, 178, 85, 0.45);
  border-radius: 6px;
}

/* 管理者コンソールの店舗切替タブ */
.admin-store-tabs {
  display: flex;
  gap: 6px;
  margin-right: auto;
}

/* 来店中リストのゲスト表示トグル */
.anon-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  vertical-align: middle;
}
.visitor-actions .anon-on {
  border-color: rgba(214, 178, 85, 0.6);
  color: #d6b255;
}