:root {
  --font-jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo UI", Meiryo, "Noto Sans JP", sans-serif;
  --ink: #16181d;
  --muted: #6b7280;
  --bg: #f6f6f4;
  --panel: #ffffff;
  --line: #e5e6e8;
  --accent: #d8432a;
  --accent-dark: #b23018;
  --dark: #101014;
  --ok: #157f4c;
  --warn: #b45309;
  --bad: #b91c1c;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font-jp);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }

/* ---------- app bar (PC・モバイル共通でハンバーガー) ---------- */
.appbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(16,16,20,.94); color: #fff; backdrop-filter: blur(8px);
}
.appbar.is-admin { background: var(--dark); backdrop-filter: none; }
.brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; color: #fff; }
.brand strong { font-size: 19px; letter-spacing: .14em; }
.brand strong::after { content: "."; color: var(--accent); }
.brand span { font-size: 10.5px; color: #9ca3af; letter-spacing: .2em; }
.appbar .brand { margin-right: auto; padding-left: 6px; }
.brand-jta-mark { width: 34px; height: 34px; flex: none; }
.brand .brand-jta-name { display: inline-flex; align-items: baseline; gap: 7px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.brand .brand-jta-name small { color: #b8c1d3; font-size: 10px; letter-spacing: .16em; }

/* 協会HPページ: ヘッダー内メニュー（PCのみ。スマホはページ側のサブナビ） */
.appbar:has(.appbar-hpnav) .brand { margin-right: 0; }
.appbar-hpnav { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 16px; min-width: 0; }
.appbar-hpnav a { flex: none; padding: 9px 11px; border-radius: 9px; color: rgba(255,255,255,.75); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.appbar-hpnav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.appbar-hpnav a.is-now { color: #fff; position: relative; }
.appbar-hpnav a.is-now::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: #ff8f72; }
@media (max-width: 919px) { .appbar-hpnav { display: none; } }

/* アイコンボタンは指で押せる44px角を確保 */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px;
  background: none; color: #e5e7eb; text-decoration: none; cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.burger, .burger::before, .burger::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, background .2s ease;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.nav-toggle:checked ~ .appbar .burger { background: transparent; }
.nav-toggle:checked ~ .appbar .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .appbar .burger::after { transform: translateY(-6px) rotate(-45deg); }

.bell-badge {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}
.icon-btn.bell { width: auto; min-width: 44px; gap: 5px; padding: 0 6px; }
.icon-btn.bell .bell-count { position: static; flex: none; }

/* ---------- drawer ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
/* ハンバーガーが右上にあるので、ドロワーも右から出す */
.drawer {
  position: fixed; top: 0; right: 0; z-index: 80;
  --drawer-safe-bottom: clamp(0px, env(safe-area-inset-bottom, 0px), 34px);
  width: min(84vw, 296px); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #17171c; color: #e5e7eb; box-shadow: 0 0 40px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .22s ease;
  padding-bottom: calc(18px + var(--drawer-safe-bottom));
}

/* Talk-list baseline; a final cascade below protects it from shared app-theme defaults. */
body.chat-admin-page:has(.chat-talk-list),
body.chat-admin-page:has(.chat-talk-list) .admin-main { background: #101011; color: #f7f7f8; }
body.chat-admin-page .chat-talk-list { width: min(100%,760px); max-width: 760px; }
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-inbox) {
  overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid > a,.chat-group-room-list > a,.chat-thread-card) {
  border: 0; border-bottom: 1px solid rgba(255,255,255,.075); border-radius: 0;
  background: transparent; box-shadow: none;
}
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid > a,.chat-group-room-list > a,.chat-thread-card):hover { background: rgba(255,255,255,.035); }
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-thread-copy) b { color: #f7f7f8; }

@media (max-width: 760px) {
  body.chat-admin-page .chat-talk-list { width: 100%; max-width: none; padding-bottom: max(38px,var(--chat-safe-bottom)); }
  body.chat-admin-page .chat-talk-list .admin-chat-heading {
    padding: calc(10px + var(--chat-safe-top)) 14px 13px; border: 0; background: rgba(16,16,17,.92); box-shadow: none;
  }
  body.chat-admin-page .chat-talk-list :is(.chat-fixed-rooms,.chat-group-rooms,.chat-inbox) {
    margin-right: 14px; margin-left: 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
}

/* ---------- Notification preferences / compact settings list ---------- */
.jta-app-ui.app-theme-page .settings-pref-form {
  display: block; overflow: hidden; border: .5px solid var(--app-apple-separator); border-radius: 16px;
  background: var(--app-apple-surface);
}
.jta-app-ui.app-theme-page .settings-pref-form .pref-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "title channels" "desc channels";
  gap: 2px 18px; align-items: center; min-height: 76px; margin: 0; padding: 13px 15px;
  border: 0; border-bottom: .5px solid var(--app-apple-separator); border-radius: 0; background: transparent;
}
.jta-app-ui.app-theme-page .settings-pref-form .pref-head { grid-area: title; font-size: 14px; font-weight: 750; line-height: 1.35; }
.jta-app-ui.app-theme-page .settings-pref-form .pref-desc { grid-area: desc; margin: 2px 0 0; font-size: 11px; line-height: 1.55; }
.jta-app-ui.app-theme-page .settings-pref-form .pref-channels { grid-area: channels; display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
.jta-app-ui.app-theme-page .settings-pref-form .switch {
  position: relative; display: inline-flex; min-height: 30px; align-items: center; gap: 7px; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--app-apple-secondary); font-size: 10px; font-weight: 700; cursor: pointer;
}
.jta-app-ui.app-theme-page .settings-pref-form .switch:has(input:checked) { border: 0; background: transparent; color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .settings-pref-form .switch input {
  position: relative; width: 46px; min-width: 46px; height: 28px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 999px; background: #4c4c50; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); cursor: pointer;
  transition: background-color .16s ease;
}
.jta-app-ui.app-theme-page .settings-pref-form .switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); transition: transform .16s ease;
}
.jta-app-ui.app-theme-page .settings-pref-form .switch input:checked { background: var(--app-apple-green); }
.jta-app-ui.app-theme-page .settings-pref-form .switch input:checked::after { transform: translateX(18px); }
.jta-app-ui.app-theme-page .settings-pref-form .switch input:checked + span {
  border: 0; background: transparent; color: inherit;
}
.jta-app-ui.app-theme-page .settings-pref-form .switch.locked { gap: 5px; opacity: 1; cursor: default; }
.jta-app-ui.app-theme-page .settings-pref-form .switch.locked input { display: none; }
.jta-app-ui.app-theme-page .settings-pref-form .switch.locked span {
  padding: 4px 8px; border: .5px solid var(--app-apple-separator); border-radius: 999px;
  background: var(--app-apple-fill); color: var(--app-apple-secondary); white-space: nowrap;
}
.jta-app-ui.app-theme-page .settings-pref-form .switch.locked span::before { content: "✓ "; color: var(--app-apple-green); }
.jta-app-ui.app-theme-page .settings-pref-form > .btn { margin: 14px; }

@media (max-width: 560px) {
  .jta-app-ui.app-theme-page .settings-pref-form .pref-row { gap: 3px 10px; min-height: 72px; padding: 11px 12px; }
  .jta-app-ui.app-theme-page .settings-pref-form .pref-head { font-size: 13px; }
  .jta-app-ui.app-theme-page .settings-pref-form .pref-desc { max-width: 44vw; font-size: 10px; }
  .jta-app-ui.app-theme-page .settings-pref-form .pref-channels { gap: 8px; }
  .jta-app-ui.app-theme-page .settings-pref-form .switch { flex-direction: column; gap: 2px; font-size: 9px; }
  .jta-app-ui.app-theme-page .settings-pref-form .switch.locked { align-self: center; }
}

/* ---------- Customizable mobile bottom navigation ---------- */
.admin-bottom-nav { display: none; }
.bottom-nav-settings-form { display: grid; gap: 1px; overflow: hidden; border: .5px solid var(--app-apple-separator); border-radius: 16px; background: var(--app-apple-separator); }
.bottom-nav-setting-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 72px; gap: 10px; align-items: center; min-height: 58px; padding: 8px 12px; background: var(--app-apple-surface); }
.bottom-nav-setting-row > input { width: 18px; height: 18px; accent-color: var(--app-apple-tint); }
.bottom-nav-setting-row > span { display: grid; min-width: 0; }
.bottom-nav-setting-row b { font-size: 14px; }
.bottom-nav-setting-row small { color: var(--app-apple-secondary); font-size: 10px; }
.bottom-nav-setting-row select { min-height: 36px; padding: 4px 8px; border: .5px solid var(--app-apple-separator); border-radius: 10px; background: var(--app-apple-fill); color: var(--app-apple-label); }
.bottom-nav-settings-form > .btn { margin: 13px; }

@media (max-width: 760px) {
  body.jta-app-ui:has(.admin-bottom-nav) .admin-main { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)); }
  .admin-bottom-nav {
    position: fixed !important; z-index: 100; inset: auto 0 0 0 !important; transform: none !important;
    display: grid; grid-template-columns: repeat(var(--bottom-nav-count,5),minmax(0,1fr)); width: 100vw; min-height: calc(58px + env(safe-area-inset-bottom,0px)); margin: 0; padding: 3px max(5px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(5px,env(safe-area-inset-left,0px));
    border: 0; border-top: .5px solid rgba(255,255,255,.14); border-radius: 0; background: rgba(24,24,26,.96); color: #a6a6ab;
    box-shadow: 0 -8px 24px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  }
  .admin-bottom-nav a { position: relative; display: grid; place-items: center; align-content: center; gap: 0; min-width: 0; min-height: 54px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 9px; font-weight: 750; line-height: 1.1; -webkit-tap-highlight-color: transparent; }
  .admin-bottom-nav a.is-active { background: transparent; color: #fff; }
  .admin-bottom-nav a.is-active::before { content: ""; position: absolute; top: 1px; left: 50%; width: 22px; height: 3px; border-radius: 2px; background: #fff; transform: translateX(-50%); }
  .admin-bottom-nav a:active { transform: scale(.94); }
  .admin-bottom-nav-icon { display: grid; place-items: center; width: 28px; height: 28px; }
  .admin-bottom-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .admin-bottom-nav a.is-active svg { stroke-width: 2.35; }
  body:has(.nav-toggle:checked) .admin-bottom-nav { display: none; }
  .chat-admin-room-page .admin-bottom-nav,
  .office-hub-page .admin-bottom-nav { display: none; }
  body.chat-admin-room-page:has(.admin-bottom-nav) .admin-main,
  body.office-hub-page:has(.admin-bottom-nav) .admin-main { padding-bottom: 0; }
}
.nav-toggle:checked ~ .drawer-overlay { opacity: 1; visibility: visible; }
.nav-toggle:checked ~ .drawer { transform: none; }
body:has(.nav-toggle:checked) { overflow: hidden; }

.drawer-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  padding: max(6px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 6px 18px;
  border-bottom: 1px solid #26262e; background: #17171c;
}
.drawer-close { flex: none; min-width: 44px; min-height: 44px; touch-action: manipulation; }
.drawer-title { font-size: 11.5px; letter-spacing: .18em; color: #9ca3af; font-weight: 700; }
.drawer-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px 8px; }
.drawer-user-name { font-weight: 700; font-size: 14px; }
.drawer-links { padding: 6px 0 10px; }
.drawer-link {
  display: flex; align-items: center; min-height: 46px; padding: 10px 18px;
  color: #d1d5db; text-decoration: none; font-size: 14.5px; border-left: 3px solid transparent;
}
.drawer-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.drawer-link.active { background: rgba(216,67,42,.16); border-left-color: var(--accent); color: #fff; font-weight: 700; }
.drawer-link.as-button {
  width: 100%; background: none; border: 0; border-left: 3px solid transparent;
  font-family: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
/* 別タブで開く項目(公開サイト等)。管理メニューとは別枠だと分かるようにする */
.drawer-link.is-external { border-top: 1px solid #26262e; margin-top: 6px; color: #9ca3af; }
.drawer-link.is-external::after {
  content: '\2197'; margin-left: auto; padding-left: 10px; font-size: 12px; opacity: .75;
}
.drawer-link.section-start { border-top: 1px solid #26262e; margin-top: 6px; padding-top: 14px; }
.drawer-foot { border-top: 1px solid #26262e; margin-top: 6px; padding-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-overlay, .burger, .burger::before, .burger::after { transition: none; }
}

@media (display-mode: standalone) {
  .drawer { height: 100vh; }
}
html.is-standalone-pwa .drawer { height: 100vh; }

.passkey-enrollment-panel { max-width: 560px; margin: 40px auto; padding: 24px; }
.line-browser-guide { margin: 0 0 26px; padding: 20px; border: 2px solid #29c45a; border-radius: 18px; background: #f4fff7; color: #102317; box-shadow: 0 14px 36px rgba(0,0,0,.12); }
.line-browser-guide-badge { display: inline-flex; margin-bottom: 10px; padding: 4px 9px; border-radius: 999px; background: #06c755; color: #fff; font-size: 12px; font-weight: 800; }
.line-browser-guide h1 { margin: 0 0 10px; color: #102317; font-size: clamp(22px,6vw,30px); line-height: 1.25; }
.line-browser-guide h3 { margin: 0 0 10px; color: #102317; font-size: clamp(20px,5vw,27px); line-height: 1.3; }
.line-browser-guide p { margin: 0 0 14px; color: #36513f; line-height: 1.7; }
.line-browser-guide ol { margin: 0 0 16px; padding-left: 24px; font-weight: 750; line-height: 1.9; }
.line-browser-guide .line-browser-copy { width: 100%; border-color: #087f36; background: #087f36; color: #fff; }
.line-browser-copy-status { min-height: 1.5em; margin: 10px 0 0 !important; font-size: 13px; font-weight: 700; }
.settings-line-browser-guide { margin-bottom: 8px; }
@media (max-width: 600px) { .passkey-enrollment-panel { margin: 0; padding: 18px 14px 34px; } .line-browser-guide { padding: 18px 16px; border-radius: 16px; } }

/* ---------- hero ---------- */
.hero {
  background: radial-gradient(1200px 500px at 80% -10%, #2a2a33 0%, var(--dark) 55%);
  color: #fff; padding: 72px 20px 84px; text-align: center;
}
.hero .eyebrow { color: var(--accent); letter-spacing: .3em; font-size: 12px; font-weight: 700; }
.hero h1 { font-size: clamp(26px, 5.4vw, 44px); line-height: 1.4; margin: 14px 0 10px; letter-spacing: .04em; }
.hero p { color: #b7bcc5; max-width: 560px; margin: 0 auto 26px; font-size: 15px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 12px 26px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 14px; border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
  transition: .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { border-color: #4b5563; color: #e5e7eb; background: transparent; }
.btn-ghost:hover { border-color: #9ca3af; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 7px 16px; font-size: 12.5px; }
.btn-google {
  background: #fff; color: var(--ink); border-color: #d6d8db;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-google:hover { border-color: var(--ink); }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- layout ---------- */
.container { max-width: 1000px; margin: 0 auto; padding: 0 18px; }
.section { padding: 56px 0; }
.section-title { text-align: center; font-size: 24px; letter-spacing: .08em; margin: 0 0 8px; }
.section-lead { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 32px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.card h3 { margin: 0 0 6px; font-size: 17px; }
.price { font-size: 22px; font-weight: 800; }
.price small { font-size: 12px; color: var(--muted); font-weight: 500; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.badge {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: #f1f2f4; color: #374151; border: 1px solid var(--line);
}
.badge-accent { background: #fdece8; color: var(--accent-dark); border-color: #f6cfc6; }
.badge-ok { background: #e8f5ee; color: var(--ok); border-color: #cae8d8; }
.badge-warn { background: #fef3e2; color: var(--warn); border-color: #f5dcb8; }
.badge-bad { background: #fdeaea; color: var(--bad); border-color: #f5c6c6; }

.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: .2em; margin-bottom: 6px;
}
.step h4 { margin: 0 0 4px; font-size: 15px; }
.step p { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- forms ---------- */
.form-card { max-width: 460px; margin: 40px auto; }
.form-card.onboarding-card { max-width: 780px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=tel],
.field input[type=number], .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid #d6d8db; border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); }
.choice { display: block; border: 1.5px solid #d6d8db; border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; background: #fff; font-size: 14px; }
.choice:has(input:checked) { border-color: var(--accent); background: #fdf3f1; }
.choice input { margin-right: 8px; }

/* 受講者情報: iPhoneの巨大な日付カレンダーを避け、年・月・日を省スペースで選ぶ */
.profile-form,
.profile-form * { box-sizing: border-box; }
.profile-form input:not([type=radio]):not([type=checkbox]),
.profile-form select,
.profile-form textarea { width: 100%; max-width: 100%; min-width: 0; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
.profile-person-name { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.profile-person-name legend { margin-bottom: 5px; font-size: 13px; font-weight: 700; }
.profile-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.profile-name-grid label { position: relative; min-width: 0; margin: 0; }
.profile-name-grid label span { position: absolute; left: 12px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.profile-name-grid input[type=text] { padding-left: 46px; }
.profile-birthdate { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.profile-birthdate legend { margin-bottom: 5px; font-size: 13px; font-weight: 700; }
.profile-date-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.profile-date-grid label { position: relative; min-width: 0; margin: 0; }
.profile-date-grid label span { position: absolute; right: 11px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.profile-date-grid select { padding-right: 28px; appearance: auto; }
.profile-postal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; min-width: 0; }
.profile-postal-row .btn { min-height: 46px; padding-inline: 16px; white-space: nowrap; }
.profile-step-note { display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #efb4a8; border-left: 4px solid var(--accent); border-radius: 10px; background: #fff8f6; font-size: 13px; }
.profile-step-note b { color: var(--accent-dark); }
.profile-step-note span { color: #4b5563; }
.selected-seminar-summary {
  position: relative; display: grid; gap: 4px; min-width: 0; margin: 0 0 18px; padding: 15px 16px 15px 48px;
  border: 1.5px solid var(--accent); border-radius: 13px; background: #fff8f6; box-shadow: 0 5px 16px rgba(225,65,42,.06);
}
.selected-seminar-summary::before {
  content: "✓"; position: absolute; top: 16px; left: 15px; display: grid; place-items: center;
  width: 23px; height: 23px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 900;
}
.selected-seminar-label { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.selected-seminar-summary time { color: #17181b; font-size: clamp(17px, 4.8vw, 21px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.35; }
.selected-seminar-summary strong { min-width: 0; color: #42454b; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
#profile-postal-status.is-ok { color: var(--ok); }
#profile-postal-status.is-bad { color: var(--bad); }
.auth-fast-label { margin: 14px 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.line-link-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 11px 12px; border: 1px solid #06c755; border-radius: 9px; background: #eafaf0; font-size: 13px; line-height: 1.5; }
.line-link-note b, .line-link-note small { display: block; }
.line-link-note small { margin-top: 2px; color: #374151; font-size: 11.5px; }
.social-account-note { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid #06c755; background: #f3fbf6; color: #374151; font-size: 12px; line-height: 1.65; }
.footer-jta-brand { display: flex; align-items: center; gap: 9px; color: #fff; }
.footer-jta-brand img { width: 36px; height: 36px; }
.footer-jta-brand strong { font-size: 14px; letter-spacing: .06em; }
.footer-jta-brand small { color: #aeb7ca; font-size: 10px; letter-spacing: .14em; }

@media (min-width: 760px) {
  .onboarding-card { padding: 28px 30px 30px; }
  .onboarding-card .profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
  .onboarding-card .profile-form > .form-wide,
  .onboarding-card .profile-form > .social-account-note,
  .onboarding-card .profile-form > .btn-block { grid-column: 1 / -1; }
  .onboarding-card .profile-form > .btn-block { margin-top: 4px; }
}

@media (max-width: 390px) {
  .profile-date-grid { gap: 6px; }
  .profile-postal-row { grid-template-columns: minmax(0, 1fr); }
  .profile-postal-row .btn { width: 100%; }
}

/* ---------- alerts ---------- */
.alert { border-radius: 10px; padding: 12px 16px; margin: 16px auto; max-width: 1000px; font-size: 14px; }
.alert-ok { background: #e8f5ee; color: var(--ok); border: 1px solid #cae8d8; }
.alert-err { background: #fdeaea; color: var(--bad); border: 1px solid #f5c6c6; }
.alert ul { margin: 0; padding-left: 18px; }

/* ---------- tables ---------- */
/* 横に長い表(主に管理画面)は指でスクロール。端まで来てもブラウザの戻るジェスチャに取られないようにする */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
table.tbl { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 13.5px; }
.tbl th { text-align: left; background: #f3f4f6; padding: 10px 12px; font-size: 12px; color: #4b5563; white-space: nowrap; }
.tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl .num { text-align: right; white-space: nowrap; }

/* ≤640では表をカード化する(data-labelはJSがtheadから自動で付ける) */
@media (max-width: 640px) {
  table.tbl.cardize, .cardize thead, .cardize tbody, .cardize tr, .cardize td { display: block; }
  .cardize thead { display: none; }
  .cardize { border: 0; background: transparent; box-shadow: none; }
  .tbl-wrap:has(.cardize) { overflow: visible; }

  .cardize tr {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
  }
  .cardize td {
    border: 0; padding: 4px 0; font-size: 13.5px;
    display: flex; gap: 12px; align-items: baseline;
  }
  .cardize td::before {
    content: attr(data-label); flex: 0 0 6em;
    color: var(--muted); font-size: 11.5px; line-height: 1.7;
  }
  .cardize td.num { text-align: left; white-space: normal; }
  .cardize td:empty { display: none; }
  .cardize .hint { font-size: 11.5px; }

  /* 1行目は見出しとして大きく出す */
  .cardize td.card-title {
    display: block; padding: 0 0 9px; margin-bottom: 7px;
    font-size: 15.5px; font-weight: 700; border-bottom: 1px solid var(--line);
  }
  .cardize td.card-title::before { display: none; }

  /* 操作用のフォームが入るセルは折り返す */
  .cardize td form, .cardize td .toolbar { flex-wrap: wrap; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: #9ca3af; padding: 46px 20px 30px; margin-top: 60px; font-size: 13px; }
.site-footer .cols { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.site-footer a { color: #d1d5db; text-decoration: none; margin-right: 14px; }
.site-footer .copy { max-width: 1000px; margin: 26px auto 0; border-top: 1px solid #26262c; padding-top: 18px; font-size: 11px; }

/* ---------- admin ---------- */
.admin-main { max-width: 1100px; margin: 24px auto 60px; padding: 0 18px; }
.admin-roster-page .admin-main { max-width: 1540px; }
.roster-table { min-width: 1260px; }
.roster-table .roster-email { min-width: 250px; }
.roster-table .roster-phone { min-width: 130px; white-space: nowrap; }
.roster-table .roster-address { min-width: 300px; max-width: 440px; line-height: 1.55; overflow-wrap: anywhere; }
.copy-field { display: flex; align-items: flex-start; gap: 7px; min-width: 0; max-width: 100%; }
.copy-field-value { min-width: 0; overflow-wrap: anywhere; }
.roster-identity { min-width: 190px; }
.roster-identity .roster-kana { margin-top: 7px; color: var(--muted); font-size: 12px; }
.copy-field-button {
  position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 1px solid #d5d8de; border-radius: 7px; background: #fff; color: #4b5563; cursor: pointer;
}
.copy-button-icon { width: 15px; height: 15px; display: block; }
.copy-field-button:hover { border-color: #9ca3af; color: var(--ink); }
.copy-field-button.is-copied { border-color: #9bcdb0; background: #edf8f1; color: var(--ok); }
.copy-field-button.is-copied::after {
  content: "コピー済み"; position: absolute; z-index: 3; top: calc(100% + 5px); right: 0; padding: 4px 7px;
  border-radius: 6px; background: var(--ink); color: #fff; font-size: 10px; line-height: 1; white-space: nowrap;
}
.copy-field-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.roster-infinite { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; }
.roster-infinite.is-loading .roster-infinite-status::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px;
  border: 2px solid #d8dbe0; border-top-color: var(--accent); border-radius: 50%; animation: roster-spin .7s linear infinite;
}
@keyframes roster-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .admin-roster-page { max-width: 100%; overflow-x: hidden; }
  .admin-roster-page .admin-main { width: 100%; max-width: 100%; min-width: 0; padding: 0 12px; }
  .roster-table-wrap { width: 100%; max-width: 100%; overflow: visible; }
  .roster-table.cardize { width: 100%; min-width: 0; max-width: 100%; }
  .roster-table.cardize tr { display: grid; width: 100%; min-width: 0; }
  .roster-table.cardize td {
    width: 100%; min-width: 0; max-width: none; align-items: flex-start; white-space: normal;
  }
  .roster-table.cardize td.card-title { order: -2; }
  .roster-table.cardize td:first-child { order: -1; padding-bottom: 7px; color: var(--muted); }
  .roster-table.cardize td:first-child::before { content: "会員ID"; }
  .roster-table.cardize .copy-field { flex: 1; justify-content: space-between; }
  .roster-table.cardize .copy-field-button { width: 32px; height: 32px; }
}
.page-title { font-size: 20px; margin: 6px 0 18px; }
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 26px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat .label { font-size: 12px; color: var(--muted); }
.stat .value { font-size: 22px; font-weight: 800; }
.stat.stat-today { grid-column: span 2; border-color: #f0d2c9; background: #fff8f5; }
.stat.stat-today .value { color: var(--accent); font-size: 28px; }
.stat.warn .value { color: var(--warn); }
.stat.bad .value { color: var(--bad); }
.application-amount { color: var(--accent); font-weight: 800; }
.jta-document-page { min-height: 100svh; margin: 0; background: #101014; }
.jta-document-shell { min-height: 100svh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.jta-document-card { width: min(100%, 520px); padding: 42px 32px 34px; border-radius: 24px; background: #f7f5f0; box-shadow: 0 28px 80px rgba(0,0,0,.38); text-align: center; }
.jta-document-logo { width: 76px; height: 76px; display: block; margin: 0 auto 18px; }
.jta-document-kicker { margin: 0 0 15px; color: #77716b; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.jta-document-card h1 { margin: 0; font-size: clamp(30px, 8vw, 44px); line-height: 1.25; letter-spacing: .02em; }
.jta-document-version { margin: 16px 0 0; font-weight: 700; }
.jta-document-version span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.jta-document-meta { margin: 22px 0; color: var(--muted); font-size: 13px; }
.jta-document-actions { display: grid; gap: 10px; }
.jta-document-actions .btn { width: 100%; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; }
.jta-document-ipad { margin: 20px 0 0; color: #716c67; font-size: 12px; line-height: 1.8; }
.jta-document-direct { display: inline-block; margin-top: 12px; color: #5e5a56; font-size: 12px; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .jta-document-card { padding: 34px 20px 28px; border-radius: 20px; }
}
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=text] { padding: 8px 12px; border: 1.5px solid #d6d8db; border-radius: 8px; font-size: 14px; }
.tab { font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); }
.tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.pagination { display: flex; gap: 8px; list-style: none; padding: 0; margin: 18px 0; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-decoration: none; font-size: 13px; }

.mono { font-family: Consolas, monospace; }
.mt0 { margin-top: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- seminar operations: editorial control sheet ---------- */
.admin-seminar-page {
  --seminar-paper: #fffdf8;
  --seminar-ink: #171612;
  --seminar-red: #c83b27;
  --seminar-green: #137a4c;
}
.admin-seminar-page .admin-main { max-width: 1380px; }
.seminar-page-head,
.seminar-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 22px; }
.seminar-page-head { margin: 0 0 18px; }
.seminar-page-head h1,
.seminar-detail-head h1 { margin: 0 0 4px; color: var(--seminar-ink); font-size: clamp(27px, 3vw, 42px); line-height: 1.22; letter-spacing: .02em; }
.seminar-page-head p,
.seminar-detail-head p { margin: 0; color: var(--muted); font-size: 13px; }
.seminar-back { display: inline-block; margin-bottom: 10px; color: #57534e; font-size: 12px; text-decoration: none; }
.seminar-back:hover { color: var(--seminar-red); }

.seminar-readiness { margin-bottom: 18px; border-block: 1px solid #dcd8cf; }
.seminar-readiness summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 50px; padding: 10px 2px; cursor: pointer; list-style: none; }
.seminar-readiness summary::-webkit-details-marker { display: none; }
.seminar-readiness summary > span { font-size: 13px; font-weight: 800; }
.seminar-readiness summary > b { font-size: 12px; }
.seminar-readiness .is-ready { color: var(--seminar-green); }
.seminar-readiness .is-stop { color: var(--bad); }
.seminar-readiness-list { border-top: 1px solid #e7e3dc; }
.seminar-readiness-row { display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: 3px 14px; padding: 11px 2px; border-bottom: 1px solid #e7e3dc; }
.seminar-readiness-row:last-child { border-bottom: 0; }
.seminar-readiness-row > span { color: inherit; font-size: 12px; font-weight: 750; }
.seminar-readiness-row > b { color: inherit; font-size: 12px; }
.seminar-readiness-row > small { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; }
.seminar-readiness-link { display: inline-flex; margin: 0 2px 12px; color: inherit; font-size: 12px; font-weight: 750; text-underline-offset: 3px; }
.seminar-action-note { display: flex; gap: 12px; align-items: center; margin: 0 0 18px; padding: 11px 14px; border: 1px solid #ecc8c2; border-radius: 10px; background: #fff6f4; color: #6c2720; font-size: 12px; }
.seminar-action-note b { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 10px; }

.seminar-panel { margin-bottom: 18px; padding: 24px; border: 1px solid #dedbd3; border-radius: 12px; background: var(--seminar-paper); box-shadow: none; }
.seminar-section-head { display: block; margin-bottom: 20px; }
.seminar-section-head h2 { margin: 0; font-size: 19px; line-height: 1.35; }
.seminar-section-head h2 small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.seminar-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.seminar-quick-form { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(300px,1.4fr) minmax(175px,.8fr) minmax(175px,.8fr) 90px auto; gap: 12px; align-items: end; }
.seminar-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: end; }
.seminar-field { display: grid; gap: 6px; min-width: 0; }
.seminar-field > span { color: #57534e; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.seminar-field input,
.seminar-field select,
.seminar-link-card input,
.seminar-note-panel textarea { width: 100%; min-width: 0; min-height: 45px; padding: 10px 12px; border: 1px solid #cfcbc2; border-radius: 9px; background: #fff; color: var(--seminar-ink); font: inherit; font-size: 13px; }
.seminar-field input:focus,
.seminar-field select:focus,
.seminar-link-card input:focus,
.seminar-note-panel textarea:focus { outline: 2px solid rgba(200,59,39,.2); border-color: var(--seminar-red); }
.seminar-field-wide,
.seminar-field-name { grid-column: span 2; }
.seminar-field-full { grid-column: 1 / -1; }
.seminar-capacity { max-width: 120px; }

.seminar-session-list { display: grid; gap: 9px; }
.seminar-session-row { display: grid; grid-template-columns: 88px minmax(260px,1fr) 90px 90px auto; gap: 16px; align-items: center; padding: 15px 16px; border: 1px solid #e2dfd8; border-radius: 12px; background: #fff; }
.seminar-session-row time { display: grid; padding-right: 14px; border-right: 1px solid #e5e1da; }
.seminar-session-row time b { font: 800 23px/1.2 Consolas, monospace; }
.seminar-session-row time span { color: var(--muted); font-size: 10.5px; }
.seminar-session-name h3 { margin: 0 0 3px; font-size: 15px; }
.seminar-session-name p { margin: 0; color: var(--muted); font-size: 11px; }
.seminar-session-meta { display: grid; }
.seminar-session-meta span { color: var(--muted); font-size: 10px; }
.seminar-session-meta b { font: 800 19px/1.35 Consolas, monospace; }
.seminar-session-meta small { color: var(--muted); font-size: 10px; font-weight: 500; }
.seminar-empty { margin: 0; padding: 32px; color: var(--muted); text-align: center; }

.seminar-state { display: inline-flex; justify-content: center; align-items: center; width: max-content; min-width: 72px; min-height: 28px; padding: 4px 10px; border: 1px solid #dad7d0; border-radius: 99px; background: #f3f2ef; color: #57534e; font-size: 11px; font-weight: 800; }
.seminar-state.is-open { border-color: #a9d9c0; background: #eaf7f0; color: var(--seminar-green); }
.seminar-state.is-cancelled { border-color: #efc2bb; background: #fdf0ed; color: var(--bad); }
.seminar-state.is-closed { background: #efefed; color: #555; }
.seminar-detail-badges { display: flex; gap: 10px; align-items: center; }
.seminar-people { display: inline-flex; gap: 3px; align-items: baseline; color: #57534e; font-size: 11px; }
.seminar-people b { color: var(--seminar-ink); font: 800 24px/1 Consolas, monospace; }

.seminar-advanced { margin-top: 18px; border-top: 1px solid #e0ddd5; }
.seminar-advanced summary { width: max-content; margin-top: 14px; color: #57534e; font-size: 12px; font-weight: 700; cursor: pointer; }
.seminar-advanced[open] summary { margin-bottom: 14px; color: var(--seminar-red); }
.seminar-zoom-card { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 19px 20px; border: 1px solid #d5d1c9; border-left: 4px solid var(--warn); border-radius: 12px; background: #fff; }
.seminar-zoom-card.is-connected { border-left-color: #2d8cff; background: linear-gradient(100deg,#f4f9ff,#fff 54%); }
.seminar-zoom-copy h3 { margin: 0 0 4px; font-size: 16px; }
.seminar-zoom-copy p { margin: 0; color: var(--muted); font-size: 11.5px; }
.seminar-zoom-ready { display: grid; min-width: 160px; padding-left: 18px; border-left: 1px solid #dedbd5; }
.seminar-zoom-ready span { color: var(--muted); font-size: 10px; }
.seminar-zoom-ready b { font-size: 16px; }
.seminar-zoom-ready small { color: var(--muted); font-size: 10.5px; overflow-wrap: anywhere; }
.seminar-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.seminar-link-card { display: grid; gap: 5px; padding: 16px; border: 1px solid #dedbd5; border-radius: 12px; background: #fff; }
.seminar-link-card > span { color: var(--seminar-red); font: 800 10px/1.2 Consolas, monospace; letter-spacing: .08em; }
.seminar-link-card > b { margin-bottom: 3px; font-size: 14px; }
.seminar-link-card input { min-height: 42px; }
.seminar-note-panel textarea { resize: vertical; }
.seminar-savebar { position: sticky; bottom: 12px; z-index: 12; display: flex; justify-content: space-between; gap: 18px; align-items: center; margin: 0 0 18px; padding: 13px 14px 13px 18px; border: 1px solid #26241f; border-radius: 14px; background: rgba(24,23,20,.96); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(8px); }
.seminar-savebar div { display: grid; }
.seminar-savebar b { font-size: 13px; }
.seminar-savebar span { color: #aaa69e; font-size: 10.5px; }
.seminar-zoom-sync-form { margin: -8px 0 18px; text-align: right; }
.seminar-participant-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.seminar-participant-list { display: grid; gap: 14px; }
.seminar-participant-card { min-width: 0; overflow: hidden; border: 1px solid #d9d5cc; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(31,28,20,.045); }
.seminar-participant-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 20px 22px 16px; }
.seminar-participant-head > div { min-width: 0; }
.seminar-participant-head span:first-child { color: var(--seminar-red); font: 800 10px/1.3 Consolas, monospace; letter-spacing: .1em; }
.seminar-participant-head h3 { margin: 5px 0 2px; color: var(--seminar-ink); font-size: 21px; line-height: 1.3; }
.seminar-participant-head p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.seminar-enrollment-state { flex: none; display: inline-flex; padding: 4px 10px; border-radius: 99px; background: #e9f6ef; color: var(--seminar-green); font-size: 10.5px; font-weight: 800; }
.seminar-enrollment-state.is-cancelled { background: #fdf0ed; color: var(--bad); }
.seminar-participant-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 22px 18px; padding: 13px 0; border-top: 1px solid #ece9e3; border-bottom: 1px solid #ece9e3; }
.seminar-participant-meta div { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 10px; padding-right: 18px; }
.seminar-participant-meta div + div { padding-left: 18px; border-left: 1px solid #ece9e3; }
.seminar-participant-meta dt { color: var(--muted); font-size: 11px; }
.seminar-participant-meta dd { min-width: 0; margin: 0; color: #35332e; font-size: 12.5px; font-weight: 700; }
.seminar-progress-block { padding: 0 22px 20px; }
.seminar-progress-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 9px; }
.seminar-progress-head b { color: #37342f; font-size: 12px; }
.seminar-progress-head span { color: var(--muted); font-size: 11px; }
.seminar-progress-head strong { color: var(--seminar-green); font-size: 18px; }
.seminar-progress-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 3px; min-height: 10px; padding: 2px; border-radius: 99px; background: #e8e5df; overflow: hidden; }
.seminar-progress-segment { min-width: 0; border-radius: 99px; background: #c9c6bf; }
.seminar-progress-segment.is-sent { background: var(--seminar-green); }
.seminar-progress-segment.is-sending { background: #2d71ba; }
.seminar-progress-segment.is-pending { background: #9db9dc; }
.seminar-progress-segment.is-waiting_configuration { background: var(--warn); }
.seminar-progress-segment.is-failed { background: var(--bad); }
.seminar-progress-segment.is-skipped { background: #77736a; }
.seminar-next-delivery { display: grid; grid-template-columns: 70px minmax(0,1fr) auto auto; gap: 8px 12px; align-items: center; margin-top: 12px; padding: 11px 13px; border-left: 3px solid #2d71ba; background: #f4f8fd; }
.seminar-next-delivery span { color: #5f6d7e; font-size: 10px; font-weight: 800; }
.seminar-next-delivery b { min-width: 0; font-size: 12px; }
.seminar-next-delivery time { color: #4f5966; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seminar-next-delivery em { padding: 3px 7px; border-radius: 99px; background: #e8faef; color: #078739; font-size: 9.5px; font-style: normal; font-weight: 800; white-space: nowrap; }
.seminar-next-delivery.is-complete { grid-template-columns: 70px 1fr; border-left-color: var(--seminar-green); background: #eff8f3; }
.seminar-delivery-details { margin-top: 12px; border-top: 1px solid #ece9e3; }
.seminar-delivery-details summary { width: max-content; max-width: 100%; padding-top: 12px; color: #5b5750; font-size: 11px; font-weight: 800; cursor: pointer; }
.seminar-delivery-details[open] summary { color: var(--seminar-red); }
.seminar-delivery-list { margin-top: 8px; border-top: 1px solid #ece9e3; }
.seminar-delivery-row { display: grid; grid-template-columns: 122px minmax(180px,1fr) auto auto; gap: 8px 12px; align-items: center; min-width: 0; padding: 11px 0; border-bottom: 1px solid #ece9e3; }
.seminar-delivery-row time { color: #5b5750; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.seminar-delivery-row b { min-width: 0; font-size: 11.5px; }
.seminar-delivery-row small { grid-column: 2 / -1; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.seminar-table { font-size: 12.5px; }
.seminar-table th { background: #efede8; color: #5e5a52; }
.seminar-channel,
.seminar-delivery-state { display: inline-flex; padding: 3px 8px; border-radius: 99px; background: #eeece8; color: #57534e; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.seminar-channel.is-line { background: #e8faef; color: #078739; }
.seminar-delivery-state.is-sent { background: #e8f5ee; color: var(--ok); }
.seminar-delivery-state.is-waiting_configuration,
.seminar-delivery-state.is-failed { background: #fff0ed; color: var(--bad); }
.seminar-delivery-state.is-pending { background: #edf4ff; color: #2761a4; }

@media (max-width: 980px) {
  .seminar-quick-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seminar-quick-form .seminar-field-wide { grid-column: 1 / -1; }
  .seminar-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seminar-session-row { grid-template-columns: 78px minmax(220px,1fr) 80px auto; }
  .seminar-session-row .btn { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .admin-seminar-page .admin-main { padding-inline: 11px; }
  .seminar-page-head,
  .seminar-detail-head { align-items: flex-start; margin-bottom: 16px; }
  .seminar-page-head h1,
  .seminar-detail-head h1 { font-size: 25px; }
  .seminar-action-note { align-items: flex-start; }
  .seminar-panel { padding: 17px 14px; border-radius: 13px; }
  .seminar-section-head { margin-bottom: 15px; }
  .seminar-quick-form,
  .seminar-form-grid,
  .seminar-link-grid { grid-template-columns: minmax(0,1fr); }
  .seminar-field-wide,
  .seminar-field-name,
  .seminar-field-full { grid-column: auto; }
  .seminar-capacity { max-width: none; }
  .seminar-session-row { grid-template-columns: 66px minmax(0,1fr); gap: 10px 12px; align-items: start; }
  .seminar-session-row time { grid-row: span 2; }
  .seminar-session-meta { grid-column: 2; }
  .seminar-session-row .seminar-state { grid-column: 1; }
  .seminar-session-row .btn { grid-column: 2; width: 100%; text-align: center; }
  .seminar-detail-badges { display: grid; justify-items: end; }
  .seminar-zoom-card { display: grid; }
  .seminar-zoom-ready { padding: 10px 0 0; border-top: 1px solid #dedbd5; border-left: 0; }
  .seminar-savebar { bottom: 8px; padding: 10px; }
  .seminar-savebar div { display: none; }
  .seminar-savebar .btn { width: 100%; text-align: center; }
  .seminar-participant-panel { padding: 0; }
  .seminar-participant-head { padding: 17px 16px 13px; }
  .seminar-participant-head h3 { font-size: 18px; }
  .seminar-participant-meta { grid-template-columns: minmax(0,1fr); gap: 9px; margin: 0 16px 15px; padding: 11px 0; }
  .seminar-participant-meta div { grid-template-columns: 72px minmax(0,1fr); padding-right: 0; }
  .seminar-participant-meta div + div { padding-top: 9px; padding-left: 0; border-top: 1px solid #ece9e3; border-left: 0; }
  .seminar-progress-block { padding: 0 16px 17px; }
  .seminar-next-delivery { grid-template-columns: 62px minmax(0,1fr); }
  .seminar-next-delivery time { grid-column: 2; }
  .seminar-next-delivery em { grid-column: 2; justify-self: start; }
  .seminar-delivery-row { grid-template-columns: minmax(0,1fr) auto; gap: 6px 9px; }
  .seminar-delivery-row time { grid-column: 1; }
  .seminar-delivery-row b { grid-column: 1 / -1; }
  .seminar-delivery-row .seminar-channel { grid-column: 1; justify-self: start; }
  .seminar-delivery-row .seminar-delivery-state { grid-column: 2; grid-row: 1; }
  .seminar-delivery-row small { grid-column: 1 / -1; }
}

/* ---------- implementation roadmap ---------- */
.admin-roadmap-page {
  --roadmap-paper: #fbfaf6;
  --roadmap-ink: #17181c;
  --roadmap-line: #d8d6ce;
  --roadmap-partial: #c27816;
}
.admin-roadmap-page .admin-main { max-width: 1380px; }
.roadmap-hero {
  display: flex; justify-content: space-between; gap: 28px; align-items: center;
  min-height: 0; padding: 18px 22px;
  border: 1px solid var(--roadmap-line); border-radius: 14px; color: var(--roadmap-ink); background: #fff;
}
.roadmap-kicker { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-bottom: 4px; color: #8a8d92; font: 700 9px/1.4 Consolas, monospace; letter-spacing: .12em; }
.roadmap-kicker span:first-child { color: var(--accent); }
.roadmap-hero h1 { max-width: 820px; margin: 0; font-size: clamp(23px, 2.7vw, 34px); line-height: 1.2; letter-spacing: -.035em; }
.roadmap-hero-copy > p { max-width: 760px; margin: 3px 0 0; color: #555860; font-size: 12.5px; }
.roadmap-hero-copy .roadmap-source { margin-top: 1px; color: #9a9ca1; font-size: 10.5px; }
.roadmap-meter { display: flex; align-items: stretch; gap: 8px; width: auto; }
.roadmap-meter-ring {
  position: relative; display: grid; place-content: center; width: 78px; min-height: 58px; aspect-ratio: auto; border-radius: 10px;
  color: #fff; background: #1b1c22; text-align: center;
}
.roadmap-meter-ring::before { display: none; }
.roadmap-meter-ring strong, .roadmap-meter-ring span { position: relative; z-index: 1; }
.roadmap-meter-ring strong { font: 800 23px/1 Consolas, monospace; letter-spacing: -.06em; }
.roadmap-meter-ring strong small { margin-left: 2px; font-size: 10px; color: #b8bbc4; letter-spacing: 0; }
.roadmap-meter-ring span { margin-top: 3px; color: #9699a3; font-size: 8.5px; letter-spacing: .08em; }
.roadmap-meter-counts { display: grid; grid-template-columns: repeat(3, 58px); gap: 5px; color: #777a81; font-size: 9px; white-space: nowrap; }
.roadmap-meter-counts span { display: grid; place-content: center; justify-items: center; border: 1px solid var(--roadmap-line); border-radius: 10px; background: var(--roadmap-paper); }
.roadmap-meter-counts b { color: #34363c; font: 700 16px/1.2 Consolas, monospace; }
.roadmap-meter-counts .is-complete b { color: #5cd49a; }
.roadmap-meter-counts .is-partial b { color: #f2b459; }

.roadmap-now {
  display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 28px; align-items: center;
  margin: 18px 0 34px; padding: 26px 32px; border: 1px solid #efb4a8; border-radius: 16px;
  background: linear-gradient(105deg, #fff2ed, #fff 64%); box-shadow: 0 10px 36px rgba(54,31,25,.06);
}
.roadmap-now-index { align-self: stretch; padding-right: 24px; border-right: 1px solid #edc3b9; color: #a55a49; font: 700 10px/1.4 Consolas, monospace; letter-spacing: .2em; }
.roadmap-now-index b { display: block; margin-top: 5px; color: var(--accent); font-size: 42px; letter-spacing: -.06em; }
.roadmap-now-label, .roadmap-aside-label { color: var(--accent-dark); font: 800 10px/1.4 Consolas, monospace; letter-spacing: .16em; }
.roadmap-now h2 { margin: 3px 0 7px; font-size: clamp(18px, 2.3vw, 27px); line-height: 1.45; }
.roadmap-now p { margin: 4px 0; color: #44474f; font-size: 13px; }
.roadmap-now .roadmap-boundary { color: var(--muted); font-size: 12px; }

.roadmap-flow { margin-bottom: 44px; padding: 26px 28px 30px; border: 1px solid var(--roadmap-line); border-radius: 18px; background: var(--roadmap-paper); }
.roadmap-section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.roadmap-section-head span { color: var(--accent); font: 700 10px/1.4 Consolas, monospace; letter-spacing: .16em; }
.roadmap-section-head h2 { margin: 2px 0 0; font-size: 20px; }
.roadmap-section-head p { margin: 0; color: var(--muted); font-size: 12px; }
.roadmap-flow-answer {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center;
  margin: -2px 0 32px; padding: 14px 17px; border-left: 5px solid var(--ok); border-radius: 10px;
  background: #edf7f2;
}
.roadmap-flow-answer span { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; padding-right: 16px; border-right: 1px solid #c6e4d5; color: #0f6a3d; font-size: 10px; font-weight: 800; white-space: nowrap; }
.roadmap-flow-answer strong { color: #104f32; font-size: 16px; }
.roadmap-flow-answer p { margin: 0; color: #52645b; font-size: 11.5px; }
.roadmap-flow ol { display: grid; grid-template-columns: repeat(8, minmax(82px, 1fr)); margin: 0; padding: 0; list-style: none; }
.roadmap-flow li { position: relative; min-width: 0; padding: 0 15px; border-top: 2px solid #cfd0cc; }
.roadmap-flow li:first-child { padding-left: 0; }
.roadmap-flow li:last-child { padding-right: 0; }
.roadmap-flow li::before { content: ""; position: absolute; top: -6px; left: 15px; width: 10px; height: 10px; border: 2px solid var(--roadmap-paper); border-radius: 50%; background: #9c9fa2; }
.roadmap-flow li:first-child::before { left: 0; }
.roadmap-flow li:not(:last-child)::after { content: ""; position: absolute; right: -4px; top: -4px; width: 7px; height: 7px; border-top: 2px solid #cfd0cc; border-right: 2px solid #cfd0cc; transform: rotate(45deg); }
.roadmap-flow li.is-complete { border-color: var(--ok); }
.roadmap-flow li.is-complete::before { background: var(--ok); box-shadow: 0 0 0 4px rgba(21,127,76,.12); }
.roadmap-flow li.is-partial { border-color: var(--roadmap-partial); }
.roadmap-flow li.is-partial::before { background: var(--roadmap-partial); }
.roadmap-flow li.is-next { border-color: var(--accent); }
.roadmap-flow li.is-next::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(216,67,42,.13); }
.roadmap-flow li span { display: block; margin-top: 13px; color: #959891; font: 700 10px/1 Consolas, monospace; }
.roadmap-flow li em { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: 999px; color: #666970; background: #e9e9e6; font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.roadmap-flow li.is-complete em { color: #0f6a3d; background: #dff1e8; }
.roadmap-flow li.is-partial em { color: #8b550d; background: #ffedd2; }
.roadmap-flow li.is-next em { color: #fff; background: var(--accent); }
.roadmap-flow li b { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; }
.roadmap-flow li small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; line-height: 1.45; }

.roadmap-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(24px, 4vw, 54px); align-items: start; }
.roadmap-rules-sticky { position: sticky; top: 82px; padding: 24px 22px; border: 1px solid var(--roadmap-line); border-radius: 16px; background: var(--roadmap-paper); }
.roadmap-rules h2 { margin: 3px 0 18px; font-size: 19px; }
.roadmap-rules ol { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.roadmap-rules li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; color: #45484e; font-size: 12px; line-height: 1.65; }
.roadmap-rules li > span { padding-top: 4px; color: var(--accent); font: 700 10px/1 Consolas, monospace; }
.roadmap-legend { display: grid; gap: 7px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--roadmap-line); color: var(--muted); font-size: 11px; }
.roadmap-legend span { display: flex; align-items: center; gap: 8px; }
.roadmap-legend i { width: 9px; height: 9px; border-radius: 50%; background: #b8babd; }
.roadmap-legend i.is-complete { background: var(--ok); }
.roadmap-legend i.is-partial { background: var(--roadmap-partial); }

.roadmap-phases { min-width: 0; }
.roadmap-phase { scroll-margin-top: 78px; padding: 0 0 54px; }
.roadmap-phase + .roadmap-phase { padding-top: 8px; border-top: 1px solid var(--roadmap-line); }
.roadmap-phase-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 28px 0 18px; }
.roadmap-phase-number { color: var(--accent); font: 800 34px/1 Consolas, monospace; letter-spacing: -.08em; }
.roadmap-phase-title h2 { margin: 0; font-size: clamp(20px, 2.5vw, 28px); letter-spacing: -.02em; }
.roadmap-phase-title p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.roadmap-phase-score { display: grid; justify-items: end; min-width: 72px; }
.roadmap-phase-score strong { font: 800 25px/1 Consolas, monospace; }
.roadmap-phase-score strong small { color: #9a9ca1; font-size: 13px; }
.roadmap-phase-score span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.roadmap-requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.roadmap-requirement { position: relative; overflow: hidden; padding: 19px 20px 18px; border: 1px solid var(--roadmap-line); border-radius: 13px; background: #fff; }
.roadmap-requirement::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #b8babd; }
.roadmap-requirement.is-complete::before { background: var(--ok); }
.roadmap-requirement.is-partial::before { background: var(--roadmap-partial); }
.roadmap-requirement-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.roadmap-state { padding: 2px 8px; border-radius: 999px; color: #595c62; background: #eff0f1; font-size: 10px; font-weight: 800; }
.is-complete .roadmap-state { color: #0f6a3d; background: #e6f4ed; }
.is-partial .roadmap-state { color: #91580e; background: #fff1dc; }
.roadmap-requirement code { color: #9a9ca1; font-size: 10px; }
.roadmap-requirement h3 { margin: 11px 0 13px; font-size: 16px; line-height: 1.45; }
.roadmap-requirement dl { display: grid; gap: 10px; margin: 0; }
.roadmap-requirement dl > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
.roadmap-requirement dt { color: #8a8d92; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.roadmap-requirement dd { margin: 0; color: #4a4d53; font-size: 11.5px; line-height: 1.65; }

@media (max-width: 900px) {
  .roadmap-hero { align-items: center; }
  .roadmap-layout { grid-template-columns: 1fr; }
  .roadmap-rules-sticky { position: static; }
  .roadmap-rules ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap-legend { grid-template-columns: repeat(3, auto); }
}

@media (max-width: 640px) {
  .admin-roadmap-page .admin-main { padding-inline: 10px; }
  .roadmap-hero { display: block; padding: 16px; }
  .roadmap-hero h1 { font-size: 24px; }
  .roadmap-hero-copy > p { font-size: 11.5px; }
  .roadmap-meter { margin-top: 12px; }
  .roadmap-meter-ring { width: 70px; min-height: 54px; }
  .roadmap-meter-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
  .roadmap-now { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 17px; }
  .roadmap-now-index { padding-right: 12px; }
  .roadmap-now-index b { font-size: 31px; }
  .roadmap-flow { padding: 21px 17px; }
  .roadmap-section-head { display: block; }
  .roadmap-section-head p { margin-top: 6px; }
  .roadmap-flow-answer { display: block; margin-bottom: 27px; }
  .roadmap-flow-answer span { display: block; padding: 0 0 5px; border: 0; }
  .roadmap-flow-answer strong { display: block; font-size: 14px; }
  .roadmap-flow-answer p { margin-top: 5px; }
  .roadmap-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .roadmap-flow li:nth-child(odd) { padding-left: 0; }
  .roadmap-flow li:nth-child(odd)::before { left: 0; }
  .roadmap-flow li:nth-child(even)::after { display: none; }
  .roadmap-rules ol { grid-template-columns: 1fr; }
  .roadmap-legend { grid-template-columns: 1fr; }
  .roadmap-phase-head { grid-template-columns: 45px minmax(0, 1fr) auto; gap: 10px; }
  .roadmap-phase-number { font-size: 27px; }
  .roadmap-phase-title h2 { font-size: 18px; }
  .roadmap-phase-title p { font-size: 11px; }
  .roadmap-requirements { grid-template-columns: 1fr; }
}

/* ---------- implementation roadmap / simplified ledger ---------- */
.admin-roadmap-page {
  --roadmap-paper: #f4f1ea;
  --roadmap-ink: #191a1d;
  --roadmap-line: #d5d0c6;
  --roadmap-partial: #b46a14;
  background: var(--roadmap-paper);
}
.admin-roadmap-page .admin-main { max-width: 1180px; padding-bottom: 76px; }
.roadmap-shell { padding-top: 12px; color: var(--roadmap-ink); }

.roadmap-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 42px; align-items: end;
  padding: 26px 2px 24px; border-bottom: 2px solid var(--roadmap-ink);
}
.roadmap-heading p { margin: 0 0 6px; color: var(--accent); font: 800 10px/1.4 Consolas, monospace; letter-spacing: .18em; }
.roadmap-heading p span { margin-left: 8px; color: #77746d; }
.roadmap-heading h1 { margin: 0; font-family: var(--font-jp); font-size: clamp(30px, 4vw, 46px); line-height: 1.25; letter-spacing: .025em; }
.roadmap-heading > small { display: block; max-width: 700px; margin-top: 8px; color: #62615f; font-size: 12px; line-height: 1.7; }
.roadmap-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.roadmap-progress-value { display: flex; align-items: baseline; min-width: 72px; }
.roadmap-progress-value strong { font: 800 42px/1 Consolas, monospace; letter-spacing: -.09em; }
.roadmap-progress-value span { margin-left: 4px; color: #77746d; font-size: 12px; }
.roadmap-progress-data { min-width: 0; }
.roadmap-progress-track { display: block; height: 4px; overflow: hidden; background: #d7d3cb; }
.roadmap-progress-track i { display: block; height: 100%; background: var(--accent); }
.roadmap-progress-counts { display: flex; gap: 13px; margin-top: 8px; color: #74716b; font-size: 9px; white-space: nowrap; }
.roadmap-progress-counts span { display: inline-flex; align-items: baseline; gap: 4px; }
.roadmap-progress-counts b { color: #343438; font: 800 13px/1 Consolas, monospace; }
.roadmap-progress-counts .is-complete b { color: var(--ok); }
.roadmap-progress-counts .is-partial b { color: var(--roadmap-partial); }

.roadmap-focus {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr); gap: 24px; align-items: stretch;
  margin: 24px 0 42px; color: #f4f1ea; background: #1c1d20;
}
.roadmap-focus-main { padding: 22px 0 22px 24px; }
.roadmap-focus-main > p { margin: 0; color: #ef7a63; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.roadmap-focus-main h2 { margin: 5px 0 15px; font-size: clamp(19px, 2.5vw, 27px); line-height: 1.45; }
.roadmap-focus-main > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; color: #c3c4c8; font-size: 11.5px; line-height: 1.7; }
.roadmap-focus-main > div b { color: #fff; }
.roadmap-focus aside { padding: 22px 22px; border-left: 1px solid #393a3e; background: #242529; }
.roadmap-focus aside b { color: #ef7a63; font-size: 10px; letter-spacing: .12em; }
.roadmap-focus aside p { margin: 7px 0 0; color: #b8b9bd; font-size: 11px; line-height: 1.7; }

.roadmap-section-title { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 18px; }
.roadmap-section-title > div { display: flex; gap: 12px; align-items: baseline; }
.roadmap-section-title h2 { margin: 0; font-family: var(--font-jp); font-size: 24px; letter-spacing: .025em; }
.roadmap-section-title > p { margin: 0; color: #74716b; font-size: 11px; }

.roadmap-flow { margin: 0 0 48px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.roadmap-flow-summary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--roadmap-line); border-bottom: 1px solid var(--roadmap-line); }
.roadmap-flow-summary > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
.roadmap-flow-summary > div + div { border-left: 1px solid var(--roadmap-line); }
.roadmap-flow-summary span { color: #77746d; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.roadmap-flow-summary strong { color: #3d3d3f; font-size: 11.5px; line-height: 1.65; }
.roadmap-flow ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 25px 0 0; padding: 0; list-style: none; }
.roadmap-flow li {
  position: relative; display: block; min-width: 0; padding: 15px 12px 0; border: 0; border-top: 1px solid #c7c4bd; background: transparent;
}
.roadmap-flow li:first-child { padding-left: 0; }
.roadmap-flow li:last-child { padding-right: 0; }
.roadmap-flow li::before { content: ""; position: absolute; top: -4px; left: 12px; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #9b9993; }
.roadmap-flow li:first-child::before { left: 0; }
.roadmap-flow li:not(:last-child)::after { display: none; }
.roadmap-flow li.is-complete, .roadmap-flow li.is-partial, .roadmap-flow li.is-next { border-color: #c7c4bd; }
.roadmap-flow li.is-complete::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(21,127,76,.1); }
.roadmap-flow li.is-partial::before { background: var(--roadmap-partial); }
.roadmap-flow li.is-next::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(216,67,42,.12); }
.roadmap-flow li > i { display: block; color: #96938d; font: normal 800 9px/1 Consolas, monospace; }
.roadmap-flow li em { display: block; margin: 7px 0 0; padding: 0; color: #75736e; background: none; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.roadmap-flow li.is-complete em { color: var(--ok); background: none; }
.roadmap-flow li.is-partial em { color: var(--roadmap-partial); background: none; }
.roadmap-flow li.is-next em { color: var(--accent); background: none; }
.roadmap-flow li b { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; }
.roadmap-flow li small { display: block; margin-top: 3px; color: #77746d; font-size: 9px; line-height: 1.45; }

.roadmap-work { margin-bottom: 32px; }
.roadmap-phase-list { border-bottom: 1px solid var(--roadmap-ink); }
.roadmap-phase { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--roadmap-line); scroll-margin-top: 74px; }
.roadmap-phase + .roadmap-phase { padding: 0; border-top: 1px solid var(--roadmap-line); }
.roadmap-phase:first-child { border-top: 1px solid var(--roadmap-ink); }
.roadmap-phase > summary {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center;
  min-height: 88px; padding: 13px 6px; cursor: pointer; list-style: none;
}
.roadmap-phase > summary::-webkit-details-marker { display: none; }
.roadmap-phase > summary:hover { background: rgba(255,255,255,.48); }
.roadmap-phase[open] > summary { background: #fff; }
.roadmap-phase-number { color: var(--accent); font: 800 25px/1 Consolas, monospace; letter-spacing: -.06em; }
.roadmap-phase-copy { display: grid; min-width: 0; }
.roadmap-phase-copy > b { font-size: 17px; line-height: 1.45; }
.roadmap-phase-copy > small { margin-top: 3px; color: #74716b; font-size: 10.5px; line-height: 1.5; }
.roadmap-phase-status { display: grid; justify-items: end; min-width: 64px; }
.roadmap-phase-status > b { font: 800 20px/1 Consolas, monospace; }
.roadmap-phase-status > b small { color: #898680; font-size: 11px; }
.roadmap-phase-status > em { margin-top: 4px; color: #85827c; font-size: 8px; font-style: normal; }
.roadmap-phase-toggle { position: relative; width: 14px; height: 14px; }
.roadmap-phase-toggle::before, .roadmap-phase-toggle::after { content: ""; position: absolute; inset: 6px 1px auto; height: 1px; background: #686660; }
.roadmap-phase-toggle::after { transform: rotate(90deg); transition: transform .16s ease; }
.roadmap-phase[open] .roadmap-phase-toggle::after { transform: rotate(0); }
.roadmap-phase-body { padding: 0 24px 25px 80px; background: #fff; }
.roadmap-phase-breakdown { display: flex; gap: 16px; padding: 10px 0 14px; border-top: 1px solid #ebe8e1; color: #77746d; font-size: 9px; }
.roadmap-phase-breakdown span { display: inline-flex; align-items: center; gap: 5px; }
.roadmap-phase-breakdown i { width: 6px; height: 6px; border-radius: 50%; background: #a5a39d; }
.roadmap-phase-breakdown .is-complete i { background: var(--ok); }
.roadmap-phase-breakdown .is-partial i { background: var(--roadmap-partial); }
.roadmap-requirements { display: block; }
.roadmap-requirement {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; overflow: visible;
  padding: 15px 0; border: 0; border-top: 1px solid #ebe8e1; border-radius: 0; background: transparent;
}
.roadmap-requirement::before { display: none; }
.roadmap-requirement-state { display: grid; align-content: start; gap: 4px; justify-items: start; }
.roadmap-requirement-state span { min-width: 28px; padding: 2px 6px; color: #66645f; border: 1px solid #d5d2cb; font-size: 9px; font-weight: 800; text-align: center; }
.roadmap-requirement.is-complete .roadmap-requirement-state span { color: var(--ok); border-color: #a9d2bb; }
.roadmap-requirement.is-partial .roadmap-requirement-state span { color: var(--roadmap-partial); border-color: #dfbf91; }
.roadmap-requirement-state code { color: #99968f; font-size: 8px; }
.roadmap-requirement-copy h3 { margin: 0; font-size: 14px; line-height: 1.45; }
.roadmap-requirement-copy > p { margin: 4px 0 0; color: #64625e; font-size: 11px; line-height: 1.65; }
.roadmap-requirement-copy details { margin-top: 6px; }
.roadmap-requirement-copy details summary { display: inline-block; color: #898680; font-size: 9px; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.roadmap-requirement-copy details summary::-webkit-details-marker { display: none; }
.roadmap-requirement-copy details p { margin: 7px 0 0; padding: 8px 10px; border-left: 2px solid #c9c5bc; color: #5f5d59; background: #f7f5f0; font-size: 10.5px; line-height: 1.65; }

.roadmap-principles { border-top: 1px solid var(--roadmap-ink); border-bottom: 1px solid var(--roadmap-ink); }
.roadmap-principles > summary { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) 18px; gap: 10px; align-items: center; min-height: 64px; cursor: pointer; list-style: none; }
.roadmap-principles > summary::-webkit-details-marker { display: none; }
.roadmap-principles > summary > span { color: var(--accent); font: 800 10px/1 Consolas, monospace; }
.roadmap-principles > summary > b { font-size: 15px; }
.roadmap-principles > summary > small { color: #77746d; font-size: 10px; }
.roadmap-principles > summary > i { position: relative; width: 14px; height: 14px; }
.roadmap-principles > summary > i::before, .roadmap-principles > summary > i::after { content: ""; position: absolute; inset: 6px 1px auto; height: 1px; background: #686660; }
.roadmap-principles > summary > i::after { transform: rotate(90deg); }
.roadmap-principles[open] > summary > i::after { transform: none; }
.roadmap-principles > div { padding: 0 34px 22px; }
.roadmap-principles ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 26px; margin: 0; padding: 16px 0; border-top: 1px solid var(--roadmap-line); list-style: none; }
.roadmap-principles li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; color: #565450; font-size: 10.5px; line-height: 1.65; }
.roadmap-principles li span { color: var(--accent); font: 800 9px/1.6 Consolas, monospace; }
.roadmap-principles > div > p { margin: 0; color: #8c8982; font-size: 9px; }

@media (prefers-reduced-motion: reduce) {
  .roadmap-phase-toggle::after { transition: none; }
}

@media (max-width: 760px) {
  .admin-roadmap-page .admin-main { padding-inline: 12px; }
  .roadmap-header { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; }
  .roadmap-progress { grid-template-columns: 62px minmax(0, 1fr); }
  .roadmap-progress-value strong { font-size: 34px; }
  .roadmap-progress-counts { gap: 8px; }
  .roadmap-focus { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .roadmap-focus-main { padding: 18px 16px; }
  .roadmap-focus-main > div { grid-template-columns: 1fr; gap: 2px; }
  .roadmap-focus aside { grid-column: 1; padding: 14px 16px 18px; border-top: 1px solid #393a3e; border-left: 0; }
  .roadmap-section-title { display: block; }
  .roadmap-section-title > p { margin-top: 5px; }
  .roadmap-flow-summary { grid-template-columns: 1fr; }
  .roadmap-flow-summary > div + div { border-top: 1px solid var(--roadmap-line); border-left: 0; }
  .roadmap-flow-summary > div { grid-template-columns: 67px minmax(0, 1fr); padding-inline: 4px; }
  .roadmap-flow ol { grid-template-columns: 1fr; margin-top: 20px; }
  .roadmap-flow li, .roadmap-flow li:first-child, .roadmap-flow li:last-child {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px 0 12px 15px; border-top: 0; border-left: 1px solid #c7c4bd;
  }
  .roadmap-flow li::before, .roadmap-flow li:first-child::before { top: 13px; left: -4px; }
  .roadmap-flow li > i { padding-top: 4px; }
  .roadmap-flow li em { margin-top: 0; }
  .roadmap-phase > summary { grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 10px; min-height: 76px; padding-inline: 2px; }
  .roadmap-phase-copy > b { font-size: 15px; }
  .roadmap-phase-copy > small { font-size: 9.5px; }
  .roadmap-phase-status { display: none; }
  .roadmap-phase-body { padding: 0 12px 19px; }
  .roadmap-phase-breakdown { flex-wrap: wrap; gap: 7px 12px; }
  .roadmap-requirement { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; }
  .roadmap-principles > summary { grid-template-columns: 28px auto minmax(0, 1fr) 16px; }
  .roadmap-principles > div { padding-inline: 0; }
  .roadmap-principles ol { grid-template-columns: 1fr; }
}

/* ---------- notifications ---------- */
.notification-toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 18px; }
.notification-toolbar .page-title { margin: 0; }
.notification-toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.notification-toolbar-actions form { margin: 0; }
.notification-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 13px; border: 1px solid #25262b; border-radius: 9px; background: #17181b; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.notification-close:hover { background: #2a2b30; }
.notification-close span { font-size: 17px; font-weight: 500; line-height: 1; }
.notification-install {
  box-sizing: border-box; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 17px;
  margin: 0 0 18px; padding: 18px; border: 1px solid #2c2d31; background: #17181c; color: #fff;
  box-shadow: 0 12px 28px rgba(20,20,22,.12);
}
.notification-install * { box-sizing: border-box; }
.notification-install-mark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #4b4c52; background: #232429; }
.notification-install-mark span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); font-size: 24px; font-weight: 400; line-height: 1; }
.notification-install-copy { min-width: 0; }
.notification-install-kicker { color: #ef6d54; font: 900 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .16em; }
.notification-install h2 { margin: 3px 0 4px; color: #fff; font-size: 17px; line-height: 1.45; }
.notification-install h3 { margin: 3px 0 4px; color: #fff; font-size: 17px; line-height: 1.45; }
.notification-install-copy > p { margin: 0; color: #c8c9ce; font-size: 11px; line-height: 1.7; }
.notification-install-actions { display: flex; flex-wrap: wrap; gap: 9px 14px; align-items: center; margin-top: 12px; }
.notification-install-actions .btn { min-width: 148px; border-radius: 4px; }
.notification-install-actions a { color: #fff; font-size: 11px; font-weight: 800; text-underline-offset: 3px; }
.notification-install-guide { margin-top: 13px; padding: 12px 13px; border-left: 3px solid var(--accent); background: #24252a; color: #e7e7e9; }
.notification-install-guide b { font-size: 11px; }
.notification-install-guide ol { margin: 5px 0 10px; padding-left: 20px; font-size: 11px; line-height: 1.8; }
.notification-install-guide p { margin: 5px 0 0; color: #d1d2d6; font-size: 11px; line-height: 1.7; }
.notification-install-status { min-height: 1.5em; margin-top: 7px !important; color: #fff !important; }
.notif-list { display: grid; gap: 10px; }
.notif {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; text-decoration: none; color: inherit;
}
.notif:hover { border-color: #cfd2d6; }
.notif.unread { border-left: 3px solid var(--accent); background: #fffdfc; }
.notif-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.notif-title { font-weight: 700; font-size: 14.5px; }
.notif-body { font-size: 13.5px; color: #374151; margin: 0; white-space: pre-wrap; }
.notif-time { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 10px; }

.pref-row { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.pref-head { font-weight: 700; font-size: 14.5px; }
.pref-desc { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; }
.pref-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 5px 14px 5px 10px; border: 1.5px solid #d6d8db; border-radius: 999px;
  background: #fff; font-size: 13px; cursor: pointer;
}
.switch:has(input:checked) { border-color: var(--accent); background: #fdf3f1; font-weight: 700; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.switch.locked { opacity: .55; cursor: default; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .container { padding: 0 14px; }
  .section { padding: 38px 0; }
  .hero { padding: 48px 16px 56px; }
  .hero-actions .btn { width: 100%; }
  .form-card { margin: 22px auto; padding: 18px 16px; }
  .card { padding: 18px 16px; }
  .admin-main { margin: 16px auto 48px; padding: 0 14px; }
  .page-title { font-size: 18px; }
  .notification-toolbar { align-items: flex-start; }
  .notification-toolbar-actions { gap: 6px; }
  .notification-toolbar-actions .btn { min-height: 38px; }
  .notification-close { min-width: 82px; }
  .notification-install { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  .notification-install-mark { width: 42px; height: 42px; }
  .notification-install-mark span { width: 27px; height: 27px; font-size: 19px; }
  .notification-install h2, .notification-install h3 { font-size: 15px; }
  .notification-install-actions { align-items: stretch; }
  .notification-install-actions .btn { width: 100%; max-width: 100%; min-width: 0; }
  .notification-install-actions a { display: inline-flex; min-height: 36px; align-items: center; }
  .alert { margin: 12px 14px; }
  .toolbar input[type=text] { flex: 1 1 100%; }
  .toolbar input[type=month], .toolbar select { flex: 1 1 auto; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat .value { font-size: 19px; }
  .site-footer { padding: 34px 16px 24px; }

  /* 指で押せるページ送り */
  .pagination { gap: 10px; }
  .pagination a, .pagination span { padding: 10px 18px; font-size: 14px; }
  h3 { font-size: 15px; margin: 22px 0 8px; }
}

/* ---------- 会員・運営チャット ---------- */
.chat-page {
  /* iOS PWAが下端の安全領域を過大に返しても、入力欄を押し上げすぎない。 */
  --chat-safe-bottom: clamp(0px, env(safe-area-inset-bottom, 0px), 34px);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  background: #ece9e1;
}
.chat-page > .appbar { flex: none; }
.chat-page > main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.chat-page .site-footer { display: none; }
.chat-shell {
  display: flex; flex-direction: column; width: min(920px, calc(100% - 28px)); height: 100%; min-height: 0;
  margin: 0 auto; padding: 34px 0 18px;
  font-family: var(--font-jp);
}
.chat-heading { display: flex; flex: none; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 0 4px; }
.chat-kicker, .admin-chat-heading > div > span { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.chat-heading h1, .admin-chat-heading h1 { margin: 4px 0 2px; font-size: clamp(26px, 5vw, 38px); line-height: 1.25; letter-spacing: .04em; }
.chat-heading p, .admin-chat-heading p { margin: 4px 0 0; color: #686b70; font-size: 13px; }
.chat-notify-link {
  flex: none; padding: 9px 14px; border: 1px solid #aaa69e; border-radius: 999px;
  background: rgba(255,255,255,.65); font-size: 12px; font-weight: 800; text-decoration: none;
}
.chat-notification-prompt{display:flex;flex:0 0 auto;gap:14px;align-items:center;justify-content:space-between;margin:0 12px 8px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 58%,transparent);border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,#202126);color:#fff}.chat-notification-prompt[hidden]{display:none}.chat-notification-prompt div{min-width:0}.chat-notification-prompt strong{display:block;font-size:13px}.chat-notification-prompt p{margin:3px 0 0;color:#c8c9ce;font-size:11px;line-height:1.55}.chat-notification-prompt a{flex:0 0 auto;padding:9px 12px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;text-decoration:none}
.settings-device-help{margin-top:8px!important;color:inherit!important;font-size:11px!important;line-height:1.7}
@media(max-width:680px){.chat-notification-prompt{align-items:stretch;flex-direction:column;margin-inline:8px}.chat-notification-prompt a{text-align:center}}
.chat-conversation {
  position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid #d1cdc4; border-radius: 18px; background: #f8f6f1; box-shadow: 0 16px 45px rgba(29,27,23,.08);
}
.chat-file-drop-overlay {
  position: absolute; inset: 12px; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 9px;
  border: 2px dashed #06a94a; border-radius: 18px; background: rgba(242,255,247,.94); color: #075c2b;
  box-shadow: 0 16px 52px rgba(0,0,0,.18); pointer-events: none;
}
.chat-file-drop-overlay[hidden] { display: none; }
.chat-file-drop-overlay span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #06c755; color: #fff; font-size: 35px; font-weight: 300; line-height: 1; }
.chat-file-drop-overlay strong { font-size: 16px; }
.chat-conversation.is-file-dragging .chat-log { filter: saturate(.65) brightness(.92); }
.chat-log {
  flex: 1 1 auto; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px clamp(14px, 3vw, 30px); background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 45%),
    #91a9c4;
}
.chat-date-separator { display: flex; justify-content: center; margin: 4px 0 16px; }
.chat-date-separator time {
  padding: 4px 10px; border-radius: 999px; background: rgba(37,55,75,.26); color: #f7f9fc;
  font-size: 10px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.chat-message { display: grid; justify-items: start; margin: 0 0 14px; }
.chat-message.is-own { justify-items: end; }
.chat-message-meta { display: flex; gap: 8px; align-items: baseline; margin: 0 8px 3px; color: #243348; font-size: 10px; }
.chat-message-meta span { font-weight: 800; }
.chat-message-line { display: flex; align-items: flex-end; gap: 7px; width: 100%; max-width: 100%; }
.chat-message.is-own .chat-message-line { justify-content: flex-end; }
.chat-message.is-other .chat-message-line { justify-content: flex-start; }
.chat-message-line > time { flex: none; padding-bottom: 2px; color: #34475f; font-size: 9px; font-variant-numeric: tabular-nums; }
.chat-message-status { display: grid; flex: none; justify-items: end; gap: 1px; padding-bottom: 2px; color: #34475f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-message-status time, .chat-read-receipt { color: inherit; font-size: 9px; line-height: 1.2; }
.chat-read-receipt { font-weight: 700; }
.chat-bubble-stack { display: grid; justify-items: start; min-width: 0; max-width: min(76%, 610px); }
.chat-message.is-own .chat-bubble-stack { justify-items: end; }
.chat-bubble-stack > .chat-bubble { width: auto; max-width: 100%; }
.chat-bubble { position: relative; max-width: min(76%, 610px); padding: 9px 13px; border: 0; border-radius: 17px; background: #fff; box-shadow: 0 1px 2px rgba(32,49,68,.12); overflow-wrap: anywhere; }
.chat-message.is-other .chat-bubble { border-top-left-radius: 5px; }
.chat-message.is-own .chat-bubble { color: #111; border-top-right-radius: 5px; background: #8de055; }
.chat-message.is-other .chat-bubble::before, .chat-message.is-own .chat-bubble::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.chat-message.is-other .chat-bubble::before { left: -7px; border-width: 0 8px 10px 0; border-color: transparent #fff transparent transparent; }
.chat-message.is-own .chat-bubble::after { right: -7px; border-width: 0 0 10px 8px; border-color: transparent transparent transparent #8de055; }
.chat-bubble > p { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.chat-message-link { color: #0969c3; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.chat-message.is-own .chat-message-link { color: #06457f; }
.chat-message-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.chat-attachments { display: grid; gap: 8px; margin-top: 9px; }
.chat-bubble > .chat-attachments:first-child { margin-top: 0; }
.chat-image { display: block; overflow: hidden; max-width: 380px; padding: 0; border: 0; border-radius: 10px; background: #ebe8e1; color: inherit; cursor: zoom-in; }
.chat-image img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.chat-video { display: grid; gap: 6px; width: min(320px, 66vw); min-width: 0; }
.chat-video-preview { position: relative; display: block; width: 100%; min-width: 0; min-height: 130px; max-height: 360px; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: #08090b; color: #fff; cursor: pointer; }
.chat-video-preview video { display: block; width: 100%; height: auto; min-height: 130px; max-height: 360px; object-fit: contain; background: #08090b; pointer-events: none; }
.chat-video-play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 52px; height: 52px; padding-left: 3px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 21px; line-height: 1; transform: translate(-50%,-50%); box-shadow: 0 3px 14px rgba(0,0,0,.3); pointer-events: none; }
.chat-video-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.chat-video-meta > span { display: grid; min-width: 0; }
.chat-video-meta b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-video-meta small { opacity: .72; font-size: 9px; }
.chat-video-meta > a { flex: none; color: inherit; font-size: 10px; font-weight: 900; text-underline-offset: 3px; }
.chat-file-action { color: inherit; font-size: 11px; font-weight: 800; text-underline-offset: 3px; }
.chat-file-action small { margin-left: 4px; opacity: .75; }
.chat-file-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: min(390px, 64vw); padding: 10px 11px; border-radius: 9px; background: rgba(28,28,32,.07); }
.chat-message.is-own .chat-file-row { background: rgba(255,255,255,.36); }
.chat-file-row > span:first-child { min-width: 0; display: grid; }
.chat-file-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.chat-file-row small { opacity: .7; font-size: 9px; }
.chat-file-row > a, .chat-file-buttons a { flex: none; color: inherit; font-size: 11px; font-weight: 900; text-underline-offset: 3px; }
.chat-file-buttons { display: flex; gap: 10px; }
.chat-audio { display: grid; grid-template-columns: minmax(180px, 280px); gap: 5px; min-width: min(280px, 66vw); }
.chat-audio audio { display: block; width: 100%; max-width: 100%; height: 38px; }
.chat-audio > span { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.chat-audio small { opacity: .7; }
.chat-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100%; color: #324963; text-align: center; }
.chat-empty b { color: #20344b; font-size: 15px; }
.chat-empty p { margin: 5px 0 0; font-size: 12px; }
.chat-composer {
  position: relative; flex: none;
  padding: 8px max(10px, env(safe-area-inset-right)) max(8px, var(--chat-safe-bottom, 0px)) max(10px, env(safe-area-inset-left));
  border-top: 1px solid #d9d9d9; background: #f7f7f7;
}
.chat-compose-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; align-items: end; }
.chat-compose-main textarea {
  width: 100%; min-width: 0; min-height: 38px; max-height: 132px; overflow-y: hidden; resize: none; padding: 8px 12px; border: 1px solid #d1d1d1; border-radius: 19px;
  background: #fff; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45;
}
.chat-compose-main textarea:focus { outline: 0; border-color: #9e9e9e; }
.chat-mention-menu {
  position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: calc(100% + 6px); left: max(10px, env(safe-area-inset-left)); z-index: 12;
  max-height: min(264px, 36vh); overflow-y: auto; padding: 5px; border: 1px solid #d5d5d5; border-radius: 14px;
  background: rgba(255,255,255,.98); box-shadow: 0 14px 42px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.chat-mention-menu[hidden] { display: none; }
.chat-mention-option {
  display: flex; width: 100%; min-height: 44px; align-items: center; gap: 10px; padding: 7px 10px;
  border: 0; border-radius: 10px; background: transparent; color: #171717; text-align: left; cursor: pointer;
}
.chat-mention-option::before {
  content: "@"; display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px;
  border-radius: 50%; background: #e7e7ec; color: #555; font-weight: 800;
}
.chat-mention-option.is-active { background: rgba(0,122,255,.12); }
.chat-mention-option[data-mention-id="all"]::before { background: #e5482f; color: #fff; }
.chat-mention-token {
  display: inline-block; margin: 0 1px; padding: 1px 6px; border-radius: 6px;
  background: rgba(0,102,204,.13); color: #0057a8; font-weight: 850; line-height: 1.35; white-space: nowrap;
}
.chat-message.is-own .chat-mention-token { background: #087d31; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.chat-message.is-other .chat-mention-token { background: rgba(10,132,255,.2); color: #005ec4; }
.chat-mention-token.is-self-mention { box-shadow: inset 0 0 0 1.5px currentColor; }
.chat-message-mention-menu {
  position: fixed; z-index: 1250; min-width: 210px; max-width: min(320px, calc(100vw - 16px)); padding: 5px;
  border: 1px solid rgba(60,60,67,.2); border-radius: 13px; background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.24); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.chat-message-mention-menu[hidden] { display: none; }
.chat-message-mention-menu button {
  display: flex; width: 100%; min-height: 44px; align-items: center; padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: #007aff; font: 700 14px/1.35 var(--font-jp); text-align: left; cursor: pointer;
}
.chat-message-mention-menu button:active { background: rgba(0,122,255,.12); }
.chat-message[data-chat-reaction-url] .chat-bubble {
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: text; user-select: text;
}
.chat-message[data-chat-reaction-url] .chat-bubble { transition: transform .12s ease-out, filter .12s ease-out; transform-origin: center bottom; }
.chat-message.is-long-pressing .chat-bubble { filter: brightness(.92); transform: scale(.975); }
.chat-message-action-menu { min-width: 310px; padding: 7px; }
.chat-message-reaction-options { display: grid; grid-template-columns: repeat(6, minmax(40px, 1fr)); gap: 3px; }
.chat-message-mention-menu .chat-message-reaction-option {
  display: grid; place-items: center; width: 100%; min-width: 0; min-height: 46px; padding: 0; border-radius: 10px;
  color: inherit; font-size: 24px; line-height: 1; text-align: center;
}
.chat-message-mention-menu .chat-message-reaction-option:active { background: rgba(118,118,128,.16); transform: scale(.9); }
.chat-message-mention-menu :is(.chat-message-copy-action,.chat-message-edit-action,.chat-message-mention-action) { margin-top: 5px; border-top: 1px solid rgba(60,60,67,.16); border-radius: 0; }
.chat-message-mention-menu :is(.chat-message-copy-action,.chat-message-edit-action,.chat-message-mention-action):last-of-type { border-radius: 0 0 9px 9px; }
.chat-message-editor { position: fixed; z-index: 10020; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.42); }
.chat-message-editor[hidden] { display: none; }
.chat-message-editor-card { display: grid; gap: 12px; width: min(520px,100%); padding: 18px; border-radius: 16px; background: var(--app-apple-elevated, #fff); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.chat-message-editor-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-message-editor-card header button { border: 0; background: transparent; color: var(--app-apple-blue, #007aff); font: inherit; cursor: pointer; }
.chat-message-editor-card textarea { width: 100%; min-height: 132px; max-height: 50vh; padding: 11px 12px; border: 1px solid var(--app-apple-separator, #c7c7cc); border-radius: 11px; background: var(--app-apple-fill, #f5f5f7); color: var(--app-apple-label, #111); font: inherit; line-height: 1.5; resize: vertical; }
.chat-message-editor-card [data-chat-message-edit-error] { margin: 0; color: #c81e1e; font-size: 12px; }
.chat-message-edit-save { min-height: 44px; border: 0; border-radius: 11px; background: var(--app-apple-blue, #007aff); color: #fff; font-weight: 700; cursor: pointer; }
.chat-message-edit-save:disabled { opacity: .55; cursor: default; }
.chat-room-refresh-indicator { position: sticky; z-index: 5; top: 6px; display: block; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 7px 12px; border-radius: 999px; background: rgba(60,60,67,.9); color: #fff; font-size: 12px; font-weight: 700; opacity: clamp(0,calc(var(--chat-room-pull, 0px) / 40px),1); pointer-events: none; transform: translateY(calc(-42px + var(--chat-room-pull, 0px))); transition: opacity .18s ease, transform .18s ease; }
.chat-log.is-pull-refresh-armed .chat-room-refresh-indicator { background: var(--app-apple-blue, #007aff); }
.chat-log.is-pull-refreshing .chat-room-refresh-indicator { opacity: 1; transform: translateY(0); }
.chat-message-action-menu.is-submitting { pointer-events: none; }
.chat-message-action-menu.is-submitting .chat-message-reaction-options { opacity: .48; }
.chat-message-action-error { margin: 5px 7px 2px; color: #c81e1e; font-size: 11px; text-align: center; }
.chat-reactions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 3px; max-width: 100%; margin-top: -2px; padding: 0 4px; }
.chat-reactions[hidden] { display: none; }
.chat-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px; min-width: 38px; min-height: 25px; padding: 2px 7px;
  border: 1px solid rgba(60,60,67,.2); border-radius: 999px; background: rgba(255,255,255,.94); color: #34343a;
  box-shadow: 0 1px 3px rgba(0,0,0,.1); font: 700 13px/1 var(--font-jp); cursor: pointer;
}
.chat-reaction-chip b { font-size: 10px; font-variant-numeric: tabular-nums; }
.chat-reaction-chip.is-selected { border-color: #0a84ff; background: #e8f3ff; color: #0069cf; box-shadow: 0 0 0 1px rgba(10,132,255,.16); }
.chat-reaction-chip:active { transform: scale(.92); }
@media (max-width: 720px), (pointer: coarse) {
  .chat-message-mention-menu {
    inset: auto max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    width: auto; max-width: none; padding: 6px; border-radius: 16px;
  }
  .chat-message-mention-menu button { justify-content: center; min-height: 50px; font-size: 15px; text-align: center; }
  .chat-message-action-menu { min-width: 0; }
  .chat-message-mention-menu .chat-message-reaction-option { min-height: 52px; font-size: 27px; }
}
.chat-attach-open, .chat-send { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer; }
.chat-attach-open { border: 1.5px solid #747474; background: transparent; color: #555; font: 400 27px/1 var(--font-jp); }
.chat-plus-symbol { transform: translateY(-1px); }
.chat-send { border: 0; background: #06c755; color: #fff; transition: opacity .15s ease, transform .15s ease; }
.chat-send svg { width: 23px; height: 23px; fill: currentColor; transform: translateX(1px); }
.chat-send:active:not(:disabled) { transform: scale(.92); }
.chat-send:disabled { opacity: .28; cursor: default; }
.chat-send.is-sending svg { animation: chat-send-pulse .7s ease-in-out infinite alternate; }
@keyframes chat-send-pulse { to { transform: translateX(1px) scale(.76); opacity: .55; } }
.chat-file-input { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.chat-selected-files { display: grid; gap: 7px; min-width: 0; margin: 0 42px 7px 45px; padding: 7px; border-radius: 12px; background: #e9e9e9; color: #4e4e4e; font-size: 10px; }
.chat-selected-files[hidden] { display: none; }
.chat-selected-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.chat-selected-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.chat-selected-head button { flex: none; min-height: 26px; padding: 3px 8px; border: 0; border-radius: 13px; background: #777; color: #fff; font: 700 10px/1 var(--font-jp); }
.chat-selected-preview { display: flex; gap: 7px; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.chat-preview-card { position: relative; display: grid; grid-template-rows: 76px auto; flex: 0 0 92px; min-width: 0; overflow: hidden; border: 1px solid #d1d1d1; border-radius: 10px; background: #fff; color: #333; scroll-snap-align: start; }
.chat-preview-media { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; height: 76px; padding: 0; overflow: hidden; border: 0; background: #d8d8d8; color: #353535; font: inherit; text-decoration: none; cursor: zoom-in; }
.chat-preview-media img, .chat-preview-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat-preview-media strong { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 9px; background: #f2f2f2; color: #454545; font-size: 12px; overflow-wrap: anywhere; }
.chat-preview-media i { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-style: normal; transform: translate(-50%, -50%); }
.chat-preview-copy { display: grid; min-width: 0; padding: 5px 6px 6px; background: #fff; }
.chat-preview-copy b { overflow: hidden; min-width: 0; color: #343434; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-copy small { color: #858585; font-size: 8px; line-height: 1.3; }
.chat-preview-remove { position: absolute; top: 4px; right: 4px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(20,20,20,.75); color: #fff; font: 700 17px/1 var(--font-jp); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.chat-preview-open { overflow: hidden; }
.chat-file-viewer {
  position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-rows: auto minmax(0,1fr);
  width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: rgba(12,13,15,.97); color: #fff;
}
.chat-file-viewer[hidden] { display: none; }
.chat-file-viewer-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0;
  padding: max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255,255,255,.16); background: #101114;
}
.chat-file-viewer-head > div { display: grid; min-width: 0; }
.chat-file-viewer-head b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-viewer-head small { color: #aaa; font-size: 10px; }
.chat-file-viewer-head button {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 7px 12px; border: 0; border-radius: 20px;
  background: #2d2f34; color: #fff; font: 800 12px/1 var(--font-jp); cursor: pointer;
}
.chat-file-viewer-head button span { font-size: 20px; font-weight: 400; line-height: .8; }
.chat-file-viewer-body { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 12px; overflow: auto; }
.chat-file-viewer-content:is(img,video) { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.chat-file-viewer.is-video .chat-file-viewer-body { place-items: start center; overflow: hidden; }
.chat-file-viewer-content:is(video) { width: auto; height: auto; align-self: start; object-position: center top; }
.chat-file-viewer-content:is(iframe) { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.chat-file-viewer-audio, .chat-file-viewer-unsupported { display: grid; justify-items: center; gap: 18px; width: min(100%,420px); padding: 30px 20px; text-align: center; }
.chat-file-viewer-audio strong, .chat-file-viewer-unsupported strong { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid #555; border-radius: 22px; background: #26282d; font-size: 18px; }
.chat-file-viewer-audio audio { width: min(100%,360px); }
.chat-file-viewer-unsupported p { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-weight: 800; }
.chat-file-viewer-unsupported small { color: #aaa; }
.chat-file-note.is-bad, .chat-form-error { color: var(--bad); }
.chat-form-error { margin: 7px 2px 0; font-size: 11px; font-weight: 800; }

.chat-admin-page {
  --chat-safe-top: env(safe-area-inset-top, 0px);
  --chat-safe-right: env(safe-area-inset-right, 0px);
  --chat-safe-left: env(safe-area-inset-left, 0px);
  --chat-safe-bottom: clamp(0px, env(safe-area-inset-bottom, 0px), 34px);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  background: #ece9e1; font-family: var(--font-jp);
}
.chat-admin-page > .appbar { flex: none; }
.chat-admin-page .admin-main {
  display: flex; flex: 1 1 auto; width: 100%; max-width: 1320px; min-height: 0; overflow: hidden;
  margin: 0 auto; padding: 0 18px;
}

.admin-chat-wrap { padding: 25px 0 60px; }
.admin-chat-wrap[data-pull-to-refresh] { --pull-refresh-distance: 0px; position: relative; transform: translate3d(0,var(--pull-refresh-distance),0); transition: transform .3s cubic-bezier(.22,.72,.24,1); will-change: transform; }
.admin-chat-wrap[data-pull-to-refresh].is-pull-tracking { transition: none; }
.pull-refresh-indicator {
  position: absolute; top: 0; left: 50%; z-index: 5; display: flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 6px 12px; border: 1px solid rgba(20,24,29,.08); border-radius: 18px;
  background: rgba(255,255,255,.94); color: #65686d; font-size: 10px; font-weight: 800;
  opacity: 0; transform: translate3d(-50%,calc(-100% - 10px),0) scale(.92); box-shadow: 0 5px 18px rgba(20,24,29,.1);
  pointer-events: none; white-space: nowrap;
}
.pull-refresh-indicator svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-55deg); }
.admin-chat-wrap.is-pull-tracking .pull-refresh-indicator,
.admin-chat-wrap.is-pull-armed .pull-refresh-indicator,
.admin-chat-wrap.is-refreshing .pull-refresh-indicator { opacity: 1; transform: translate3d(-50%,calc(-100% - 10px),0) scale(1); }
.admin-chat-wrap.is-pull-armed .pull-refresh-indicator { color: #079447; }
.admin-chat-wrap.is-pull-armed .pull-refresh-indicator svg { transform: rotate(0); }
.admin-chat-wrap.is-refreshing .pull-refresh-indicator svg { animation: pull-refresh-spin .75s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
.admin-chat-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); gap: 30px; align-items: end; padding: 15px 2px 24px; border-bottom: 2px solid #1b1b1b; }
.admin-chat-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-chat-heading-actions { display: flex; flex: none; align-items: center; gap: 4px; }
.chat-index-menu { display: none; }
.chat-member-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.chat-member-search input { min-width: 0; height: 43px; padding: 9px 12px; border: 1px solid #aaa69d; border-radius: 4px; background: #fff; font: inherit; }
.chat-member-search button { display: grid; place-items: center; width: 46px; padding: 0; border: 0; border-radius: 4px; background: #1a1a1d; color: #fff; font: inherit; font-weight: 800; }
.chat-member-search button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.chat-search-results { margin-top: 20px; padding: 18px; border: 1px solid #d2cec5; background: rgba(255,255,255,.55); }
.chat-search-results h2 { margin: 0 0 10px; font-size: 15px; }
.chat-search-results > a { display: grid; grid-template-columns: 180px minmax(0,1fr) auto; gap: 12px; padding: 10px 7px; border-top: 1px solid #dedad2; text-decoration: none; }
.chat-search-results > a span { color: #707070; font-size: 12px; overflow-wrap: anywhere; }
.chat-search-results > a i { color: var(--accent); font-size: 11px; font-style: normal; font-weight: 800; }
.chat-inbox { margin-top: 28px; border-top: 1px solid #1f1f1f; }
.chat-inbox-title { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 5px 8px; }
.chat-inbox-title h2 { margin: 0; font-size: 20px; }
.chat-inbox-title span { color: #77736d; font-size: 11px; }
.chat-thread-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 82px; padding: 13px 10px; border-top: 1px solid #d6d1c8; background: rgba(255,255,255,.45); text-decoration: none; }
.chat-thread-card:hover { background: #fff; }
.chat-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #17171b; color: #fff; font-size: 16px; font-weight: 900; }
.chat-thread-copy { display: grid; min-width: 0; }
.chat-thread-copy b { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.chat-thread-copy em, .admin-chat-sidebar em { min-width: 19px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 9px; font-style: normal; text-align: center; }
.chat-thread-copy small { overflow: hidden; margin-top: 4px; color: #6f6d67; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-card time { color: #8a867e; font-size: 10px; font-variant-numeric: tabular-nums; }
.chat-inbox-empty { padding: 45px 12px; border-top: 1px solid #d6d1c8; text-align: center; }
.chat-inbox-empty p { margin: 5px 0 0; color: #77736d; font-size: 12px; }
.admin-chat-room {
  display: grid; grid-template-columns: 270px minmax(0, 1fr); width: 100%; height: 100%; min-height: 0;
  overflow: hidden; padding: 18px 0 28px;
}
.admin-chat-sidebar { min-height: 0; overflow-y: auto; padding: 5px 16px 20px 0; border-right: 1px solid #d0ccc3; }
.chat-back-inbox { display: block; margin-bottom: 20px; color: #4f4d48; font-size: 11px; font-weight: 800; text-decoration: none; }
.admin-chat-sidebar h2 { margin: 0 8px 8px; color: #77736d; font-size: 10px; letter-spacing: .12em; }
.admin-chat-sidebar > a:not(.chat-back-inbox) { display: grid; padding: 10px 9px; border-radius: 6px; text-decoration: none; }
.admin-chat-sidebar > a.active { background: #fff; box-shadow: 0 3px 12px rgba(30,28,24,.05); }
.admin-chat-sidebar b { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.admin-chat-sidebar small { overflow: hidden; color: #77736d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-chat-conversation { align-self: stretch; min-width: 0; min-height: 0; margin-left: 18px; border-radius: 8px; }
.chat-room-person { display: flex; flex: none; align-items: center; gap: 12px; min-height: 70px; padding: 10px 18px; border-bottom: 1px solid #d8d4cb; background: #fff; }
.chat-mobile-back { display: none; }
.chat-room-person > div { min-width: 0; }
.chat-room-person h1 { margin: 0; font-size: 16px; }
.chat-room-person a { color: #77736d; font-size: 10px; }
.admin-chat-conversation .chat-log { height: auto; min-height: 0; }

/* LINEに慣れた利用者が迷わない、トーク専用UI */
.chat-line-header { position: relative; z-index: 6; min-height: 64px; padding: 8px 12px; gap: 9px; border-bottom: 1px solid #d9d9d9; }
.chat-line-header-copy { flex: 1 1 auto; min-width: 0; }
.chat-line-header-copy h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; letter-spacing: 0; }
.chat-line-header-copy small { display: block; overflow: hidden; color: #777; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-line-header-actions { display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.chat-line-header-actions button,
.chat-line-header-actions .chat-room-app-menu { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #222; cursor: pointer; }
.chat-line-header-actions button:active,
.chat-line-header-actions .chat-room-app-menu:active { background: #ededed; }
.chat-line-header-actions svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-room-search { position: relative; z-index: 7; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px 32px; gap: 5px; align-items: center; min-height: 54px; padding: 7px 10px; border-bottom: 1px solid #d8d8d8; background: #fff; }
.chat-room-search[hidden] { display: none; }
.chat-room-search input { width: 100%; min-width: 0; height: 36px; padding: 6px 12px; border: 0; border-radius: 9px; background: #f1f1f3; color: #111; font: inherit; font-size: 14px; }
.chat-room-search button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #444; font: 700 20px/1 var(--font-jp); }
.chat-room-search span { color: #777; font-size: 10px; font-variant-numeric: tabular-nums; }

.chat-system-message { display: flex; justify-content: center; margin: 12px 0; }
.chat-system-message span { max-width: 88%; padding: 5px 10px; border-radius: 12px; background: rgba(37,55,75,.22); color: #26384d; font-size: 10px; text-align: center; }
.chat-message.is-search-match .chat-bubble { outline: 2px solid rgba(255,209,54,.75); outline-offset: 2px; }
.chat-message.is-search-current .chat-bubble { outline-color: #ffd000; box-shadow: 0 0 0 5px rgba(255,208,0,.2); }

.chat-compose-main { grid-template-columns: 38px minmax(120px, 1fr) 36px 38px; gap: 5px; align-items: end; }
.chat-compose-icon, .chat-send { display: grid; place-items: center; width: 38px; height: 38px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #626262; cursor: pointer; }
.chat-compose-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chat-compose-icon:active, .chat-compose-icon.is-active { background: #e2e2e2; color: #111; }
.chat-attach-open { border: 1.5px solid #747474; background: transparent; color: #555; }
.chat-primary-action { display: grid; place-items: end center; width: 38px; min-width: 0; }
.chat-primary-action > * { grid-area: 1 / 1; }
.chat-primary-action > [hidden] { display: none; }
.chat-voice { color: #626262; }
.chat-voice.is-recording { background: #e9442f; color: #fff; animation: chat-voice-pulse .85s ease-in-out infinite alternate; }
.chat-voice.is-requesting { opacity: .45; pointer-events: none; }
@keyframes chat-voice-pulse { to { box-shadow: 0 0 0 6px rgba(233,68,47,.15); } }
.chat-send { border: 0; background: #06c755; color: #fff; }
.chat-file-policy { display: none; margin: 5px 45px 0; font-size: 10px; }
.chat-file-policy.is-bad { display: block; }
.chat-voice-status { margin: 5px 43px 0; color: #666; font-size: 10px; text-align: right; }
.chat-voice-status.is-recording { color: #e9442f; font-weight: 800; }
.chat-voice-status.is-bad { color: var(--bad); }
.chat-emoji-panel { position: absolute; right: 48px; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 8; display: flex; flex-wrap: wrap; width: min(340px, calc(100vw - 28px)); gap: 4px; padding: 9px; border: 1px solid #d8d8d8; border-radius: 14px; background: #fff; box-shadow: 0 9px 34px rgba(0,0,0,.18); }
.chat-emoji-panel[hidden] { display: none; }
.chat-emoji-panel button { min-width: 36px; min-height: 36px; padding: 5px 8px; border: 0; border-radius: 8px; background: #f3f3f3; font: inherit; font-size: 16px; }
.chat-emoji-panel button:nth-last-child(-n+2) { font-size: 11px; }
.chat-selected-files { margin-inline: 43px 82px; }

.chat-room-details { position: fixed; inset: 0 0 0 auto; width: min(430px, 100%); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; background: #f4f4f5; color: #171717; box-shadow: -16px 0 50px rgba(0,0,0,.22); }
.chat-room-details::backdrop { background: rgba(0,0,0,.42); }
.chat-room-details[open] { animation: chat-details-in .18s ease-out both; }
@keyframes chat-details-in { from { opacity: .4; transform: translateX(30px); } }
.chat-details-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; min-height: 58px; padding: 8px 8px 8px 18px; border-bottom: 1px solid #ddd; background: rgba(255,255,255,.96); }
.chat-details-head b { overflow: hidden; font-size: 17px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.chat-details-head button { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #555; font: 400 27px/1 var(--font-jp); }
.chat-details-actions { display: flex; justify-content: center; gap: 38px; padding: 22px 16px 18px; background: #fff; }
.chat-details-actions button { display: grid; justify-items: center; gap: 5px; border: 0; background: transparent; color: #222; font: inherit; font-size: 11px; }
.chat-details-actions i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #eef0f2; font-size: 18px; font-style: normal; font-weight: 700; }
.chat-details-members, .chat-details-section { margin-top: 10px; padding: 15px 16px; background: #fff; }
.chat-details-members h2, .chat-details-section h2 { margin: 0 0 12px; color: #555; font-size: 12px; }
.chat-details-members > div { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 3px; }
.chat-details-members span, .chat-group-selected span { display: grid; flex: 0 0 57px; justify-items: center; gap: 5px; color: #333; font-size: 10px; text-align: center; }
.chat-details-members i, .chat-group-selected i, .chat-add-members i { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #31343a; color: #fff; font-style: normal; font-weight: 800; }
.chat-details-members b { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.chat-details-profile { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin-top: 10px; padding: 10px 18px; background: #fff; color: #222; font-size: 13px; font-weight: 700; text-decoration: none; }
.chat-details-profile span { color: #999; font-size: 22px; }
.chat-details-section form:not(.chat-add-members) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.chat-details-section input[type=text], .chat-details-section input[name=title] { min-width: 0; height: 40px; padding: 8px 10px; border: 1px solid #d5d5d5; border-radius: 5px; background: #fff; font: inherit; }
.chat-details-section button, .chat-add-members > button { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 5px; background: #06c755; color: #fff; font: inherit; font-weight: 800; }
.chat-invite-panel[hidden] { display: none; }
.chat-room-details.is-invite-mode > :not(.chat-invite-panel) { display: none; }
.chat-room-details.is-invite-mode .chat-invite-panel { min-height: 100%; margin: 0; }
.chat-invite-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chat-invite-head h2 { margin: 0; color: #111; font-size: 15px; }
.chat-invite-head > button { width: 34px; min-height: 34px; padding: 0; background: transparent; color: #222; font-size: 26px; }
.chat-add-members > div { display: grid; }
.chat-add-members label { display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid #ededed; }
.chat-add-members label > input { width: 20px; height: 20px; margin: 0 12px 0 2px; accent-color: #06c755; }
.chat-add-members label span { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.chat-add-members i { width: 38px; height: 38px; }
.chat-add-members > button { width: 100%; margin-top: 12px; }
.chat-leave-group { margin: 10px 0; padding: 0 16px; background: #fff; }
.chat-leave-group button { width: 100%; min-height: 50px; border: 0; background: transparent; color: #e43e31; font: inherit; font-weight: 800; }

.chat-group-create-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #06a943; font-size: 12px; font-weight: 800; text-decoration: none; }
.chat-group-create-link b { font: inherit; }
.chat-group-create-link span { font-size: 19px; }
.chat-group-rooms { margin-top: 24px; }
.chat-group-room-list { border-top: 1px solid #d3cfc7; }
.chat-group-room-list > a { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 72px; padding: 10px 8px; border-bottom: 1px solid #d3cfc7; background: rgba(255,255,255,.45); text-decoration: none; }
.chat-group-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #29333c; color: #fff; font-weight: 800; }
.chat-group-room-list > a > span:nth-child(2) { display: grid; min-width: 0; }
.chat-group-room-list b { font-size: 13px; }
.chat-group-room-list small { overflow: hidden; color: #777; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-group-room-list em { min-width: 20px; padding: 2px 6px; border-radius: 99px; background: #06c755; color: #fff; font-size: 9px; font-style: normal; text-align: center; }
.chat-group-empty { padding: 17px 8px; border-bottom: 1px solid #d3cfc7; color: #8a867f; font-size: 11px; text-align: center; }

.chat-group-create { width: min(620px,100%); height: 100%; margin: 0 auto; overflow-y: auto; background: #f5f5f6; font-family: var(--font-jp); }
.chat-group-create > header { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 48px minmax(0,1fr) 58px; align-items: center; min-height: 60px; padding: 6px; border-bottom: 1px solid #ddd; background: #fff; }
.chat-group-create > header h1 { margin: 0; font-size: 17px; text-align: center; }
.chat-group-create > header a { color: #222; font-size: 34px; text-align: center; text-decoration: none; }
.chat-group-create > header button { min-height: 38px; border: 0; background: transparent; color: #06ad48; font: inherit; font-size: 13px; font-weight: 800; }
.chat-group-create > header button:disabled { color: #aaa; }
.chat-group-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px; background: #f5f5f6; }
.chat-group-search input { min-width: 0; height: 38px; padding: 7px 12px; border: 0; border-radius: 8px; background: #fff; font: inherit; }
.chat-group-search span { color: #777; font-size: 10px; }
.chat-group-members { background: #fff; }
.chat-group-members label { display: grid; grid-template-columns: 48px minmax(0,1fr) 24px; gap: 10px; align-items: center; min-height: 62px; padding: 6px 14px; border-bottom: 1px solid #eee; }
.chat-group-members label > i { display: grid; grid-column: 1; grid-row: 1; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #31343a; color: #fff; font-style: normal; font-weight: 800; }
.chat-group-members label > span { display: grid; grid-column: 2; grid-row: 1; min-width: 0; }
.chat-group-members label > span b { font-size: 14px; }
.chat-group-members label > span small { color: #777; font-size: 10px; }
.chat-group-members input { grid-column: 3; grid-row: 1; width: 21px; height: 21px; accent-color: #06c755; }
.chat-group-members label > em { display: none; }
.chat-group-name-card { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; align-items: center; margin-top: 12px; padding: 18px 16px; background: #fff; }
.chat-group-name-card > span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #29333c; color: #fff; font-size: 22px; font-weight: 800; }
.chat-group-name-card label { display: grid; gap: 6px; color: #666; font-size: 10px; }
.chat-group-name-card input { min-width: 0; height: 42px; border: 0; border-bottom: 1px solid #bbb; background: transparent; font: inherit; font-size: 16px; }
.chat-group-selected { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding: 16px; background: #fff; }
.chat-group-submit, .chat-group-step-back { display: block; width: calc(100% - 32px); min-height: 46px; margin: 18px 16px 0; border: 0; border-radius: 6px; background: #06c755; color: #fff; font: inherit; font-weight: 800; }
.chat-group-step-back { margin-top: 8px; background: transparent; color: #555; }

@media (max-width: 760px) {
  .chat-admin-page > .appbar { display: none; }
  .chat-admin-page .admin-main { flex: 1 1 100%; height: 100%; }
  .chat-admin-room-page .admin-main { max-width: none; }
  .chat-shell { width: 100%; height: 100%; padding: 0; }
  .chat-heading { align-items: center; min-height: 57px; margin: 0; padding: 8px 13px; border-bottom: 1px solid #ddd; background: #fff; }
  .chat-heading h1 { margin: 0; font-size: 17px; letter-spacing: 0; }
  .chat-heading p, .chat-kicker { display: none; }
  .chat-notify-link { padding: 7px 10px; font-size: 10px; }
  .chat-conversation { border-inline: 0; border-bottom: 0; border-radius: 0; box-shadow: none; }
  .chat-log {
    height: auto; min-height: 0;
    padding: 18px max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left));
  }
  .chat-bubble-stack { max-width: 82%; }
  .chat-bubble-stack > .chat-bubble { max-width: 100%; }
  .chat-file-row { min-width: min(310px, 72vw); }
  .chat-compose-main textarea { font-size: 16px; }
  .chat-composer { position: relative; bottom: auto; z-index: 4; }
  .chat-admin-page .admin-main { margin: 0; padding-inline: 0; }
  .admin-chat-wrap { padding: 0 0 38px; background: #f6f6f5; }
  .admin-chat-heading { grid-template-columns: 1fr; gap: 10px; padding-top: 5px; }
  .chat-search-results > a { grid-template-columns: 1fr auto; }
  .chat-search-results > a span { grid-column: 1 / -1; grid-row: 2; }
  .admin-chat-room { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; }
  .admin-chat-room > .admin-chat-sidebar { display: none; }
  .admin-chat-conversation { flex: 1 1 auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }
  .chat-room-person {
    min-height: calc(58px + var(--chat-safe-top));
    padding: calc(6px + var(--chat-safe-top)) max(7px, var(--chat-safe-right)) 6px max(7px, var(--chat-safe-left));
  }
  .chat-mobile-back { display: grid !important; place-items: center; width: 44px; height: 44px; flex: none; color: #202020 !important; font-size: 38px !important; font-weight: 300; line-height: 1; text-decoration: none; }
  .chat-room-person .chat-avatar, .chat-room-person .chat-room-mark { width: 38px; height: 38px; border-radius: 50%; }
  .chat-room-person h1 { font-size: 15px; }
  .team-chat-room .chat-room-person small { display: block; overflow: hidden; max-width: calc(100vw - 154px); text-overflow: ellipsis; white-space: nowrap; }
  .admin-chat-conversation .chat-log { height: auto; min-height: 0; }
  .chat-line-header-actions { gap: 0; }
  .chat-line-header-actions button,
  .chat-line-header-actions .chat-room-app-menu { width: 44px; height: 44px; }
  .chat-details-head {
    min-height: calc(58px + var(--chat-safe-top));
    padding: calc(8px + var(--chat-safe-top)) max(8px, var(--chat-safe-right)) 8px max(18px, var(--chat-safe-left));
  }
  .chat-group-create > header {
    min-height: calc(60px + var(--chat-safe-top));
    padding: calc(6px + var(--chat-safe-top)) max(6px, var(--chat-safe-right)) 6px max(6px, var(--chat-safe-left));
  }
  .chat-compose-main { grid-template-columns: 36px minmax(0,1fr) 34px 37px; gap: 3px; }
  .chat-compose-icon, .chat-attach-open, .chat-send { width: 36px; height: 36px; }
  .chat-primary-action { width: 37px; }
  .chat-compose-icon svg { width: 25px; height: 25px; }
  .chat-compose-main textarea { min-height: 36px; padding: 7px 10px; border-radius: 18px; }
  .chat-selected-files { margin-inline: 39px 78px; }
  .chat-admin-page:not(.chat-admin-room-page) .admin-main { overflow-y: auto; overscroll-behavior-y: none; }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-wrap { width: 100%; }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading { position: sticky; top: 0; z-index: 3; margin: 0; padding: 8px max(12px, var(--chat-safe-right)) 10px max(12px, var(--chat-safe-left)); border-bottom: 1px solid #e4e4e4; background: rgba(255,255,255,.97); box-shadow: 0 4px 16px rgba(0,0,0,.035); backdrop-filter: blur(14px); }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading h1 { margin: 0; font-size: 21px; letter-spacing: .02em; }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading p { display: none; }
  .admin-chat-title-row { min-height: 44px; }
  .chat-group-create-link { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; color: #06ad48; touch-action: manipulation; }
  .chat-group-create-link:active, .chat-index-menu:active { background: #f0f1f1; }
  .chat-group-create-link span { font-size: 30px; font-weight: 300; line-height: 1; }
  .chat-group-create-link b { display: none; }
  .chat-index-menu { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: #17181b; cursor: pointer; touch-action: manipulation; }
  .chat-index-menu svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .chat-member-search { grid-template-columns: minmax(0,1fr) 42px; gap: 0; overflow: hidden; border-radius: 12px; background: #f1f2f3; }
  .chat-member-search input { height: 42px; padding: 8px 4px 8px 13px; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
  .chat-member-search button { width: 42px; height: 42px; border-radius: 0; background: transparent; color: #5e6269; }
  .chat-fixed-rooms { margin-top: 8px; background: #fff; }
  .chat-fixed-rooms .chat-section-label { display: none; }
  .chat-fixed-room-grid { gap: 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
  .chat-fixed-room-grid > a { min-height: 64px; padding: 9px 14px; border: 0; border-bottom: 1px solid #ededed; background: #fff; }
  .chat-fixed-room-grid > a:last-child { border-bottom: 0; }
  .chat-fixed-room-grid i { width: 20px; color: #a0a0a0; font-size: 0; text-align: center; }
  .chat-room-mark { width: 38px; height: 38px; border: 0; border-radius: 50%; }
  .chat-fixed-room-grid b { font-size: 14px; }
  .chat-fixed-room-grid small { margin-top: 2px; color: #8a8a8a; font-size: 10px; }
  .chat-group-rooms { margin: 10px 0 0; padding: 0 12px; background: #fff; }
  .chat-group-rooms:has(.chat-group-empty) { display: none; }
  .chat-inbox-tabs { margin: 12px 12px 0; padding: 3px; border: 0; border-radius: 10px; background: #e9eaec; }
  .chat-inbox-tabs a { flex: 1 1 0; justify-content: center; min-height: 36px; padding: 7px 8px; border: 0; border-radius: 8px; font-size: 11px; }
  .chat-inbox-tabs a.active { margin: 0; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.09); }
  .chat-inbox-title { display: none; }
  .chat-inbox { margin-top: 10px; border-top: 1px solid #e4e4e4; background: #fff; }
  .chat-thread-card { border-color: #ededed; background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-chat-wrap[data-pull-to-refresh], .pull-refresh-indicator, .pull-refresh-indicator svg { transition: none; animation-duration: 1.2s; }
  .chat-message[data-chat-reaction-url] .chat-bubble,
  .chat-reaction-chip,
  .chat-message-reaction-option { transition: none; }
}

/* 通常ブラウザは100dvh、standalone PWAはJSで取得した実表示高を使う。 */
@media (display-mode: standalone) and (max-width: 760px) {
  html.chat-viewport-locked,
  html.chat-viewport-locked body.chat-page,
  html.chat-viewport-locked body.chat-admin-page {
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    max-height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.chat-viewport-locked body.chat-page,
  html.chat-viewport-locked body.chat-admin-page {
    position: fixed;
    inset: 0;
  }
  .chat-page,
  .chat-admin-page {
    height: var(--chat-viewport-height, 100dvh);
    max-height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
  }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading { padding-top: calc(10px + var(--chat-safe-top)); }
}
@media (max-width: 760px) {
  html.is-standalone-pwa.chat-viewport-locked,
  html.is-standalone-pwa.chat-viewport-locked body.chat-page,
  html.is-standalone-pwa.chat-viewport-locked body.chat-admin-page {
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    max-height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.is-standalone-pwa.chat-viewport-locked body.chat-page,
  html.is-standalone-pwa.chat-viewport-locked body.chat-admin-page {
    position: fixed;
    inset: 0;
  }
  html.is-standalone-pwa .chat-page,
  html.is-standalone-pwa .chat-admin-page {
    height: var(--chat-viewport-height, 100dvh);
    max-height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
  }
  html.is-standalone-pwa .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading { padding-top: calc(10px + var(--chat-safe-top)); }
}

@media (prefers-color-scheme: dark) {
  .chat-admin-room-page { background: #171717; color: #f5f5f5; }
  .chat-page { background: #111; color: #f5f5f5; }
  .chat-line-header, .chat-room-search, .chat-composer { border-color: #303030; background: #171717; color: #f5f5f5; }
  .chat-line-header-copy small, .chat-message-meta, .chat-message-line > time, .chat-message-status { color: #989898; }
  .chat-line-header-actions button, .chat-mobile-back, .chat-room-search button { color: #f1f1f1 !important; }
  .chat-line-header-actions button:active, .chat-compose-icon:active, .chat-compose-icon.is-active { background: #333; }
  .chat-room-search input, .chat-compose-main textarea { border-color: #3b3b3b; background: #272727; color: #fff; }
  .chat-log { background: #171917; }
  .chat-empty, .chat-empty b { color: #b0b0b0; }
  .chat-message-meta { color: #aaa; }
  .chat-message.is-other .chat-bubble { background: #313131; color: #fff; box-shadow: none; }
  .chat-message.is-other .chat-bubble::before { border-color: transparent #313131 transparent transparent; }
  .chat-message.is-other .chat-message-link { color: #69b8ff; }
  .chat-message.is-own .chat-bubble { background: #61df78; color: #0d1b10; box-shadow: none; }
  .chat-message.is-own .chat-bubble::after { border-color: transparent transparent transparent #61df78; }
  .chat-system-message span { background: #242424; color: #aaa; }
  .chat-compose-icon, .chat-attach-open { border-color: #999; color: #aaa; }
  .chat-voice.is-recording { color: #fff; }
  .chat-send { color: #fff; }
  .chat-selected-files { background: #2c2c2c; color: #ddd; }
  .chat-preview-card { border-color: #444; background: #222; }
  .chat-preview-media { background: #343434; color: #eee; }
  .chat-preview-media strong { background: #292929; color: #eee; }
  .chat-preview-copy { background: #222; }
  .chat-preview-copy b { color: #f2f2f2; }
  .chat-preview-copy small { color: #aaa; }
  .chat-emoji-panel { border-color: #444; background: #222; }
  .chat-emoji-panel button { background: #333; color: #fff; }
  .chat-room-details { background: #111; color: #f3f3f3; }
  .chat-details-head, .chat-details-actions, .chat-details-members, .chat-details-section, .chat-leave-group, .chat-details-profile { border-color: #343434; background: #1c1c1c; color: #f3f3f3; }
  .chat-details-head button, .chat-details-actions button, .chat-invite-head h2, .chat-invite-head > button { color: #f3f3f3; }
  .chat-details-actions i { background: #333; }
  .chat-details-members h2, .chat-details-section h2, .chat-details-members span { color: #aaa; }
  .chat-details-section input[type=text], .chat-details-section input[name=title] { border-color: #444; background: #292929; color: #fff; }
  .chat-add-members label { border-color: #333; }
}

/* ---------- Talk list / LINE-inspired dark inbox ---------- */
.chat-admin-page:has(.chat-talk-list) {
  --talk-bg: #101011;
  --talk-panel: #1c1c1e;
  --talk-line: rgba(255,255,255,.075);
  --talk-text: #f7f7f8;
  --talk-muted: #77777d;
  background: var(--talk-bg);
}
.chat-admin-page:has(.chat-talk-list) .admin-main { background: var(--talk-bg); color: var(--talk-text); }
.chat-talk-list { max-width: 760px !important; color: var(--talk-text); }
.chat-talk-list .admin-chat-heading { align-items: center !important; padding-bottom: 14px !important; }
.chat-talk-list .admin-chat-title-row h1 {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 16px;
  border-radius: 999px; background: #f7f7f8; color: #101011 !important;
  font-size: 22px !important; font-weight: 900; letter-spacing: -.035em !important;
}
.chat-talk-list .admin-chat-title-row h1 small { font-size: 10px; }
.chat-talk-list .chat-group-create-link,
.chat-talk-list .chat-index-menu { color: #f5f5f7; background: var(--talk-panel); }
.chat-talk-list .chat-group-create-link { padding-inline: 15px; }
.chat-talk-list .chat-member-search {
  position: relative; border: 0; border-radius: 999px; background: var(--talk-panel);
  box-shadow: none;
}
.chat-talk-list .chat-member-search::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: 17px; width: 13px; height: 13px;
  border: 3px solid #69696e; border-radius: 50%; transform: translateY(-58%); pointer-events: none;
}
.chat-talk-list .chat-member-search::after {
  content: ""; position: absolute; z-index: 1; top: calc(50% + 6px); left: 29px; width: 8px; height: 3px;
  border-radius: 2px; background: #69696e; transform: rotate(45deg); pointer-events: none;
}
.chat-talk-list .chat-member-search input { height: 48px; padding-left: 47px; color: #fff; font-weight: 650; }
.chat-talk-list .chat-member-search button { display: none; }
.chat-talk-list .chat-section-label { margin: 19px 8px 5px; }
.chat-talk-list .chat-section-label > span { color: #8b8b90; font-size: 10px; }
.chat-talk-list .chat-section-label small { display: none; }
.chat-talk-list .chat-fixed-room-grid,
.chat-talk-list .chat-group-room-list,
.chat-talk-list .chat-inbox {
  gap: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.chat-talk-list .chat-fixed-room-grid > a,
.chat-talk-list .chat-group-room-list > a,
.chat-talk-list .chat-thread-card {
  min-height: 86px; grid-template-columns: 58px minmax(0,1fr) auto; gap: 14px;
  padding: 10px 8px; border: 0; border-bottom: 1px solid var(--talk-line);
  border-radius: 0; background: transparent; color: var(--talk-text); box-shadow: none;
}
.chat-talk-list .chat-fixed-room-grid > a:hover,
.chat-talk-list .chat-group-room-list > a:hover,
.chat-talk-list .chat-thread-card:hover { background: rgba(255,255,255,.035); }
.chat-talk-list :is(.chat-room-mark,.chat-group-avatar,.chat-avatar) {
  width: 58px; height: 58px; font-size: 20px; font-weight: 850;
}
.chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-thread-copy) b {
  overflow: hidden; color: var(--talk-text); font-size: 16px; line-height: 1.35;
  text-overflow: ellipsis; white-space: nowrap;
}
.chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-thread-copy) small {
  display: block; overflow: hidden; margin-top: 4px; color: var(--talk-muted); font-size: 14px;
  line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-thread-card) time,
.chat-talk-list .chat-fixed-room-grid i { align-self: start; margin-top: 7px; color: var(--talk-muted); font-size: 11px; }
.chat-talk-list .chat-thread-tags { margin-top: 5px; }
.chat-talk-list .chat-thread-tags i { padding: 1px 6px; background: #252527; color: #929298; }
.chat-talk-list .chat-inbox-tabs { margin-top: 22px; padding: 3px; background: #242426; }
.chat-talk-list .chat-inbox-tabs a { color: #96969c; }
.chat-talk-list .chat-inbox-tabs a.active { background: #f5f5f7; color: #111; }
.chat-talk-list .chat-inbox-title { padding-inline: 8px; }
.chat-talk-list .chat-inbox-title h2 { color: #8b8b90; font-size: 11px; }
.chat-talk-list .chat-inbox-title span { color: #68686d; }

@media (max-width: 760px) {
  .chat-admin-page:has(.chat-talk-list) .admin-main { padding: 0 !important; }
  .chat-talk-list .admin-chat-heading {
    position: sticky; z-index: 8; top: 0; padding: calc(10px + var(--chat-safe-top)) 14px 13px !important;
    background: rgba(16,16,17,.92) !important; box-shadow: none !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  }
  .chat-talk-list .admin-chat-title-row { min-height: 48px; }
  .chat-talk-list .chat-group-create-link,
  .chat-talk-list .chat-index-menu { border-radius: 50%; background: #222224; }
  .chat-talk-list .chat-fixed-rooms,
  .chat-talk-list .chat-group-rooms,
  .chat-talk-list .chat-inbox { margin-inline: 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .chat-talk-list .chat-fixed-rooms { margin-top: 6px; }
  .chat-talk-list .chat-inbox-tabs { margin-inline: 14px; }
  .chat-talk-list .chat-fixed-room-grid > a,
  .chat-talk-list .chat-group-room-list > a,
  .chat-talk-list .chat-thread-card { min-height: 82px; padding-inline: 0; }
  .chat-talk-list :is(.chat-room-mark,.chat-group-avatar,.chat-avatar) { width: 54px; height: 54px; }
}

/* ---------- 共有受信箱・アカウント管理 ---------- */
.chat-fixed-rooms { margin-top: 22px; }
.chat-section-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.chat-section-label > span { font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.chat-section-label small { color: #89857d; font-size: 10px; }
.chat-fixed-room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chat-fixed-room-grid > a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 76px; padding: 12px 14px; border: 1px solid #d2cec5; background: #f9f7f1; text-decoration: none; }
.chat-fixed-room-grid > a:hover { border-color: #242428; background: #fff; }
.chat-room-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #25252a; border-radius: 4px; background: #18181c; color: #fff; font-weight: 900; }
.chat-fixed-room-grid > a > span:nth-child(2) { display: grid; min-width: 0; }
.chat-fixed-room-grid b { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.chat-fixed-room-grid b em { min-width: 19px; padding: 1px 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 9px; font-style: normal; text-align: center; }
.chat-fixed-room-grid small { color: #77736d; font-size: 10px; }
.chat-fixed-room-grid i { color: var(--accent); font-size: 10px; font-style: normal; font-weight: 900; }
.chat-inbox-tabs { display: flex; gap: 5px; margin-top: 26px; border-bottom: 1px solid #252525; }
.chat-inbox-tabs a { display: flex; gap: 7px; align-items: center; padding: 9px 14px; border: 1px solid transparent; border-bottom: 0; color: #66635e; font-size: 12px; font-weight: 800; text-decoration: none; }
.chat-inbox-tabs a.active { margin-bottom: -1px; border-color: #252525; background: #ece9e1; color: #17171b; }
.chat-inbox-tabs b { min-width: 19px; padding: 0 5px; border-radius: 99px; background: #dedad1; color: #46443f; font-size: 9px; text-align: center; }
.chat-inbox { margin-top: 0; }
.chat-thread-tags { display: flex; gap: 5px; margin-top: 6px; }
.chat-thread-tags i { padding: 1px 6px; border: 1px solid #c7c2b8; border-radius: 99px; color: #65625c; font-size: 9px; font-style: normal; line-height: 1.5; }
.chat-thread-tags i.done { border-color: #b9d9c9; color: var(--ok); }
.chat-case-status { margin-left: auto; padding: 3px 9px; border-radius: 99px; background: #fff0e9; color: var(--accent-dark); font-size: 10px; font-weight: 900; }
.chat-case-status.is-done { background: #e7f6ed; color: var(--ok); }
.chat-case-controls { display: flex; flex: none; align-items: center; gap: 8px; min-height: 48px; padding: 7px 13px; border-bottom: 1px solid #d8d4cb; background: #f4f1ea; }
.chat-case-controls form:first-child { min-width: 0; margin-right: auto; }
.chat-case-controls label { display: flex; align-items: center; gap: 8px; color: #6e6a63; font-size: 10px; font-weight: 800; }
.chat-case-controls select { min-width: 0; max-width: 250px; height: 33px; padding: 4px 28px 4px 8px; border: 1px solid #bcb7ad; background: #fff; font: inherit; font-size: 11px; }
.chat-case-controls button { min-height: 33px; padding: 5px 10px; border: 1px solid #aaa59b; border-radius: 4px; background: #fff; color: #32312e; font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.chat-case-controls + .chat-log { height: auto; min-height: 0; }
.team-room-note { margin-top: 20px; padding: 13px; border: 1px solid #d0cbc1; background: rgba(255,255,255,.42); }
.team-room-note b { font-size: 11px; }
.team-room-note p { margin: 4px 0 0; color: #77736d; font-size: 10px; }
.team-chat-room .chat-room-person small { color: #77736d; font-size: 10px; }

.accounts-admin-page { overflow-x: hidden; background: #e9e6de; }
.accounts-admin-page .admin-main { max-width: 1320px; }
.account-console { padding: 30px 0 70px; font-family: var(--font-jp); }
.account-console-head { display: block; padding: 0 2px 24px; border-bottom: 2px solid #161619; }
.account-console-head h1 { margin: 4px 0; font-size: clamp(27px, 4vw, 40px); letter-spacing: .04em; line-height: 1.25; }
.account-console-head p { margin: 0; color: #6e6b65; font-size: 12px; }
.account-staff-section, .account-users-section { margin-top: 30px; }
.account-section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 11px; }
.account-section-title h2 { margin: 1px 0 0; font-size: 21px; }
.account-section-title > small { color: #807c75; font-size: 10px; }
.account-staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-card { min-width: 0; padding: 17px; border: 1px solid #cdc8be; background: #f9f7f2; }
.account-card-new { border-style: dashed; background: rgba(255,255,255,.38); }
.account-card-top { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #ddd8ce; }
.account-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #18181c; color: #fff; font-weight: 900; }
.account-card-top > div { display: grid; min-width: 0; }
.account-card-top b { font-size: 13px; }
.account-card-top small { color: #77736d; font-size: 9px; }
.account-card-top > i, .account-user-row summary > i { padding: 2px 7px; border-radius: 99px; background: #eee5e2; color: #876057; font-size: 9px; font-style: normal; font-weight: 900; }
.account-card-top > i.active, .account-user-row summary > i.active { background: #e3f2e8; color: var(--ok); }
.account-card-top > i.pending { background: #fff0cf; color: #8a5a00; }
.account-card > label, .account-form-row label, .account-user-form > label { display: grid; min-width: 0; gap: 3px; margin-top: 8px; color: #716d66; font-size: 9px; font-weight: 900; }
.account-card input, .account-card select, .account-user-form input { width: 100%; max-width: 100%; min-width: 0; height: 39px; padding: 7px 9px; border: 1px solid #c6c1b7; border-radius: 3px; background: #fff; color: #202024; font: inherit; font-size: 12px; }
.account-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 9px; }
.account-check { display: flex !important; flex-direction: row; align-items: center; gap: 6px; min-height: 39px; padding: 7px 9px; border: 1px solid #c6c1b7; background: #fff; color: #353431; font-size: 11px !important; }
.account-check input { width: 16px; height: 16px; flex: none; }
.account-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #ddd8ce; }
.account-card-foot small { color: #77736d; font-size: 9px; }
.account-card button, .account-user-form button, .account-user-search button { min-height: 36px; padding: 7px 14px; border: 0; border-radius: 3px; background: #19191d; color: #fff; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.account-user-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 9px; }
.account-user-search input { min-width: 0; height: 42px; padding: 8px 11px; border: 1px solid #aaa59b; background: #fff; font: inherit; }
.account-user-list { border-top: 1px solid #222; }
.account-user-row { border-bottom: 1px solid #cbc6bc; background: rgba(255,255,255,.36); }
.account-user-row summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto minmax(80px, auto); gap: 12px; align-items: center; min-height: 67px; padding: 10px 12px; list-style: none; cursor: pointer; }
.account-user-row summary::-webkit-details-marker { display: none; }
.account-user-row summary > span:nth-child(2) { display: grid; min-width: 0; }
.account-user-row summary b { font-size: 12px; }
.account-user-row summary small { overflow: hidden; color: #77736d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-user-row summary em { color: #6b6760; font-size: 10px; font-style: normal; text-align: right; }
.account-user-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 9px; align-items: end; padding: 12px 14px 16px 64px; border-top: 1px dashed #c8c3b9; background: #f7f5ef; }
.account-user-form > div { display: flex; align-items: center; gap: 9px; min-height: 39px; }
.account-user-form a { color: #5e5b56; font-size: 10px; font-weight: 900; white-space: nowrap; }
.account-infinite-scroll { display: grid; place-items: center; gap: 8px; min-height: 76px; padding: 18px; color: #77736d; font-size: 10px; }
.account-infinite-scroll > span { display: inline-flex; align-items: center; gap: 8px; }
.account-infinite-scroll.is-loading > span::before { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ''; animation: account-scroll-spin .7s linear infinite; }
.account-infinite-scroll > a { min-height: 34px; padding: 8px 14px; border: 1px solid #aaa59b; border-radius: 999px; color: inherit; font-weight: 800; text-decoration: none; }
.account-infinite-scroll.is-complete { min-height: 50px; opacity: .72; }
@keyframes account-scroll-spin { to { transform: rotate(1turn); } }

@media (max-width: 760px) {
  .chat-fixed-rooms { margin-top: 8px; background: #fff; }
  .chat-fixed-rooms .chat-section-label { display: none; }
  .chat-fixed-room-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
  .chat-fixed-room-grid > a { min-height: 64px; padding: 9px 14px; border: 0; border-bottom: 1px solid #ededed; background: #fff; }
  .chat-fixed-room-grid > a:last-child { border-bottom: 0; }
  .chat-fixed-room-grid i { width: 20px; color: #a0a0a0; font-size: 24px; font-weight: 300; text-align: center; }
  .chat-room-mark { width: 38px; height: 38px; border: 0; border-radius: 50%; }
  .chat-fixed-room-grid b { font-size: 14px; }
  .chat-fixed-room-grid small { margin-top: 2px; color: #8a8a8a; font-size: 10px; }
  .chat-inbox-tabs { overflow-x: visible; margin: 12px 12px 0; padding: 3px; border: 0; border-radius: 10px; background: #e9eaec; }
  .chat-inbox-tabs a { flex: 1 1 0; justify-content: center; min-height: 36px; padding: 7px 8px; border: 0; border-radius: 8px; font-size: 11px; }
  .chat-inbox-tabs a.active { margin: 0; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.09); }
  .chat-thread-card { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px; border-color: #ededed; background: #fff; }
  .chat-case-controls { align-items: stretch; }
  .chat-case-controls form:first-child { flex: 1 1 auto; }
  .chat-case-controls label { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .chat-case-controls select { width: 100%; max-width: 100%; min-width: 0; }
  .chat-case-controls + .chat-log { height: auto; min-height: 0; }
  .team-room-note { display: none; }
  .account-console { padding: 18px 12px 50px; }
  .accounts-admin-page .admin-main { padding-inline: 0; }
  .account-console-head { grid-template-columns: 1fr; gap: 15px; }
  .account-staff-grid { grid-template-columns: minmax(0, 1fr); }
  .account-card, .account-card * { box-sizing: border-box; }
  .account-form-row { grid-template-columns: minmax(0, 1fr); }
  .account-form-row .account-check { display: flex !important; width: 100%; min-width: 0; white-space: nowrap; }
  .account-card input, .account-card select, .account-user-form input { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
  .account-form-row .account-check input { width: 16px; min-width: 16px; max-width: 16px; inline-size: 16px; min-inline-size: 16px; max-inline-size: 16px; }
  .account-user-row summary { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding-inline: 7px; }
  .account-user-row summary > em { grid-column: 2 / -1; text-align: left; }
  .account-user-form { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .account-user-form > div { flex-wrap: wrap; }
}

/* ---------- AI相談 ----------
   スマホで親指だけで回せることを優先。入力欄は下に置いて、送信は右に固定する。 */
.ai-log {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px; margin: 4px 0 14px;
}
.ai-msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.75; }
.ai-msg.user {
  align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg.assistant {
  align-self: flex-start; background: var(--panel); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; color: var(--ink);
}
.office-modal-main .ai-msg.assistant {
  background: #22232b; border-color: #3a3c48; color: #f3f4f6;
}
.ai-msg.failed { border-color: #d8432a; color: #d8432a; }
.ai-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-tools { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

.ai-empty { color: var(--muted); font-size: 13.5px; padding: 8px 2px; }
.ai-empty ul { margin: 8px 0 0; padding-left: 1.1em; }
.ai-empty li { margin: 4px 0; }

/* 考え中の3点 */
.ai-dots { display: inline-flex; gap: 5px; padding: 3px 0; }
.ai-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: ai-blink 1.2s infinite ease-in-out;
}
.ai-dots i:nth-child(2) { animation-delay: .18s; }
.ai-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-dots i { animation: none; opacity: .5; } }

.ai-form { display: flex; gap: 8px; align-items: flex-end; }
.ai-form textarea {
  flex: 1 1 auto; min-height: 46px; max-height: 40vh; resize: none;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 16px; line-height: 1.6; background: var(--panel);
}
.ai-form button { flex: 0 0 auto; min-height: 46px; padding: 0 18px; }
.ai-form button.ai-icon { padding: 0; }
.ai-del { margin-top: 10px; }

@media (max-width: 640px) {
  .ai-msg { max-width: 94%; font-size: 13.5px; }
  .ai-log { min-height: 160px; }
}

/* ---------- ZETSU AI社員オフィス ----------
   ZETSU専用の共有司令塔。上段=接続と在席数、左=事務所、右=名簿。 */
.office {
  background: #171c26; border: 1px solid #2a3040; border-radius: 16px;
  padding: 10px 12px 14px; color: #e5e7eb;
}
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.office-icon { width: 18px; height: 18px; display: block; flex: none; }

.office-alert {
  margin: 10px 0 0; padding: 9px 13px; border-radius: 10px; font-size: 12.5px;
  background: rgba(251,191,36,.1); border: 1px solid #6b5320; color: #fbbf24;
}
.office-alert a { color: #fbbf24; font-weight: 700; white-space: nowrap; }

.office-body { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 0; }

/* 事務所 */
.office-floor {
  position: relative; border: 1px solid #343c4e; border-radius: 12px; padding: 0 0 10px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/40px 100%,
    linear-gradient(135deg, rgba(96,165,250,.035), transparent 42%),
    #1b212c;
}
.office-floor-mark {
  position: absolute; z-index: 1; top: 8px; right: 10px; width: 28px; height: 28px;
  opacity: .2; pointer-events: none;
}

.depts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 420px));
  align-content: start; align-items: start; gap: 14px; padding: 14px;
}
.dept {
  --dept-rgb: 96, 165, 250; --dept-text: #bfdbfe;
  min-width: 0; overflow: hidden; border: 1px solid rgba(var(--dept-rgb), .42); border-radius: 14px;
  padding: 0 10px 12px; background: rgba(var(--dept-rgb), .10);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 24px rgba(5,8,13,.14);
}
.dept-tone-1 { --dept-rgb: 74, 222, 128; --dept-text: #bbf7d0; }
.dept-tone-2 { --dept-rgb: 251, 191, 36; --dept-text: #fde68a; }
.dept-tone-3 { --dept-rgb: 192, 132, 252; --dept-text: #e9d5ff; }
.dept-tone-4 { --dept-rgb: 45, 212, 191; --dept-text: #99f6e4; }
.dept-tone-5 { --dept-rgb: 251, 113, 133; --dept-text: #fecdd3; }
.dept-head {
  display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 -10px 8px; padding: 0 10px;
  border-bottom: 1px solid rgba(var(--dept-rgb), .3); background: rgba(var(--dept-rgb), .17);
}
.dept-name { margin: 0; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--dept-text); }
.dept-name::before { content: "▸ "; color: rgba(var(--dept-rgb), .95); }
.dept-count {
  flex: none; margin-left: auto; padding: 2px 7px; border: 1px solid rgba(var(--dept-rgb), .34);
  border-radius: 999px; color: var(--dept-text); font-size: 10px; font-weight: 700;
  background: rgba(8,12,18,.26); font-variant-numeric: tabular-nums;
}

.desks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(124px, 156px)); justify-content: start; }
.desk {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 30px 6px 10px; border-radius: 12px; text-decoration: none; color: #e5e7eb;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.desk:hover, .desk:focus-visible { background: rgba(255,255,255,.05); border-color: #33333f; outline: none; }
.desk .body { image-rendering: pixelated; }
.desk .desk-top { width: 74px; height: 9px; margin-top: -13px; border-radius: 3px; background: #3a3a47; box-shadow: 0 3px 0 #23232c; }
.desk .bubble {
  position: absolute; top: 2px; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; border: 1px solid; background: #1b1b23;
}
.desk .plate {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  padding: 3px 10px; border-radius: 999px; background: #22222b; font-size: 12px; font-weight: 700;
}
.desk .dot { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; flex: none; }

/* 入口まわりの小物 */
.office-foot { display: flex; align-items: flex-end; min-height: 142px; padding: 18px 14px 0; }
.entrance {
  padding: 5px 16px; border-radius: 4px 4px 0 0; background: #22222c;
  border: 1px solid #2f2f3a; border-bottom: 0; font-size: 10.5px; color: #8b9099; letter-spacing: .1em;
}
/* 参考外観: 打ち放しコンクリート、左ガレージ、中央玄関、右の大窓 */
.office-home {
  position: relative; display: grid; grid-template-columns: 42% 13% 45%;
  width: min(620px, 100%); height: 124px; margin: 0 auto; overflow: visible;
  border: 1px solid #555861; border-bottom-color: #24262c; border-radius: 4px 4px 1px 1px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 32%, rgba(0,0,0,.13) 0 1px, transparent 2px),
    linear-gradient(100deg, rgba(255,255,255,.06), transparent 28%), #777b80;
  box-shadow: 0 10px 22px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.16);
}
.office-home::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -7px; height: 7px;
  border: 1px solid #4b4e55; background: #85898e; box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.office-home::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: -6px; height: 7px;
  border-radius: 50% 50% 0 0; background: #2b2d33; box-shadow: 0 3px 0 #15161a;
}
.home-garage {
  position: relative; align-self: end; height: 91px; margin: 0 0 0 7px; overflow: hidden;
  border: 2px solid #666970; border-bottom: 0; background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/18px 100%,
    linear-gradient(#111216, #202126 72%, #303138);
  box-shadow: inset 0 10px 24px rgba(0,0,0,.6);
}
.home-entry { position: relative; align-self: end; height: 89px; background: #5e6267; border-left: 1px solid #8c9094; border-right: 1px solid #4a4d51; }
.home-entry::before { content: ""; position: absolute; inset: 12px 22% 0; background: #282a2e; border: 2px solid #45484c; box-shadow: inset 8px 0 0 rgba(255,255,255,.035); }
.home-entry::after { content: ""; position: absolute; right: 17%; top: 51%; width: 3px; height: 3px; border-radius: 50%; background: #d6b66c; }
.home-entry > i { position: absolute; top: 3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #d6d0ae; box-shadow: 0 0 6px #ffe9a1; }
.home-residence { position: relative; align-self: stretch; min-width: 0; }
.home-sign {
  position: absolute; z-index: 2; top: 11px; left: 11px; color: #303235;
  font: 600 10px/1 "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .04em;
  text-shadow: 0 1px rgba(255,255,255,.28);
}
.home-window {
  position: absolute; left: 10px; right: 9px; top: 29px; bottom: 10px; overflow: hidden;
  border: 5px solid #685a4f; background: linear-gradient(155deg, rgba(129,164,180,.28), transparent 38%), #1d2023;
  box-shadow: inset 0 0 24px rgba(0,0,0,.56), 0 1px rgba(255,255,255,.16);
}
.home-window::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 2px; background: #4e4540; }
.home-window::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 58%; height: 1px; background: rgba(255,255,255,.08); }
.home-members { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 100%; padding: 5px; min-width: 0; }
.home-members > small { margin: auto; color: #71757d; font-size: 8px; }
.home-member { display: grid; justify-items: center; align-self: end; color: #aeb2bc; text-decoration: none; }
.home-member .body { width: 25px; height: 35px; opacity: .72; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.home-member b { max-width: 62px; margin-top: -2px; overflow: hidden; color: #b8bbc2; font-size: 8px; text-overflow: ellipsis; text-shadow: 0 1px #000; white-space: nowrap; }
.home-member:hover .body, .home-member:focus-visible .body { opacity: 1; }

/* 参考写真を正面ベクター化したG-Class。タイヤを車体外へ出し、最低地上高を残す */
.g-wagen-svg {
  position: absolute; left: 50%; bottom: 0; width: auto; max-width: 94%; height: 88px;
  object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 5px 4px rgba(0,0,0,.5));
}

/* タップは相談、600ms長押し（PCは右クリック）は社員操作 */
[data-office-agent] {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: pan-y;
}
[data-office-agent].is-long-pressing { outline: 1px solid #69707c; outline-offset: -2px; }

.office-staff-menu {
  width: min(350px, calc(100vw - 24px)); max-width: none; margin: auto; padding: 0;
  overflow: hidden; border: 1px solid #3b3d47; border-radius: 16px;
  background: #17171d; color: #eef0f3; box-shadow: 0 28px 90px rgba(0,0,0,.68);
}
.office-staff-menu::backdrop { background: rgba(6,6,9,.76); backdrop-filter: blur(3px); }
.office-staff-menu[open] { display: block; }
.office-staff-menu > header {
  display: flex; align-items: center; min-height: 50px; padding: 0 7px 0 16px;
  border-bottom: 1px solid #2c2d35;
}
.office-staff-menu > header b {
  min-width: 0; overflow: hidden; font-size: 14px; letter-spacing: .04em;
  text-overflow: ellipsis; white-space: nowrap;
}
.office-staff-menu-close {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto;
  border: 0; border-radius: 10px; background: transparent; color: #aeb2bc;
  font: 400 25px/1 inherit; cursor: pointer;
}
.office-staff-menu-close:hover { background: #25262d; color: #fff; }
.office-staff-actions { display: grid; gap: 8px; padding: 12px; }
.office-staff-actions form, .office-staff-confirm form { margin: 0; }
.office-staff-action {
  width: 100%; min-height: 46px; padding: 8px 14px; border: 1px solid #3a3d47;
  border-radius: 11px; background: #22242c; color: #e4e7ec;
  font: 700 14px/1.4 inherit; cursor: pointer;
}
.office-staff-action:hover { background: #292c35; border-color: #505461; }
.office-staff-action.is-danger {
  border-color: rgba(248,113,113,.52); background: rgba(127,29,29,.18); color: #fca5a5;
}
.office-staff-action.is-danger:hover { background: rgba(153,27,27,.28); }
.office-staff-confirm { padding: 15px 12px 12px; }
.office-staff-confirm > b { display: block; margin: 0 2px 15px; font-size: 14px; }
.office-staff-confirm > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 状態の色。稼働中だけ動かす */
.desk[data-status=working] .bubble { color: #4ade80; border-color: #2f6b45; }
.desk[data-status=working] .dot { background: #4ade80; }
.desk[data-status=working] .body { animation: desk-work .9s steps(2, end) infinite; }
.desk[data-status=thinking] .bubble { color: #60a5fa; border-color: #2f4b6b; }
.desk[data-status=thinking] .dot { background: #60a5fa; }
.desk[data-status=away] .bubble { color: #6b7280; border-color: #2a2a33; }
.desk[data-status=away] .body { opacity: .3; }
.desk[data-status=waiting] .bubble { color: #fbbf24; border-color: #6b5320; }
.desk[data-status=waiting] .dot { background: #fbbf24; }
.desk[data-status=idle] .bubble { color: #9ca3af; border-color: #33333f; }
.desk[data-status=idle] .body { opacity: .5; }

@keyframes desk-work { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* 手が空くと席を離れて給水器のほうへ寄っていく(本家の給水器の動き) */
.desk[data-status=idle] .body { animation: desk-stroll 9s ease-in-out infinite; }
@keyframes desk-stroll {
  0%, 60% { transform: translateX(0); }
  75%, 85% { transform: translateX(13px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .desk .body { animation: none; } }

/* 採用・編集・解雇 */
.office-btn {
  display: inline-block; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: #1c1c24; border: 1px solid #33333f; color: #d1d5db;
  font-size: 11.5px; text-decoration: none; list-style: none;
}
.office-btn:hover { border-color: #4b4b5a; background: #22222c; }
.office-btn::-webkit-details-marker { display: none; }
.office-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; width: 38px; height: 38px; padding: 0; border-radius: 12px;
}
/* オフィス画面は外側をスクロールさせず、席の部分だけをスクロールする */
.office-page {
  height: 100dvh; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; background: #10131a;
}
.office-page-main {
  width: 100%; max-width: none; min-height: 0; flex: 1;
  display: flex; overflow: hidden; margin: 0; padding: 0; background: #10131a;
}
.office-page-main > .office {
  width: 100%; min-width: 0; min-height: 0; height: 100%; flex: 1;
  display: flex; flex-direction: column; border: 0; border-radius: 0;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.office-page-main .office-body { min-height: 0; flex: 1; overflow: hidden; align-items: stretch; }
.office-page-main .office-floor { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.office-page-main .office-floor .office-foot { flex: none; }
.office-page-main .office-floor .depts {
  min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.office-page-main .office-floor .dept-empty { display: grid; min-height: 160px; flex: 1; place-items: center; }
.office-page-main .office-floor .office-foot { margin-top: auto; }
.office-hub-page { height: 100dvh; min-height: 0; }

/* PCでは下の建物を背景の添え物にせず、事務所の一画として大きく見せる */
@media (min-width: 900px) {
  .office-page-main .office-foot { min-height: clamp(201px, 29dvh, 270px); padding: 24px 18px 0; }
  .office-page-main .office-home {
    width: min(1200px, 88%); height: clamp(175px, 25dvh, 240px);
  }
  .office-page-main .home-garage { height: calc(100% - 31px); margin-left: 12px; }
  .office-page-main .home-entry { height: calc(100% - 34px); }
  .office-page-main .home-entry::before { inset: 18px 24% 0; }
  .office-page-main .home-sign { top: 16px; left: 16px; font-size: 12px; }
  .office-page-main .home-window { left: 15px; right: 14px; top: 43px; bottom: 14px; border-width: 7px; }
  .office-page-main .home-members { gap: 9px; padding: 9px; }
  .office-page-main .home-members > small { font-size: 11px; }
  .office-page-main .home-member .body { width: 38px; height: 53px; }
  .office-page-main .home-member b { max-width: 90px; font-size: 10px; }
  .office-page-main .g-wagen-svg { max-width: 96%; height: calc(100% - 4px); }
}

.admin-flash {
  position: fixed; z-index: 95; top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right)); width: min(340px, calc(100vw - 24px));
  margin: 0; box-shadow: 0 16px 45px rgba(0,0,0,.24);
  transition: opacity .18s ease, transform .18s ease;
}
.admin-flash.is-dismissed { opacity: 0; transform: translateY(-8px); pointer-events: none; }

.hire { margin-top: 10px; }
.hire[open] .hire-open { border-color: var(--accent); color: #fff; }
.appbar .appbar-hire { position: relative; margin: 0; flex: none; }
.appbar-hire > summary { list-style: none; }
.appbar-hire > summary::-webkit-details-marker { display: none; }
.appbar-hire[open] > summary { background: rgba(255,255,255,.12); color: #fff; }
.office-hire > .staff-form {
  position: fixed; z-index: 90; top: max(66px, calc(env(safe-area-inset-top) + 54px));
  right: max(12px, env(safe-area-inset-right)); width: min(420px, calc(100vw - 24px));
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 82px); overflow: auto;
  margin: 0; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.office-hire, .office-hire * { box-sizing: border-box; }
.office-hire input, .office-hire select, .office-hire textarea {
  width: 100%; max-width: 100%; min-width: 0;
  inline-size: 100%; max-inline-size: 100%; min-inline-size: 0;
}

/* 席・名簿・家を押すと、相談はオフィス内のモーダルで開く */
.office-chat-modal {
  width: min(760px, calc(100vw - 24px)); height: min(82dvh, 780px); max-width: none; max-height: none;
  margin: auto; padding: 0; overflow: hidden; border: 1px solid #383842; border-radius: 16px;
  background: #14141a; color: #e5e7eb; box-shadow: 0 28px 90px rgba(0,0,0,.68);
}
.office-chat-modal::backdrop { background: rgba(6,6,9,.76); backdrop-filter: blur(3px); }
.office-chat-modal[open] { display: grid; grid-template-rows: 48px minmax(0,1fr); }
.office-chat-modal > header { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; border-bottom: 1px solid #2c2c34; }
.office-chat-modal > header b { min-width: 0; overflow: hidden; font-size: 13px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.office-chat-close { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 10px; background: transparent; color: #aeb2bc; font-size: 25px; cursor: pointer; }
.office-chat-close:hover { background: #25252d; color: #fff; }
.office-chat-modal iframe { width: 100%; height: 100%; border: 0; background: #14141a; }

.office-modal-document, .office-modal-page { height: 100%; background: #14141a; }
.office-modal-page { overflow: hidden; color: #e5e7eb; }
.office-modal-main { height: 100dvh; min-width: 0; display: flex; flex-direction: column; padding: 10px; }
.office-modal-main .ai-log {
  min-height: 0; flex: 1; margin: 0 0 8px; padding: 6px; overflow-y: auto;
  border: 0; border-radius: 0; background: transparent;
}
.office-modal-main .ai-msg { flex: 0 0 auto; height: auto; min-height: 0; }
.office-modal-main .ai-form { flex: none; gap: 6px; }
.office-modal-main .ai-form textarea { background: #1a1a21; border-color: #363640; color: #edf0f3; }
.office-modal-main .ai-icon {
  width: 38px; height: 42px; border-color: #333640; border-radius: 10px;
  background: #1a1a21; color: #b8bdc7;
}
.office-modal-main .ai-form .btn { min-height: 42px; padding: 0 14px; }
.office-modal-main .ai-picked, .office-modal-main .ai-note, .office-modal-main .ai-del, .office-modal-main > .hint { flex: none; }

.ai-confirm {
  display: grid; gap: 6px; margin-top: 10px; padding: 12px;
  border: 1px solid #714034; border-radius: 12px; background: #211817;
}
.ai-confirm b { color: #fff; font-size: 14px; }
.ai-confirm span { color: #e8e8ec; font-size: 13px; line-height: 1.55; }
.ai-confirm small { color: #aeb2bc; font-size: 11px; line-height: 1.45; }
.ai-confirm .btn { justify-self: start; margin-top: 2px; }
.ai-confirm em { color: #8f949e; font-size: 10.5px; font-style: normal; }

.staff-form {
  display: grid; gap: 10px; margin-top: 10px; padding: 14px;
  background: #1a1a22; border: 1px solid #2a2a33; border-radius: 12px;
}
.staff-form .f { display: grid; gap: 4px; font-size: 11.5px; color: #9ca3af; }
.staff-form .f > span, .staff-form legend { font-weight: 700; }
.staff-form input[type=text] {
  padding: 9px 11px; border-radius: 9px; border: 1px solid #33333f;
  background: #13131a; color: #e5e7eb; font-family: inherit; font-size: 16px;
}
.staff-form input[type=text]:focus { outline: none; border-color: var(--accent); }
.staff-form .f-color input { width: 54px; height: 32px; padding: 2px; border: 1px solid #33333f; border-radius: 8px; background: #13131a; }
.staff-form .f-tools { border: 1px solid #2a2a33; border-radius: 10px; padding: 8px 10px 10px; margin: 0; }
.staff-form .f-tools .hint { margin-left: 6px; color: #6b7280; font-weight: 400; }
.staff-form .tool {
  display: inline-flex; align-items: center; gap: 5px; margin: 4px 8px 0 0;
  font-size: 12px; color: #d1d5db; cursor: pointer;
}
.staff-form .btn { justify-self: start; }

.dept-empty { margin: 0; padding: 24px 12px; text-align: center; color: #8b9099; font-size: 13px; }

@media (max-width: 640px) {
  .office { padding: 8px 9px 12px; border-radius: 14px; }
  .office-icon-btn { width: 36px; height: 36px; min-width: 36px; }
  .depts { padding: 9px; gap: 9px; }
  .desks { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px; }
  .desk { padding: 27px 3px 9px; }
  .desk .body { width: 42px; height: 58px; }
  .desk .desk-top { width: 58px; }
  .desk .plate { font-size: 11px; padding: 3px 8px; }
  .desk .bubble { font-size: 10px; padding: 2px 8px; }
  .office-page-main > .office {
    padding: max(8px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  }
  .office-page-main .office-floor { min-height: 0; }
  .office-foot { min-height: 119px; padding: 15px 5px 0; }
  .office-home { width: 100%; height: 104px; grid-template-columns: 43% 14% 43%; }
  .home-garage { height: 76px; margin-left: 4px; }
  .home-entry { height: 75px; }
  .home-window { left: 5px; right: 5px; top: 27px; bottom: 7px; border-width: 4px; }
  .home-sign { top: 9px; left: 5px; font-size: 7.5px; letter-spacing: 0; }
  .g-wagen-svg { width: auto; max-width: 96%; height: 73px; }
  .office-chat-modal {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0;
    border-width: 0; border-radius: 0;
  }
  .office-chat-modal[open] { grid-template-rows: max(46px, calc(env(safe-area-inset-top) + 40px)) minmax(0,1fr); }
  .office-chat-modal > header { padding-top: env(safe-area-inset-top); }
  .office-modal-main { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ---------- ZETSU司令塔 初期設定 ---------- */
.setup-page {
  --setup-bg: #111218; --setup-panel: #181a22; --setup-line: #30333d;
  max-width: 1040px; margin: 0 auto; overflow: hidden; border-radius: 20px;
  background: var(--setup-bg); color: #e8eaf0; box-shadow: 0 24px 70px rgba(16,16,20,.16);
}
.setup-hero {
  position: relative; padding: clamp(32px, 7vw, 72px) clamp(20px, 6vw, 64px) clamp(28px, 5vw, 52px);
  overflow: hidden; border-bottom: 1px solid var(--setup-line);
  background:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px),
    radial-gradient(520px 260px at 95% 5%, rgba(216,67,42,.18), transparent 70%), #111218;
  background-size: 32px 32px, 32px 32px, auto, auto;
}
.setup-hero::after {
  content: "10445"; position: absolute; right: -12px; bottom: -42px;
  color: rgba(255,255,255,.035); font-size: clamp(90px, 20vw, 190px); font-weight: 900; line-height: 1;
}
.setup-hero h1 { position: relative; z-index: 1; margin: 0 0 14px; font-size: clamp(29px, 5vw, 52px); line-height: 1.25; letter-spacing: .02em; }
.setup-lead { position: relative; z-index: 1; max-width: 680px; margin: 0; color: #aeb3bf; font-size: clamp(14px, 2vw, 17px); }
.setup-lead b { color: #fff; }

.setup-requirements { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1px; background: var(--setup-line); border-bottom: 1px solid var(--setup-line); }
.setup-requirement { min-width: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 19px clamp(18px, 5vw, 48px); background: #15171e; }
.setup-requirement > span { width: 100%; margin-bottom: 2px; color: #747b89; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.setup-requirement strong, .setup-requirement s { padding: 5px 9px; border-radius: 7px; font-size: 11px; line-height: 1.4; }
.setup-requirement strong { border: 1px solid #28593e; color: #66dc96; background: rgba(31,115,67,.13); }
.setup-requirement s { border: 1px solid #353842; color: #777e8c; text-decoration-color: #e45b43; }

.setup-section { padding: clamp(28px, 6vw, 58px) clamp(18px, 6vw, 58px); border-bottom: 1px solid var(--setup-line); }
.setup-section-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.setup-section-head > span {
  display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #414550; border-radius: 50%;
  color: #8e94a1; font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.setup-section-head h2 { margin: 5px 0 0; font-size: clamp(19px, 3vw, 28px); line-height: 1.35; }

.setup-route-map { display: grid; grid-template-columns: 1fr minmax(125px, .55fr) 1fr; align-items: stretch; gap: 12px; }
.setup-node { min-width: 0; display: grid; align-content: center; min-height: 148px; padding: 20px; border: 1px solid var(--setup-line); border-radius: 15px; background: var(--setup-panel); }
.setup-node small { color: #737b89; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.setup-node b { margin: 9px 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.setup-node span { color: #9fa5b1; font-size: 12px; }
.setup-node.is-client { border-top-color: #4276b0; }
.setup-node.is-server { border-top-color: #d8432a; }
.setup-tunnel { display: flex; align-items: center; justify-content: center; gap: 7px; color: #6f7684; text-align: center; font-size: 9.5px; line-height: 1.5; }
.setup-tunnel i { height: 1px; flex: 1; background: #48505e; }
.setup-stop-note { margin: 16px 0 0; padding-left: 13px; border-left: 2px solid #d8432a; color: #aeb3bf; font-size: 12.5px; }

.setup-steps { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.setup-steps > li { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 16px; padding: 24px 0; border-top: 1px solid #292c35; }
.setup-steps > li:first-child { padding-top: 0; border-top: 0; }
.setup-step-no { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #22252e; color: #e45b43; font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.setup-steps h3 { margin: 3px 0 7px; font-size: 16px; line-height: 1.45; }
.setup-steps p { margin: 0 0 12px; color: #a8aeba; font-size: 13px; }
.setup-steps p b { color: #fff; }
.setup-links { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.setup-links a, .setup-download, .setup-admin-only a { color: #84b9f1; font-size: 12px; }
.setup-download { display: inline-block; margin-bottom: 10px; }
.setup-command {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px;
  width: 100%; margin: 7px 0; padding: 7px 7px 7px 12px; border: 1px solid #343842; border-radius: 9px; background: #0d0f14;
}
.setup-command code { min-width: 0; color: #d7dae2; font: 11.5px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.setup-copy { min-height: 32px; padding: 5px 10px; border: 1px solid #414651; border-radius: 7px; background: #20232b; color: #aeb4c0; font: 700 10.5px/1 inherit; cursor: pointer; }
.setup-copy:hover, .setup-copy.is-copied { border-color: #4a9868; color: #69dc98; }
.setup-office-url { display: block; margin: 10px 0; padding: 13px 15px; border: 1px solid #315c43; border-radius: 10px; background: rgba(35,105,61,.12); color: #68dc98; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }

.setup-check-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.setup-check-grid article { padding: 16px; border: 1px solid var(--setup-line); border-radius: 12px; background: var(--setup-panel); }
.setup-check-grid b { font-size: 12.5px; }
.setup-check-grid p { margin: 7px 0 0; color: #9299a6; font-size: 11.5px; }
.setup-live-state { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: #aeb3bf; font-size: 12px; }
.setup-live-state > span { width: 8px; height: 8px; border-radius: 50%; background: #ef6a5a; }
.setup-live-state.is-ok > span { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.08); }
.setup-live-state.is-ok b { color: #69dc98; }
.setup-live-state.is-bad b { color: #ef8377; }

.setup-admin-only { padding: 22px clamp(18px, 6vw, 58px) 28px; background: #0e1015; }
.setup-admin-only summary { color: #7f8794; font-size: 12px; cursor: pointer; }
.setup-admin-only > div { max-width: 760px; padding: 14px 0; }
.setup-admin-only p { color: #9299a6; font-size: 12.5px; }
.setup-guard { padding: 11px 13px; border-left: 2px solid #d99b38; background: rgba(217,155,56,.07); color: #c4ad83 !important; }
.setup-current-test { padding: 24px clamp(18px, 6vw, 58px) 30px; border-top: 1px solid #3b2c2a; background: #120f10; }
.setup-current-test > div { display: grid; gap: 2px; padding: 15px 17px; border: 1px solid #44302e; border-radius: 12px; background: #191416; }
.setup-current-test > div span { color: #85808a; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.setup-current-test > div b { color: #e4e1e4; font-size: 18px; overflow-wrap: anywhere; }
.setup-current-test > div small { color: #8f8992; font: 10.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.setup-current-test > strong { display: block; margin-top: 12px; color: #e59b90; font-size: 12.5px; }

@media (max-width: 720px) {
  .setup-page { margin: -4px; border-radius: 14px; }
  .setup-requirements, .setup-route-map, .setup-check-grid { grid-template-columns: 1fr; }
  .setup-tunnel { min-height: 46px; flex-direction: column; }
  .setup-tunnel i { width: 1px; min-height: 10px; flex: 1; }
  .setup-node { min-height: 116px; }
  .setup-requirement { padding: 16px 18px; }
  .setup-steps > li { grid-template-columns: 34px minmax(0,1fr); gap: 10px; }
  .setup-step-no { width: 32px; height: 32px; }
  .setup-command { padding-left: 10px; }
}

/* 相談画面のヘッダに担当部署を添える */
.ai-dept {
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: #f1f2f4; border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--muted); vertical-align: middle;
}

/* ---------- AIの接続 ---------- */
.conns { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.conn {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.conn[data-status=connected] { border-color: #bfe0cd; }
.conn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conn-head h2 { margin: 0; font-size: 16px; }
.conn-state {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: #f1f2f4; color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.conn[data-status=connected] .conn-state { background: #e8f5ee; color: var(--ok); border-color: #cae8d8; }
.conn[data-status=connecting] .conn-state { background: #fef3e2; color: var(--warn); border-color: #f5dcb8; }
.conn[data-status=expired] .conn-state { background: #fdeaea; color: var(--bad); border-color: #f5c6c6; }

.conn-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.conn-note.warn { color: var(--warn); }
.conn-account { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

.conn-auth { margin: 12px 0 0; padding: 12px 14px; background: #f6f6f4; border-radius: 10px; }
.conn-step { margin: 0 0 4px; font-size: 12px; font-weight: 700; }
.conn-url { margin: 0 0 10px; font-size: 13px; overflow-wrap: anywhere; }
/* 指で押せる大きさにする(スマホでそのまま認証しに行けるように) */
.conn-url a {
  display: block; padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--accent); font-weight: 700; text-decoration: none; word-break: break-all;
}
.conn-url a:hover { border-color: var(--accent); }
.conn-url a::after { content: ' 97'; }
.conn-code {
  margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  font-size: 22px; font-weight: 800; letter-spacing: .16em; text-align: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  user-select: all;   /* まるごと選んでコピーできるように */
}
.conn-codeform { display: flex; gap: 8px; margin-top: 10px; }
.conn-codeform input {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; font-family: inherit;
}
.conn-error { margin: 10px 0 0; font-size: 12.5px; color: var(--bad); overflow-wrap: anywhere; }
.conn-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.conn-actions form { margin: 0; }

@media (max-width: 640px) {
  .conns { grid-template-columns: 1fr; }
  .conn { padding: 14px 15px; }
  .conn-code { font-size: 20px; }
}

/* ---------- 添付と音声 ---------- */
.ai-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 46px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 19px; line-height: 1; font-family: inherit;
}
.ai-icon:hover { border-color: var(--ink); }
.ai-icon:disabled { opacity: .45; cursor: default; }
#ai-mic.is-recording { background: var(--accent); border-color: var(--accent); color: #fff; }
#ai-mic.is-recording svg { animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #ai-mic.is-recording svg { animation: none; } }

.ai-picked, .ai-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ai-picked.is-bad, .ai-note.is-bad { color: var(--bad); }

.ai-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-files img, .ai-files video {
  width: 132px; height: 132px; object-fit: cover; border-radius: 10px;
  background: #000; border: 1px solid var(--line); display: block;
}
.ai-file {
  display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 7px;
  width: min(100%, 360px); padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255,255,255,.08); color: inherit; text-decoration: none;
}
.ai-file > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.12); }
.ai-file b { min-width: 0; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ai-file small { font-size: 10px; opacity: .72; }
.ai-msg.user .ai-files img, .ai-msg.user .ai-files video { border-color: rgba(255,255,255,.35); }

@media (max-width: 640px) {
  .ai-files img, .ai-files video { width: 104px; height: 104px; }
  .ai-icon { width: 40px; height: 44px; }
}

/* 本文中のリンク。吹き出しの色に合わせる */
.ai-body a { color: var(--accent); overflow-wrap: anywhere; }
.ai-msg.user .ai-body a { color: #fff; text-decoration: underline; }

/* ---------- 手元のAIから繋ぐ鍵 ---------- */
.token-new { border-color: var(--accent); margin-bottom: 14px; }
.token-plain {
  font-size: 13px; letter-spacing: 0; text-align: left; line-height: 1.7;
  word-break: break-all; user-select: all;
}
.token-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.token-form input[type=text] { flex: 2 1 220px; min-width: 0; }
.token-form select { flex: 1 1 200px; min-width: 0; }
.token-form input[type=text], .token-form select {
  padding: 9px 12px; font-size: 16px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; background: var(--panel);
}

/* ---------- スマホ・他のPCから使う案内 ---------- */
.tailnet-guide { display: block; }
.tailnet-lead { margin: 0 0 12px; font-size: 12.5px; line-height: 1.8; color: #b9bec7; }

.tailnet-now { display: grid; gap: 4px; margin-bottom: 14px; }
.tailnet-row { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.tailnet-row > span { flex: 0 0 12em; color: #9ca3af; }
.tailnet-row code, .tailnet-os code, .tailnet-steps code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: rgba(255,255,255,.07); border-radius: 6px; padding: 2px 7px;
  font-size: 12px; overflow-wrap: anywhere; user-select: all; color: #e5e7eb;
}

.tailnet-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 14px; }
.tailnet-steps > li { font-size: 13px; line-height: 1.8; color: #d1d5db; }
.tailnet-steps b { display: block; margin-bottom: 4px; }
.tailnet-steps p { margin: 4px 0; color: #b9bec7; }
.tailnet-steps a { color: var(--accent); }

.tailnet-os { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.tailnet-os > span { flex: 0 0 8em; color: #9ca3af; font-size: 12px; }

.tailnet-warn {
  margin: 10px 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.75;
  background: rgba(251,191,36,.1); border: 1px solid #6b5320; color: #fbbf24;
}
.tailnet-url { margin: 6px 0 0; }
.tailnet-url a {
  display: block; padding: 12px 14px; border-radius: 10px; word-break: break-all;
  background: #13131a; border: 1px solid #33333f; color: var(--accent);
  font-weight: 700; text-decoration: none;
}
.tailnet-url a:hover { border-color: var(--accent); }

.tailnet-devices { margin-top: 16px; border-top: 1px solid #2a2a33; padding-top: 12px; }
.tailnet-devices h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; color: #9ca3af; }
.tailnet-device {
  display: inline-flex; align-items: baseline; gap: 6px; margin: 0 6px 6px 0;
  padding: 4px 11px; border-radius: 999px; font-size: 12px;
  background: #1c1c24; border: 1px solid #2f2f3a; color: #6b7280;
}
.tailnet-device.is-online { color: #d1d5db; border-color: #3f5f4a; }
.tailnet-device small { font-size: 10.5px; opacity: .7; }

@media (max-width: 640px) {
  .tailnet-row { flex-direction: column; gap: 2px; }
  .tailnet-row > span, .tailnet-os > span { flex: none; }
}

/* ---------- 外部サービス連携：協会の接続台帳 ---------- */
.integration-admin-page {
  --integration-paper: #f3f0e9;
  --integration-ink: #16171a;
  --integration-rule: #d8d3c8;
  background:
    linear-gradient(90deg, rgba(22,23,26,.025) 1px, transparent 1px) 0 0 / 38px 38px,
    var(--integration-paper);
  font-family: var(--font-jp);
}
.integration-admin-page .admin-main { max-width: 1240px; }
.integration-shell { padding: 26px 0 72px; }
.integration-hero {
  padding: 20px 4px 22px; border-bottom: 2px solid var(--integration-ink);
}
.integration-hero h1 {
  margin: 0; font-size: clamp(28px, 5vw, 44px); font-weight: 800; line-height: 1.18; letter-spacing: .04em;
}

.integration-flow {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch;
  gap: 8px; padding: 16px 0;
}
.integration-flow a {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 11px;
  color: inherit; text-decoration: none; border: 1px solid #d5d0c6; background: rgba(255,255,255,.38);
}
.integration-flow a:hover { background: rgba(255,255,255,.65); }
.integration-flow a b { font-size: 14px; line-height: 1.2; }

.integration-card {
  --service-color: var(--integration-ink);
  margin: 0 0 28px; scroll-margin-top: 78px; overflow: hidden;
  border: 1px solid var(--integration-rule); border-top: 5px solid var(--service-color);
  border-radius: 4px; background: #fff; box-shadow: 0 10px 30px rgba(27,27,25,.055);
}
.integration-line { --service-color: #06a947; }
.integration-instagram { --service-color: #b9345c; }
.integration-zoom { --service-color: #2d61d6; }
.integration-timerex { --service-color: #16a36a; }
.integration-lstep { --service-color: #1f8f5f; }
.integration-lmessage { --service-color: #ef7847; }
.integration-card-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 22px 26px; border-bottom: 1px solid #e4e1da;
}
.integration-title h2 { margin: 0; font-size: 23px; line-height: 1.25; }
.integration-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  border: 1px solid #d8dbe0; border-radius: 999px; color: #666a72; font-size: 11px; font-weight: 800;
}
.integration-status i { width: 7px; height: 7px; border-radius: 50%; background: #a5a8ad; }
.integration-status.is-connected { color: var(--ok); border-color: #b9ddc9; background: #f1faf5; }
.integration-status.is-connected i { background: var(--ok); box-shadow: 0 0 0 4px rgba(21,127,76,.1); }
.integration-status.is-failed { color: var(--bad); border-color: #ebc3c3; background: #fff6f6; }
.integration-status.is-failed i { background: var(--bad); }
.integration-status.is-ready { color: var(--warn); border-color: #ead1a9; background: #fffaf0; }
.integration-status.is-ready i { background: var(--warn); }
.integration-account {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 26px; background: #f8f8f6;
  border-bottom: 1px solid #e4e1da; font-size: 13px;
}
.integration-account span { color: #74777d; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.integration-body { display: block; }
.integration-form h3 { margin: 0 0 14px; font-size: 13px; letter-spacing: .08em; }
.integration-form { min-width: 0; padding: 26px; }
.integration-form > label, .integration-optional label { display: block; margin-bottom: 14px; }
.integration-login-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid #e3e0d9;
}
.integration-login-fields > label { min-width: 0; }
.integration-form label > span, .integration-optional label > span {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 5px; color: #3f4248; font-size: 12px; font-weight: 800;
}
.integration-form label em {
  color: var(--ok); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .04em;
}
.integration-form input {
  width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #ced1d6; border-radius: 4px;
  background: #fff; font: inherit; font-size: 14px;
}
.integration-form input:focus { outline: 2px solid color-mix(in srgb, var(--service-color) 38%, transparent); border-color: var(--service-color); }
.integration-form input[type=password] { background: #fbfaf7; font-family: ui-monospace, Consolas, monospace; }
.integration-password-field { display: flex; gap: 8px; align-items: stretch; }
.integration-password-field input { flex: 1 1 auto; }
.integration-password-field .btn { flex: none; min-width: 72px; }
.integration-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.integration-field-grid > label { min-width: 0; }
.integration-optional { margin: 8px 0 18px; border: 1px solid #dad7d0; background: #faf9f6; }
.integration-optional summary { padding: 11px 13px; cursor: pointer; font-size: 12px; font-weight: 800; }
.integration-optional[open] summary { border-bottom: 1px solid #dfdcd5; }
.integration-optional > :not(summary) { margin-left: 13px; margin-right: 13px; }
.integration-optional > div:first-of-type, .integration-optional > label:first-of-type { margin-top: 13px; }
.integration-endpoints { margin: 8px 0 18px; padding: 11px 13px; border-left: 3px solid var(--service-color); background: #f4f5f6; }
.integration-endpoints p { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; margin: 4px 0; font-size: 10px; }
.integration-endpoints span { color: #696d73; font-weight: 800; }
.integration-endpoints code { min-width: 0; overflow-wrap: anywhere; user-select: all; }
.integration-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.integration-card .btn-primary { background: var(--service-color); }
.integration-card .btn-primary:hover { filter: brightness(.86); }
.integration-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 26px;
  border-top: 1px solid #e4e1da; background: #fafaf9; color: #777b82; font-size: 11px;
}
.integration-card-foot form { flex: none; }
.integration-last-error { display: block; margin-top: 2px; color: var(--bad); }
@media (max-width: 760px) {
  .integration-shell { padding-top: 12px; }
  .integration-hero { padding-top: 14px; }
  .integration-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .integration-flow a { border: 1px solid #d7d2c7; }
  .integration-card-head { grid-template-columns: auto minmax(0, 1fr); padding: 18px 16px; }
  .integration-status { grid-column: 1 / -1; justify-self: start; }
  .integration-title h2 { font-size: 20px; }
  .integration-account { align-items: flex-start; flex-direction: column; gap: 1px; padding-inline: 16px; }
  .integration-body { grid-template-columns: 1fr; }
  .integration-form { padding: 20px 16px; }
  .integration-field-grid { grid-template-columns: 1fr; gap: 0; }
  .integration-login-fields { grid-template-columns: 1fr; gap: 14px; }
  .integration-password-field .btn { width: auto; }
  .integration-endpoints p { grid-template-columns: 1fr; gap: 0; margin-bottom: 9px; }
  .integration-card-foot { align-items: stretch; flex-direction: column; padding: 14px 16px; }
  .integration-card-foot form, .integration-card-foot button { width: 100%; }
  .integration-actions > * { flex: 1 1 120px; text-align: center; }
}

/* ---------- 個別相談：原本スプレッドシートの参照台帳 ---------- */
.consultation-admin-page {
  --consult-paper: #f3f0e9;
  --consult-ink: #18191c;
  --consult-rule: #d8d2c7;
  background: var(--consult-paper);
  font-family: var(--font-jp);
}
.consultation-admin-page .admin-main { max-width: 1320px; }
.consultation-shell { padding: 28px 0 72px; color: var(--consult-ink); }
.consultation-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end;
  padding: 24px 2px 28px; border-bottom: 2px solid var(--consult-ink);
}
.consultation-kicker { margin: 0 0 8px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.consultation-hero h1 {
  margin: 0; font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; line-height: 1.2; letter-spacing: .04em;
}
.consultation-hero > div > p:last-child { margin: 10px 0 0; color: #5e5d59; font-size: 13px; }
.consultation-total { display: grid; justify-items: end; min-width: 140px; }
.consultation-total strong { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.04em; }
.consultation-total span { margin-top: 6px; color: #74716b; font-size: 10px; }
.consultation-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--consult-rule); background: #fff; }
.consultation-metrics article { display: grid; padding: 16px 18px; }
.consultation-metrics article + article { border-left: 1px solid var(--consult-rule); }
.consultation-metrics span { color: #6f6d67; font-size: 10px; font-weight: 800; }
.consultation-metrics b { margin-top: 4px; font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.consultation-metrics small { margin-top: 5px; color: #918e87; font-size: 9px; }
.consultation-filters {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px; align-items: end; margin: 20px 0 32px; padding: 16px; border: 1px solid var(--consult-rule); background: rgba(255,255,255,.65);
}
.consultation-filters label { min-width: 0; }
.consultation-filters label > span { display: block; margin-bottom: 5px; color: #64625d; font-size: 9px; font-weight: 800; }
.consultation-filters input, .consultation-filters select {
  width: 100%; min-width: 0; height: 39px; padding: 8px 9px; border: 1px solid #cbc8c1; border-radius: 3px; background: #fff; font: inherit; font-size: 12px;
}
.consultation-filter-actions { display: flex; gap: 6px; }
.consultation-result-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--consult-ink); }
.consultation-result-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .03em; }
.consultation-result-head span { color: #77736d; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.consultation-list { border-bottom: 1px solid var(--consult-ink); }
.consultation-row {
  display: grid; grid-template-columns: 105px minmax(170px, .85fr) minmax(260px, 1.3fr) minmax(150px, .75fr);
  gap: 18px; align-items: center; padding: 17px 8px; border-top: 1px solid var(--consult-rule); background: rgba(255,255,255,.42);
}
.consultation-row:first-child { border-top: 0; }
.consultation-row:hover { background: #fff; }
.consultation-date { display: grid; align-self: stretch; align-content: center; padding-right: 16px; border-right: 1px solid var(--consult-rule); }
.consultation-date time { display: flex; align-items: baseline; gap: 7px; }
.consultation-date time b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.consultation-date time span { color: #4e504f; font-size: 11px; font-weight: 800; }
.consultation-date > small { margin-top: 7px; color: #8b8881; font-size: 9px; }
.consultation-date .is-undated { color: #88857e; font-size: 12px; font-weight: 800; }
.consultation-person { min-width: 0; }
.consultation-person h3 { margin: 0; font-size: 15px; line-height: 1.4; }
.consultation-person p { margin: 4px 0 0; color: #686761; font-size: 10px; overflow-wrap: anywhere; }
.consultation-person p span { display: block; margin-top: 2px; }
.consultation-person small { display: block; margin-top: 6px; color: #9a978f; font: 9px Consolas, monospace; }
.consultation-core { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.consultation-core div { min-width: 0; padding-left: 9px; border-left: 2px solid #d1ccc2; }
.consultation-core dt { color: #85817a; font-size: 8px; font-weight: 800; }
.consultation-core dd { margin: 3px 0 0; font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; }
.consultation-states { display: grid; gap: 5px; align-content: center; justify-items: start; }
.consultation-state { padding: 3px 7px; border: 1px solid #d2cfc8; color: #74716b; background: #f7f5f0; font-size: 9px; font-weight: 800; }
.consultation-state.is-done { color: #0d6a3a; border-color: #add0bb; background: #eff8f2; }
.consultation-state.is-linked { color: #315e8a; border-color: #b7cada; background: #f1f6fa; }
.consultation-state a { color: inherit; }
.consultation-states small { color: #929089; font-size: 8.5px; }
.consultation-details { grid-column: 2 / -1; margin: -3px 0 1px; padding-top: 9px; border-top: 1px dashed #d6d1c8; }
.consultation-details summary { color: #6d6a64; font-size: 10px; font-weight: 800; cursor: pointer; }
.consultation-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 12px 0 4px; }
.consultation-details dl > div { padding: 9px 11px; background: #f4f1eb; }
.consultation-details dt { color: #85817a; font-size: 9px; font-weight: 800; }
.consultation-details dd { margin: 5px 0 0; color: #41413f; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.consultation-empty { margin: 0; padding: 42px 16px; color: #77736c; text-align: center; }

@media (max-width: 980px) {
  .consultation-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consultation-search { grid-column: span 2; }
  .consultation-row { grid-template-columns: 90px minmax(160px, .8fr) minmax(0, 1.4fr); }
  .consultation-states { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; }
  .consultation-details { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
  .consultation-admin-page .admin-main { padding-inline: 11px; }
  .consultation-shell { padding-top: 10px; }
  .consultation-hero { grid-template-columns: 1fr auto; gap: 12px; padding-top: 14px; }
  .consultation-hero h1 { font-size: 31px; }
  .consultation-hero > div > p:last-child { font-size: 11px; line-height: 1.65; }
  .consultation-total { min-width: 68px; }
  .consultation-total strong { font-size: 30px; }
  .consultation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consultation-metrics article + article { border-left: 0; }
  .consultation-metrics article:nth-child(even) { border-left: 1px solid var(--consult-rule); }
  .consultation-metrics article:nth-child(n+3) { border-top: 1px solid var(--consult-rule); }
  .consultation-filters { grid-template-columns: 1fr 1fr; padding: 12px; }
  .consultation-search { grid-column: 1 / -1; }
  .consultation-filter-actions { grid-column: 1 / -1; }
  .consultation-filter-actions .btn { flex: 1; }
  .consultation-row { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 17px 7px; }
  .consultation-date { align-content: start; padding: 2px 12px 0 0; }
  .consultation-date time { display: grid; gap: 6px; align-items: start; }
  .consultation-date time b { font-size: 23px; }
  .consultation-date time span { font-size: 12px; }
  .consultation-date > small { margin-top: 10px; line-height: 1.5; }
  .consultation-person h3 { font-size: 16px; }
  .consultation-person p { font-size: 11px; line-height: 1.55; }
  .consultation-core { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consultation-states, .consultation-details { grid-column: 1 / -1; }
  .consultation-details dl { grid-template-columns: 1fr; }
}

/* ---------- アカウント設定：認証と通知を1画面に集約 ---------- */
.settings-admin-page { background: #f2f0eb; }
.settings-shell {
  width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 72px;
  font-family: var(--font-jp);
}
.settings-shell.container { max-width: 1000px; }
.settings-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end;
  padding: 8px 2px 26px; border-bottom: 2px solid #17181c;
}
.settings-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); line-height: 1.15; letter-spacing: .05em; }
.settings-hero dl { display: flex; margin: 0; border: 1px solid #bcb7ae; background: rgba(255,255,255,.56); }
.settings-hero dl div { min-width: 120px; padding: 9px 13px; }
.settings-hero dl div + div { border-left: 1px solid #bcb7ae; }
.settings-hero dt { color: #77736d; font-size: 9px; font-weight: 800; }
.settings-hero dd { margin: 2px 0 0; font-size: 15px; font-weight: 900; overflow-wrap: anywhere; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.settings-panel { min-width: 0; padding: 22px; border: 1px solid #d1ccc3; background: #fff; box-shadow: 0 10px 28px rgba(30,28,23,.035); }
.settings-panel-head { padding-bottom: 15px; border-bottom: 1px solid #e0ddd7; }
.settings-panel-head h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.settings-panel-head p { margin: 5px 0 0; color: #77736d; font-size: 10px; line-height: 1.6; }
.settings-form, .passkey-register { display: grid; gap: 12px; padding-top: 17px; }
.settings-form label, .passkey-register label { display: grid; min-width: 0; gap: 5px; color: #68655f; font-size: 10px; font-weight: 900; }
.settings-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings-form input, .passkey-register input {
  width: 100%; max-width: 100%; min-width: 0; height: 43px; padding: 8px 10px;
  border: 1px solid #c9c5bd; border-radius: 4px; background: #fbfaf8; color: #202126; font: inherit; font-size: 13px;
}
.settings-form .btn, .passkey-register .btn { justify-self: start; border-radius: 4px; }
.passkey-message { min-height: 1.6em; margin: -4px 0 0; }
.passkey-list { display: grid; gap: 7px; margin-top: 12px; }
.passkey-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #ddd9d1; background: #f8f7f4; }
.passkey-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #17181c; color: #fff; font-size: 17px; }
.passkey-row > div { display: grid; min-width: 0; }
.passkey-row b { font-size: 12px; }
.passkey-row small { color: #7b7770; font-size: 8.5px; overflow-wrap: anywhere; }
.passkey-delete { min-height: 32px; padding: 5px 9px; border: 1px solid #d6ada5; background: transparent; color: var(--bad); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.passkey-empty { margin: 0; padding: 13px; background: #f7f6f3; color: #85817a; font-size: 10px; text-align: center; }
.settings-notifications { margin-top: 16px; }
.settings-pwa-install { grid-template-columns: minmax(0, 1fr); margin-top: 17px; margin-bottom: 12px; }
.settings-device-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; margin: 17px 0; padding: 16px; border-left: 4px solid var(--accent); background: #f7f5f1; }
.settings-device-card h3 { margin: 0; font-size: 15px; }
.settings-device-card p { margin: 3px 0 0; color: #716e68; font-size: 10px; }
.settings-device-card p span { display: block; color: var(--warn); }
.settings-device-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.settings-device-actions .btn { white-space: nowrap; }
.settings-device-card #push-status { grid-column: 1 / -1; margin: 0; }
.settings-pref-form { display: grid; }
.passkey-login-divider { display: flex; align-items: center; gap: 10px; margin: 15px 0; color: #8a8781; font-size: 10px; }
.passkey-login-divider::before, .passkey-login-divider::after { content: ""; flex: 1; height: 1px; background: #dedbd5; }
.passkey-login-button { border-radius: 5px; }
.passkey-login-primary { display: grid; gap: 7px; }
.passkey-login-primary .passkey-message { margin: 0; text-align: center; }
.password-login-reveal { margin-top: 14px; }
.password-login-panel { margin-top: 14px; }
.password-login-panel[hidden] { display: none !important; }
.admin-login-page .admin-main {
  display: flex; flex-direction: column; justify-content: center;
  margin-top: 0; margin-bottom: 0; padding-block: 28px;
}
.admin-login-page .form-card { width: min(100%,460px); margin: 0 auto; }
.passkey-setup-notice { margin: 0 0 14px; }

/* スーパー管理者の一覧内パスキー管理 */
.account-card-form > label { display: grid; min-width: 0; gap: 3px; margin-top: 8px; color: #716d66; font-size: 9px; font-weight: 900; }
.account-passkeys { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #cbc6bc; }
.account-passkeys > div { display: flex; justify-content: space-between; align-items: center; color: #6c6861; font-size: 9px; }
.account-passkeys > div > b { color: #222328; font-size: 10px; }
.account-passkeys form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 7px; padding: 7px 8px; background: #fff; }
.account-passkeys form span { display: grid; min-width: 0; }
.account-passkeys form span b { font-size: 10px; overflow-wrap: anywhere; }
.account-passkeys form span small { color: #817d76; font-size: 8px; }
.account-passkeys form button { min-height: 30px; padding: 5px 9px; background: transparent; color: var(--bad); border: 1px solid #d9b0aa; }
.account-passkeys > p { margin: 7px 0 0; color: #8c8880; font-size: 9px; }
.account-user-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(210px, .7fr); gap: 18px; padding: 14px; }
.account-user-passkeys { margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px dashed #cbc6bc; }

@media (max-width: 720px) {
  .settings-shell, .settings-shell * { box-sizing: border-box; }
  .settings-shell { width: calc(100% - 22px); padding: 14px 0 50px; }
  .settings-hero { grid-template-columns: 1fr; gap: 14px; padding-top: 6px; }
  .settings-hero dl { width: 100%; }
  .settings-hero dl div { flex: 1; min-width: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-panel { padding: 17px 14px; }
  .settings-form-row { grid-template-columns: 1fr; }
  .settings-form input, .passkey-register input { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
  .settings-form .btn, .passkey-register .btn { width: 100%; }
  .settings-device-card { grid-template-columns: 1fr; }
  .settings-device-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); justify-content: stretch; }
  .settings-device-actions .btn { width: 100%; min-width: 0; padding-inline: 8px; font-size: clamp(11px, 3.5vw, 14px); }
  .settings-device-actions #push-disable { grid-column: 1 / -1; }
  .passkey-row { grid-template-columns: 30px minmax(0, 1fr); }
  .passkey-row form { grid-column: 2; }
  .account-user-body { grid-template-columns: 1fr; padding: 11px; }
  .account-user-passkeys { padding: 12px 0 0; border-left: 0; border-top: 1px dashed #cbc6bc; }
}

/* ---------- Apple Design / 全ページ共通 ----------
   管理・会員・申込・公式ホームページ・独立資料を同じ設計原則で統一する。 */
.jta-app-ui {
  --app-apple-bg: #f2f2f7;
  --app-apple-surface: rgba(255,255,255,.9);
  --app-apple-surface-solid: #fff;
  --app-apple-elevated: rgba(255,255,255,.96);
  --app-apple-label: #1c1c1e;
  --app-apple-secondary: #6e6e73;
  --app-apple-tertiary: #8e8e93;
  --app-apple-separator: rgba(60,60,67,.15);
  --app-apple-fill: rgba(118,118,128,.12);
  --app-apple-fill-strong: rgba(118,118,128,.18);
  --app-apple-tint: #e5482f;
  --app-apple-tint-dark: #c93622;
  --app-apple-blue: #007aff;
  --app-apple-green: #248a4b;
  --app-apple-orange: #b85d00;
  --app-apple-red: #d70015;
  --app-apple-radius: 18px;
  --app-apple-radius-sm: 12px;
  --app-apple-shadow: 0 10px 34px rgba(28,28,30,.065);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--app-apple-bg);
  color: var(--app-apple-label);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-optical-sizing: auto;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
/*
 * 全画面チャットは自身のheightでviewportへ収める。
 * 共通の100dvh最小高さを残すと、iOS standaloneの100vh補正より
 * min-heightが優先され、composerが下へ押し出される。
 */
.jta-app-ui.chat-page,
.jta-app-ui.chat-admin-page { min-height: 0; }
.jta-app-ui:not(.chat-page):not(.chat-admin-page):not(.office-page) { display: flex; flex-direction: column; }
.jta-app-ui:not(.chat-page):not(.chat-admin-page):not(.office-page) > main,
.jta-app-ui:not(.chat-page):not(.chat-admin-page):not(.office-page) > .admin-main { flex: 1 0 auto; width: 100%; }

.jta-app-ui .appbar {
  min-height: 62px;
  padding: 8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));
  padding-top: max(8px,env(safe-area-inset-top,0px));
  background: rgba(16,16,20,.88);
  border-bottom: .5px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}
.jta-app-ui .appbar.is-admin { background: rgba(16,16,20,.9); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.jta-app-ui .appbar .brand { min-width: 0; padding-left: 2px; }
.jta-app-ui .brand-jta-mark { width: 38px; height: 38px; }
.jta-app-ui .brand .brand-jta-name { min-width: 0; font-size: 16px; line-height: 1.2; letter-spacing: -.015em; }
.jta-app-ui .brand .brand-jta-name small { font-size: 10px; letter-spacing: .08em; }
.jta-app-ui .icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .16s ease, transform .1s ease-out, opacity .16s ease;
}
.jta-app-ui .icon-btn:hover { background: rgba(255,255,255,.11); }
.jta-app-ui .icon-btn:active { transform: scale(.94); background: rgba(255,255,255,.17); }
.jta-app-ui .icon-btn:focus-visible { outline: 3px solid rgba(255,89,64,.58); outline-offset: 1px; }
.jta-app-ui .bell-badge { background: var(--app-apple-tint); box-shadow: 0 0 0 2px #101014; }

.jta-app-ui .drawer-overlay { background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.jta-app-ui .drawer {
  width: min(88vw,340px); background: rgba(28,28,30,.94);
  border-left: .5px solid rgba(255,255,255,.14);
  box-shadow: -22px 0 60px rgba(0,0,0,.32);
  -webkit-backdrop-filter: saturate(170%) blur(28px); backdrop-filter: saturate(170%) blur(28px);
  transition: transform .3s cubic-bezier(.22,.78,.2,1);
}
.jta-app-ui .drawer-head { min-height: 60px; background: rgba(28,28,30,.9); border-bottom: .5px solid rgba(84,84,88,.65); }
.jta-app-ui .drawer-close { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
.jta-app-ui .drawer-title { color: #a8a8ad; font-size: 12px; letter-spacing: .08em; }
.jta-app-ui .drawer-user { padding: 15px 18px 10px; }
.jta-app-ui .drawer-link { min-height: 48px; border-left: 0; padding: 11px 20px; font-size: 15px; border-radius: 0; }
.jta-app-ui .drawer-link:hover { background: rgba(118,118,128,.17); }
.jta-app-ui .drawer-link:active { background: rgba(118,118,128,.28); }
.jta-app-ui .drawer-link.active { color: #fff; background: rgba(229,72,47,.2); box-shadow: inset 4px 0 var(--app-apple-tint); }
.jta-app-ui .drawer-link.is-external,
.jta-app-ui .drawer-link.section-start,
.jta-app-ui .drawer-foot { border-color: rgba(84,84,88,.62); }

.jta-app-ui main { min-width: 0; }
.jta-app-ui .admin-main { max-width: 1180px; margin: 30px auto 72px; padding: 0 22px; }
.jta-app-ui .container { max-width: 1080px; padding-inline: 22px; }
.jta-app-ui .section { padding: 52px 0; }
.jta-app-ui .page-title,
.jta-app-ui .section-title {
  color: var(--app-apple-label); font-weight: 780; line-height: 1.12; letter-spacing: -.035em;
}
.jta-app-ui .page-title { margin: 4px 0 22px; font-size: clamp(28px,4vw,36px); }
.jta-app-ui .section-title { font-size: clamp(27px,4vw,36px); }
.jta-app-ui .section-lead,
.jta-app-ui .muted,
.jta-app-ui .hint { color: var(--app-apple-secondary); }

.jta-app-ui .hero {
  padding: 76px 20px 82px;
  background:
    radial-gradient(720px 320px at 78% -8%, rgba(229,72,47,.28), transparent 62%),
    linear-gradient(155deg,#17171c 0%,#0c0c0f 100%);
}
.jta-app-ui .hero .eyebrow { color: #ff725c; letter-spacing: .18em; }
.jta-app-ui .hero h1 { max-width: 760px; margin-inline: auto; font-size: clamp(31px,6vw,52px); line-height: 1.14; letter-spacing: -.035em; }
.jta-app-ui .hero p { color: #b9b9bf; line-height: 1.8; }

.jta-app-ui .card,
.jta-app-ui .stat,
.jta-app-ui .step,
.jta-app-ui .settings-panel,
.jta-app-ui .settings-hero,
.jta-app-ui .integration-card,
.jta-app-ui .integration-hero,
.jta-app-ui .seminar-panel,
.jta-app-ui .seminar-readiness article,
.jta-app-ui .consultation-hero,
.jta-app-ui .consultation-row,
.jta-app-ui .setup-section,
.jta-app-ui .setup-hero,
.jta-app-ui .account-card,
.jta-app-ui .account-console,
.jta-app-ui .notif,
.jta-app-ui .conn {
  background: var(--app-apple-surface);
  border: .5px solid var(--app-apple-separator);
  border-radius: var(--app-apple-radius);
  box-shadow: var(--app-apple-shadow);
}
.jta-app-ui .card { padding: 22px; }
.jta-app-ui .card h3 { color: var(--app-apple-label); line-height: 1.35; letter-spacing: -.018em; }
.jta-app-ui .grid { gap: 16px; }
.jta-app-ui .stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 30px; }
.jta-app-ui .stat { min-height: 106px; padding: 17px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.jta-app-ui .stat .label { color: var(--app-apple-secondary); font-size: 12px; font-weight: 650; }
.jta-app-ui .stat .value { color: var(--app-apple-label); font-size: clamp(23px,3vw,30px); line-height: 1.12; letter-spacing: -.035em; }
.jta-app-ui .stat.stat-today { border-color: rgba(229,72,47,.24); background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,242,238,.94)); }
.jta-app-ui .stat.stat-today .value,
.jta-app-ui .application-amount { color: var(--app-apple-tint); }
.jta-app-ui .stat.warn .value { color: var(--app-apple-orange); }
.jta-app-ui .stat.bad .value { color: var(--app-apple-red); }

.jta-app-ui .btn {
  min-height: 44px; padding: 10px 19px; border-width: 1px; border-radius: var(--app-apple-radius-sm);
  font-size: 14px; font-weight: 720; line-height: 1.25; letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease-out, opacity .16s ease;
}
.jta-app-ui .btn:active { transform: scale(.97); opacity: .86; }
.jta-app-ui .btn-primary { background: var(--app-apple-tint); border-color: var(--app-apple-tint); color: #fff; box-shadow: 0 4px 14px rgba(229,72,47,.18); }
.jta-app-ui .btn-primary:hover { background: var(--app-apple-tint-dark); border-color: var(--app-apple-tint-dark); }
.jta-app-ui .btn-outline { color: var(--app-apple-label); border-color: var(--app-apple-separator); background: rgba(255,255,255,.82); }
.jta-app-ui .btn-outline:hover { color: var(--app-apple-label); border-color: rgba(60,60,67,.28); background: var(--app-apple-fill); }
.jta-app-ui .btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.06); }
.jta-app-ui .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 13px; }
.jta-app-ui .btn-block { width: 100%; }

.jta-app-ui .badge {
  min-height: 24px; display: inline-flex; align-items: center; padding: 3px 9px;
  border: .5px solid var(--app-apple-separator); background: var(--app-apple-fill); color: #3a3a3c;
  font-size: 11px; font-weight: 650; letter-spacing: 0;
}
.jta-app-ui .badge-accent { background: rgba(229,72,47,.1); border-color: rgba(229,72,47,.2); color: var(--app-apple-tint-dark); }
.jta-app-ui .badge-ok { background: rgba(52,199,89,.11); border-color: rgba(52,199,89,.22); color: var(--app-apple-green); }
.jta-app-ui .badge-warn { background: rgba(255,149,0,.12); border-color: rgba(255,149,0,.24); color: var(--app-apple-orange); }
.jta-app-ui .badge-bad { background: rgba(255,59,48,.1); border-color: rgba(255,59,48,.2); color: var(--app-apple-red); }

.jta-app-ui .field label,
.jta-app-ui .settings-form label,
.jta-app-ui .passkey-register label,
.jta-app-ui .seminar-field > span,
.jta-app-ui .account-card-form label,
.jta-app-ui .integration-form label { color: var(--app-apple-label); font-weight: 650; letter-spacing: -.005em; }
.jta-app-ui :is(.field,.settings-form,.passkey-register,.seminar-field,.account-card-form,.integration-form) :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=url],input[type=datetime-local],select,textarea),
.jta-app-ui .toolbar input[type=text] {
  min-height: 46px; padding: 10px 13px; border: .5px solid var(--app-apple-separator); border-radius: var(--app-apple-radius-sm);
  background: rgba(255,255,255,.94); color: var(--app-apple-label); box-shadow: inset 0 1px 1px rgba(0,0,0,.025);
  font-family: inherit; font-size: 16px; line-height: 1.35;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.jta-app-ui :is(.field,.settings-form,.passkey-register,.seminar-field,.account-card-form,.integration-form) :is(input,select,textarea):focus,
.jta-app-ui .toolbar input[type=text]:focus {
  outline: none; border-color: rgba(229,72,47,.64); background: #fff; box-shadow: 0 0 0 3px rgba(229,72,47,.13);
}
.jta-app-ui :is(input,textarea)::placeholder { color: #a2a2a7; opacity: 1; }
.jta-app-ui .choice { min-height: 50px; border: .5px solid var(--app-apple-separator); border-radius: var(--app-apple-radius-sm); background: rgba(255,255,255,.94); }
.jta-app-ui .choice:has(input:checked) { border-color: rgba(229,72,47,.7); background: rgba(229,72,47,.075); box-shadow: 0 0 0 2px rgba(229,72,47,.08); }
.jta-app-ui .toolbar { gap: 9px; margin-bottom: 18px; }
.jta-app-ui .toolbar input[type=text] { flex: 1 1 260px; max-width: 520px; }
.jta-app-ui :is(form,fieldset,label),
.jta-app-ui .toolbar > * { min-width: 0; max-width: 100%; }
.jta-app-ui :is(input:not([type=radio]):not([type=checkbox]),select,textarea) {
  min-width: 0; max-width: 100%;
}
.jta-app-ui .toolbar > select { width: 100%; flex: 1 1 260px; }
.jta-app-ui .toolbar > label { flex: 1 1 150px; }
.jta-app-ui .toolbar > label > :is(input,select) { display: block; width: 100%; inline-size: 100%; }

.jta-app-ui .tbl-wrap { border-radius: var(--app-apple-radius); box-shadow: var(--app-apple-shadow); }
.jta-app-ui table.tbl { border: .5px solid var(--app-apple-separator); border-radius: var(--app-apple-radius); background: var(--app-apple-surface-solid); font-size: 13px; }
.jta-app-ui .tbl th { padding: 11px 13px; border-bottom: .5px solid var(--app-apple-separator); background: rgba(118,118,128,.075); color: var(--app-apple-secondary); font-weight: 680; }
.jta-app-ui .tbl td { padding: 12px 13px; border-top: .5px solid var(--app-apple-separator); }
.jta-app-ui .tbl tbody tr { transition: background-color .14s ease; }
.jta-app-ui .tbl tbody tr:hover { background: rgba(118,118,128,.055); }
.jta-app-ui .tbl a:not(.btn) { color: var(--app-apple-blue); text-underline-offset: 3px; }
.jta-app-ui .tab { min-height: 38px; display: inline-flex; align-items: center; border: .5px solid var(--app-apple-separator); background: rgba(255,255,255,.84); color: var(--app-apple-secondary); }
.jta-app-ui .tab.active { border-color: rgba(229,72,47,.18); background: var(--app-apple-tint); color: #fff; box-shadow: 0 4px 12px rgba(229,72,47,.15); }

.jta-app-ui .alert { max-width: 1100px; margin: 14px auto; padding: 12px 16px; border-radius: 14px; box-shadow: 0 6px 22px rgba(28,28,30,.06); }
.jta-app-ui .alert-ok { background: rgba(236,250,241,.96); border-color: rgba(52,199,89,.2); color: #176b39; }
.jta-app-ui .alert-err { background: rgba(255,239,238,.97); border-color: rgba(255,59,48,.2); color: #b11a20; }
.jta-app-ui .admin-flash { margin: 0 0 18px; }

.jta-app-ui .settings-hero,
.jta-app-ui .integration-hero,
.jta-app-ui .consultation-hero,
.jta-app-ui .setup-hero,
.jta-app-ui .seminar-page-head {
  color: var(--app-apple-label); border-color: var(--app-apple-separator);
}
.jta-app-ui .settings-hero h1,
.jta-app-ui .integration-hero h1,
.jta-app-ui .consultation-hero h1,
.jta-app-ui .setup-hero h1,
.jta-app-ui .seminar-page-head h1 { letter-spacing: -.04em; }
.jta-app-ui .settings-panel,
.jta-app-ui .seminar-panel,
.jta-app-ui .setup-section { overflow: hidden; }
.jta-app-ui .setup-step-no { color: var(--app-apple-tint); }
.jta-app-ui .settings-device-card,
.jta-app-ui .passkey-row,
.jta-app-ui .pref-row,
.jta-app-ui .seminar-session-row,
.jta-app-ui .seminar-participant-card,
.jta-app-ui .integration-account,
.jta-app-ui .account-user-row {
  border-color: var(--app-apple-separator); background: rgba(118,118,128,.055);
}
.jta-app-ui .passkey-delete { color: var(--app-apple-red); }
.jta-app-ui .switch input:checked + span { border-color: var(--app-apple-green); background: var(--app-apple-green); }
.jta-app-ui .notification-toolbar { background: rgba(242,242,247,.84); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.jta-app-ui .notif.unread { border-color: rgba(229,72,47,.22); background: rgba(255,247,244,.94); }

.jta-app-ui .site-footer:not(.site-footer-hp) { margin-top: 50px; background: #1c1c1e; }

@media (max-width: 760px) {
  .jta-app-ui .appbar { min-height: 58px; gap: 1px; padding-inline: max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-left,0px)); }
  .jta-app-ui .brand-jta-mark { width: 36px; height: 36px; }
  .jta-app-ui .brand .brand-jta-name { font-size: 15px; }
  .jta-app-ui .admin-main { width: 100%; margin: 20px auto 54px; padding-inline: 14px; }
  .jta-app-ui .container { padding-inline: 14px; }
  .jta-app-ui .section { padding: 34px 0; }
  .jta-app-ui .page-title { margin-bottom: 17px; font-size: 30px; }
  .jta-app-ui .section-title { font-size: 29px; }
  .jta-app-ui .section-lead { margin-bottom: 22px; line-height: 1.7; }
  .jta-app-ui .hero { padding: 58px 17px 64px; }
  .jta-app-ui .card { padding: 18px 16px; border-radius: 16px; }
  .jta-app-ui .grid { grid-template-columns: 1fr; gap: 12px; }
  .jta-app-ui .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .jta-app-ui .stat { min-height: 104px; padding: 14px; border-radius: 16px; }
  .jta-app-ui .stat.stat-today { grid-column: 1 / -1; }
  .jta-app-ui .stat .value { font-size: 24px; overflow-wrap: anywhere; }
  .jta-app-ui .toolbar { align-items: stretch; }
  .jta-app-ui .toolbar input[type=text] { width: 100%; max-width: none; flex-basis: 100%; }
  .jta-app-ui .toolbar > :is(select,label,input:not([type=radio]):not([type=checkbox])) { width: 100%; flex-basis: 100%; }
  .jta-app-ui .toolbar input[type=date] { display: block; overflow: hidden; }
  .jta-app-ui .toolbar .btn { flex: 1 1 auto; }
  .jta-app-ui .tbl-wrap { border-radius: 16px; }
  .jta-app-ui table.tbl.cardize { box-shadow: none; }
  .jta-app-ui .cardize tr { padding: 12px 14px; border: .5px solid var(--app-apple-separator); border-radius: 16px; box-shadow: 0 7px 24px rgba(28,28,30,.055); }
  .jta-app-ui .cardize td { gap: 10px; border-bottom: .5px solid var(--app-apple-separator); padding: 8px 0; }
  .jta-app-ui .cardize td:last-child { border-bottom: 0; }
  .jta-app-ui .settings-panel,
  .jta-app-ui .seminar-panel,
  .jta-app-ui .integration-card,
  .jta-app-ui .consultation-row,
  .jta-app-ui .setup-section { border-radius: 16px; }
}

@media (hover: none) {
  .jta-app-ui .tbl tbody tr:hover { background: transparent; }
}

@media (display-mode: standalone) {
  .jta-app-ui:not(.chat-page):not(.chat-admin-page) { min-height: 100vh; }
  .jta-app-ui .appbar { padding-top: max(8px,env(safe-area-inset-top,0px)); }
}
html.is-standalone-pwa .jta-app-ui:not(.chat-page):not(.chat-admin-page) { min-height: 100vh; }

@media (prefers-reduced-transparency: reduce) {
  .jta-app-ui .appbar,
  .jta-app-ui .appbar.is-admin,
  .jta-app-ui .drawer,
  .jta-app-ui .drawer-head,
  .jta-app-ui .notification-toolbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .jta-app-ui .appbar,
  .jta-app-ui .appbar.is-admin { background: #101014; }
  .jta-app-ui .drawer,
  .jta-app-ui .drawer-head { background: #1c1c1e; }
}

@media (prefers-contrast: more) {
  .jta-app-ui .card,
  .jta-app-ui .stat,
  .jta-app-ui .step,
  .jta-app-ui .settings-panel,
  .jta-app-ui .integration-card,
  .jta-app-ui .seminar-panel,
  .jta-app-ui table.tbl { border: 1px solid #636366; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jta-app-ui .icon-btn,
  .jta-app-ui .drawer,
  .jta-app-ui .btn,
  .jta-app-ui .tbl tbody tr { transition: none; }
  .jta-app-ui .icon-btn:active,
  .jta-app-ui .btn:active { transform: none; }
}

/* ---------- Apple Design / チャット ----------
   半透明のchrome、system grouped list、即時のpress feedbackで全画面を統一する。 */
.chat-admin-page,
.chat-page {
  --chat-apple-tint: #e5482f;
  --chat-apple-green: #34c759;
  --chat-apple-bg: #f2f2f7;
  --chat-apple-surface: rgba(255,255,255,.92);
  --chat-apple-secondary: #6e6e73;
  --chat-apple-separator: rgba(60,60,67,.16);
  --chat-apple-material: rgba(248,248,252,.82);
  --chat-apple-shadow: 0 10px 34px rgba(32,34,38,.08);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

.chat-admin-page:not(.chat-admin-room-page) { background: var(--chat-apple-bg); }
.chat-admin-page:not(.chat-admin-room-page) .admin-main { max-width: none; background: var(--chat-apple-bg); }
.chat-admin-page:not(.chat-admin-room-page) .admin-chat-wrap { width: min(100%,860px); margin-inline: auto; padding: 26px 0 64px; background: transparent; }
.chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading {
  grid-template-columns: minmax(0,1fr) minmax(300px,430px); gap: 24px; align-items: center;
  padding: 10px 4px 20px; border: 0; background: transparent;
}
.chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading h1 { font-size: clamp(31px,4vw,38px); line-height: 1.06; letter-spacing: -.035em; }
.chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading p { color: var(--chat-apple-secondary); font-size: 12px; }
.admin-chat-title-row { align-items: center; }
.admin-chat-heading-actions { gap: 5px; }
.chat-group-create-link,
.chat-index-menu {
  transition: background-color .12s ease-out, color .12s ease-out, transform .12s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.chat-group-create-link {
  min-height: 40px; margin: 0; padding: 0 13px; border-radius: 20px;
  background: rgba(229,72,47,.1); color: var(--chat-apple-tint);
}
.chat-group-create-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-group-create-link:active,
.chat-index-menu:active { transform: scale(.94); }

.chat-member-search { gap: 0; overflow: hidden; border-radius: 13px; background: rgba(118,118,128,.12); box-shadow: inset 0 0 0 .5px rgba(118,118,128,.08); }
.chat-member-search input { height: 43px; padding: 8px 4px 8px 14px; border: 0; border-radius: 0; background: transparent; font-size: 16px; }
.chat-member-search input::placeholder { color: #8e8e93; }
.chat-member-search button { width: 44px; height: 43px; border-radius: 0; background: transparent; color: #6e6e73; }
.chat-member-search button:active { background: rgba(118,118,128,.12); }

.chat-section-label { margin: 0 4px 8px; }
.chat-section-label > span { color: var(--chat-apple-secondary); font-size: 11px; letter-spacing: .04em; }
.chat-fixed-room-grid { gap: 12px; }
.chat-fixed-room-grid > a,
.chat-group-room-list > a,
.chat-thread-card {
  border-color: var(--chat-apple-separator); background: var(--chat-apple-surface);
  transition: background-color .12s ease-out, transform .12s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.chat-fixed-room-grid > a { min-height: 78px; border: 0; border-radius: 17px; box-shadow: 0 0 0 .5px var(--chat-apple-separator), var(--chat-apple-shadow); }
.chat-fixed-room-grid > a:hover { border-color: transparent; background: #fff; }
.chat-fixed-room-grid > a:active,
.chat-group-room-list > a:active,
.chat-thread-card:active { background: rgba(229,229,234,.9); transform: scale(.988); }
.chat-room-mark,
.chat-group-avatar,
.chat-avatar { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25); }
.chat-fixed-room-grid > a:nth-child(1) .chat-room-mark { background: linear-gradient(145deg,#ff715b,#d93420); }
.chat-fixed-room-grid > a:nth-child(2) .chat-room-mark { background: linear-gradient(145deg,#5ac8fa,#3478f6); }
.chat-fixed-room-grid i { color: #c7c7cc; font-size: 22px; font-weight: 300; }
.chat-fixed-room-grid small,
.chat-group-room-list small,
.chat-thread-copy small { color: var(--chat-apple-secondary); }

.chat-group-rooms { margin-top: 26px; }
.chat-group-room-list { overflow: hidden; border: 0; border-radius: 17px; background: var(--chat-apple-surface); box-shadow: 0 0 0 .5px var(--chat-apple-separator); }
.chat-group-room-list > a { border: 0; border-bottom: .5px solid var(--chat-apple-separator); }
.chat-group-room-list > a:last-child { border-bottom: 0; }
.chat-group-avatar { background: linear-gradient(145deg,#af52de,#7454d8); }

.chat-inbox-tabs {
  gap: 3px; margin: 27px 0 12px; padding: 3px; border: 0; border-radius: 11px;
  background: rgba(118,118,128,.12); box-shadow: inset 0 0 0 .5px rgba(118,118,128,.08);
}
.chat-inbox-tabs a { flex: 1 1 0; justify-content: center; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px; color: var(--chat-apple-secondary); font-size: 11px; }
.chat-inbox-tabs a.active { margin: 0; border: 0; background: var(--chat-apple-surface); color: #1c1c1e; box-shadow: 0 1px 4px rgba(0,0,0,.11); }
.chat-inbox-tabs b { background: rgba(118,118,128,.15); color: inherit; }
.chat-inbox { overflow: hidden; margin-top: 0; border: 0; border-radius: 17px; background: var(--chat-apple-surface); box-shadow: 0 0 0 .5px var(--chat-apple-separator); }
.chat-inbox-title { padding: 14px 16px 9px; }
.chat-inbox-title h2 { font-size: 16px; letter-spacing: -.01em; }
.chat-thread-card { min-height: 76px; padding: 11px 14px; border: 0; border-bottom: .5px solid var(--chat-apple-separator); }
.chat-thread-card:last-of-type { border-bottom: 0; }
.chat-thread-card:hover { background: rgba(255,255,255,.98); }
.chat-avatar { background: linear-gradient(145deg,#8e8e93,#55555a); }
.chat-thread-copy b { font-size: 14px; letter-spacing: -.01em; }
.chat-thread-copy em { background: var(--chat-apple-tint); }
.chat-thread-tags i { border: 0; background: rgba(118,118,128,.1); color: var(--chat-apple-secondary); }
.chat-inbox-empty { border: 0; color: var(--chat-apple-secondary); }
.chat-search-results { border: 0; border-radius: 17px; background: var(--chat-apple-surface); box-shadow: 0 0 0 .5px var(--chat-apple-separator); }

.pull-refresh-indicator {
  border: .5px solid rgba(60,60,67,.16); background: var(--chat-apple-material); color: var(--chat-apple-secondary);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.admin-chat-wrap.is-pull-armed .pull-refresh-indicator { color: var(--chat-apple-tint); }

/* ルーム */
.chat-admin-room-page .admin-main { padding: 0 18px; }
.admin-chat-room { grid-template-columns: 278px minmax(0,1fr); gap: 16px; padding: 16px 0 24px; }
.admin-chat-sidebar { padding: 12px; border: 0; border-radius: 18px; background: rgba(255,255,255,.58); box-shadow: inset 0 0 0 .5px var(--chat-apple-separator); }
.chat-back-inbox { margin: 2px 5px 16px; color: var(--chat-apple-tint); }
.admin-chat-sidebar h2 { color: var(--chat-apple-secondary); letter-spacing: .04em; }
.admin-chat-sidebar > a:not(.chat-back-inbox) { padding: 11px 10px; border-radius: 11px; }
.admin-chat-sidebar > a:not(.chat-back-inbox):active { background: rgba(118,118,128,.12); }
.admin-chat-sidebar > a.active { background: rgba(255,255,255,.88); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.admin-chat-conversation { margin: 0; overflow: hidden; border: .5px solid var(--chat-apple-separator); border-radius: 20px; box-shadow: var(--chat-apple-shadow); }
.chat-line-header {
  min-height: 68px; padding: 8px 12px; border-color: var(--chat-apple-separator);
  background: var(--chat-apple-material); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
}
.chat-line-header-copy h1 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.chat-line-header-copy small { color: var(--chat-apple-secondary); }
.chat-line-header-actions button,
.chat-line-header-actions .chat-room-app-menu { color: var(--chat-apple-tint); transition: background-color .12s ease-out, transform .12s ease-out; }
.chat-line-header-actions button:active,
.chat-line-header-actions .chat-room-app-menu:active { background: rgba(229,72,47,.1); transform: scale(.9); }
.chat-room-person .chat-avatar,
.chat-room-person .chat-room-mark { background: linear-gradient(145deg,#ff715b,#d93420); }
.chat-room-search { border-color: var(--chat-apple-separator); background: var(--chat-apple-material); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.chat-room-search input { background: rgba(118,118,128,.12); }
.chat-room-search button { color: var(--chat-apple-tint); }
.chat-case-controls { border-color: var(--chat-apple-separator); background: rgba(242,242,247,.9); }
.chat-case-controls select,
.chat-case-controls button { min-height: 34px; border: 0; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 .5px var(--chat-apple-separator); }
.chat-case-controls button { color: var(--chat-apple-tint); }
.chat-log { background: #e9edf3; }
.chat-bubble { border-radius: 18px; box-shadow: 0 .5px 2px rgba(0,0,0,.08); }
.chat-message.is-other .chat-bubble { background: #fff; }
.chat-message.is-own .chat-bubble { background: var(--chat-apple-green); }
.chat-message.is-own .chat-bubble::after { border-color: transparent transparent transparent var(--chat-apple-green); }
.chat-message-meta,
.chat-message-line > time,
.chat-message-status { color: #69717c; }
.chat-composer {
  border-color: var(--chat-apple-separator); background: rgba(248,248,252,.84);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
}
.chat-compose-main textarea { border: 0; background: rgba(118,118,128,.12); box-shadow: inset 0 0 0 .5px rgba(118,118,128,.1); }
.chat-compose-icon { color: #707078; transition: background-color .12s ease-out, color .12s ease-out, transform .12s ease-out; }
.chat-compose-icon:active { transform: scale(.9); }
.chat-attach-open { border-color: #8e8e93; color: #6e6e73; }
.chat-send { background: var(--chat-apple-green); }
.chat-emoji-panel { border: .5px solid var(--chat-apple-separator); background: var(--chat-apple-material); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.chat-emoji-panel button { background: rgba(118,118,128,.1); }

.chat-room-details { background: var(--chat-apple-bg); box-shadow: -12px 0 42px rgba(0,0,0,.2); }
.chat-room-details::backdrop { background: rgba(0,0,0,.34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.chat-room-details[open] { animation: chat-apple-sheet-in .28s cubic-bezier(.22,.72,.24,1) both; }
@keyframes chat-apple-sheet-in { from { opacity: .55; transform: translate3d(20px,0,0) scale(.985); } }
.chat-details-head { border-color: var(--chat-apple-separator); background: var(--chat-apple-material); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); }
.chat-details-head button { width: 44px; height: 44px; border-radius: 50%; color: var(--chat-apple-tint); }
.chat-details-actions,
.chat-details-members,
.chat-details-section,
.chat-details-profile,
.chat-leave-group { background: var(--chat-apple-surface); }
.chat-details-actions i { background: rgba(118,118,128,.12); color: var(--chat-apple-tint); }
.chat-details-section button,
.chat-add-members > button { border-radius: 10px; background: var(--chat-apple-tint); }
.chat-details-section input[type=text],
.chat-details-section input[name=title] { border: 0; border-radius: 10px; background: rgba(118,118,128,.12); box-shadow: inset 0 0 0 .5px var(--chat-apple-separator); }

.chat-group-create { border-radius: 20px; background: var(--chat-apple-bg); }
.chat-group-create > header { border-color: var(--chat-apple-separator); background: var(--chat-apple-material); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); }
.chat-group-create > header a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--chat-apple-tint); }
.chat-group-create > header a svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chat-group-create > header button { color: var(--chat-apple-tint); }
.chat-group-search { background: transparent; }
.chat-group-search input { border-radius: 12px; background: rgba(118,118,128,.12); }
.chat-group-members,
.chat-group-name-card,
.chat-group-selected { background: var(--chat-apple-surface); }
.chat-group-members { overflow: hidden; margin: 0 12px; border-radius: 16px; }
.chat-group-members label { border-color: var(--chat-apple-separator); }
.chat-group-members input { accent-color: var(--chat-apple-tint); }
.chat-group-submit { border-radius: 12px; background: var(--chat-apple-tint); }

@media (max-width: 760px) {
  .chat-admin-page:not(.chat-admin-room-page) .admin-main { padding: 0; }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-wrap { width: 100%; padding: 0 0 max(38px,var(--chat-safe-bottom)); }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading {
    grid-template-columns: 1fr; gap: 8px; padding: 8px max(12px,var(--chat-safe-right)) 11px max(12px,var(--chat-safe-left));
    border: 0; background: var(--chat-apple-material); box-shadow: 0 8px 22px rgba(30,30,35,.06);
    -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading h1 { font-size: 30px; line-height: 1.08; letter-spacing: -.045em; }
  .admin-chat-title-row { min-height: 46px; }
  .chat-group-create-link { width: 44px; height: 44px; min-height: 44px; padding: 0; background: transparent; }
  .chat-group-create-link svg { width: 27px; height: 27px; }
  .chat-group-create-link b { display: none; }
  .chat-index-menu { width: 44px; height: 44px; color: var(--chat-apple-tint); }
  .chat-index-menu svg { width: 25px; height: 25px; }
  .chat-group-create-link:active,
  .chat-index-menu:active { background: rgba(229,72,47,.1); }
  .chat-member-search { border-radius: 11px; }
  .chat-member-search input { height: 38px; font-size: 16px; }
  .chat-member-search button { height: 38px; }

  .chat-fixed-rooms { margin: 14px 12px 0; overflow: hidden; border-radius: 16px; background: var(--chat-apple-surface); box-shadow: 0 0 0 .5px var(--chat-apple-separator); }
  .chat-fixed-room-grid { border: 0; }
  .chat-fixed-room-grid > a { min-height: 68px; padding: 9px 12px; border: 0; border-bottom: .5px solid var(--chat-apple-separator); border-radius: 0; box-shadow: none; }
  .chat-fixed-room-grid > a:last-child { border-bottom: 0; }
  .chat-fixed-room-grid > a:active { transform: none; }
  .chat-fixed-room-grid i { font-size: 22px; }
  .chat-room-mark { width: 42px; height: 42px; }
  .chat-fixed-room-grid b { font-size: 15px; letter-spacing: -.01em; }
  .chat-fixed-room-grid small { font-size: 11px; }
  .chat-group-rooms { margin: 14px 12px 0; padding: 0; border-radius: 16px; }
  .chat-inbox-tabs { margin: 14px 12px 10px; border-radius: 10px; }
  .chat-inbox-tabs a { min-height: 34px; }
  .chat-inbox { margin: 0 12px; border: 0; border-radius: 16px; box-shadow: 0 0 0 .5px var(--chat-apple-separator); }
  .chat-thread-card { min-height: 72px; padding: 10px 12px; }
  .chat-thread-card:active { transform: none; }
  .chat-inbox-empty { min-height: 150px; padding: 40px 16px; }
  .chat-search-results { margin: 14px 12px 0; }

  .chat-admin-room-page .admin-main { padding: 0; }
  .admin-chat-room { gap: 0; padding: 0; }
  .admin-chat-conversation { border: 0; border-radius: 0; box-shadow: none; }
  .chat-line-header { min-height: calc(60px + var(--chat-safe-top)); padding: calc(7px + var(--chat-safe-top)) max(8px,var(--chat-safe-right)) 7px max(7px,var(--chat-safe-left)); }
  .chat-mobile-back { width: 44px; height: 44px; color: var(--chat-apple-tint) !important; font-size: 0 !important; }
  .chat-mobile-back svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
  .chat-room-person .chat-avatar,
  .chat-room-person .chat-room-mark { width: 38px; height: 38px; }
  .chat-line-header-copy h1 { font-size: 16px; }
  .chat-line-header-actions button,
  .chat-line-header-actions .chat-room-app-menu { color: var(--chat-apple-tint) !important; }
  .chat-line-header-actions { gap: 0; }
  .chat-case-controls { gap: 6px; min-height: 47px; padding: 6px 8px; overflow-x: auto; }
  .chat-case-controls label { white-space: nowrap; }
  .chat-case-controls select { max-width: 180px; }
  .chat-log { padding: 16px max(11px,var(--chat-safe-right)) 18px max(11px,var(--chat-safe-left)); }
  .chat-bubble-stack { max-width: 84%; }
  .chat-bubble-stack > .chat-bubble { max-width: 100%; padding: 9px 13px; }
  .chat-composer { padding-top: 7px; }
  .chat-compose-main { gap: 4px; }
  .chat-compose-main textarea { min-height: 38px; padding: 8px 12px; border-radius: 20px; }
  .chat-mention-menu { right: max(7px,var(--chat-safe-right)); left: max(7px,var(--chat-safe-left)); max-height: min(248px, 34vh); }
  .chat-compose-icon,
  .chat-attach-open,
  .chat-send { width: 38px; height: 38px; }
  .chat-primary-action { width: 38px; }

  .chat-room-details {
    inset: auto 6px 0; width: calc(100% - 12px); height: auto; max-height: min(82vh,720px); margin: 0;
    border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.24);
  }
  .chat-room-details[open] { animation-name: chat-apple-sheet-up; }
  @keyframes chat-apple-sheet-up { from { opacity: .55; transform: translate3d(0,22px,0) scale(.985); } }
  .chat-details-head { min-height: 58px; padding: 7px 8px 7px 18px; }
  .chat-details-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; border-radius: 3px; background: rgba(118,118,128,.28); transform: translateX(-50%); }
  .chat-details-head b { padding-top: 5px; }
  .chat-group-create { width: 100%; border-radius: 0; }
}

@media (prefers-color-scheme: dark) {
  .chat-admin-page,
  .chat-page {
    --chat-apple-bg: #000;
    --chat-apple-surface: rgba(28,28,30,.94);
    --chat-apple-secondary: #98989d;
    --chat-apple-separator: rgba(84,84,88,.62);
    --chat-apple-material: rgba(28,28,30,.82);
    --chat-apple-shadow: 0 12px 38px rgba(0,0,0,.28);
  }
  .chat-admin-page:not(.chat-admin-room-page),
  .chat-admin-page:not(.chat-admin-room-page) .admin-main { background: var(--chat-apple-bg); color: #f5f5f7; }
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading h1,
  .chat-admin-page:not(.chat-admin-room-page) .chat-thread-copy b,
  .chat-admin-page:not(.chat-admin-room-page) .chat-fixed-room-grid b,
  .chat-admin-page:not(.chat-admin-room-page) .chat-group-room-list b { color: #f5f5f7; }
  .chat-member-search { background: rgba(118,118,128,.24); }
  .chat-member-search input { color: #fff; }
  .chat-fixed-room-grid > a:hover,
  .chat-thread-card:hover { background: #242426; }
  .chat-fixed-room-grid > a:active,
  .chat-group-room-list > a:active,
  .chat-thread-card:active { background: #303033; }
  .chat-inbox-tabs { background: rgba(118,118,128,.24); }
  .chat-inbox-tabs a.active { background: #3a3a3c; color: #fff; }
  .chat-thread-tags i { background: rgba(118,118,128,.22); }
  .pull-refresh-indicator { background: rgba(44,44,46,.9); }

  .admin-chat-sidebar { background: rgba(28,28,30,.7); }
  .admin-chat-sidebar > a.active { background: rgba(58,58,60,.82); }
  .chat-line-header,
  .chat-room-search,
  .chat-composer { background: rgba(28,28,30,.82); }
  .chat-case-controls { background: rgba(28,28,30,.92); }
  .chat-case-controls select,
  .chat-case-controls button { background: #2c2c2e; color: #f5f5f7; }
  .chat-case-controls button { color: #ff6b55; }
  .chat-log { background: #090a0b; }
  .chat-message.is-other .chat-bubble { background: #2c2c2e; color: #fff; }
  .chat-message.is-other .chat-bubble::before { border-color: transparent #2c2c2e transparent transparent; }
  .chat-message.is-own .chat-bubble { background: #30d158; color: #07140a; }
  .chat-message.is-own .chat-bubble::after { border-color: transparent transparent transparent #30d158; }
  .chat-compose-main textarea { background: rgba(118,118,128,.24); color: #fff; }
  .chat-mention-menu { border-color: #444; background: rgba(34,34,35,.98); }
  .chat-message-mention-menu { border-color: rgba(84,84,88,.72); background: rgba(34,34,35,.96); }
  .chat-message-mention-menu button { color: #64a8ff; }
  .chat-message-mention-menu button:active { background: rgba(10,132,255,.22); }
  .chat-message-mention-menu .chat-message-reaction-option { color: #fff; }
  .chat-message-mention-menu :is(.chat-message-copy-action,.chat-message-mention-action) { border-color: rgba(84,84,88,.72); }
  .chat-reaction-chip { border-color: rgba(255,255,255,.18); background: rgba(44,44,46,.96); color: #f5f5f7; box-shadow: none; }
  .chat-reaction-chip.is-selected { border-color: #64a8ff; background: rgba(10,132,255,.24); color: #b9dcff; }
  .chat-mention-option { color: #fff; }
  .chat-mention-option::before { background: #3a3a3c; color: #ddd; }
  .chat-mention-option.is-active { background: rgba(10,132,255,.22); }
  .chat-message.is-own .chat-mention-token { background: #087d31; color: #fff; }
  .chat-message.is-other .chat-mention-token { background: rgba(10,132,255,.28); color: #91c4ff; }
  .chat-room-details { background: #000; }
  .chat-details-head,
  .chat-details-actions,
  .chat-details-members,
  .chat-details-section,
  .chat-details-profile,
  .chat-leave-group,
  .chat-group-members,
  .chat-group-name-card,
  .chat-group-selected { background: rgba(28,28,30,.96); color: #f5f5f7; }
  .chat-details-section input[type=text],
  .chat-details-section input[name=title],
  .chat-group-search input { background: rgba(118,118,128,.24); color: #fff; }
  .chat-group-create > header a { color: #ff6b55; }
}

@media (prefers-reduced-transparency: reduce) {
  .chat-admin-page:not(.chat-admin-room-page) .admin-chat-heading,
  .chat-line-header,
  .chat-room-search,
  .chat-composer,
  .chat-details-head,
  .pull-refresh-indicator { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--chat-apple-surface); }
}

@media (prefers-contrast: more) {
  .chat-fixed-room-grid > a,
  .chat-group-room-list,
  .chat-inbox,
  .admin-chat-conversation { border: 1px solid currentColor; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-group-create-link,
  .chat-index-menu,
  .chat-fixed-room-grid > a,
  .chat-group-room-list > a,
  .chat-thread-card,
  .chat-line-header-actions button,
  .chat-compose-icon,
  .chat-room-details[open] { transition: none; animation: none; transform: none; }
}

/* ---------- チャット基調 / HP以外のアプリ全体 ----------
   公式HPは app-theme-page を付けず、現在の表現をそのまま維持する。 */
.jta-app-ui.app-theme-page,
.jta-app-ui.app-theme-page[data-theme="light"] {
  --theme-control: rgba(255,255,255,.94);
  --theme-control-focus: #fff;
  --theme-hover: rgba(229,229,234,.8);
  --theme-active: rgba(209,209,214,.76);
  --theme-highlight: rgba(229,72,47,.09);
  --theme-notice: rgba(255,247,244,.94);
  --theme-today: linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,242,238,.94));
  --theme-chat-log: #e9edf3;
  --theme-chat-other: #fff;
  --theme-chat-other-text: #1c1c1e;
  --theme-chat-own: #34c759;
  --theme-chat-own-text: #07140a;
  --theme-chat-hover: #fff;
  --theme-chat-active: rgba(229,229,234,.9);
  --theme-material: rgba(248,248,252,.84);
  --ink: #1c1c1e;
  --muted: #6e6e73;
  --bg: #f2f2f7;
  --panel: #fff;
  --line: rgba(60,60,67,.16);
  --accent: #e5482f;
  --accent-dark: #c93622;
  --app-apple-bg: #f2f2f7;
  --app-apple-surface: rgba(255,255,255,.92);
  --app-apple-surface-solid: #fff;
  --app-apple-elevated: rgba(255,255,255,.97);
  --app-apple-label: #1c1c1e;
  --app-apple-secondary: #6e6e73;
  --app-apple-tertiary: #8e8e93;
  --app-apple-separator: rgba(60,60,67,.16);
  --app-apple-fill: rgba(118,118,128,.12);
  --app-apple-fill-strong: rgba(118,118,128,.2);
  --app-apple-tint: #e5482f;
  --app-apple-tint-dark: #c93622;
  --app-apple-green: #248a4b;
  --app-apple-orange: #b85d00;
  --app-apple-red: #d70015;
  --app-apple-shadow: 0 10px 34px rgba(28,28,30,.075);
  --chat-apple-bg: #f2f2f7;
  --chat-apple-surface: rgba(255,255,255,.94);
  --chat-apple-secondary: #6e6e73;
  --chat-apple-separator: rgba(60,60,67,.16);
  --chat-apple-material: rgba(248,248,252,.84);
  --chat-apple-shadow: 0 10px 34px rgba(32,34,38,.08);
  color-scheme: light;
  background: var(--app-apple-bg);
  color: var(--app-apple-label);
  transition: background-color .18s ease-out, color .18s ease-out;
}

.jta-app-ui.app-theme-page[data-theme="dark"] {
  --theme-control: rgba(118,118,128,.24);
  --theme-control-focus: rgba(72,72,74,.92);
  --theme-hover: rgba(58,58,60,.72);
  --theme-active: rgba(72,72,74,.9);
  --theme-highlight: rgba(255,107,85,.16);
  --theme-notice: rgba(69,32,27,.72);
  --theme-today: linear-gradient(145deg,rgba(44,44,46,.98),rgba(65,34,29,.92));
  --theme-chat-log: #090a0b;
  --theme-chat-other: #2c2c2e;
  --theme-chat-other-text: #fff;
  --theme-chat-own: #30d158;
  --theme-chat-own-text: #07140a;
  --theme-chat-hover: #242426;
  --theme-chat-active: #303033;
  --theme-material: rgba(28,28,30,.84);
  --ink: #f5f5f7;
  --muted: #98989d;
  --bg: #000;
  --panel: #1c1c1e;
  --line: rgba(84,84,88,.62);
  --accent: #ff6b55;
  --accent-dark: #ff806d;
  --app-apple-bg: #000;
  --app-apple-surface: rgba(28,28,30,.94);
  --app-apple-surface-solid: #1c1c1e;
  --app-apple-elevated: rgba(44,44,46,.98);
  --app-apple-label: #f5f5f7;
  --app-apple-secondary: #98989d;
  --app-apple-tertiary: #77777d;
  --app-apple-separator: rgba(84,84,88,.62);
  --app-apple-fill: rgba(118,118,128,.24);
  --app-apple-fill-strong: rgba(118,118,128,.32);
  --app-apple-tint: #ff6b55;
  --app-apple-tint-dark: #ff806d;
  --app-apple-blue: #64a8ff;
  --app-apple-green: #30d158;
  --app-apple-orange: #ff9f0a;
  --app-apple-red: #ff453a;
  --app-apple-shadow: 0 12px 38px rgba(0,0,0,.3);
  --chat-apple-bg: #000;
  --chat-apple-surface: rgba(28,28,30,.94);
  --chat-apple-secondary: #98989d;
  --chat-apple-separator: rgba(84,84,88,.62);
  --chat-apple-material: rgba(28,28,30,.84);
  --chat-apple-shadow: 0 12px 38px rgba(0,0,0,.3);
  color-scheme: dark;
}

.jta-app-ui.app-theme-page > main,
.jta-app-ui.app-theme-page > .admin-main,
.jta-app-ui.app-theme-page .admin-main { background: var(--app-apple-bg); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page :is(.page-title,.section-title,h1,h2,h3,h4) { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page :is(.muted,.hint,.section-lead,.pref-desc,.settings-panel-head p,.settings-hero p) { color: var(--app-apple-secondary); }

.jta-app-ui.app-theme-page :is(
  .card,.stat,.step,.settings-panel,.settings-hero,.integration-card,.integration-hero,
  .seminar-panel,.seminar-readiness article,.consultation-hero,.consultation-row,
  .setup-section,.setup-hero,.account-card,.account-console,.notif,.conn,
  .jta-document-card,.notification-install,.settings-device-card,.passkey-row,.pref-row
) {
  border-color: var(--app-apple-separator);
  background: var(--app-apple-surface);
  color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page .stat.stat-today { background: var(--theme-today); }
.jta-app-ui.app-theme-page .settings-hero dl,
.jta-app-ui.app-theme-page .settings-device-card,
.jta-app-ui.app-theme-page .passkey-row,
.jta-app-ui.app-theme-page .pref-row,
.jta-app-ui.app-theme-page .seminar-session-row,
.jta-app-ui.app-theme-page .seminar-participant-card,
.jta-app-ui.app-theme-page .integration-account,
.jta-app-ui.app-theme-page .account-user-row { border-color: var(--app-apple-separator); background: var(--app-apple-fill); }
.jta-app-ui.app-theme-page .settings-hero dl div + div,
.jta-app-ui.app-theme-page .settings-panel-head,
.jta-app-ui.app-theme-page .passkey-row,
.jta-app-ui.app-theme-page .pref-row { border-color: var(--app-apple-separator); }

.jta-app-ui.app-theme-page :is(
  input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
  select,textarea
) {
  border-color: var(--app-apple-separator);
  background: var(--theme-control);
  color: var(--app-apple-label);
  box-shadow: inset 0 0 0 .5px rgba(118,118,128,.08);
}
.jta-app-ui.app-theme-page :is(input,select,textarea):focus {
  outline: none; border-color: color-mix(in srgb,var(--app-apple-tint) 72%,transparent);
  background: var(--theme-control-focus); box-shadow: 0 0 0 3px color-mix(in srgb,var(--app-apple-tint) 18%,transparent);
}
.jta-app-ui.app-theme-page :is(input,textarea)::placeholder { color: var(--app-apple-tertiary); }
.jta-app-ui.app-theme-page .choice { border-color: var(--app-apple-separator); background: var(--theme-control); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .choice:has(input:checked) { border-color: var(--app-apple-tint); background: var(--theme-highlight); }

.jta-app-ui.app-theme-page .btn-outline,
.jta-app-ui.app-theme-page .tab,
.jta-app-ui.app-theme-page .pagination :is(a,span) { border-color: var(--app-apple-separator); background: var(--app-apple-surface); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .btn-outline:hover,
.jta-app-ui.app-theme-page .tab:hover { background: var(--theme-hover); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .badge { border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .badge-accent { color: var(--app-apple-tint); background: var(--theme-highlight); }
.jta-app-ui.app-theme-page .badge-ok { color: var(--app-apple-green); }
.jta-app-ui.app-theme-page .badge-warn { color: var(--app-apple-orange); }
.jta-app-ui.app-theme-page .badge-bad { color: var(--app-apple-red); }

.jta-app-ui.app-theme-page .tbl-wrap,
.jta-app-ui.app-theme-page table.tbl { border-color: var(--app-apple-separator); background: var(--app-apple-surface-solid); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .tbl th { border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .tbl td { border-color: var(--app-apple-separator); }
.jta-app-ui.app-theme-page .tbl tbody tr:hover { background: var(--theme-hover); }
.jta-app-ui.app-theme-page .notification-toolbar { background: var(--theme-material); }
.jta-app-ui.app-theme-page .notif.unread { border-color: color-mix(in srgb,var(--app-apple-tint) 28%,transparent); background: var(--theme-notice); }

/* 設定の表示テーマ */
.settings-appearance { margin-bottom: 16px; }
.appearance-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.appearance-option {
  display: grid; grid-template-columns: 72px minmax(0,1fr) 24px; gap: 13px; align-items: center;
  min-width: 0; min-height: 92px; padding: 12px; border: .5px solid var(--app-apple-separator); border-radius: 16px;
  background: var(--app-apple-fill); color: var(--app-apple-label); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .12s ease-out, border-color .12s ease-out, transform .1s ease-out;
}
.appearance-option:active { transform: scale(.985); }
.appearance-option.is-active { border-color: var(--app-apple-tint); background: var(--theme-highlight); box-shadow: 0 0 0 2px color-mix(in srgb,var(--app-apple-tint) 12%,transparent); }
.appearance-option > span:nth-child(2) { min-width: 0; }
.appearance-option b,.appearance-option small { display: block; }
.appearance-option b { font-size: 15px; }
.appearance-option small { margin-top: 3px; color: var(--app-apple-secondary); font-size: 11px; line-height: 1.45; }
.appearance-option em { color: var(--app-apple-tint); font-size: 19px; font-style: normal; font-weight: 800; text-align: center; }
.appearance-preview { display: grid; grid-template-rows: 13px 1fr; gap: 5px; width: 72px; height: 62px; padding: 7px; border-radius: 12px; box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.appearance-preview::before { content: ""; border-radius: 5px; }
.appearance-preview i { display: block; height: 6px; border-radius: 4px; }
.appearance-preview.is-dark { background: #000; }
.appearance-preview.is-dark::before { background: #2c2c2e; }
.appearance-preview.is-dark i { background: #3a3a3c; }
.appearance-preview.is-dark i:last-child { width: 68%; background: #30d158; }
.appearance-preview.is-light { background: #f2f2f7; }
.appearance-preview.is-light::before { background: #fff; }
.appearance-preview.is-light i { background: #d1d1d6; }
.appearance-preview.is-light i:last-child { width: 68%; background: #34c759; }

/* OS設定よりアプリ内設定を優先して、チャットも同じテーマへ揃える。 */
.jta-app-ui.app-theme-page.chat-admin-page:not(.chat-admin-room-page),
.jta-app-ui.app-theme-page.chat-admin-page:not(.chat-admin-room-page) .admin-main { background: var(--chat-apple-bg); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page.chat-admin-page:not(.chat-admin-room-page) :is(.admin-chat-heading h1,.chat-thread-copy b,.chat-fixed-room-grid b,.chat-group-room-list b) { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-member-search { background: var(--app-apple-fill); }
.jta-app-ui.app-theme-page .chat-member-search input { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page :is(.chat-fixed-room-grid > a:hover,.chat-thread-card:hover) { background: var(--theme-chat-hover); }
.jta-app-ui.app-theme-page :is(.chat-fixed-room-grid > a:active,.chat-group-room-list > a:active,.chat-thread-card:active) { background: var(--theme-chat-active); }
.jta-app-ui.app-theme-page .chat-inbox-tabs { background: var(--app-apple-fill); }
.jta-app-ui.app-theme-page .chat-inbox-tabs a.active { background: var(--app-apple-elevated); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-thread-tags i { background: var(--app-apple-fill); }
.jta-app-ui.app-theme-page .pull-refresh-indicator { background: var(--app-apple-elevated); }
.jta-app-ui.app-theme-page .admin-chat-sidebar { background: color-mix(in srgb,var(--app-apple-surface-solid) 72%,transparent); }
.jta-app-ui.app-theme-page .admin-chat-sidebar > a.active { background: var(--app-apple-fill-strong); }
.jta-app-ui.app-theme-page :is(.chat-line-header,.chat-room-search,.chat-composer) { background: var(--theme-material); }
.jta-app-ui.app-theme-page .chat-case-controls { background: var(--app-apple-surface); }
.jta-app-ui.app-theme-page :is(.chat-case-controls select,.chat-case-controls button) { background: var(--app-apple-elevated); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-case-controls button { color: var(--app-apple-tint); }
.jta-app-ui.app-theme-page .chat-log { background: var(--theme-chat-log); }
.jta-app-ui.app-theme-page .chat-date-separator time { background: var(--app-apple-fill-strong); color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .chat-message.is-other .chat-bubble { background: var(--theme-chat-other); color: var(--theme-chat-other-text); }
.jta-app-ui.app-theme-page .chat-message.is-other .chat-bubble::before { border-color: transparent var(--theme-chat-other) transparent transparent; }
.jta-app-ui.app-theme-page .chat-message.is-own .chat-bubble { background: var(--theme-chat-own); color: var(--theme-chat-own-text); }
.jta-app-ui.app-theme-page .chat-message.is-own .chat-bubble::after { border-color: transparent transparent transparent var(--theme-chat-own); }
.jta-app-ui.app-theme-page .chat-message-mention-menu { border-color: var(--app-apple-separator); background: var(--app-apple-elevated); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-message-mention-menu .chat-message-reaction-option { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-message-mention-menu :is(.chat-message-copy-action,.chat-message-mention-action) { border-color: var(--app-apple-separator); color: var(--app-apple-blue); }
.jta-app-ui.app-theme-page .chat-reaction-chip { border-color: var(--app-apple-separator); background: var(--app-apple-elevated); color: var(--app-apple-label); box-shadow: none; }
.jta-app-ui.app-theme-page .chat-reaction-chip.is-selected { border-color: var(--app-apple-blue); background: color-mix(in srgb,var(--app-apple-blue) 20%,transparent); color: var(--app-apple-blue); }
.jta-app-ui.app-theme-page .chat-compose-main textarea { background: var(--app-apple-fill); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-room-details { background: var(--chat-apple-bg); }
.jta-app-ui.app-theme-page :is(.chat-details-head,.chat-details-actions,.chat-details-members,.chat-details-section,.chat-details-profile,.chat-leave-group,.chat-group-members,.chat-group-name-card,.chat-group-selected) { background: var(--app-apple-surface); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page :is(.chat-details-section input[type=text],.chat-details-section input[name=title],.chat-group-search input) { background: var(--app-apple-fill); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-group-create > header a { color: var(--app-apple-tint); }

@media (max-width: 620px) {
  .appearance-options { grid-template-columns: 1fr; }
  .appearance-option { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .jta-app-ui.app-theme-page,
  .appearance-option { transition: none; }
  .appearance-option:active { transform: none; }
}

/* ---------- 全画面監査 2026-08-14：HP以外を同じ密度と階層へ ---------- */
.jta-app-ui.app-theme-page .page-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin: 4px 0 22px;
}
.jta-app-ui.app-theme-page .page-heading .page-title { margin: 0; }
.jta-app-ui.app-theme-page .page-heading p { margin: 5px 0 0; font-size: 13px; }

/* 公開アプリの入口も、公式HPの広告表現ではなく業務画面と同じ静かな階層にする。 */
.jta-app-ui.app-theme-page .app-home-hero {
  min-height: 0; padding: 56px max(22px,calc((100vw - 1036px) / 2));
  border-bottom: .5px solid var(--app-apple-separator); border-radius: 0;
  background: transparent; color: var(--app-apple-label); text-align: left;
}
.jta-app-ui.app-theme-page .app-home-hero::before,
.jta-app-ui.app-theme-page .app-home-hero::after { display: none; }
.jta-app-ui.app-theme-page .app-home-hero h1 {
  max-width: 720px; margin: 0; font-size: clamp(34px,6vw,54px); letter-spacing: -.045em;
}
.jta-app-ui.app-theme-page .app-home-hero p {
  max-width: 700px; margin: 18px 0 0; color: var(--app-apple-secondary); font-size: 15px; line-height: 1.8;
}
.jta-app-ui.app-theme-page .app-home-hero .hero-actions { justify-content: flex-start; }
.jta-app-ui.app-theme-page .section-title,
.jta-app-ui.app-theme-page .section-lead { text-align: left; }
.jta-app-ui.app-theme-page .section-compact-top { padding-top: 0; }

/* 数値は必要だが、1項目ずつ浮いたカードにはしない。 */
.jta-app-ui.app-theme-page .stat-grid {
  gap: 1px; overflow: hidden; border: .5px solid var(--app-apple-separator); border-radius: 18px;
  background: var(--app-apple-separator); box-shadow: none;
}
.jta-app-ui.app-theme-page .stat-grid > .stat {
  min-width: 0; border: 0; border-radius: 0; background: var(--app-apple-surface); box-shadow: none;
}
.jta-app-ui.app-theme-page .stat-grid > .stat.stat-today { background: var(--theme-today); }

/* セミナー編集の補助欄も固定の白背景を持たせない。 */
.jta-app-ui.app-theme-page .seminar-action-note {
  border-color: color-mix(in srgb,var(--app-apple-red) 28%,var(--app-apple-separator));
  background: var(--theme-notice); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page :is(.seminar-zoom-card,.seminar-link-card) {
  border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page .seminar-zoom-card.is-connected { background: color-mix(in srgb,var(--app-apple-blue) 11%,var(--app-apple-surface)); }

/* 見出しは見出しとして扱い、カードや巨大な集計表示にしない。 */
body.jta-app-ui.app-theme-page :is(.settings-hero,.integration-hero,.consultation-hero) {
  display: block; margin: 0 0 20px; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
body.jta-app-ui.app-theme-page :is(.settings-hero,.integration-hero,.consultation-hero) h1 {
  margin: 0; font-size: clamp(28px,4vw,36px); line-height: 1.12; letter-spacing: -.04em;
}

/* 個別相談：集計も一覧も、それぞれ一つのまとまりとして表示する。 */
.jta-app-ui.app-theme-page .consultation-shell { padding-top: 8px; color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .consultation-summary {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden;
  margin: 0 0 18px; border: .5px solid var(--app-apple-separator); border-radius: 16px;
  background: var(--app-apple-separator);
}
.jta-app-ui.app-theme-page .consultation-summary > div { min-width: 0; padding: 13px 15px; background: var(--app-apple-surface); }
.jta-app-ui.app-theme-page .consultation-summary dt { color: var(--app-apple-secondary); font-size: 11px; font-weight: 650; }
.jta-app-ui.app-theme-page .consultation-summary dd { margin: 4px 0 0; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.jta-app-ui.app-theme-page .consultation-filters {
  margin: 0 0 28px; border: .5px solid var(--app-apple-separator); border-radius: 16px;
  background: var(--app-apple-surface); box-shadow: none;
}
.jta-app-ui.app-theme-page .consultation-filters label > span,
.jta-app-ui.app-theme-page .consultation-result-head span,
.jta-app-ui.app-theme-page .consultation-date > small,
.jta-app-ui.app-theme-page .consultation-person p,
.jta-app-ui.app-theme-page .consultation-person small,
.jta-app-ui.app-theme-page .consultation-core dt,
.jta-app-ui.app-theme-page .consultation-states small { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .consultation-result-head { border-color: var(--app-apple-separator); }
.jta-app-ui.app-theme-page .consultation-list {
  overflow: hidden; border: .5px solid var(--app-apple-separator); border-radius: 16px;
  background: var(--app-apple-surface);
}
.jta-app-ui.app-theme-page .consultation-row {
  border: 0; border-top: .5px solid var(--app-apple-separator); border-radius: 0;
  background: transparent; box-shadow: none;
}
.jta-app-ui.app-theme-page .consultation-row:first-child { border-top: 0; }
.jta-app-ui.app-theme-page .consultation-row:hover { background: var(--theme-hover); }
.jta-app-ui.app-theme-page .consultation-date,
.jta-app-ui.app-theme-page .consultation-core div,
.jta-app-ui.app-theme-page .consultation-details { border-color: var(--app-apple-separator); }
.jta-app-ui.app-theme-page .consultation-details dl > div,
.jta-app-ui.app-theme-page .consultation-state { border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .consultation-state.is-done { color: var(--app-apple-green); }
.jta-app-ui.app-theme-page .consultation-state.is-linked { color: var(--app-apple-blue); }

/* 外部連携：上部はボタン群ではなく、同じページ内の索引にする。 */
.jta-app-ui.app-theme-page .integration-flow {
  display: flex; gap: 22px; overflow-x: auto; margin: 0 0 18px; padding: 0 0 10px;
  border-bottom: .5px solid var(--app-apple-separator); scrollbar-width: none;
}
.jta-app-ui.app-theme-page .integration-flow::-webkit-scrollbar { display: none; }
.jta-app-ui.app-theme-page .integration-flow a {
  flex: none; min-height: 32px; padding: 5px 0; border: 0; background: transparent;
  color: var(--app-apple-secondary); font-size: 13px;
}
.jta-app-ui.app-theme-page .integration-flow a:hover { background: transparent; color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .integration-card-head,
.jta-app-ui.app-theme-page .integration-login-fields,
.jta-app-ui.app-theme-page .integration-account,
.jta-app-ui.app-theme-page .integration-card-foot,
.jta-app-ui.app-theme-page .integration-optional,
.jta-app-ui.app-theme-page .integration-optional[open] summary { border-color: var(--app-apple-separator); }
.jta-app-ui.app-theme-page .integration-form h3,
.jta-app-ui.app-theme-page :is(.integration-form label > span,.integration-optional label > span) { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .integration-form label em { color: var(--app-apple-green); }
.jta-app-ui.app-theme-page .integration-optional,
.jta-app-ui.app-theme-page .integration-endpoints,
.jta-app-ui.app-theme-page .integration-card-foot { background: var(--app-apple-fill); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .integration-endpoints span,
.jta-app-ui.app-theme-page .integration-card-foot,
.jta-app-ui.app-theme-page .integration-account span { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .integration-endpoints code { color: var(--app-apple-label); }

/* 設定は機能単位の面だけを残し、ページ見出しに情報を重複させない。 */
.jta-app-ui.app-theme-page .settings-shell { padding-top: 8px; }
.jta-app-ui.app-theme-page .settings-grid { gap: 12px; }
.jta-app-ui.app-theme-page .settings-panel { border-radius: 18px; box-shadow: none; }
.jta-app-ui.app-theme-page :is(.settings-form label,.passkey-register label) { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page :is(.passkey-empty,.account-passkeys form,.account-passkeys > p) {
  border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-secondary);
}
.jta-app-ui.app-theme-page :is(.passkey-row small,.settings-device-card p,.account-passkeys > div,.account-passkeys form span small) { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page :is(.account-passkeys > div > b,.account-passkeys form span b) { color: var(--app-apple-label); }

/* アカウント管理の選択欄もテーマ内の一つのコントロールとして扱う。 */
.jta-app-ui.app-theme-page .account-check {
  border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page .account-check input[type="checkbox"] {
  flex: 0 0 16px; width: 16px; min-width: 16px; max-width: 16px; height: 16px;
  inline-size: 16px; min-inline-size: 16px; max-inline-size: 16px;
}
.jta-app-ui.app-theme-page .account-check { white-space: nowrap; }
body.jta-app-ui.app-theme-page .account-console {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.jta-app-ui.app-theme-page .account-console-head { border-color: var(--app-apple-separator); }
.jta-app-ui.app-theme-page .account-console-head h1 { letter-spacing: -.04em; }
.jta-app-ui.app-theme-page :is(.account-console-head p,.account-section-title > small,.account-card-top small,.account-user-row summary small,.account-user-row summary em) { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .account-user-form {
  border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page .account-user-form a { color: var(--app-apple-tint); }
.jta-app-ui.app-theme-page .account-infinite-scroll { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .account-infinite-scroll > a { border-color: var(--app-apple-separator); color: var(--app-apple-tint); }
.jta-app-ui.app-theme-page :is(.account-card > label,.account-form-row label,.account-user-form > label,.account-card-foot small) { color: var(--app-apple-secondary); }

/* 会員チャットのモバイル見出しも、選択したテーマから外れないようにする。 */
.jta-app-ui.app-theme-page .chat-heading {
  border-color: var(--app-apple-separator); background: var(--theme-material); color: var(--app-apple-label);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.jta-app-ui.app-theme-page .chat-heading h1 { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .chat-notify-link {
  border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-tint);
}
.jta-app-ui.app-theme-page .chat-conversation {
  border-color: var(--app-apple-separator); background: var(--theme-chat-log); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page :is(.team-room-note,.chat-room-person) {
  border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page :is(.team-room-note p,.team-chat-room .chat-room-person small) { color: var(--app-apple-secondary); }

/* ロードマップは情報構造を保ちつつ、固定の紙色をテーマ変数へ置き換える。 */
.jta-app-ui.app-theme-page.admin-roadmap-page,
.jta-app-ui.app-theme-page.admin-roadmap-page .admin-main { background: var(--app-apple-bg); }
.jta-app-ui.app-theme-page .roadmap-shell { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .roadmap-header { grid-template-columns: minmax(0,1fr) minmax(260px,380px); gap: 28px; padding: 8px 0 20px; border-width: 0 0 .5px; }
.jta-app-ui.app-theme-page .roadmap-heading h1 { font-size: clamp(28px,4vw,36px); letter-spacing: -.04em; }
.jta-app-ui.app-theme-page .roadmap-progress { display: block; }
.jta-app-ui.app-theme-page .roadmap-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.jta-app-ui.app-theme-page .roadmap-progress-label strong { font-size: 13px; }
.jta-app-ui.app-theme-page .roadmap-progress-label span { color: var(--app-apple-secondary); font-size: 10px; }
.jta-app-ui.app-theme-page .roadmap-progress-counts { justify-content: flex-end; color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .roadmap-current { margin: 18px 0 34px; padding: 18px 20px; border: .5px solid var(--app-apple-separator); border-radius: 16px; background: var(--app-apple-surface); }
.jta-app-ui.app-theme-page .roadmap-current h2 { margin: 0; font-size: 14px; }
.jta-app-ui.app-theme-page .roadmap-current > strong { display: block; margin-top: 6px; font-size: 18px; }
.jta-app-ui.app-theme-page .roadmap-current dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 16px 0 0; padding-top: 14px; border-top: .5px solid var(--app-apple-separator); }
.jta-app-ui.app-theme-page .roadmap-current dt { color: var(--app-apple-secondary); font-size: 10px; font-weight: 700; }
.jta-app-ui.app-theme-page .roadmap-current dd { margin: 4px 0 0; font-size: 12px; line-height: 1.7; }
.jta-app-ui.app-theme-page :is(.roadmap-header,.roadmap-flow-summary,.roadmap-phase-list,.roadmap-phase,.roadmap-principles,.roadmap-principles ol,.roadmap-requirement,.roadmap-phase-breakdown) { border-color: var(--app-apple-separator); }
.jta-app-ui.app-theme-page :is(.roadmap-heading > small,.roadmap-section-title > p,.roadmap-flow-summary span,.roadmap-flow li small,.roadmap-phase-copy > small,.roadmap-phase-status > em,.roadmap-phase-breakdown,.roadmap-requirement-copy > p,.roadmap-requirement-copy details summary,.roadmap-principles > summary > small,.roadmap-principles li,.roadmap-principles > div > p) { color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page :is(.roadmap-flow-summary strong,.roadmap-flow li b,.roadmap-phase-copy > b,.roadmap-phase-status > b,.roadmap-requirement-copy h3,.roadmap-principles > summary > b) { color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .roadmap-phase > summary:hover { background: var(--theme-hover); }
.jta-app-ui.app-theme-page .roadmap-phase[open] > summary,
.jta-app-ui.app-theme-page .roadmap-phase-body { background: var(--app-apple-surface); color: var(--app-apple-label); }
.jta-app-ui.app-theme-page .roadmap-requirement-copy details p { border-color: var(--app-apple-separator); background: var(--app-apple-fill); color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .roadmap-requirement-state span { border-color: var(--app-apple-separator); color: var(--app-apple-secondary); }
.jta-app-ui.app-theme-page .roadmap-principles > summary { grid-template-columns: auto minmax(0,1fr) 18px; }
.jta-app-ui.app-theme-page .calendar-table-wrap { margin-bottom: 14px; }
.jta-app-ui.app-theme-page .calendar-time { width: 70px; }
.jta-app-ui.app-theme-page .calendar-type { width: 90px; }
.jta-app-ui.app-theme-page .calendar-meta { width: 120px; }
.jta-app-ui.app-theme-page .calendar-action { width: 70px; }

/* 支払い画面の固定色を廃止し、ライト・ダークの双方で読めるようにする。 */
.jta-app-ui.app-theme-page .payment-container { max-width: 640px; }
.jta-app-ui.app-theme-page .payment-title { margin: 10px 0 4px; }
.jta-app-ui.app-theme-page .payment-course { margin: 0; font-size: 14px; }
.jta-app-ui.app-theme-page .payment-price { margin: 12px 0; font-size: 30px; }
.jta-app-ui.app-theme-page .payment-summary,
.jta-app-ui.app-theme-page .payment-note {
  margin: 14px 0; padding: 15px; border: .5px solid var(--app-apple-separator); border-radius: 14px;
  background: var(--app-apple-fill); color: var(--app-apple-label);
}
.jta-app-ui.app-theme-page .payment-note { border-color: color-mix(in srgb,var(--app-apple-tint) 28%,var(--app-apple-separator)); background: var(--theme-highlight); }
.jta-app-ui.app-theme-page .payment-summary-value { font-size: 16px; font-weight: 700; }
.jta-app-ui.app-theme-page .payment-transfer-name { margin: 5px 0; font-size: 20px; font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; }
.jta-app-ui.app-theme-page .payment-subheading { margin-bottom: 8px; font-size: 15px; }
.jta-app-ui.app-theme-page .payment-card-number { font-size: 16px; overflow-wrap: anywhere; }
.jta-app-ui.app-theme-page .payment-hint { margin-top: 12px; }
.jta-app-ui.app-theme-page .payment-error { display: block; margin-bottom: 12px; }
.jta-app-ui.app-theme-page .payment-card-field { margin-bottom: 6px; padding: 12px; border: .5px solid var(--app-apple-separator); border-radius: 12px; background: #fff; }
.jta-app-ui.app-theme-page .payment-provider-error { min-height: 18px; margin: 0 0 12px; color: var(--app-apple-red); }
.jta-app-ui.app-theme-page .payment-complete-icon { color: var(--app-apple-green); font-size: 40px; }
.jta-app-ui.app-theme-page .payment-complete-title { margin: 6px 0; }
.jta-app-ui.app-theme-page .payment-complete-action { margin-top: 18px; }

@media (max-width: 760px) {
  /* 全画面チャットでは共通管理画面の上下marginを持ち込まない。 */
  .jta-app-ui.app-theme-page.chat-admin-room-page .admin-main { margin: 0; }
  .jta-app-ui.app-theme-page .app-home-hero { padding: 40px 16px 44px; }
  .jta-app-ui.app-theme-page .app-home-hero h1 { font-size: 36px; }
  .jta-app-ui.app-theme-page .page-heading { align-items: center; }
  .jta-app-ui.app-theme-page .consultation-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .jta-app-ui.app-theme-page .integration-flow { gap: 18px; margin-inline: -2px; padding-inline: 2px; }
  .jta-app-ui.app-theme-page .settings-shell { padding-top: 4px; }
  body.jta-app-ui.app-theme-page :is(.settings-hero,.integration-hero,.consultation-hero) { margin-bottom: 16px; }
  .jta-app-ui.app-theme-page .account-console { padding-inline: 14px; }
  .jta-app-ui.app-theme-page .account-section-title { display: block; }
  .jta-app-ui.app-theme-page .account-section-title h2 { white-space: nowrap; }
  .jta-app-ui.app-theme-page .account-section-title > small { display: block; margin-top: 5px; line-height: 1.5; }
  .jta-app-ui.app-theme-page .roadmap-header { display: block; padding-top: 2px; }
  .jta-app-ui.app-theme-page .roadmap-progress { margin-top: 16px; }
  .jta-app-ui.app-theme-page .roadmap-current { padding: 16px; }
  .jta-app-ui.app-theme-page .roadmap-current dl { grid-template-columns: 1fr; gap: 12px; }
  .jta-app-ui.app-theme-page .roadmap-principles > summary { grid-template-columns: auto minmax(0,1fr) 16px; }
  .jta-app-ui.app-theme-page .calendar-table-wrap { overflow: visible; border: 0; background: transparent; }
  .jta-app-ui.app-theme-page .calendar-table,
  .jta-app-ui.app-theme-page .calendar-table tbody { display: block; border: 0; background: transparent; }
  .jta-app-ui.app-theme-page .calendar-table tbody { display: grid; gap: 8px; }
  .jta-app-ui.app-theme-page .calendar-table tr {
    display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 6px 10px; align-items: center;
    padding: 12px; border: .5px solid var(--app-apple-separator); border-radius: 14px; background: var(--app-apple-surface);
  }
  .jta-app-ui.app-theme-page .calendar-table td {
    display: block; width: auto; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere;
  }
  .jta-app-ui.app-theme-page .calendar-table .calendar-time { grid-column: 1; font-weight: 750; }
  .jta-app-ui.app-theme-page .calendar-table .calendar-type { grid-column: 2; }
  .jta-app-ui.app-theme-page .calendar-table .calendar-meta { grid-column: 3; color: var(--app-apple-secondary); font-size: 11px; }
  .jta-app-ui.app-theme-page .calendar-table .calendar-action { grid-column: 4; grid-row: 1 / span 2; }
  .jta-app-ui.app-theme-page .calendar-table .calendar-title { grid-column: 1 / 4; grid-row: 2; font-size: 14px; font-weight: 650; }
}

/* Final talk-list cascade: keep the inbox flat and dark after the shared app theme. */
body.chat-admin-page:has(.chat-talk-list),
body.chat-admin-page:has(.chat-talk-list) .admin-main { background: #101011; color: #f7f7f8; }
body.chat-admin-page .chat-talk-list { width: min(100%,760px); max-width: 760px; }
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-inbox) {
  overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid > a,.chat-group-room-list > a,.chat-thread-card) {
  border: 0; border-bottom: 1px solid rgba(255,255,255,.075); border-radius: 0; background: transparent; box-shadow: none;
}
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid > a,.chat-group-room-list > a,.chat-thread-card):hover { background: rgba(255,255,255,.035); }
body.chat-admin-page .chat-talk-list :is(.chat-fixed-room-grid,.chat-group-room-list,.chat-thread-copy) b { color: #f7f7f8; }
@media (max-width: 760px) {
  body.chat-admin-page .chat-talk-list { width: 100%; max-width: none; padding-bottom: max(38px,var(--chat-safe-bottom)); }
  body.chat-admin-page .chat-talk-list .admin-chat-heading { padding: calc(10px + var(--chat-safe-top)) 14px 13px; border: 0; background: rgba(16,16,17,.92); box-shadow: none; }
  body.chat-admin-page .chat-talk-list :is(.chat-fixed-rooms,.chat-group-rooms,.chat-inbox) { margin-right: 14px; margin-left: 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}