:root {
  --bg: #fbeff3;
  --surface: #fffafb;
  --surface-2: #f9d4dc;
  --text: #3a2b33;
  --muted: #7d6972;
  --line: #efd1da;
  --accent: #d94f8f;
  --accent-dark: #a8326a;
  --accent-soft: #fcccd9;
  --success: #4d7b65;
  --warning: #b47a32;
  --danger: #a95050;
  --accent-rgb: 217, 79, 143;
  --shadow-rgb: 96, 50, 72;
  --page-surface: #fff7fa;
  --page-surface-rgb: 255, 247, 250;
  --input: #fff;
  --sidebar: #52283d;
  --sidebar-text: #fff4f8;
  --sidebar-muted: #e7bccc;
  --avatar-from: #f7abc8;
  --avatar-to: #fff0f5;
  --hero-from: #e36b9f;
  --hero-to: #b93e77;
  --hover-border: #e39bb9;
  --note-bg: #fbe3eb;
  --note-text: #724055;
  --full-bg: #f7e0ea;
  --shadow: 0 12px 36px rgba(var(--shadow-rgb), 0.10);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* Member access waiting and home-screen guidance; scoped to these surfaces. */
.auth-shell.portal-waiting-shell { padding:clamp(20px,4vw,48px) 16px; }
.portal-waiting-card { width:min(100%,800px); min-width:0; padding:clamp(20px,4vw,40px); display:grid; gap:24px; }
.portal-waiting-intro h1 { margin:0 0 14px; font-size:clamp(1.5rem,3vw,2rem); line-height:1.5; overflow-wrap:anywhere; }
.portal-waiting-intro p { margin:0; color:var(--muted); line-height:1.8; }
.portal-install-guide { min-width:0; padding:24px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--page-surface); }
.portal-install-important { margin:0 0 10px; color:var(--accent-dark); font-size:1rem; font-weight:800; line-height:1.5; }
.portal-install-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.portal-install-heading .ui-icon { flex:none; width:24px; height:24px; margin-top:3px; color:var(--accent-dark); }
.portal-install-heading h2 { margin:0; font-size:1.15rem; line-height:1.5; }
.portal-install-heading p { margin:6px 0 0; color:var(--muted); line-height:1.7; }
.portal-install-devices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.portal-install-device { min-width:0; }
.portal-install-device h3 { margin:0 0 10px; font-size:1rem; }
.portal-install-device ol { margin:0; padding-left:1.45em; display:grid; gap:9px; line-height:1.7; }
.portal-install-device li { padding-left:2px; overflow-wrap:anywhere; }
.portal-install-note { margin:18px 0 12px; color:var(--muted); font-size:.9rem; line-height:1.7; }
.portal-install-manual { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; line-height:1.7; }
.portal-install-actions, .portal-waiting-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.portal-install-actions { justify-content:space-between; margin-top:18px; }
.portal-waiting-actions .btn { min-height:46px; }
.portal-waiting-status { margin:0; min-height:1.5em; color:var(--muted); line-height:1.7; }
.portal-install-guide.portal-home-guide { margin-bottom:24px; border-color:var(--accent-soft); }
.portal-guide-again { width:100%; background:none; border:0; border-bottom:1px solid var(--line); color:inherit; text-align:left; }
.member-access-review .member-access-identity-value { min-width:0; overflow-wrap:anywhere; }
.member-access-review .form-actions { flex-wrap:wrap; }
.member-access-review textarea { max-width:100%; }
@media (max-width:600px) {
  .portal-waiting-card { gap:20px; }
  .portal-install-guide { padding:18px 16px; }
  .portal-install-devices { grid-template-columns:minmax(0,1fr); gap:22px; }
  .portal-waiting-actions { align-items:stretch; }
  .portal-waiting-actions .btn { flex:1 1 180px; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* shared */
.page-shell { min-height: 100vh; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.card {
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.section-title h2 { margin: 0; font-size: 1.22rem; }
.section-title p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 6px 10px; font-size: .78rem;
  background: var(--surface-2); color: var(--accent-dark); font-weight: 700;
}
.btn {
  border: 0; border-radius: 14px; padding: 12px 16px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(var(--accent-rgb),.22); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--surface-2); color: var(--accent-dark); }
.btn-danger { background:#fff0f0; color:var(--danger); border:1px solid #e7c2c2; box-shadow:none; }
.btn-danger:hover { background:#f7e4e4; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 14px;
  background: var(--surface); color: var(--text); display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(var(--shadow-rgb),.08);
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--avatar-from), var(--avatar-to)); color: var(--accent-dark); font-weight: 800;
  flex: 0 0 auto;
}
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); }
.brand-logo { display:block; width:auto; max-width:100%; height:auto; object-fit:contain; }
.badge-success { color: var(--success); background: #e7f1eb; }
.badge-warning { color: #925d1c; background: #f6ead9; }
.badge-danger { color: var(--danger); background: #f7e4e4; }

/* landing */
.landing {
  min-height: 100vh;
  padding: 42px 0;
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb),.13), transparent 32%),
    radial-gradient(circle at bottom left, rgba(var(--accent-rgb),.09), transparent 34%),
    var(--bg);
}
.brand-lockup { text-align: center; margin-bottom: 32px; }
.landing-brand-logo { width:min(100%,320px); margin:0 auto 18px; }
.brand-lockup p { color: var(--muted); max-width: 620px; margin: 10px auto 0; }
.role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.role-card { padding: 28px; position: relative; overflow: hidden; }
.role-card::after {
  content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%;
  right: -55px; top: -55px; background: rgba(var(--accent-rgb),.08);
}
.role-icon {
  width: 56px; height: 56px; border-radius: 18px; background: var(--surface-2);
  display: grid; place-items: center; font-size: 25px; margin-bottom: 18px;
}
.role-card h2 { margin: 0 0 8px; font-size: 1.35rem; }
.role-card p { margin: 0 0 22px; color: var(--muted); min-height: 48px; }
.role-features { display: grid; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; }
.role-features li { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.role-features li::before { content: "✓"; color: var(--success); font-weight: 800; }
.landing-note { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 20px; }

/* admin */
.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
  background: var(--sidebar); color: var(--sidebar-text); padding: 24px 18px; position: sticky; top: 0; height: 100vh; overflow-y:auto;
}
.sidebar-brand { display:grid; justify-items:start; gap:8px; padding:2px 8px 24px; }
.sidebar-brand-logo { width:min(100%,220px); }
.sidebar-brand small { color: var(--sidebar-muted); }
.nav-list { display: grid; gap: 5px; }
.nav-item {
  border: 0; width: 100%; text-align: left; color: var(--sidebar-muted); background: transparent;
  border-radius: 14px; padding: 10px 13px; display: flex; gap: 11px; align-items: center;
}
.nav-item:hover, .nav-item.active { color:#fff; background: rgba(255,255,255,.10); }
.sidebar-footer { margin-top:18px; }
.profile-mini { display:flex; align-items:center; gap:10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.07); }
.profile-mini small { color: var(--sidebar-muted); }
.admin-main { min-width: 0; }
.admin-topbar {
  height: 74px; padding: 0 28px; display: flex; align-items:center; justify-content:space-between; gap:18px;
  position: sticky; top: 0; z-index: 20; background: rgba(var(--page-surface-rgb),.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--accent-rgb),.08);
}
.admin-topbar h1 { margin:0; font-size:1.2rem; }
.admin-topbar .sub { font-size:.78rem; color:var(--muted); }
.admin-content { padding: 28px; max-width: 1220px; }
.mobile-menu { display:none; }
.top-actions { display:flex; gap:10px; align-items:center; }

.stats-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { padding:19px; }
.stat-card .label { color:var(--muted); font-size:.84rem; }
.stat-card .value { font-size:1.7rem; font-weight:800; letter-spacing:-.03em; margin:3px 0; }
.stat-card .hint { font-size:.78rem; color:var(--success); }

.admin-grid { display:grid; grid-template-columns: 1.5fr .9fr; gap:20px; }
.panel { padding:22px; }
.schedule-list { display:grid; gap:12px; }
.schedule-row {
  width:100%; text-align:left; border:1px solid var(--line); background:var(--input); border-radius:18px; padding:16px;
  display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:14px;
}
.schedule-row:hover { border-color:var(--hover-border); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--shadow-rgb),.08); }
.time { font-size:1.05rem; font-weight:800; }
.lesson-name { font-weight:800; }
.lesson-meta { color:var(--muted); font-size:.82rem; margin-top:3px; }
.capacity { text-align:right; }
.capacity strong { display:block; }
.capacity small { color:var(--muted); }
.progress { width:84px; height:6px; background:#efe7e2; border-radius:999px; margin-top:6px; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--accent); border-radius:inherit; }

.quick-list { display:grid; gap:11px; }
.quick-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.quick-item:last-child { border-bottom:0; }
.quick-item .grow { flex:1; }
.quick-item strong { font-size:.9rem; }
.quick-item small { display:block; color:var(--muted); margin-top:2px; }

/* calendar / tabs */
.date-strip { display:flex; gap:8px; overflow:auto; padding-bottom:4px; scrollbar-width:none; }
.date-strip::-webkit-scrollbar { display:none; }
.date-chip { min-width:66px; border:1px solid var(--line); border-radius:16px; background:var(--input); padding:10px 8px; text-align:center; }
.date-chip small { display:block; color:var(--muted); }
.date-chip strong { font-size:1.08rem; }
.date-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.date-chip.active small { color:#f8e8e1; }
.toolbar { display:flex; justify-content:space-between; gap:12px; align-items:center; margin: 0 0 18px; flex-wrap:wrap; }
.searchbox { display:flex; gap:8px; align-items:center; border:1px solid var(--line); background:var(--input); padding:10px 12px; border-radius:14px; min-width:260px; }
.searchbox input { border:0; outline:0; background:transparent; min-width:0; width:100%; }

.member-list { display:grid; gap:10px; }
.member-row {
  width:100%; background:var(--input); border:1px solid var(--line); border-radius:16px; padding:13px 14px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; text-align:left;
}
.member-row:hover { border-color:var(--hover-border); }
.member-row .name { font-weight:800; }
.member-row .desc { font-size:.8rem; color:var(--muted); margin-top:2px; }
.member-row .arrow { color:var(--muted); }

/* modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(45,31,26,.48); display:grid; place-items:center; padding:18px; z-index:100; }
.modal { width:min(620px,100%); max-height:88vh; overflow:auto; background:var(--surface); border-radius:26px; box-shadow:0 24px 80px rgba(0,0,0,.26); }
.modal-head { padding:20px 22px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2; }
.modal-head h3 { margin:0; }
.modal-head p { margin:3px 0 0; color:var(--muted); font-size:.84rem; }
.modal-body { padding:20px 22px 24px; }
.close-btn { border:0; width:38px; height:38px; border-radius:12px; background:var(--surface-2); color:var(--text); font-size:20px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
.detail-box { padding:14px; border:1px solid var(--line); border-radius:15px; }
.detail-box small { display:block; color:var(--muted); margin-bottom:3px; }
.detail-box strong { font-size:.94rem; }
#emailSenderSummary .detail-box { min-width:0; overflow-wrap:anywhere; }
#emailDeliveryList strong, #emailDeliveryList small { overflow-wrap:anywhere; }
.history-list { margin:0; padding:0; list-style:none; }
.history-list li { padding:11px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; }
.history-list li:last-child { border-bottom:0; }
.note-box { margin-top:12px; padding:14px; border-radius:14px; background:var(--note-bg); color:var(--note-text); }

/* member page */
.member-app { min-height:100vh; max-width:720px; margin:0 auto; background:var(--page-surface); box-shadow:0 0 60px rgba(var(--shadow-rgb),.06); padding-bottom:88px; }
.member-header { padding:20px 18px 10px; position:sticky; top:0; z-index:20; background:rgba(var(--page-surface-rgb),.94); backdrop-filter:blur(14px); }
.member-header-row { display:flex; justify-content:space-between; align-items:center; }
.member-brand { min-width:0; flex:1 1 auto; }
.member-brand-logo { width:min(100%,270px); }
.member-header-row { gap:12px; }
.member-logout { flex:0 0 auto; }
.member-header p { margin:2px 0 0; color:var(--muted); font-size:.8rem; }
.admin-preview-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; padding:16px 18px; border:1px solid #d9b44a; border-radius:var(--radius-md); background:#fff8dc; color:#544316; }
.admin-preview-banner div { display:grid; gap:4px; }
.admin-preview-banner strong { font-size:1rem; }
.admin-preview-banner span { line-height:1.65; }
.admin-preview-banner .btn { flex:0 0 auto; white-space:nowrap; }
.member-app.is-admin-preview .member-write-only { display:none; }
@media (max-width: 540px) {
  .admin-preview-banner { align-items:stretch; flex-direction:column; }
  .admin-preview-banner .btn { width:100%; }
}
.member-content { padding:12px 18px 24px; }
.member-hero {
  padding:22px; border-radius:24px; color:#fff; margin-bottom:20px;
  background:linear-gradient(145deg,var(--hero-from),var(--hero-to)); box-shadow:0 15px 35px rgba(var(--accent-rgb),.25);
}
.member-hero small { opacity:.85; }
.member-hero h2 { margin:5px 0 3px; font-size:1.45rem; }
.member-hero .hero-meta { opacity:.9; font-size:.88rem; }
.hero-actions { display:flex; gap:8px; margin-top:16px; }
.hero-actions .btn { padding:10px 12px; font-size:.84rem; }
.hero-actions .btn-secondary { background:rgba(255,255,255,.16); color:#fff; }

.upcoming-reservation-list { display:grid; gap:12px; margin-bottom:24px; }
.upcoming-reservation-card { min-width:0; padding:18px; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
.upcoming-reservation-details { min-width:0; }
.upcoming-reservation-details time { color:var(--accent-dark); font-size:.88rem; font-weight:800; line-height:1.55; overflow-wrap:anywhere; }
.upcoming-reservation-details h3 { margin:4px 0 5px; font-size:1.08rem; line-height:1.5; overflow-wrap:anywhere; }
.upcoming-reservation-details p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.55; overflow-wrap:anywhere; }
.upcoming-reservation-participants { margin-top:12px; min-width:0; }
.upcoming-reservation-participants ul { margin:6px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.upcoming-reservation-participants li { min-width:0; padding:6px 9px; border-radius:9px; background:var(--surface-2); color:var(--accent-dark); font-size:.82rem; line-height:1.55; overflow-wrap:anywhere; }
.reservation-status { display:inline-flex; margin-top:10px; border-radius:999px; padding:5px 9px; background:var(--surface-2); color:var(--accent-dark); font-size:.74rem; font-weight:800; }
.upcoming-reservation-actions { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:stretch; }
.upcoming-reservation-actions .btn { width:100%; min-width:0; max-width:100%; min-height:44px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.upcoming-reservation-actions > .btn:only-child { grid-column:1 / -1; }
.upcoming-reservation-actions > .pill { grid-column:1 / -1; min-width:0; max-width:100%; line-height:1.55; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.upcoming-reservation-actions .participant-cancel-actions { grid-column:1 / -1; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding-top:12px; border-top:1px solid var(--line); }
.upcoming-reservation-actions .participant-cancel-actions > span { grid-column:1 / -1; line-height:1.55; overflow-wrap:anywhere; }
.upcoming-reservation-list .empty-state { display:grid; justify-items:center; gap:14px; }

.lesson-card { padding:18px; margin-bottom:12px; display:grid; grid-template-columns:minmax(0,1fr) 148px; gap:18px; align-items:center; }
.lesson-details { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.lesson-time { font-weight:800; color:var(--accent-dark); }
.lesson-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:4px 0; }
.lesson-card h3 { margin:0; font-size:1.06rem; }
.lesson-card p { margin:0; color:var(--muted); font-size:.82rem; }
.remaining { margin-top:14px; font-size:.8rem; color:var(--muted); }
.remaining strong { color:var(--accent-dark); }
.lesson-action { display:flex; align-items:center; justify-content:center; }
.lesson-status { min-width:68px; min-height:30px; padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:.76rem; font-weight:800; white-space:nowrap; }
.lesson-status.is-open { color:var(--accent-dark); background:var(--surface-2); }
.lesson-status.is-full { color:#925d1c; background:#f6ead9; }
.lesson-book-btn { width:100%; min-height:52px; border-radius:14px; padding:12px 14px; }
.lesson-book-btn.is-full { background:var(--full-bg); color:var(--accent-dark); box-shadow:none; cursor:not-allowed; }
.member-bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(720px,100%);
  background:rgba(var(--page-surface-rgb),.97); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); z-index:30; padding:8px 8px max(8px,env(safe-area-inset-bottom));
}
.bottom-tab { border:0; background:transparent; color:var(--muted); padding:7px; display:grid; justify-items:center; gap:2px; font-size:.72rem; }
.bottom-tab span { font-size:20px; line-height:1; }
.bottom-tab.active { color:var(--accent); font-weight:800; }
.nav-badge { display:inline-flex; min-width:18px; height:18px; align-items:center; justify-content:center; margin-left:2px; padding:0 5px; border-radius:999px; background:#c9535e; color:#fff; font-size:.65rem; line-height:1; }

.member-chat-card { padding:0; overflow:hidden; }
.member-chat-thread { min-height:320px; max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:18px; background:var(--page-surface); }
.member-chat-message { width:min(86%,520px); padding:12px 14px; border-radius:17px; border:1px solid var(--line); box-shadow:0 5px 16px rgba(54,39,33,.05); }
.member-chat-message.studio { align-self:flex-start; background:var(--surface); border-bottom-left-radius:5px; }
.member-chat-message.self { align-self:flex-end; background:var(--accent); color:#fff; border-color:var(--accent); border-bottom-right-radius:5px; }
.member-chat-meta { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:.73rem; }
.member-chat-meta small { opacity:.72; }
.member-chat-message p { margin:7px 0 3px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.member-chat-read { display:block; text-align:right; opacity:.72; font-size:.68rem; }
.member-reply-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; padding:16px; background:var(--surface); border-top:1px solid var(--line); }
.member-reply-form textarea { width:100%; resize:vertical; }
.member-reply-form .btn { margin-bottom:1px; }

.profile-card { padding:18px; }
.profile-head { display:flex; gap:13px; align-items:center; }
.profile-head .avatar { width:52px; height:52px; }
.profile-head h3 { margin:0; }
.profile-head p { margin:2px 0 0; color:var(--muted); font-size:.82rem; }
.info-list { margin-top:16px; display:grid; gap:0; }
.info-row { padding:13px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; }
.info-row:last-child { border-bottom:0; }
.info-row span:first-child { color:var(--muted); }
.info-link { color:inherit; }
.info-link strong, .auth-help a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }

.toast {
  position:fixed; left:50%; bottom:98px; transform:translate(-50%,18px); opacity:0; pointer-events:none;
  background:#322823; color:#fff; padding:12px 16px; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.2); z-index:200;
  transition:.25s ease; max-width:calc(100% - 32px); text-align:center; font-size:.9rem;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

/* local MVP states */
.system-banner {
  margin:0 auto 24px; padding:14px 18px; border:1px solid #cfe2d5; border-radius:16px;
  background:#f0f8f2; color:#315a3c; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.system-banner strong { font-size:.88rem; letter-spacing:.02em; }
.system-banner span { font-size:.84rem; }
.system-banner.compact { margin:0 0 18px; justify-content:flex-start; }
.status-ready { color:#2f7250; }
.status-disabled { color:#9a6040; }
.btn-disabled { background:#ede6e1; color:#9b8b82; box-shadow:none; cursor:not-allowed; }
.loading-panel, .empty-state { padding:24px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; }
.booking-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.booking-summary div { padding:12px; background:var(--surface-2); border-radius:13px; }
.booking-summary span, .booking-summary strong { display:block; }
.booking-summary span { color:var(--muted); font-size:.74rem; margin-bottom:3px; }
.booking-summary strong { font-size:.88rem; }
.booking-participants { margin:0 0 18px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.booking-participants-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:13px; }
.booking-participants-head h4 { margin:0 0 4px; font-size:1rem; }
.booking-participants-head p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.55; }
.booking-participants-head .btn { flex:0 0 auto; }
.booking-participant-row { display:grid; grid-template-columns:30px minmax(0,1.2fr) minmax(0,.8fr) auto; align-items:end; gap:10px; padding:13px 0; border-top:1px solid var(--line); }
.booking-participant-number { align-self:center; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:800; font-size:.78rem; }
.participant-remove { align-self:end; min-height:43px; border:0; background:transparent; color:#a64f3f; font:inherit; font-weight:800; cursor:pointer; }
.booking-total { margin:10px 0 0; color:var(--accent-dark); font-weight:800; font-size:.88rem; }
.participant-cancel-actions { width:100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.participant-cancel-actions > span { color:var(--muted); font-size:.78rem; font-weight:800; }
.history-list small { display:block; margin-top:3px; color:var(--muted); font-size:.75rem; }
.question-fields { display:grid; gap:14px; }
.form-field { display:grid; gap:7px; margin:0; border:0; padding:0; }
.form-field > span, .form-field legend { font-weight:800; font-size:.88rem; }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="password"], .form-field input[type="number"], .form-field input[type="datetime-local"], .form-field textarea, .form-field select {
  width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--input); color:var(--text); font:inherit;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:2px solid rgba(var(--accent-rgb),.22); border-color:var(--accent); }
.radio-row { display:flex; gap:10px; flex-wrap:wrap; }
.radio-row label { padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--input); }
.required, .optional { display:inline-block; margin-left:5px; padding:2px 6px; border-radius:6px; font-size:.68rem; }
.required { color:#a64f3f; background:#fae9e5; }
.optional { color:var(--muted); background:var(--surface-2); }
.consent-row { margin:16px 0; padding:13px; border-radius:13px; background:var(--note-bg); display:flex; gap:9px; align-items:flex-start; font-size:.86rem; }
.consent-row input { margin-top:3px; }
.booking-terms { margin:18px 0 8px; padding:16px; border:1px solid var(--line); border-radius:13px; overflow-wrap:anywhere; font-size:.9rem; line-height:1.7; }
.booking-terms h4 { margin:0 0 12px; font-size:1rem; }
.booking-terms h5 { margin:14px 0 6px; font-size:.93rem; }
.booking-terms ul { margin:0; padding-left:1.25em; }
.booking-terms li + li { margin-top:6px; }
.form-error { margin:12px 0; padding:11px 13px; border-radius:12px; background:#fae9e5; color:#943f32; font-size:.86rem; }
#confirmBookBtn { width:100%; margin-top:4px; }
.integration-list { display:grid; gap:0; }
.integration-list > div { display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.integration-list > div:last-child { border-bottom:0; }
.reservation-admin-list { display:grid; gap:10px; }
.staff-form { display:grid; gap:14px; margin:14px 0 18px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.staff-permission-grid { margin:0; padding:13px; border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.staff-permission-grid legend { padding:0 6px; font-weight:800; font-size:.86rem; }
.staff-row small { display:block; margin-top:3px; color:var(--muted); }
.staff-row .tag-row { margin-top:8px; }
.is-read-only :is(input,textarea,select,button) { pointer-events:none; opacity:.58; }
.reservation-admin-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:15px; }
.reservation-admin-row div { min-width:0; }
.reservation-admin-row strong, .reservation-admin-row small { display:block; }
.reservation-admin-row small { color:var(--muted); margin-top:3px; }
.status-chip { padding:6px 10px; border-radius:999px; font-size:.76rem; font-weight:800; white-space:nowrap; }
.status-chip.is-ready { background:#e7f5eb; color:#2f7250; }
.status-chip.is-warning { background:#fff1dd; color:#925d1c; }
.status-chip.is-muted { background:#eee8e4; color:#7f7169; }
.management-stack { display:grid; gap:18px; }
.management-list { display:grid; gap:10px; }
.management-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.management-row > div { min-width:0; }
.management-row strong, .management-row small { display:block; }
.management-row small { color:var(--muted); margin-top:3px; }
.management-row-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; }
.management-row-actions .btn { min-height:38px; padding:8px 12px; font-size:.78rem; }
.data-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.data-action { border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:16px; text-align:left; color:var(--text); }
.data-action:hover { border-color:var(--hover-border); background:var(--page-surface); }
.data-action strong, .data-action span { display:block; }
.data-action span { color:var(--muted); font-size:.78rem; margin-top:4px; }
.audit-list { display:grid; gap:8px; }
.audit-row { display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:.84rem; }
.audit-row:last-child { border-bottom:0; }
.audit-row time, .audit-row small { color:var(--muted); }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-form-grid .full-span { grid-column:1 / -1; }
.check-field { display:flex; align-items:center; gap:8px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--page-surface); }
.check-field input[type="checkbox"] { width:18px; height:18px; flex:0 0 18px; margin:0; accent-color:var(--accent); }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.backup-result { padding:12px; border-radius:12px; background:#e7f5eb; color:#2f7250; font-size:.84rem; }
.reminder-hours-field { margin-top:16px; display:grid; grid-template-columns:minmax(180px,.6fr) minmax(0,1fr); align-items:center; gap:12px; }
.reminder-hours-field > div { display:flex; align-items:center; gap:10px; }
.reminder-hours-field input { width:110px; }
.reminder-hours-field small { color:var(--muted); }

/* CRM・入金・継続予約デモ */
.workflow-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:-10px 0 24px; }
.workflow-card { border:1px solid var(--line); border-radius:17px; background:var(--surface); color:var(--text); padding:14px; text-align:left; display:grid; grid-template-columns:1fr auto; gap:2px 10px; }
.workflow-card:hover { border-color:var(--hover-border); transform:translateY(-1px); }
.workflow-card span { font-size:.8rem; color:var(--muted); }
.workflow-card strong { grid-row:1 / span 2; grid-column:2; font-size:1.35rem; }
.workflow-card small { font-size:.72rem; color:var(--muted); }
.filter-toolbar { justify-content:flex-start; }
.filter-toolbar select, .payment-actions select { min-height:42px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:var(--input); color:var(--text); }
.rich-member-row { align-items:start; }
.rich-member-row .name small { color:var(--muted); font-weight:500; margin-left:5px; }
.tag-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.mini-tag, .tag-check span { display:inline-flex; align-items:center; border:1px solid color-mix(in srgb,var(--tag-color) 35%,white); background:color-mix(in srgb,var(--tag-color) 10%,white); color:var(--tag-color); border-radius:999px; padding:3px 8px; font-size:.7rem; font-weight:800; }
.payment-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:7px; }
.payment-actions .btn { min-height:36px; padding:7px 10px; font-size:.76rem; }
.payment-actions select { min-height:36px; padding:6px 8px; font-size:.76rem; }
.compose-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.compose-grid .full-span { grid-column:1 / -1; }
.compose-grid input, .compose-grid textarea, .compose-grid select, .import-preview-form input, .import-preview-form textarea, .import-preview-form select {
  width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--input); color:var(--text); font:inherit;
}
.broadcast-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.broadcast-options .check-field { flex:0 0 auto; min-width:0; padding:9px 10px; }
.talk-room-shell { min-height:560px; padding:0; overflow:hidden; display:grid; grid-template-columns:minmax(250px,310px) minmax(0,1fr); }
.talk-room-sidebar { min-width:0; border-right:1px solid var(--line); background:var(--surface); }
.talk-room-sidebar-head { padding:15px; border-bottom:1px solid var(--line); display:grid; gap:10px; }
.talk-room-filter { gap:5px; }
.talk-room-filter span { font-size:.72rem; color:var(--muted); }
.talk-room-search { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--input); }
.talk-room-search input { min-width:0; width:100%; padding:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
.talk-room-list { max-height:610px; overflow:auto; }
.talk-room-item { width:100%; min-width:0; padding:13px 12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; cursor:pointer; }
.talk-room-item:hover { background:var(--page-surface); }
.talk-room-item.active { background:var(--note-bg); box-shadow:inset 3px 0 var(--accent); }
.talk-room-avatar { width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-dark); font-weight:800; }
.talk-room-summary { min-width:0; }
.talk-room-flag { display:inline-flex; margin-top:5px; padding:2px 7px; border-radius:999px; background:#eef0f3; color:#4f5964; font-size:.68rem; font-weight:800; }
.is-color-red { background:#fde5e2; color:#9c3e36; }
.is-color-blue { background:#e4eefb; color:#315c8c; }
.is-color-purple { background:#f5e4ee; color:#8c315d; }
.is-color-amber { background:#fff0d5; color:#84520c; }
.is-color-green { background:#e2f3e9; color:#2f714b; }
.is-color-gray { background:#eef0f3; color:#4f5964; }
.talk-room-summary strong, .talk-room-summary small, .talk-room-status small, .talk-room-header strong, .talk-room-header small { display:block; }
.talk-room-summary small { margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.75rem; }
.talk-room-status { align-self:stretch; min-width:40px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px; }
.talk-room-status b { min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#c9535e; color:#fff; font-size:.7rem; }
.talk-room-status small { max-width:72px; color:var(--muted); font-size:.64rem; text-align:right; }
.talk-room-main { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--page-surface); }
.talk-room-header { min-height:73px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface); display:flex; align-items:center; gap:11px; }
.talk-room-header small { margin-top:3px; color:var(--muted); font-size:.73rem; }
.talk-room-flag-control { margin-left:auto; display:grid; gap:4px; color:var(--muted); font-size:.7rem; }
.talk-room-flag-control select { min-height:38px; padding:7px 30px 7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--input); color:var(--text); font:inherit; }
.talk-room-identity { min-width:0; }
.legacy-chat-link { flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); border-radius:10px; background:var(--page-surface); color:var(--accent-dark); font-size:.76rem; font-weight:800; text-decoration:none; }
.legacy-chat-link:hover { border-color:var(--accent); background:var(--accent-soft); }
.talk-room-thread { min-height:400px; max-height:535px; padding:20px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.talk-bubble { width:min(78%,560px); padding:12px 14px; border:1px solid var(--line); border-radius:17px; box-shadow:0 4px 12px rgba(54,39,33,.05); }
.talk-bubble.inbound { align-self:flex-start; background:var(--surface); border-bottom-left-radius:5px; }
.talk-bubble.outbound { align-self:flex-end; background:var(--accent); border-color:var(--accent); color:#fff; border-bottom-right-radius:5px; }
.talk-bubble-meta, .talk-bubble-state { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.69rem; opacity:.82; }
.talk-bubble p { margin:7px 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.talk-bubble-state { justify-content:flex-end; }
.talk-bubble-state button { padding:0; border:0; background:transparent; color:inherit; text-decoration:underline; font:inherit; cursor:pointer; }
.talk-room-composer { padding:13px 15px; border-top:1px solid var(--line); background:var(--surface); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.talk-room-composer textarea { width:100%; min-height:48px; max-height:140px; resize:vertical; border:1px solid var(--line); border-radius:13px; padding:11px 12px; background:var(--input); color:var(--text); font:inherit; }
.talk-room-composer .btn { min-height:48px; }
.recipient-preview { margin-top:14px; padding:13px; border-radius:13px; background:var(--note-bg); color:var(--note-text); }
.recipient-preview strong { font-size:1.2rem; margin-left:8px; }
.recurring-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.recurring-actions .form-field { min-width:150px; }
.recurring-actions select { min-height:42px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:var(--input); }
.import-preview-form { display:grid; grid-template-columns:220px 1fr; gap:14px; margin-top:14px; }
.import-preview-form .full-span, .import-preview-form .form-actions { grid-column:1 / -1; }
#memberModal .modal { width:min(940px,100%); }
.member-detail-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tag-check-grid { display:flex; flex-wrap:wrap; gap:8px; }
.tag-check { cursor:pointer; }
.tag-check input { position:absolute; opacity:0; }
.tag-check input:not(:checked) + span { filter:grayscale(1); opacity:.52; }
.member-history-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.member-history-grid h4, #memberDetailForm > h4 { margin:18px 0 8px; }

/* chatbot demo */
.chatbot-widget { position:fixed; right:20px; bottom:22px; z-index:240; font-family:inherit; }
.has-member-chatbot .member-bottom-nav { grid-template-columns:repeat(5,1fr); }
.has-member-chatbot .chatbot-widget { position:static; z-index:auto; display:grid; place-items:center; }
.has-member-chatbot .chatbot-launcher { min-height:0; width:100%; padding:7px 3px; border-radius:0; background:transparent; color:var(--muted); box-shadow:none; display:grid; justify-items:center; gap:2px; font-size:.72rem; }
.has-member-chatbot .chatbot-launcher .chatbot-icon { margin-bottom:3px; }
.has-member-chatbot .chatbot-panel { position:fixed; right:12px; bottom:88px; }
.has-admin-chatbot .chatbot-widget { position:static; margin:12px 18px 18px; z-index:auto; }
.has-admin-chatbot .chatbot-launcher { width:100%; min-height:46px; justify-content:center; background:rgba(255,255,255,.12); box-shadow:none; }
.has-admin-chatbot .chatbot-panel { position:fixed; right:20px; bottom:20px; }
.chatbot-launcher {
  border:0; min-height:52px; padding:0 18px; border-radius:999px; background:var(--accent); color:#fff;
  display:flex; align-items:center; gap:8px; box-shadow:0 14px 34px rgba(var(--accent-rgb),.32); font:inherit; cursor:pointer;
}
.chatbot-icon, .chatbot-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chatbot-launcher strong { font-size:.9rem; }
.chatbot-panel {
  position:absolute; right:0; bottom:64px; width:min(360px,calc(100vw - 28px)); height:min(520px,calc(100vh - 120px));
  background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:0 22px 70px rgba(45,31,26,.24);
  display:none; grid-template-rows:auto 1fr auto auto; overflow:hidden;
}
.chatbot-panel.open { display:grid; }
.chatbot-header { padding:15px 16px; background:linear-gradient(145deg,var(--hero-from),var(--hero-to)); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chatbot-header strong, .chatbot-header small { display:block; }
.chatbot-header small { margin-top:2px; opacity:.82; font-size:.72rem; }
.chatbot-close { width:34px; height:34px; border:0; border-radius:11px; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; }
.chatbot-messages { padding:15px; overflow:auto; display:flex; flex-direction:column; gap:10px; background:var(--page-surface); }
.chatbot-message { max-width:86%; padding:11px 13px; border-radius:16px; font-size:.84rem; line-height:1.55; white-space:pre-line; }
.chatbot-message.bot { align-self:flex-start; background:var(--surface); color:var(--text); -webkit-text-fill-color:var(--text); border:1px solid var(--line); border-bottom-left-radius:5px; }
.chatbot-message.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px; }
.chatbot-quick { padding:10px 12px 4px; display:flex; gap:7px; overflow-x:auto; background:var(--surface); scrollbar-width:none; }
.chatbot-quick::-webkit-scrollbar { display:none; }
.chatbot-quick button { flex:0 0 auto; border:1px solid var(--hover-border); border-radius:999px; padding:7px 10px; background:var(--surface-2); color:var(--accent-dark); font:inherit; font-size:.74rem; cursor:pointer; }
.chatbot-form { padding:10px 12px 12px; display:grid; grid-template-columns:1fr auto; gap:8px; background:var(--surface); }
.chatbot-form input { min-width:0; border:1px solid var(--line); border-radius:13px; padding:10px 11px; background:var(--input); color:var(--text); -webkit-text-fill-color:var(--text); font:inherit; font-size:1rem; }
.chatbot-form input::placeholder { color:var(--muted); -webkit-text-fill-color:var(--muted); opacity:1; }
.chatbot-form input:focus { outline:2px solid rgba(var(--accent-rgb),.22); border-color:var(--accent); }
.chatbot-form button { border:0; border-radius:13px; padding:0 14px; background:var(--accent); color:#fff; font:inherit; font-weight:800; cursor:pointer; }

/* Responsive */
@media (max-width: 980px) {
  .admin-layout { grid-template-columns:1fr; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(310px,86vw); z-index:90; transform:translateX(-105%); transition:.25s ease; box-shadow:20px 0 50px rgba(0,0,0,.22); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-scrim { position:fixed; inset:0; background:rgba(45,31,26,.38); z-index:80; }
  .mobile-menu { display:grid; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-grid { grid-template-columns:1fr; }
  .workflow-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .member-detail-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .container { width:min(100% - 22px,1180px); }
  .landing { padding:24px 0; }
  .role-grid { grid-template-columns:1fr; }
  .role-card { padding:22px; }
  .brand-lockup { margin-bottom:22px; }
  .admin-topbar { height:66px; padding:0 14px; }
  .admin-topbar .sub { display:none; }
  .admin-content { padding:16px 12px 28px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-card { padding:15px; }
  .stat-card .value { font-size:1.35rem; }
  .panel { padding:15px; border-radius:19px; }
  .schedule-row { grid-template-columns:62px 1fr; gap:9px; padding:13px; }
  .capacity { grid-column:2; display:flex; align-items:center; justify-content:space-between; text-align:left; }
  .progress { width:100px; margin:0; }
  .searchbox { min-width:0; width:100%; }
  .toolbar { align-items:stretch; }
  .toolbar .btn { width:100%; }
  .detail-grid { grid-template-columns:1fr; }
  .member-row { grid-template-columns:auto 1fr auto; }
  .top-actions a.btn-secondary { display:none; }
  .lesson-card { grid-template-columns:minmax(0,1fr) 132px; gap:14px; padding:16px; }
  .upcoming-reservation-card { grid-template-columns:1fr; gap:14px; padding:16px; }
  .booking-summary { grid-template-columns:1fr; }
  .booking-participants-head { display:grid; }
  .booking-participants-head .btn { width:100%; }
  .booking-participant-row { grid-template-columns:28px minmax(0,1fr); }
  .booking-participant-row .form-field, .booking-participant-row .participant-remove { grid-column:2; }
  .booking-participant-row .participant-remove { justify-self:start; min-height:auto; padding:3px 0; }
  .staff-permission-grid { grid-template-columns:1fr; }
  .reservation-admin-row { grid-template-columns:1fr auto; }
  .reservation-admin-row > div:nth-child(2) { grid-column:1; }
  .reservation-admin-row .status-chip { grid-column:2; grid-row:1 / span 2; }
  .data-action-grid { grid-template-columns:1fr; }
  .management-row { grid-template-columns:1fr auto; }
  .management-row > div:nth-child(2) { grid-column:1; }
  .management-row-actions { grid-column:2; grid-row:1 / span 2; }
  .admin-form-grid { grid-template-columns:1fr; }
  .admin-form-grid .full-span { grid-column:auto; }
  .audit-row { grid-template-columns:1fr; gap:3px; }
  .workflow-strip { gap:8px; }
  .compose-grid, .member-detail-form, .member-history-grid, .import-preview-form { grid-template-columns:1fr; }
  .compose-grid .full-span, .import-preview-form .full-span, .import-preview-form .form-actions { grid-column:auto; }
  .talk-room-shell { min-height:0; grid-template-columns:1fr; }
  .talk-room-sidebar { border-right:0; border-bottom:1px solid var(--line); }
  .talk-room-sidebar-head { padding:12px; }
  .talk-room-list { max-height:none; padding:0 10px 10px; display:flex; gap:8px; overflow-x:auto; }
  .talk-room-item { min-width:210px; border:1px solid var(--line); border-radius:13px; padding:10px; }
  .talk-room-item.active { box-shadow:inset 0 3px var(--accent); }
  .talk-room-header { min-height:64px; padding:11px 14px; flex-wrap:wrap; }
  .talk-room-identity { flex:1 1 150px; }
  .talk-room-flag-control { flex:1 1 145px; margin-left:53px; }
  .talk-room-thread { min-height:330px; max-height:48vh; padding:14px; }
  .talk-bubble { width:min(88%,520px); }
  .talk-room-composer { grid-template-columns:1fr; }
  .talk-room-composer .btn { width:100%; }
  .payment-actions { grid-column:1 / -1; justify-content:flex-start; }
  .filter-toolbar select { width:100%; }
  .member-reply-form { grid-template-columns:1fr; }
  .member-reply-form .btn { width:100%; }
  .reminder-hours-field { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .date-chip { min-width:60px; }
  .member-content, .member-header { padding-left:14px; padding-right:14px; }
  .section-title { align-items:stretch; flex-direction:column; }
  .section-title > .btn { width:100%; }
  .management-row { grid-template-columns:minmax(0,1fr); }
  .management-row > div:nth-child(2), .management-row-actions { grid-column:1; grid-row:auto; }
  .management-row-actions { width:100%; justify-content:flex-start; }
  .lesson-card { grid-template-columns:1fr; gap:14px; }
  .upcoming-reservation-actions, .upcoming-reservation-actions .participant-cancel-actions, .upcoming-reservation-participants ul { grid-template-columns:minmax(0,1fr); }
  .upcoming-reservation-actions { width:100%; }
  .upcoming-reservation-actions > .pill { width:100%; }
  .lesson-action { width:100%; }
  .lesson-status { min-width:64px; min-height:28px; font-size:.72rem; }
  .lesson-book-btn { min-height:48px; font-size:.9rem; }
  .chatbot-widget { right:12px; bottom:14px; }
  body:not(.has-member-chatbot):not(.has-admin-chatbot) .chatbot-widget { position:static; display:grid; place-items:center; margin:16px 12px 24px; }
  body:not(.has-member-chatbot):not(.has-admin-chatbot) .chatbot-panel { position:fixed; right:12px; bottom:12px; }
  .has-member-chatbot .chatbot-widget { position:static; }
  .chatbot-panel { bottom:60px; height:min(500px,calc(100vh - 105px)); }
  .has-member-chatbot .chatbot-panel { bottom:80px; }
}

@media (max-width: 340px) {
  .admin-topbar { padding-inline:8px; gap:8px; }
  .admin-topbar > div:first-child { gap:6px !important; }
  .admin-topbar h1 { font-size:1rem; white-space:nowrap; }
  .top-actions { gap:6px; flex:0 0 auto; }
  .top-actions .btn { padding:10px 11px; font-size:.78rem; white-space:nowrap; }
  .workflow-strip { grid-template-columns:1fr; }
}

.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ui-icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:32px 20px; background:linear-gradient(145deg,var(--page-surface) 0%,#fff 52%,var(--accent-soft) 135%); }
.auth-card { width:min(100%,480px); padding:clamp(24px,5vw,40px); display:grid; gap:24px; }
.auth-brand { display:grid; justify-items:start; gap:6px; color:var(--text); }
.auth-brand-logo { width:min(100%,360px); }
.auth-brand small { color:var(--muted); }
.auth-form { display:grid; gap:16px; }
.auth-form h1 { margin:0 0 6px; font-size:clamp(1.55rem,4vw,2rem); }
.auth-form p, .auth-help { margin:0; color:var(--muted); line-height:1.7; }
.auth-help { padding-top:16px; border-top:1px solid var(--line); font-size:.88rem; }
.auth-message { border-radius:12px; padding:12px 14px; line-height:1.6; }
.auth-message.is-info { color:#235941; background:#e8f5ed; }
.auth-message.is-error { color:#8c2d2d; background:#fff0f0; }
.text-button { border:0; padding:6px; background:transparent; color:var(--accent-dark); text-decoration:underline; cursor:pointer; font:inherit; }
.registration-consent { margin:0; }
.registration-consent a { color:var(--accent-dark); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.registration-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.member-logout { min-height:42px; }
.member-account-form { margin-top:18px; display:grid; gap:14px; }
.member-account-form .btn { justify-self:start; }
.member-notification-card { margin-top:18px; }
.notification-device-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--page-surface); }
.notification-device-row strong { display:block; font-size:1rem; }
.notification-device-row p { margin:4px 0 0; color:var(--muted); font-size:.86rem; line-height:1.7; }
.notification-device-row .btn { min-width:190px; }
.notification-reminder-note { margin:14px 0 0; padding:13px 15px; border-radius:var(--radius-sm); background:var(--note-bg); color:var(--note-text); font-size:.84rem; line-height:1.75; }
.bottom-tab .ui-icon { display:block; margin-bottom:3px; }
.role-svg { width:34px; height:34px; }
.nav-item { gap:10px; }
.nav-item .ui-icon { width:19px; height:19px; }
.workflow-card > span { display:flex; align-items:center; gap:7px; }
.btn .ui-icon { width:18px; height:18px; }
.close-btn .ui-icon { width:20px; height:20px; }
.searchbox .ui-icon, .talk-room-search .ui-icon { width:18px; height:18px; color:var(--muted); }
.email-settings-list { display:grid; gap:10px; margin-top:16px; }
.email-setting-row { display:grid; grid-template-columns:minmax(170px,1.4fr) auto auto minmax(130px,.8fr); align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.email-setting-row .form-field { margin:0; }
.email-setting-row .reminder-hours-field { grid-template-columns:minmax(0,1fr); min-width:0; gap:6px; }
.email-setting-row .reminder-hours-field input { width:100%; min-width:0; max-width:100%; }
.email-setting-row .check-field { min-width:84px; }
.policy-row { display:grid; grid-template-columns:minmax(190px,1fr) minmax(120px,.55fr) minmax(240px,1.4fr); gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.policy-row:last-child { border-bottom:0; }
.policy-note { min-width:0; }
.legal-document-list { display:grid; gap:18px; }
.legal-document-editor { display:grid; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.legal-document-editor textarea { min-height:250px; font-family:inherit; line-height:1.65; }
.legal-editor-actions { display:grid; grid-template-columns:minmax(150px,240px) auto; align-items:end; justify-content:space-between; gap:14px; }
.settings-disclosure { padding:0; overflow:hidden; }
.settings-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; cursor:pointer; list-style:none; }
.settings-disclosure > summary::-webkit-details-marker { display:none; }
.settings-disclosure > summary span:first-child { display:grid; gap:4px; }
.settings-disclosure > summary strong { font-size:1.05rem; }
.settings-disclosure > summary small { color:var(--muted); }
.settings-disclosure .disclosure-label { color:var(--accent-dark); font-weight:800; }
.settings-disclosure[open] .disclosure-label { font-size:0; }
.settings-disclosure[open] .disclosure-label::after { content:'閉じる'; font-size:.86rem; }
.settings-disclosure > .legal-document-list { padding:0 20px 20px; }
.message-flag-create-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(120px,180px) auto; align-items:end; gap:12px; margin:14px 0 18px; }
.message-flag-list { display:grid; gap:10px; }
.message-flag-row { display:grid; grid-template-columns:18px minmax(160px,1fr) minmax(110px,160px) 90px auto auto; align-items:end; gap:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.message-flag-swatch { width:14px; height:38px; align-self:end; border-radius:999px; }
.message-flag-row .form-field, .message-flag-row .form-field input, .message-flag-row .form-field select { min-width:0; width:100%; }
.message-flag-order input { min-width:70px; }
.member-auth-admin { display:grid; gap:12px; padding:16px; margin-bottom:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--note-bg); }
.member-auth-admin h4, .member-auth-admin p { margin:0; }
.member-auth-admin p { color:var(--note-text); line-height:1.6; }
.invitation-result { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.status-chip.is-danger { color:#8c2d2d; background:#fff0f0; }
.status-danger { display:block; color:var(--danger); }
.legal-page { width:min(100% - 32px,960px); margin:0 auto; padding:36px 0 64px; }
.legal-page-header { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:20px; margin-bottom:24px; }
.legal-page-header h1, .legal-page-header p { margin:0; }
.legal-page-header p { margin-top:6px; color:var(--muted); }
.legal-brand-logo { width:min(100%,220px); margin-bottom:18px; }
.legal-public-list { display:grid; gap:20px; }
.legal-public-document { padding:clamp(20px,4vw,36px); }
.legal-public-document h2 { margin-top:0; }
.legal-public-document > div { line-height:1.85; overflow-wrap:anywhere; }
.legal-public-document small { display:block; margin-top:24px; color:var(--muted); }

@media (max-width:390px) {
  .auth-shell { padding:18px 12px; align-items:start; }
  .auth-card { padding:22px 16px; }
  .member-header-row { gap:10px; }
  .member-brand-logo { width:min(100%,230px); }
  .member-logout { padding-inline:10px; font-size:.84rem; white-space:nowrap; }
}

@media (max-width:1150px) and (min-width:761px) {
  .message-flag-row { grid-template-columns:18px minmax(0,1fr) minmax(110px,150px); }
  .message-flag-row .message-flag-swatch { grid-column:1; grid-row:1; }
  .message-flag-row > .form-field:nth-of-type(1) { grid-column:2; grid-row:1; }
  .message-flag-row > .form-field:nth-of-type(2) { grid-column:3; grid-row:1; }
  .message-flag-row .message-flag-order { grid-column:2; grid-row:2; }
  .message-flag-row > .check-field { grid-column:3; grid-row:2; }
  .message-flag-row > .btn { grid-column:1 / -1; grid-row:3; width:100%; }
}

@media (max-width:760px) {
  .email-setting-row, .policy-row { grid-template-columns:1fr 1fr; }
  .email-setting-row > strong, .policy-note { grid-column:1 / -1; }
  .legal-editor-actions, .invitation-result { grid-template-columns:1fr; }
  .legal-editor-actions .btn, .invitation-result .btn { width:100%; }
  .legal-page-header { grid-template-columns:1fr; }
  .notification-device-row { grid-template-columns:1fr; }
  .notification-device-row .btn { width:100%; min-width:0; }
  .message-flag-create-form { grid-template-columns:minmax(0,1fr) minmax(120px,160px); }
  .message-flag-create-form .btn { grid-column:1 / -1; width:100%; }
  .message-flag-row { grid-template-columns:18px minmax(0,1fr) minmax(110px,150px); }
  .message-flag-row .message-flag-swatch { grid-column:1; grid-row:1; }
  .message-flag-row > .form-field:nth-of-type(1) { grid-column:2; grid-row:1; }
  .message-flag-row > .form-field:nth-of-type(2) { grid-column:3; grid-row:1; }
  .message-flag-row .message-flag-order { grid-column:2; grid-row:2; }
  .message-flag-row > .check-field { grid-column:3; grid-row:2; }
  .message-flag-row > .btn { grid-column:1 / -1; grid-row:3; width:100%; }
}

@media (max-width:480px) {
  .message-flag-create-form { grid-template-columns:1fr; }
  .message-flag-create-form .btn { grid-column:1; }
  .message-flag-row { grid-template-columns:18px minmax(0,1fr); }
  .message-flag-row .message-flag-swatch { grid-column:1; grid-row:1; }
  .message-flag-row > .form-field:nth-of-type(1) { grid-column:2; grid-row:1; }
  .message-flag-row > .form-field:nth-of-type(2) { grid-column:2; grid-row:2; }
  .message-flag-row .message-flag-order { grid-column:2; grid-row:3; }
  .message-flag-row > .check-field { grid-column:2; grid-row:4; }
  .message-flag-row > .btn { grid-column:1 / -1; grid-row:5; }
}

/* ---- チャット添付（画像・PDF・動画） 2026-09-05 ---- */
.member-reply-form { grid-template-columns:1fr; }
.member-reply-form .member-reply-submit { order:5; width:100%; margin-bottom:0; }
.chat-attach-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.chat-attach-btn { position:relative; cursor:pointer; min-height:44px; padding:10px 14px; font-size:.86rem; }
.chat-attach-btn input[type="file"] { pointer-events:none; }
.chat-attach-btn:focus-within { outline:2px solid rgba(var(--accent-rgb),.32); outline-offset:2px; }
.chat-attach-hint { flex:1 1 220px; min-width:0; color:var(--muted); font-size:.74rem; line-height:1.5; overflow-wrap:anywhere; }
.chat-attach-preview { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; min-width:0; }
.chat-attach-preview.is-empty { display:none; }
.chat-attach-item { display:grid; grid-template-columns:48px minmax(0,1fr) 36px; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--line); border-radius:14px; background:var(--page-surface); min-width:0; }
.chat-attach-thumb { width:48px; height:48px; border-radius:10px; object-fit:cover; background:var(--surface-2); display:grid; place-items:center; color:var(--accent-dark); }
.chat-attach-meta { min-width:0; display:grid; gap:2px; }
.chat-attach-meta strong { font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-attach-meta small { color:var(--muted); font-size:.7rem; }
.chat-attach-remove { width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.chat-attach-remove:hover { background:var(--surface-2); color:var(--accent-dark); }
.chat-attach-status { padding:9px 12px; border-radius:12px; font-size:.8rem; line-height:1.5; overflow-wrap:anywhere; }
.chat-attach-status.is-info { background:var(--note-bg); color:var(--note-text); }
.chat-attach-status.is-progress { background:#eef4ff; color:#2f4f8f; }
.chat-attach-status.is-error { background:#fff0f0; color:#8c2d2d; }
.chat-attachments { display:grid; gap:8px; margin:8px 0 4px; min-width:0; }
.chat-attachment { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border-radius:14px; background:rgba(255,255,255,.55); color:var(--text); border:1px solid var(--line); min-width:0; }
.member-chat-message.self .chat-attachment, .talk-bubble.outbound .chat-attachment { background:rgba(255,255,255,.92); }
.chat-attachment-file { grid-template-columns:40px minmax(0,1fr); }
.chat-attachment-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chat-attachment-actions .btn { min-height:36px; padding:6px 10px; font-size:.76rem; }
.chat-attachment-icon { width:40px; height:40px; border-radius:10px; background:var(--surface-2); color:var(--accent-dark); display:grid; place-items:center; }
.chat-attachment-meta { min-width:0; display:grid; gap:2px; }
.chat-attachment-meta strong { font-size:.82rem; overflow-wrap:anywhere; word-break:break-word; line-height:1.4; }
.chat-attachment-meta small { color:var(--muted); font-size:.7rem; }
.chat-attachment-note { color:var(--warning); }
.chat-attachment.is-unavailable { opacity:.72; }
.chat-attachment-image { margin:0; display:block; padding:0; overflow:hidden; }
.chat-attachment-open { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.chat-attachment-image img { display:block; width:100%; max-width:100%; max-height:260px; object-fit:cover; background:var(--surface-2); }
.chat-attachment-image figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; min-width:0; }
.chat-attachment-image figcaption small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.7rem; }
.chat-attachment-delete { flex:0 0 auto; width:30px; height:30px; border:0; border-radius:9px; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.chat-attachment-delete:hover { background:var(--surface-2); color:var(--danger); }
.chat-attachment-delete .ui-icon { width:16px; height:16px; }
.attachment-modal { width:min(960px,100%); }
.attachment-modal-body { display:grid; gap:12px; justify-items:center; }
.chat-viewer-image { max-width:100%; max-height:72vh; border-radius:12px; background:var(--surface-2); }
.chat-viewer-video { width:100%; max-height:72vh; border-radius:12px; background:#000; }
.chat-viewer-actions { margin:0; }
.talk-room-composer { grid-template-columns:minmax(0,1fr) auto auto; }
.talk-attach-btn { min-height:48px; width:48px; border-radius:13px; box-shadow:none; background:var(--surface-2); color:var(--accent-dark); cursor:pointer; }
.talk-attach-area { grid-column:1 / -1; display:grid; gap:8px; min-width:0; }
@media (min-width:700px) {
  .member-reply-form { grid-template-columns:minmax(0,1fr) auto; }
  .member-reply-form .member-reply-submit { order:0; width:auto; margin-bottom:1px; }
  .member-reply-form .chat-attach-row, .member-reply-form .chat-attach-preview, .member-reply-form .chat-attach-status { grid-column:1 / -1; }
}
@media (max-width:420px) {
  .chat-attach-preview { grid-template-columns:1fr; }
  .chat-attachment-actions .btn { flex:1 1 auto; }
  .talk-room-status small, .talk-room-status b, .talk-room-header small,
  .talk-bubble-meta, .talk-bubble-state, .member-chat-meta, .member-chat-read,
  .chat-attachment-meta small, .chat-attachment-image figcaption small, .chat-attach-hint { font-size:.75rem; }
  .talk-room-composer { grid-template-columns:minmax(0,1fr) auto; }
  .talk-room-composer .btn-primary { grid-column:1 / -1; }
  .chat-attach-btn { width:100%; }
  .talk-room-composer .talk-attach-btn { width:48px; }
  .chat-attachment-image img { max-height:200px; }
}

/* Member booking controls and participant editing. */
.home-booking-link { padding:22px; display:grid; gap:18px; }
.home-booking-link h2 { margin:0 0 5px; font-size:1.2rem; }
.home-booking-link p { margin:0; color:var(--muted); }
.home-booking-link .btn { min-height:48px; }
.reserve-controls { padding:16px; display:grid; gap:16px; margin-bottom:16px; }
.reserve-view-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; border-radius:15px; background:var(--page-surface); border:1px solid var(--line); }
.reserve-view-switch button { min-height:46px; padding:9px 5px; border:0; border-radius:10px; background:transparent; color:var(--text); font:inherit; font-size:.94rem; font-weight:700; }
.reserve-view-switch button.active { background:var(--accent-dark); color:#fff; }
.reserve-result-count { margin:14px 0 10px; color:var(--muted); font-size:.9rem; }
.booking-calendar { padding:16px; margin-bottom:16px; }
.booking-calendar-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:15px; }
.booking-calendar-head h3 { margin:0; font-size:1.05rem; }
.booking-calendar-head .btn { padding:10px 13px; min-height:44px; }
.booking-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.booking-calendar-weekday { text-align:center; color:var(--muted); font-size:.8rem; padding:4px 0; }
.booking-calendar-day { min-width:0; min-height:72px; padding:7px 1px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid var(--line); border-radius:9px; background:var(--input); color:var(--text); }
.booking-calendar-day strong { font-size:1rem; line-height:1.2; }
.booking-calendar-day small { min-height:15px; font-size:.66rem; line-height:1.25; white-space:nowrap; }
.booking-calendar-day.has-reservation { border-color:var(--accent-dark); background:var(--surface-2); }
.booking-calendar-day .calendar-availability { font-size:.75rem; font-weight:800; }
.booking-calendar-day.availability-before .calendar-availability,
.booking-calendar-day.availability-unavailable .calendar-availability,
.booking-calendar-day.availability-processing .calendar-availability,
.booking-calendar-day.availability-reserved .calendar-availability { font-size:.66rem; }
.booking-calendar-day .calendar-reservation { font-size:.66rem; font-weight:700; }
.booking-calendar-day.availability-full:not(.active) { border-color:var(--accent-dark); }
.booking-calendar-day.availability-full:not(.active) .calendar-availability { color:var(--accent-dark); }
.booking-calendar-day.active { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.booking-calendar-day:disabled { background:transparent; color:#897c82; border-color:transparent; cursor:default; }
.booking-calendar-help { margin:12px 0 0; color:var(--muted); font-size:.82rem; }
.member-app .lesson-card.is-reserved { border-color:var(--accent-dark); }
.member-app .lesson-reservation-note { margin-top:9px; color:var(--accent-dark); font-weight:800; }
.member-app .lesson-action { flex-direction:column; gap:8px; }
.member-app .lesson-action > .btn { width:100%; }
.member-app .lesson-status { max-width:100%; white-space:normal; text-align:center; }
.member-app .lesson-card p, .member-app .remaining { line-height:1.65; }
.member-app .upcoming-reservation-card:focus { outline:2px solid var(--accent-dark); outline-offset:3px; }
#bookModal .modal { max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); display:flex; flex-direction:column; overflow:hidden; }
#bookModal .modal-head { flex:0 0 auto; }
#bookModal .modal-head > div { min-width:0; }
#bookModal .modal-body { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#bookModal .booking-participant-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:12px; align-items:start; }
#bookModal .booking-participant-row .form-field { grid-column:auto; }
#bookModal .booking-participant-row .participant-name-field,
#bookModal .booking-participant-row .participant-kana-field { grid-column:1 / -1; }
#bookModal .booking-participant-row .participant-goal-field { grid-column:1 / -1; }
.booking-participant-head { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.booking-participant-head h5 { margin:0; font-size:.95rem; }
#bookModal .participant-remove { min-height:44px; padding:8px 10px; border:1px solid #dbaeb6; border-radius:10px; background:var(--input); color:#8e324e; font-size:.82rem; }
#bookModal .booking-participants { background:var(--page-surface); }
#bookModal .booking-total { padding-top:10px; border-top:1px solid var(--line); line-height:1.7; }
#bookModal .form-field > span, #bookModal .form-field legend { font-size:18px; }
#bookModal .form-field .required, #bookModal .form-field .optional { font-size:16px; }
#bookModal .form-field small { color:var(--text); font-size:16px; line-height:1.6; }
#bookModal .form-field input, #bookModal .form-field textarea, #bookModal .form-field select { font-size:18px; }
#dataView .csv-period-fields .form-field > span,
#dataView .csv-period-fields input, #dataView .csv-period-fields select { font-size:18px; }
#exportAgeSortHelp { color:var(--text); font-size:16px; }
#confirmBookBtn { width:100%; min-height:48px; margin-top:18px; }
.existing-participants { margin:0 0 16px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); line-height:1.7; }
.chatbot-message.user { background:var(--accent-dark); color:#fff; -webkit-text-fill-color:#fff; }
.chatbot-panel { color:var(--text); }
@media (max-width:540px) {
  #bookModal { padding:10px; }
  #bookModal .modal { max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); border-radius:20px; }
  #bookModal .modal-head { padding:15px; gap:10px; }
  #bookModal .modal-head h3 { font-size:1.13rem; line-height:1.5; }
  #bookModal .modal-body { padding:15px; }
  #bookModal .booking-summary { grid-template-columns:1fr; gap:6px; }
  #bookModal .booking-summary > div { display:flex; justify-content:space-between; gap:12px; padding:9px 11px; }
  #bookModal .booking-summary span { margin:0; }
  #bookModal .booking-summary strong { text-align:right; }
  #bookModal .booking-participants { padding:12px; }
  #bookModal .booking-participant-row { grid-template-columns:minmax(0,1fr); }
  #bookModal .booking-participant-head, #bookModal .booking-participant-row .form-field { grid-column:1; }
  .booking-calendar { padding:11px; }
  .booking-calendar-grid { gap:3px; }
  .member-app .lesson-card p, .member-app .remaining { font-size:.9rem; }
}
@media (max-width:340px) {
  .reserve-view-switch button { font-size:.86rem; }
  .booking-calendar-day small { font-size:.6rem; }
  .booking-calendar-head h3 { font-size:.98rem; }
  .booking-calendar-head .btn { padding:9px; font-size:.82rem; }
  #bookModal .booking-participant-head { align-items:stretch; flex-direction:column; }
  #bookModal .participant-remove { align-self:stretch; text-align:center; }
}

/* Member support: readable answers and keyboard-accessible direct links. */
.has-member-chatbot .member-support-answer { max-width:100%; width:100%; min-width:0; overflow-wrap:anywhere; }
.member-support-answer section + section { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.member-support-answer p { margin:0 0 10px; }
.member-support-links { display:flex; flex-direction:column; gap:8px; white-space:normal; }
.member-support-links a { display:block; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--accent-dark); text-decoration:underline; overflow-wrap:anywhere; }
.member-support-answer small { display:block; margin-top:12px; color:var(--muted); }

/* Keep navigation labels readable on narrow phones. */
@media (max-width:360px) {
  .member-bottom-nav .bottom-tab { padding:7px 2px; font-size:.65rem; white-space:nowrap; min-width:0; }
}

.member-chat-message p a, .talk-bubble p a { color:inherit; text-decoration:underline; }
/* Lesson form editing uses the same fields and save action as lesson settings. */
.lesson-form-editor { margin-block: 20px; min-width: 0; }
.lesson-form-editor h3 { margin: 0 0 12px; font-size: 22px; }
.lesson-question-editor-row { padding: 16px; margin-block: 12px; border: 1px solid #cbd5e1; border-radius: 12px; min-width: 0; }
.lesson-question-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lesson-question-editor-head h4 { margin: 0; font-size: 18px; }
.lesson-question-editor-head > div { display: flex; gap: 8px; flex-wrap: wrap; }
.lesson-question-editor-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.lesson-question-editor-fields input, .lesson-question-editor-fields select, .lesson-question-editor-fields textarea { width: 100%; min-width: 0; font-size: 18px; }
.lesson-question-editor-fields input[type="checkbox"] { width: auto; }
.lesson-question-editor-fields .check-field { grid-column: 1 / -1; }
.lesson-question-editor-fields .full-span { grid-column: 1 / -1; }
.booking-checkboxes .radio-row { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) { .lesson-question-editor-fields { grid-template-columns: minmax(0,1fr); } .lesson-question-editor-row { padding: 12px; } }